<script lang="ts">
  // v0.3 Phase 4a — sectional tab nav for the Settings page.
  //
  // Renders a horizontal tab list with keyboard navigation per the
  // WAI-ARIA Authoring Practices "tabs (automatic activation)" pattern:
  //
  //   ArrowLeft  -> previous tab
  //   ArrowRight -> next tab
  //   Home       -> first tab
  //   End        -> last tab
  //   Tab        -> moves focus out of the tablist to the active panel
  //
  // Active tab styled with the brand caution-bar feel (left-bar accent)
  // so the same grammar shows up across the design system. Inactive
  // tabs are neutral and gain hover/focus rings.
  //
  // Used by SettingsPage when html[data-design="quietware"] is set so
  // the 2 791 LOC settings monolith renders one section at a time.
  // Without quietware, the tablist does not render at all (the
  // SettingsPage falls back to its v0.2 stacked-scroll layout).
  import type { Snippet } from "svelte";

  export interface Tab {
    id: string;
    label: string;
  }

  interface Props {
    tabs: Tab[];
    activeId: string;
    onSelect: (id: string) => void;
    ariaLabel?: string;
    classes?: string;
  }

  let {
    tabs,
    activeId,
    onSelect,
    ariaLabel = "Settings sections",
    classes = "",
  }: Props = $props();

  let tablistEl: HTMLDivElement | undefined = $state();

  function focusTabAt(index: number) {
    if (!tablistEl) return;
    const buttons = tablistEl.querySelectorAll<HTMLButtonElement>('button[role="tab"]');
    const target = buttons[index];
    if (target) target.focus();
  }

  function handleKey(e: KeyboardEvent, index: number) {
    let next = -1;
    if (e.key === "ArrowRight") next = (index + 1) % tabs.length;
    else if (e.key === "ArrowLeft") next = (index - 1 + tabs.length) % tabs.length;
    else if (e.key === "Home") next = 0;
    else if (e.key === "End") next = tabs.length - 1;
    if (next < 0) return;
    e.preventDefault();
    onSelect(tabs[next].id);
    queueMicrotask(() => focusTabAt(next));
  }
</script>

<div
  bind:this={tablistEl}
  role="tablist"
  aria-label={ariaLabel}
  class="flex flex-wrap gap-1 border-b border-border-subtle pb-2 {classes}"
>
  {#each tabs as tab, i (tab.id)}
    {@const isActive = tab.id === activeId}
    <button
      type="button"
      role="tab"
      aria-selected={isActive}
      aria-controls={`settings-panel-${tab.id}`}
      id={`settings-tab-${tab.id}`}
      tabindex={isActive ? 0 : -1}
      onclick={() => onSelect(tab.id)}
      onkeydown={(e) => handleKey(e, i)}
      class="px-3 py-1.5 rounded-md text-[13px] font-medium transition-colors
             border-l-2 border-l-transparent
             text-text-secondary hover:text-text hover:bg-hover
             focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-info focus-visible:ring-offset-2 focus-visible:ring-offset-bg
             aria-selected:text-text aria-selected:bg-bg-elevated
             aria-selected:border-l-caution"
    >
      {tab.label}
    </button>
  {/each}
</div>
