import { Component, ElementRef, effect, inject, signal, viewChild } from '@angular/core';
import { NgIcon } from '@ng-icons/core';
import type { AccentTone } from '@shared/types';
import { PanelsService } from '../panels.service';
import { IS_MAC_CHROME } from '../platform';
import { RpcService } from '../rpc.service';
import { SettingsService } from '../settings.service';

const THEMES = ['system', 'light', 'dark'] as const;
// Swatch colors are fixed mid-tones so every dot reads on both light and dark
// cards (the live --primary values would vanish against one of them).
const ACCENTS: readonly { value: AccentTone; swatch: string; label: string }[] = [
  { value: 'graphite', swatch: 'oklch(0.552 0.016 285.9)', label: 'Graphite' },
  { value: 'blue', swatch: 'oklch(0.65 0.17 255)', label: 'Blue' },
  { value: 'indigo', swatch: 'oklch(0.65 0.19 277)', label: 'Indigo' },
  { value: 'purple', swatch: 'oklch(0.65 0.17 305)', label: 'Purple' },
  { value: 'rose', swatch: 'oklch(0.65 0.17 8)', label: 'Rose' },
  { value: 'orange', swatch: 'oklch(0.68 0.17 50)', label: 'Orange' },
  { value: 'green', swatch: 'oklch(0.65 0.15 150)', label: 'Green' },
  { value: 'teal', swatch: 'oklch(0.65 0.12 185)', label: 'Teal' },
];
const SPEED_UNITS = [
  { value: 'MBps', label: 'MB/s' },
  { value: 'Mbps', label: 'Mbps' },
] as const;
const TEXT_SIZES = ['compact', 'default', 'large'] as const;
const ICON_COLOR_MODES = ['plain', 'multi'] as const;
const TRANSFER_MODES = ['single', 'multi'] as const;
const CONCURRENCY_CHOICES = [2, 3, 4, 6, 8] as const;

