'use client';

/**
 * Styled replacement for toolbar `<select>`s — same popover language as the
 * header's language switcher (pill trigger, rotating chevron, rounded menu,
 * check on the selected row) so every dropdown in the store speaks one
 * dialect. Closes on outside click / Escape; arrows move focus in the list.
 */
import { useEffect, useRef, useState } from 'react';
import { cn } from '@/core/lib/utils';
import { IconCheck, IconChevronDown } from '@/ui/shared/icons';

export interface SelectMenuOption {
  value: string;
  label: string;
}

interface SelectMenuProps {
  value: string;
  options: SelectMenuOption[];
  onChange: (value: string) => void;
  ariaLabel: string;
  className?: string;
}

export function SelectMenu({ value, options, onChange, ariaLabel, className }: SelectMenuProps) {
  const [open, setOpen] = useState(false);
  const rootRef = useRef<HTMLDivElement>(null);
  const listRef = useRef<HTMLUListElement>(null);
  const triggerRef = useRef<HTMLButtonElement>(null);

  useEffect(() => {
    if (!open) return;
    function onDown(e: MouseEvent) {
      if (rootRef.current && !rootRef.current.contains(e.target as Node)) setOpen(false);
    }
    function onKey(e: KeyboardEvent) {
      if (e.key === 'Escape') {
        setOpen(false);
        triggerRef.current?.focus();
      }
    }
    document.addEventListener('mousedown', onDown);
    document.addEventListener('keydown', onKey);
    return () => {
      document.removeEventListener('mousedown', onDown);
      document.removeEventListener('keydown', onKey);
    };
  }, [open]);

  // Focus the selected row when the menu opens so keyboard users land in place.
  useEffect(() => {
    if (!open) return;
    const el =
      listRef.current?.querySelector<HTMLButtonElement>('[aria-selected="true"]') ??
      listRef.current?.querySelector('button');
    el?.focus();
  }, [open]);

  const selected = options.find((o) => o.value === value);

  function onListKeyDown(e: React.KeyboardEvent) {
    if (e.key !== 'ArrowDown' && e.key !== 'ArrowUp') return;
    e.preventDefault();
    const items = Array.from(listRef.current?.querySelectorAll('button') ?? []);
    const idx = items.indexOf(document.activeElement as HTMLButtonElement);
    const next = e.key === 'ArrowDown' ? Math.min(items.length - 1, idx + 1) : Math.max(0, idx - 1);
    items[next]?.focus();
  }

  return (
    <div ref={rootRef} className={cn('relative', className)}>
      <button
        ref={triggerRef}
        type="button"
        aria-label={ariaLabel}
        aria-expanded={open}
        aria-haspopup="listbox"
        onClick={() => setOpen((v) => !v)}
        className="inline-flex h-10 items-center gap-2 rounded-full border bg-background px-4 text-sm font-medium text-foreground transition-colors hover:bg-secondary/60"
      >
        {selected?.label ?? ariaLabel}
        <IconChevronDown
          size={16}
          className={cn('shrink-0 text-foreground/60 transition-transform', open && 'rotate-180')}
        />
      </button>

      {open && (
        <ul
          ref={listRef}
          role="listbox"
          aria-label={ariaLabel}
          onKeyDown={onListKeyDown}
          className="absolute start-0 top-full z-50 mt-2 max-h-72 min-w-full overflow-y-auto rounded-xl border border-border/60 bg-background py-1 shadow-lg"
        >
          {options.map((opt) => {
            const isSelected = opt.value === value;
            return (
              <li key={opt.value}>
                <button
                  type="button"
                  role="option"
                  aria-selected={isSelected}
                  onClick={() => {
                    setOpen(false);
                    triggerRef.current?.focus();
                    if (!isSelected) onChange(opt.value);
                  }}
                  className={cn(
                    'flex w-full items-center justify-between gap-3 whitespace-nowrap px-4 py-2 text-sm transition-colors hover:bg-secondary/70',
                    isSelected ? 'font-semibold text-primary' : 'text-foreground/80'
                  )}
                >
                  {opt.label}
                  {isSelected && <IconCheck size={16} />}
                </button>
              </li>
            );
          })}
        </ul>
      )}
    </div>
  );
}