import { router } from '@inertiajs/react';
import { useEffect, useRef, useState } from 'react';

type Result = {
  type: string;
  label: string;
  sub: string;
  href: string;
  icon: string;
};

const typeLabel: Record<string, string> = {
  school: 'مدرسه',
  user: 'کاربر',
  student: 'دانش‌آموز',
  teacher: 'معلم',
  classroom: 'کلاس',
};

export function GlobalSearch() {
  const [open, setOpen] = useState(false);
  const [q, setQ] = useState('');
  const [results, setResults] = useState<Result[]>([]);
  const [loading, setLoading] = useState(false);
  const inputRef = useRef<HTMLInputElement>(null);
  const wrapRef = useRef<HTMLDivElement>(null);
  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);

  useEffect(() => {
    function onKey(e: KeyboardEvent) {
      if ((e.ctrlKey || e.metaKey) && e.key === 'k') {
        e.preventDefault();
        setOpen(true);
        setTimeout(() => inputRef.current?.focus(), 50);
      }
      if (e.key === 'Escape') setOpen(false);
    }
    document.addEventListener('keydown', onKey);
    return () => document.removeEventListener('keydown', onKey);
  }, []);

  useEffect(() => {
    function onClick(e: MouseEvent) {
      if (wrapRef.current && !wrapRef.current.contains(e.target as Node)) setOpen(false);
    }
    document.addEventListener('mousedown', onClick);
    return () => document.removeEventListener('mousedown', onClick);
  }, []);

  useEffect(() => {
    if (timerRef.current) clearTimeout(timerRef.current);
    if (q.length < 2) { setResults([]); return; }
    timerRef.current = setTimeout(() => {
      setLoading(true);
      fetch(`/api/search?q=${encodeURIComponent(q)}`, {
        headers: { Accept: 'application/json' },
        credentials: 'same-origin',
      })
        .then((r) => r.json())
        .then((d) => { setResults(d.results ?? []); setLoading(false); })
        .catch(() => setLoading(false));
    }, 280);
    return () => { if (timerRef.current) clearTimeout(timerRef.current); };
  }, [q]);

  function openSearch() {
    setOpen(true);
    setTimeout(() => inputRef.current?.focus(), 50);
  }

  function pick(r: Result) {
    setOpen(false);
    setQ('');
    setResults([]);
    router.visit(r.href);
  }

  return (
    <div className="gsearch-wrap" ref={wrapRef}>
      <button type="button" className="topbar-icon-btn gsearch-trigger" onClick={openSearch} aria-label="جستجو (Ctrl+K)">
        <i className="bi bi-search" />
      </button>

      {open && (
        <div className="gsearch-panel">
          <div className="gsearch-input-row">
            <i className="bi bi-search gsearch-icon" />
            <input
              ref={inputRef}
              type="search"
              className="gsearch-input"
              placeholder="جستجو... (Ctrl+K)"
              value={q}
              onChange={(e) => setQ(e.target.value)}
              autoComplete="off"
            />
            <button type="button" className="gsearch-close" onClick={() => setOpen(false)} aria-label="بستن">
              <i className="bi bi-x-lg" />
            </button>
          </div>
          {q.length >= 2 && (
            <div className="gsearch-results">
              {loading && <div className="gsearch-empty">در حال جستجو...</div>}
              {!loading && results.length === 0 && <div className="gsearch-empty">نتیجه‌ای یافت نشد</div>}
              {!loading && results.map((r, i) => (
                <button key={i} type="button" className="gsearch-item" onClick={() => pick(r)}>
                  <i className={`bi ${r.icon} gsearch-item-icon`} />
                  <span className="gsearch-item-text">
                    <span className="gsearch-item-label">{r.label}</span>
                    {r.sub && <span className="gsearch-item-sub">{r.sub}</span>}
                  </span>
                  <span className="gsearch-item-type">{typeLabel[r.type] ?? r.type}</span>
                </button>
              ))}
            </div>
          )}
          {q.length < 2 && (
            <div className="gsearch-hint">حداقل ۲ حرف وارد کنید</div>
          )}
        </div>
      )}
    </div>
  );
}