@Component({
  selector: 'app-tab-bar',
  imports: [NgIcon],
  template: `
    <!-- On macOS this row IS the titlebar (hiddenInset): taller, padded past the
         traffic lights, and draggable. Elsewhere it's a normal compact row. -->
    <div
      class="relative flex items-center gap-0.5 border-b border-border pr-1.5 electrobun-webkit-app-region-drag"
      [class.h-10]="isMacChrome"
      [class.pl-24]="isMacChrome"
      [class.pl-1.5]="!isMacChrome"
      [class.pt-1]="!isMacChrome"
    >
      <div
        #tabScroll
        class="flex min-w-0 items-center gap-0.5 overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
      >
      @for (ws of panels.workspaces(); track ws.id; let i = $index) {
        <div
          [attr.data-tab-id]="ws.id"
          class="group relative flex max-w-52 shrink-0 items-center rounded-md electrobun-webkit-app-region-no-drag"
          [class.bg-accent]="ws.id === panels.activeWorkspaceId()"
          [class.opacity-50]="draggedId() === ws.id"
          [style.box-shadow]="dropIndicatorShadow(i)"
          draggable="true"
          (dragstart)="onDragStart($event, ws.id)"
          (dragover)="onDragOver($event, i)"
          (drop)="onDrop($event, i)"
          (dragend)="onDragEnd()"
        >
          <button
            (click)="panels.setActiveWorkspace(ws.id)"
            class="flex min-w-0 items-center gap-1.5 py-1.5 pr-1 pl-2.5 text-xs"
            [class.text-foreground]="ws.id === panels.activeWorkspaceId()"
            [class.text-muted-foreground]="ws.id !== panels.activeWorkspaceId()"
            [title]="panels.workspaceName(ws)"
          >
            <ng-icon
              [name]="panels.workspaceIsRemote(ws) ? 'mynaServers' : 'mynaHardDrive'"
              size="0.85rem"
              class="shrink-0"
              [class.text-primary]="panels.workspaceIsRemote(ws)"
            />
            <span class="truncate">{{ panels.workspaceName(ws) }}</span>
          </button>
          @if (panels.workspaces().length > 1) {
            <button
              (click)="close($event, ws.id)"
              title="Close tab (⌘W)"
              class="mr-1 grid size-4 shrink-0 place-items-center rounded text-muted-foreground opacity-0 group-hover:opacity-100 hover:bg-border hover:text-foreground"
            >
              <ng-icon name="mynaX" size="0.7rem" />
            </button>
          } @else {
            <span class="mr-1 size-4 shrink-0"></span>
          }
          @if (ws.id === panels.activeWorkspaceId()) {
            <div class="absolute inset-x-0 -bottom-px h-0.5 rounded-full bg-primary"></div>
          }
        </div>
      }
      </div>
      <button
        (click)="panels.newWorkspace()"
        title="New tab (⌘T)"
        class="ml-0.5 grid size-6 place-items-center rounded-md text-muted-foreground electrobun-webkit-app-region-no-drag hover:bg-accent hover:text-foreground"
      >
        <ng-icon name="mynaPlus" size="0.9rem" />
      </button>

      <div class="flex-1"></div>

      <!-- global options -->
      <button
        (click)="settingsOpen.set(!settingsOpen())"
        title="Options"
        class="grid size-6 place-items-center rounded-md text-muted-foreground electrobun-webkit-app-region-no-drag hover:bg-accent hover:text-foreground"
      >
        <ng-icon name="mynaConfigVertical" size="0.95rem" />
      </button>

      @if (settingsOpen()) {
        <div class="fixed inset-0 z-20" (click)="settingsOpen.set(false)"></div>
        <div
          class="absolute top-full right-1.5 z-30 mt-1 w-64 rounded-lg border border-border bg-card p-3 text-card-foreground shadow-xl electrobun-webkit-app-region-no-drag"
        >
          <h3 class="text-xs font-semibold">Options</h3>

          <div class="mt-3 flex items-center justify-between gap-2">
            <span class="text-xs text-muted-foreground">Theme</span>
            <div class="flex rounded-md border border-border p-0.5">
              @for (theme of themes; track theme) {
                <button
                  (click)="settings.setTheme(theme)"
                  class="rounded px-2 py-0.5 text-[11px] capitalize"
                  [class.bg-accent]="settings.theme() === theme"
                  [class.text-foreground]="settings.theme() === theme"
                  [class.text-muted-foreground]="settings.theme() !== theme"
                >
                  {{ theme }}
                </button>
              }
            </div>
          </div>

          <div class="mt-2.5 flex items-center justify-between gap-2">
            <span class="text-xs text-muted-foreground">Accent</span>
            <div class="flex items-center gap-1.5">
              @for (tone of accents; track tone.value) {
                <button
                  (click)="settings.setAccent(tone.value)"
                  [title]="tone.label"
                  class="size-3.5 rounded-full border border-foreground/15"
                  [style.background-color]="tone.swatch"
                  [class.ring-2]="settings.accent() === tone.value"
                  [class.ring-foreground]="settings.accent() === tone.value"
                  [class.ring-offset-1]="settings.accent() === tone.value"
                  [class.ring-offset-card]="settings.accent() === tone.value"
                ></button>
              }
            </div>
          </div>

          <div class="mt-2.5 flex items-center justify-between gap-2">
            <span class="text-xs text-muted-foreground">File colors</span>
            <div class="flex rounded-md border border-border p-0.5">
              @for (mode of iconColorModes; track mode) {
                <button
                  (click)="settings.setIconColors(mode)"
                  class="rounded px-2 py-0.5 text-[11px] capitalize"
                  [class.bg-accent]="settings.iconColors() === mode"
                  [class.text-foreground]="settings.iconColors() === mode"
                  [class.text-muted-foreground]="settings.iconColors() !== mode"
                >
                  {{ mode }}
                </button>
              }
            </div>
          </div>

          <div class="mt-2.5 flex items-center justify-between gap-2">
            <span class="text-xs text-muted-foreground">Text size</span>
            <div class="flex rounded-md border border-border p-0.5">
              @for (size of textSizes; track size) {
                <button
                  (click)="settings.setTextSize(size)"
                  class="rounded px-2 py-0.5 text-[11px] capitalize"
                  [class.bg-accent]="settings.textSize() === size"
                  [class.text-foreground]="settings.textSize() === size"
                  [class.text-muted-foreground]="settings.textSize() !== size"
                >
                  {{ size }}
                </button>
              }
            </div>
          </div>

          <div class="mt-2.5 flex items-center justify-between gap-2">
            <span class="text-xs text-muted-foreground">Speed unit</span>
            <div class="flex rounded-md border border-border p-0.5">
              @for (unit of speedUnits; track unit.value) {
                <button
                  (click)="settings.setSpeedUnit(unit.value)"
                  class="rounded px-2 py-0.5 text-[11px]"
                  [class.bg-accent]="settings.speedUnit() === unit.value"
                  [class.text-foreground]="settings.speedUnit() === unit.value"
                  [class.text-muted-foreground]="settings.speedUnit() !== unit.value"
                >
                  {{ unit.label }}
                </button>
              }
            </div>
          </div>

          <div class="mt-2.5 flex items-center justify-between gap-2">
            <span class="text-xs text-muted-foreground">Transfers</span>
            <div class="flex rounded-md border border-border p-0.5">
              @for (mode of transferModes; track mode) {
                <button
                  (click)="settings.setTransferMode(mode)"
                  class="rounded px-2 py-0.5 text-[11px] capitalize"
                  [class.bg-accent]="settings.transferMode() === mode"
                  [class.text-foreground]="settings.transferMode() === mode"
                  [class.text-muted-foreground]="settings.transferMode() !== mode"
                >
                  {{ mode }}
                </button>
              }
            </div>
          </div>

          @if (settings.transferMode() === 'multi') {
            <div class="mt-2.5 flex items-center justify-between gap-2 pl-3">
              <span class="text-xs text-muted-foreground">At once</span>
              <div class="flex rounded-md border border-border p-0.5">
                @for (count of concurrencyChoices; track count) {
                  <button
                    (click)="settings.setTransferConcurrency(count)"
                    class="rounded px-2 py-0.5 text-[11px] tabular-nums"
                    [class.bg-accent]="settings.transferConcurrency() === count"
                    [class.text-foreground]="settings.transferConcurrency() === count"
                    [class.text-muted-foreground]="settings.transferConcurrency() !== count"
                  >
                    {{ count }}
                  </button>
                }
              </div>
            </div>
          }

          <div class="mt-2.5 flex items-center justify-between gap-2">
            <span class="text-xs text-muted-foreground">Editor</span>
            <div class="flex rounded-md border border-border p-0.5">
              <button
                (click)="settings.setEditor('builtin')"
                class="rounded px-2 py-0.5 text-[11px]"
                [class.bg-accent]="settings.editor() === 'builtin'"
                [class.text-foreground]="settings.editor() === 'builtin'"
                [class.text-muted-foreground]="settings.editor() !== 'builtin'"
              >
                Built-in
              </button>
              <button
                (click)="settings.setEditor('custom')"
                class="rounded px-2 py-0.5 text-[11px]"
                [class.bg-accent]="settings.editor() === 'custom'"
                [class.text-foreground]="settings.editor() === 'custom'"
                [class.text-muted-foreground]="settings.editor() !== 'custom'"
              >
                Custom
              </button>
            </div>
          </div>

          @if (settings.editor() === 'custom') {
            <div class="mt-2.5 flex items-center justify-between gap-2 pl-3">
              <span class="min-w-0 truncate text-xs text-muted-foreground" [title]="settings.editorApp()">
                {{ editorAppName() }}
              </span>
              <div class="flex shrink-0 items-center gap-1">
                <button
                  (click)="pickEditorApp()"
                  class="rounded-md border border-border px-2 py-0.5 text-[11px] hover:bg-accent"
                >
                  Choose…
                </button>
                @if (settings.editorApp()) {
                  <button
                    (click)="settings.setEditorApp('')"
                    title="Reset to system default"
                    class="grid size-5 place-items-center rounded text-muted-foreground hover:bg-accent hover:text-foreground"
                  >
                    <ng-icon name="mynaX" size="0.7rem" />
                  </button>
                }
              </div>
            </div>
          }

          <div class="mt-2.5 flex items-center justify-between gap-2">
            <span class="text-xs text-muted-foreground">Finished transfers</span>
            <div class="flex rounded-md border border-border p-0.5">
              <button
                (click)="settings.setAutoClearCompleted(true)"
                class="rounded px-2 py-0.5 text-[11px]"
                [class.bg-accent]="settings.autoClearCompleted()"
                [class.text-foreground]="settings.autoClearCompleted()"
                [class.text-muted-foreground]="!settings.autoClearCompleted()"
              >
                Auto-clear
              </button>
              <button
                (click)="settings.setAutoClearCompleted(false)"
                class="rounded px-2 py-0.5 text-[11px]"
                [class.bg-accent]="!settings.autoClearCompleted()"
                [class.text-foreground]="!settings.autoClearCompleted()"
                [class.text-muted-foreground]="settings.autoClearCompleted()"
              >
                Keep
              </button>
            </div>
          </div>
        </div>
      }
    </div>
  `,
})
export class TabBar {
  readonly panels = inject(PanelsService);
  readonly settings = inject(SettingsService);
  private readonly rpc = inject(RpcService);
  readonly settingsOpen = signal(false);
  readonly isMacChrome = IS_MAC_CHROME;
  readonly themes = THEMES;
  readonly accents = ACCENTS;
  readonly iconColorModes = ICON_COLOR_MODES;
  readonly speedUnits = SPEED_UNITS;
  readonly textSizes = TEXT_SIZES;
  readonly transferModes = TRANSFER_MODES;
  readonly concurrencyChoices = CONCURRENCY_CHOICES;

