// COVIA Command Palette (Tools & Shortcuts)
function CoviaCommandPalette({ open, onClose }) {
  const { lang, t } = useLang();
  const [query, setQuery] = React.useState('');
  const [selectedIdx, setSelectedIdx] = React.useState(0);
  const inputRef = React.useRef(null);

  React.useEffect(() => {
    if (open) { setQuery(''); setSelectedIdx(0); setTimeout(() => inputRef.current?.focus(), 50); }
  }, [open]);

  React.useEffect(() => {
    const onKey = (e) => {
      if ((e.metaKey || e.ctrlKey) && e.key === 'k') { e.preventDefault(); onClose('toggle'); }
      if (e.key === 'Escape' && open) onClose();
    };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [open, onClose]);

  const groups = [
    { label: t('cmd.group.nav'), items: [
      { name: t('cmd.nav.works'), icon: '◈', href: '#works', keys: 'G W' },
      { name: t('cmd.nav.knowledge'), icon: '◉', href: '#knowledge', keys: 'G K' },
      { name: t('cmd.nav.resources'), icon: '◇', href: '#resources', keys: 'G R' },
      { name: t('cmd.nav.pilgrim'), icon: '◆', href: '#pilgrim', keys: 'G P' },
    ]},
    { label: t('cmd.group.ai'), items: [
      { name: 'Claude', icon: '⬡', href: 'https://claude.ai/', keys: '' },
      { name: 'ChatGPT', icon: '○', href: 'https://chatgpt.com/', keys: '' },
      { name: 'Gemini', icon: '△', href: 'https://gemini.google.com/', keys: '' },
      { name: 'Grok', icon: '⊕', href: 'https://grok.com/', keys: '' },
      { name: 'Perplexity', icon: '◎', href: 'https://www.perplexity.ai/', keys: '' },
      { name: 'NotebookLM', icon: '◧', href: 'https://notebooklm.google.com/', keys: '' },
    ]},
    { label: t('cmd.group.dev'), items: [
      { name: 'GitHub', icon: '⬡', href: 'https://github.com/', keys: '' },
      { name: 'Cloudflare', icon: '⛨', href: 'https://cloudflare.com/', keys: '' },
      { name: 'Vercel', icon: '△', href: 'https://vercel.com/', keys: '' },
      { name: 'VSCode', icon: '◧', href: 'vscode://', keys: '' },
      { name: 'Cursor', icon: '◈', href: 'https://www.cursor.com/', keys: '' },
    ]},
    { label: t('cmd.group.productivity'), items: [
      { name: 'Gmail', icon: '✉', href: 'https://mail.google.com/', keys: '' },
      { name: 'Google Drive', icon: '◫', href: 'https://drive.google.com/', keys: '' },
      { name: 'Canva', icon: '◇', href: 'https://www.canva.com/', keys: '' },
      { name: 'Obsidian', icon: '◆', href: 'obsidian://', keys: '' },
      { name: 'Spotify', icon: '●', href: 'spotify://', keys: '' },
    ]},
    { label: t('cmd.group.news'), items: [
      { name: 'Perplexity News', icon: '◎', href: 'https://www.perplexity.ai/discover', keys: '' },
      { name: 'Hacker News', icon: '⬡', href: 'https://news.ycombinator.com', keys: '' },
      { name: 'TechCrunch AI', icon: '◈', href: 'https://techcrunch.com/tag/ai/', keys: '' },
    ]},
  ];

  const allItems = groups.flatMap(g => g.items.map(i => ({ ...i, group: g.label })));
  const filtered = query ? allItems.filter(i => i.name.toLowerCase().includes(query.toLowerCase()) || i.group.toLowerCase().includes(query.toLowerCase())) : allItems;

  const handleSelect = (item) => {
    if (item.href.startsWith('#')) {
      document.querySelector(item.href)?.scrollTo && window.location.assign(item.href);
      const el = document.querySelector(item.href);
      if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
    } else if (item.href.startsWith('http')) {
      window.open(item.href, '_blank');
    } else {
      window.location.href = item.href;
    }
    onClose();
  };

  React.useEffect(() => {
    if (!open) return;
    const onKey = (e) => {
      if (e.key === 'ArrowDown') { e.preventDefault(); setSelectedIdx(i => Math.min(i + 1, filtered.length - 1)); }
      if (e.key === 'ArrowUp') { e.preventDefault(); setSelectedIdx(i => Math.max(i - 1, 0)); }
      if (e.key === 'Enter' && filtered[selectedIdx]) { handleSelect(filtered[selectedIdx]); }
    };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [open, selectedIdx, filtered]);

  if (!open) return null;

  // Group filtered items
  const groupedFiltered = [];
  let lastGroup = '';
  filtered.forEach((item, idx) => {
    if (item.group !== lastGroup) { groupedFiltered.push({ type: 'header', label: item.group }); lastGroup = item.group; }
    groupedFiltered.push({ type: 'item', ...item, flatIdx: idx });
  });

  return React.createElement('div', {
    style: {
      position: 'fixed', inset: 0, zIndex: 9000,
      background: 'rgba(0,0,0,0.6)', backdropFilter: 'blur(8px)',
      display: 'flex', justifyContent: 'center', alignItems: 'flex-start',
      paddingTop: 'clamp(80px, 15vh, 180px)',
      animation: 'fadeIn 0.15s ease',
    },
    onClick: (e) => { if (e.target === e.currentTarget) onClose(); },
  },
    React.createElement('div', {
      style: {
        width: 'min(560px, 90vw)',
        background: 'var(--surface-1)',
        border: '1px solid var(--border)',
        borderRadius: 'var(--radius-lg)',
        boxShadow: '0 24px 80px rgba(0,0,0,0.5)',
        overflow: 'hidden',
        animation: 'slideUp 0.2s cubic-bezier(0.16, 1, 0.3, 1)',
      }
    },
      // Search input
      React.createElement('div', {
        style: { padding: '16px 20px', borderBottom: '1px solid var(--border-subtle)', display: 'flex', alignItems: 'center', gap: 12 }
      },
        React.createElement('svg', { width: 18, height: 18, viewBox: '0 0 24 24', fill: 'none', stroke: 'var(--text-2)', strokeWidth: 2 },
          React.createElement('circle', { cx: 11, cy: 11, r: 8 }),
          React.createElement('line', { x1: 21, y1: 21, x2: 16.65, y2: 16.65 }),
        ),
        React.createElement('input', {
          ref: inputRef, value: query,
          onChange: e => { setQuery(e.target.value); setSelectedIdx(0); },
          placeholder: t('cmd.placeholder'),
          style: {
            flex: 1, background: 'none', border: 'none', outline: 'none',
            color: 'var(--text-0)', fontSize: 15, fontFamily: 'var(--font-body)',
          },
        }),
        React.createElement('kbd', {
          style: {
            fontSize: 11, padding: '2px 6px', borderRadius: 4,
            background: 'var(--surface-2)', border: '1px solid var(--border)',
            color: 'var(--text-2)', fontFamily: 'var(--font-mono)',
          }
        }, 'ESC'),
      ),
      // Results
      React.createElement('div', {
        style: { maxHeight: 400, overflowY: 'auto', padding: '8px 0' }
      },
        groupedFiltered.map((entry, idx) => {
          if (entry.type === 'header') {
            return React.createElement('div', {
              key: 'h-' + entry.label,
              style: {
                padding: '12px 20px 4px', fontSize: 11, fontFamily: 'var(--font-mono)',
                color: 'var(--text-2)', letterSpacing: '0.08em', textTransform: 'uppercase',
              }
            }, entry.label);
          }
          const isSelected = entry.flatIdx === selectedIdx;
          return React.createElement('div', {
            key: entry.name,
            onClick: () => handleSelect(entry),
            onMouseEnter: () => setSelectedIdx(entry.flatIdx),
            style: {
              display: 'flex', alignItems: 'center', gap: 12,
              padding: '10px 20px', cursor: 'pointer',
              background: isSelected ? 'var(--surface-2)' : 'transparent',
              transition: 'background 0.1s',
            }
          },
            React.createElement('span', {
              style: { fontSize: 16, width: 24, textAlign: 'center', color: 'var(--text-2)' }
            }, entry.icon),
            React.createElement('span', {
              style: { flex: 1, fontSize: 14, color: isSelected ? 'var(--text-0)' : 'var(--text-1)' }
            }, entry.name),
            entry.keys && React.createElement('span', {
              style: {
                fontSize: 11, fontFamily: 'var(--font-mono)', color: 'var(--text-2)',
                background: 'var(--surface-2)', padding: '2px 6px', borderRadius: 4,
              }
            }, entry.keys),
            !entry.href.startsWith('#') && React.createElement('svg', {
              width: 12, height: 12, viewBox: '0 0 24 24', fill: 'none', stroke: 'var(--text-2)', strokeWidth: 2, style: { opacity: 0.5 }
            },
              React.createElement('path', { d: 'M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6' }),
              React.createElement('polyline', { points: '15 3 21 3 21 9' }),
              React.createElement('line', { x1: 10, y1: 14, x2: 21, y2: 3 }),
            ),
          );
        })
      ),
      // Footer
      React.createElement('div', {
        style: {
          padding: '10px 20px', borderTop: '1px solid var(--border-subtle)',
          display: 'flex', gap: 16, justifyContent: 'center',
        }
      },
        [t('cmd.footer.nav'), t('cmd.footer.open'), t('cmd.footer.close')].map(txt =>
          React.createElement('span', {
            key: txt,
            style: { fontSize: 11, color: 'var(--text-2)', fontFamily: 'var(--font-mono)' }
          }, txt)
        )
      ),
    ),
  );
}

const cmdKeyframes = document.createElement('style');
cmdKeyframes.textContent = `
  @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
  @keyframes slideUp { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
`;
document.head.appendChild(cmdKeyframes);

window.CoviaCommandPalette = CoviaCommandPalette;