import { useCallback, useEffect, useMemo, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { Search } from 'lucide-react';

import { Dialog, DialogContent, DialogTitle } from '../ui/dialog';
import { classNames } from '../../lib/utils';

import { searchNavItems, type SearchItem } from './nav-search';

/** Props for {@link SidebarSearch}. */
interface SidebarSearchProps {
  collapsed: boolean;
  items: SearchItem[];
}

/**
 * Command palette search. Opens on click or ⌘K / Ctrl+K, filters the flattened
 * nav destinations, and navigates on select (arrow keys + Enter supported).
 *
 * In the panel it is a full search field; collapsed to the rail it keeps only
 * the icon, since a field 104px wide can hold neither placeholder nor hint.
 *
 * @param {SidebarSearchProps} props - Component props
 * @returns {React.ReactElement} Search trigger + dialog
 */
function SidebarSearch({
  collapsed,
  items,
}: SidebarSearchProps): React.ReactElement {
  const navigate = useNavigate();
  const [open, setOpen] = useState(false);
  const [query, setQuery] = useState('');
  const [activeIndex, setActiveIndex] = useState(0);
  // Default to the ⌘ label on server + first client render (no hydration
  // mismatch); swap to "Ctrl" on non-Apple platforms after mount.
  const [isMac, setIsMac] = useState(true);
  useEffect(() => {
    const platform = navigator.platform || navigator.userAgent || '';
    setIsMac(/mac|iphone|ipad|ipod/i.test(platform));
  }, []);
  const shortcut = isMac ? '⌘K' : 'Ctrl K';

  // Global ⌘K / Ctrl+K toggles the palette.
  useEffect(() => {
    const onKey = (event: KeyboardEvent): void => {
      if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === 'k') {
        event.preventDefault();
        setOpen(previous => !previous);
      }
    };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, []);

  const results = useMemo(() => searchNavItems(items, query), [query, items]);

  useEffect(() => setActiveIndex(0), [query]);

  const navigateTo = useCallback(
    (item: SearchItem): void => {
      setOpen(false);
      setQuery('');
      // `navigate` would push an absolute audit URL onto this origin, where it
      // matches the catch-all and renders a 404.
      if (item.external) window.open(item.to, '_blank', 'noopener,noreferrer');
      else navigate(item.to);
    },
    [navigate]
  );

  const onInputKeyDown = (
    event: React.KeyboardEvent<HTMLInputElement>
  ): void => {
    if (event.key === 'ArrowDown') {
      event.preventDefault();
      setActiveIndex(index => Math.min(index + 1, results.length - 1));
    } else if (event.key === 'ArrowUp') {
      event.preventDefault();
      setActiveIndex(index => Math.max(index - 1, 0));
    } else if (event.key === 'Enter') {
      event.preventDefault();
      const item = results[activeIndex];
      if (item) navigateTo(item);
    }
  };
  const onOpenChange = (nextOpen: boolean): void => {
    setOpen(nextOpen);
    if (!nextOpen) setQuery('');
  };

  return (
    <>
      <button
        type="button"
        aria-label="Search"
        title={`Search (${isMac ? '⌘K' : 'Ctrl+K'})`}
        onClick={() => setOpen(true)}
        className={classNames(
          'mb-3.5 flex flex-none items-center rounded-xl bg-nav-hover text-[13px] text-nav-placeholder transition-colors hover:bg-nav-hover-strong',
          collapsed ? 'justify-center px-0 py-2' : 'gap-2.5 px-3 py-2.5'
        )}
      >
        <Search className="h-[15px] w-[15px] shrink-0 text-nav-hint" />
        {!collapsed && (
          <>
            <span className="flex-1 text-left">Search…</span>
            <kbd className="rounded-[5px] bg-nav-chip px-1.5 py-0.5 text-[10.5px] leading-none text-nav-hint">
              {shortcut}
            </kbd>
          </>
        )}
      </button>

      <Dialog open={open} onOpenChange={onOpenChange}>
        <DialogContent
          showCloseButton={false}
          className="glass-popover overflow-hidden bg-popover/95 p-0 ring-0 backdrop-blur-2xl sm:max-w-2xl"
        >
          <DialogTitle className="sr-only">Search navigation</DialogTitle>
          <div className="flex items-center gap-3 border-b border-border px-4">
            <Search className="h-[18px] w-[18px] shrink-0 text-muted-foreground" />
            <input
              autoFocus
              value={query}
              onChange={event => setQuery(event.target.value)}
              onKeyDown={onInputKeyDown}
              placeholder="Search pages…"
              className="w-full bg-transparent py-4 text-base text-foreground outline-none placeholder:text-muted-foreground"
            />
            <kbd className="hidden shrink-0 rounded-md border border-border-default px-2 py-1 text-[11px] text-muted-foreground sm:block">
              Esc
            </kbd>
          </div>
          <div className="max-h-[min(65vh,460px)] overflow-y-auto p-2">
            {results.length === 0 ? (
              <p className="px-3 py-8 text-center text-sm text-muted-foreground">
                No pages match “{query}”.
              </p>
            ) : (
              results.map((item, index) => {
                const Icon = item.icon;
                return (
                  <button
                    key={`${item.to}-${index}`}
                    type="button"
                    onMouseMove={() => setActiveIndex(index)}
                    onClick={() => navigateTo(item)}
                    className={classNames(
                      'flex w-full items-center gap-3 rounded-lg px-3 py-2.5 text-[15px] transition-colors',
                      activeIndex === index
                        ? 'bg-nav-accent/12 text-nav-accent'
                        : 'text-foreground/90 hover:bg-nav-hover'
                    )}
                  >
                    <Icon className="h-[18px] w-[18px] shrink-0" />
                    <span className="flex-1 truncate text-left">
                      {item.label}
                    </span>
                    <span className="ml-auto shrink-0 text-xs text-muted-foreground">
                      {item.group}
                    </span>
                  </button>
                );
              })
            )}
          </div>
        </DialogContent>
      </Dialog>
    </>
  );
}

export default SidebarSearch;