  // drag & drop reordering
  readonly draggedId = signal<number | null>(null);
  readonly dropTarget = signal<{ index: number; before: boolean } | null>(null);

  private readonly tabScroll = viewChild.required<ElementRef<HTMLDivElement>>('tabScroll');

  constructor() {
    // keep the active tab visible when the strip overflows
    effect(() => {
      const id = this.panels.activeWorkspaceId();
      this.tabScroll()
        .nativeElement.querySelector(`[data-tab-id="${id}"]`)
        ?.scrollIntoView({ inline: 'nearest', block: 'nearest' });
    });
  }

  close(event: MouseEvent, id: number): void {
    event.stopPropagation();
    this.panels.closeWorkspace(id);
  }

  /** "Visual Studio Code.app" -> "Visual Studio Code"; empty -> system default. */
  editorAppName(): string {
    const path = this.settings.editorApp();
    if (!path) return 'System default';
    const base = path.split('/').filter(Boolean).pop() ?? path;
    return base.replace(/\.app$/i, '');
  }

  async pickEditorApp(): Promise<void> {
    const res = await this.rpc.request.pickEditorApp({});
    if (res.ok && res.path) this.settings.setEditorApp(res.path);
  }

  /** Insertion line at the drop position (inset shadow: no layout shift). */
  dropIndicatorShadow(index: number): string | null {
    const target = this.dropTarget();
    if (!target || target.index !== index || this.draggedId() === null) return null;
    return target.before
      ? 'inset 2px 0 0 var(--primary)'
      : 'inset -2px 0 0 var(--primary)';
  }

