'use client';

import * as React from 'react';
import { useRouter } from 'next/navigation';
import { Dialog } from '@/components/ui/Dialog';
import { Input } from '@/components/ui/Input';
import { cn } from '@/lib/cn';
import { useTheme } from 'next-themes';

const ACTIONS: { label: string; href?: string; run?: string }[] = [
  { label: 'Go to Home', href: '/' },
  { label: 'Go to Messages', href: '/messages' },
  { label: 'Go to Insights', href: '/insights' },
  { label: 'Go to Apps', href: '/apps' },
  { label: 'Go to Channels', href: '/channels' },
  { label: 'Go to Templates', href: '/templates' },
  { label: 'Go to Logs', href: '/logs' },
  { label: 'Go to Settings', href: '/settings' },
  { label: 'Connect a provider', href: '/channels' },
  { label: 'Add an app', href: '/apps' },
  { label: 'Search all log files', href: '/logs' },
  { label: 'Switch light / dark', run: 'flip-theme' },
];

const PaletteContext = React.createContext<{ open: () => void }>({ open: () => {} });

export function useCommandPalette() {
  return React.useContext(PaletteContext);
}

export function CommandPaletteProvider({ children }: { children: React.ReactNode }) {
  const router = useRouter();
  const { resolvedTheme, setTheme, theme } = useTheme();
  const [open, setOpen] = React.useState(false);
  const [q, setQ] = React.useState('');
  const [idx, setIdx] = React.useState(0);

  const openPalette = React.useCallback(() => {
    setOpen(true);
    setQ('');
    setIdx(0);
  }, []);

  React.useEffect(() => {
    const onKey = (e: KeyboardEvent) => {
      if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'k') {
        e.preventDefault();
        setOpen((v) => {
          if (!v) {
            setQ('');
            setIdx(0);
          }
          return !v;
        });
      }
    };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, []);

  const filtered = ACTIONS.filter((a) =>
    a.label.toLowerCase().includes(q.trim().toLowerCase()),
  );

  const run = (a: (typeof ACTIONS)[0]) => {
    if (a.run === 'flip-theme') {
      const dark = theme === 'midnight' || resolvedTheme === 'dark' || theme === 'dark';
      setTheme(dark ? 'light' : 'dark');
    } else if (a.href) {
      router.push(a.href);
    }
    setOpen(false);
  };

  return (
    <PaletteContext.Provider value={{ open: openPalette }}>
      {children}
      <Dialog open={open} onClose={() => setOpen(false)} title="Search or jump">
        <Input
          autoFocus
          placeholder="Type a page or action…"
          value={q}
          onChange={(e) => {
            setQ(e.target.value);
            setIdx(0);
          }}
          onKeyDown={(e) => {
            if (e.key === 'ArrowDown') {
              e.preventDefault();
              setIdx((i) => Math.min(i + 1, Math.max(filtered.length - 1, 0)));
            } else if (e.key === 'ArrowUp') {
              e.preventDefault();
              setIdx((i) => Math.max(i - 1, 0));
            } else if (e.key === 'Enter' && filtered[idx]) {
              e.preventDefault();
              run(filtered[idx]);
            }
          }}
        />
        <ul className="mt-3 m-0 p-0 list-none max-h-72 overflow-auto">
          {filtered.map((a, i) => (
            <li key={a.label}>
              <button
                type="button"
                className={cn(
                  'w-full text-left px-3 py-2.5 rounded-[var(--r)] border-0 cursor-pointer text-sm',
                  i === idx
                    ? 'bg-surface-2 text-text'
                    : 'bg-transparent text-muted hover:bg-surface-2',
                )}
                onMouseEnter={() => setIdx(i)}
                onClick={() => run(a)}
              >
                {a.label}
              </button>
            </li>
          ))}
          {!filtered.length ? (
            <li className="px-3 py-4 text-muted text-sm text-center">No matches</li>
          ) : null}
        </ul>
        <p className="text-muted text-xs mt-3 mb-0">Ctrl/Cmd+K to toggle</p>
      </Dialog>
    </PaletteContext.Provider>
  );
}