<script lang="ts" module>
  import type { ComponentType, SvelteComponent } from 'svelte';

  type IconProp = ComponentType<SvelteComponent>;

  export interface RowAction {
    icon: IconProp;
    label: string;
    onclick: () => void;
    danger?: boolean;
    disabled?: boolean;
    /** Override the accessible name (defaults to label). Use to disambiguate
        identical labels across rows for screen readers + tests, e.g.
        `Approve {row.title}`. */
    ariaLabel?: string;
  }
</script>

<script lang="ts">
  import { MoreVertical } from 'lucide-svelte';
  import TrackMenuItem from './TrackMenuItem.svelte';

  let {
    primary,
    secondary
  }: {
    /** The most-likely action; rendered inline as a primary button. */
    primary: RowAction;
    /** Other actions; rendered inline above md, in a popover below md. */
    secondary: RowAction[];
  } = $props();

  let menuOpen = $state(false);

  function toggleMenu(e: MouseEvent) {
    e.stopPropagation();
    menuOpen = !menuOpen;
  }

  function fire(action: RowAction) {
    if (action.disabled) return;
    menuOpen = false;
    action.onclick();
  }
</script>

<svelte:window onclick={() => { menuOpen = false; }} onkeydown={(e) => e.key === 'Escape' && (menuOpen = false)} />

<div class="flex items-center gap-2">
  <!-- Primary action: always inline -->
  <button
    type="button"
    aria-label={primary.ariaLabel ?? primary.label}
    disabled={primary.disabled}
    onclick={() => fire(primary)}
    class="inline-flex items-center gap-1 rounded-md bg-action-primary px-3 py-1.5 text-sm
           text-action-fg disabled:opacity-50 min-h-[44px] md:min-h-0"
  >
    <primary.icon size={14} strokeWidth={1} />
    {primary.label}
  </button>

  <!-- Secondary actions: inline above md, popover below md -->
  <div class="hidden md:flex items-center gap-2">
    {#each secondary as action (action.label)}
      <button
        type="button"
        aria-label={action.ariaLabel ?? action.label}
        disabled={action.disabled}
        onclick={() => fire(action)}
        class="inline-flex items-center gap-1 rounded-md border px-3 py-1.5 text-sm
               disabled:opacity-50
               {action.danger
                 ? 'border-action-destructive text-action-destructive hover:bg-action-destructive/10'
                 : 'border-border text-text-secondary hover:text-text-primary hover:bg-surface-hover'}"
      >
        <action.icon size={14} strokeWidth={1} />
        {action.label}
      </button>
    {/each}
  </div>

  <!-- Mobile overflow trigger -->
  {#if secondary.length > 0}
    <div class="relative md:hidden inline-block">
      <button
        type="button"
        aria-label="More actions"
        aria-haspopup="menu"
        aria-expanded={menuOpen}
        onclick={toggleMenu}
        class="rounded p-1 text-text-secondary hover:text-text-primary
               min-h-[44px] min-w-[44px] flex items-center justify-center"
      >
        <MoreVertical size={18} strokeWidth={1} />
      </button>

      {#if menuOpen}
        <div
          role="menu"
          tabindex="-1"
          class="absolute right-0 top-full z-20 mt-1 w-56 rounded-md border border-border
                 bg-surface p-1 shadow-lg"
          onclick={(e) => e.stopPropagation()}
          onkeydown={(e) => e.stopPropagation()}
        >
          {#each secondary as action (action.label)}
            <TrackMenuItem
              icon={action.icon}
              label={action.label}
              onclick={() => fire(action)}
              danger={action.danger}
              disabled={action.disabled}
            />
          {/each}
        </div>
      {/if}
    </div>
  {/if}
</div>