  onDragStart(event: DragEvent, id: number): void {
    this.draggedId.set(id);
    // WebKit refuses to start a drag without data
    event.dataTransfer?.setData('text/plain', String(id));
    if (event.dataTransfer) event.dataTransfer.effectAllowed = 'move';
  }

  onDragOver(event: DragEvent, index: number): void {
    if (this.draggedId() === null) return;
    event.preventDefault();
    if (event.dataTransfer) event.dataTransfer.dropEffect = 'move';
    const el = event.currentTarget as HTMLElement;
    const before = event.clientX < el.getBoundingClientRect().left + el.offsetWidth / 2;
    this.dropTarget.set({ index, before });
  }

  onDrop(event: DragEvent, index: number): void {
    event.preventDefault();
    const id = this.draggedId();
    const target = this.dropTarget();
    this.onDragEnd();
    if (id === null || !target) return;
    const list = this.panels.workspaces();
    const fromIndex = list.findIndex((w) => w.id === id);
    if (fromIndex < 0) return;
    let toIndex = target.before ? index : index + 1;
    if (fromIndex < toIndex) toIndex--; // account for removal before insert
    if (toIndex !== fromIndex) this.panels.moveWorkspace(id, toIndex);
  }

  onDragEnd(): void {
    this.draggedId.set(null);
    this.dropTarget.set(null);
  }
}