"use client";

import { useState, useEffect, useRef, useCallback } from "react";
import { useRouter } from "next/navigation";
import { Search, Users, Monitor, BarChart3, Wrench, X, Loader2 } from "lucide-react";
import { Badge } from "@/components/ui/badge";

interface SearchResult {
  id: string;
  href: string;
  label: string;
  sub?: string;
  badge?: string;
  badgeVariant?: "success" | "warning" | "destructive" | "outline";
}

interface SearchResults {
  helpers: { id: string; name: string; code: string; href: string }[];
  machines: { id: string; name: string; status: string; href: string }[];
  segments: { id: string; machineName: string; helperName: string | null; status: string; href: string }[];
  maintenance: { id: string; title: string; machineName: string; status: string; href: string }[];
}

const MACHINE_STATUS_VARIANT: Record<string, "success" | "warning" | "destructive"> = {
  ACTIVE: "success",
  MAINTENANCE: "warning",
  RETIRED: "destructive",
};
const SEGMENT_STATUS_VARIANT: Record<string, "warning" | "success" | "destructive" | "outline"> = {
  OPEN: "warning",
  APPROVED: "success",
  VOID: "destructive",
  CLOSED: "outline",
};
const MAINT_STATUS_VARIANT: Record<string, "warning" | "success" | "destructive" | "outline"> = {
  OPEN: "warning",
  IN_PROGRESS: "warning",
  COMPLETED: "success",
  CANCELLED: "outline",
};

function flattenResults(data: SearchResults): { group: string; icon: React.ReactNode; items: SearchResult[] }[] {
  return [
    {
      group: "Helpers",
      icon: <Users className="h-3.5 w-3.5" />,
      items: data.helpers.map((h) => ({
        id: h.id,
        href: h.href,
        label: h.name ?? "—",
        sub: h.code,
      })),
    },
    {
      group: "Machines",
      icon: <Monitor className="h-3.5 w-3.5" />,
      items: data.machines.map((m) => ({
        id: m.id,
        href: m.href,
        label: m.name,
        badge: m.status,
        badgeVariant: MACHINE_STATUS_VARIANT[m.status] ?? "outline",
      })),
    },
    {
      group: "Segments",
      icon: <BarChart3 className="h-3.5 w-3.5" />,
      items: data.segments.map((s) => ({
        id: s.id,
        href: s.href,
        label: s.machineName,
        sub: s.helperName ?? undefined,
        badge: s.status,
        badgeVariant: SEGMENT_STATUS_VARIANT[s.status] ?? "outline",
      })),
    },
    {
      group: "Maintenance",
      icon: <Wrench className="h-3.5 w-3.5" />,
      items: data.maintenance.map((m) => ({
        id: m.id,
        href: m.href,
        label: m.title,
        sub: m.machineName,
        badge: m.status.replace("_", " "),
        badgeVariant: MAINT_STATUS_VARIANT[m.status] ?? "outline",
      })),
    },
  ].filter((g) => g.items.length > 0);
}

export function CommandSearch() {
  const [open, setOpen] = useState(false);
  const [query, setQuery] = useState("");
  const [results, setResults] = useState<ReturnType<typeof flattenResults>>([]);
  const [loading, setLoading] = useState(false);
  const [selectedIdx, setSelectedIdx] = useState(0);
  const inputRef = useRef<HTMLInputElement>(null);
  const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);
  const router = useRouter();

  // Flatten results into a linear list for keyboard nav
  const flatItems = results.flatMap((g) => g.items);

  const close = useCallback(() => {
    setOpen(false);
    setQuery("");
    setResults([]);
    setSelectedIdx(0);
  }, []);

  const navigate = useCallback((href: string) => {
    router.push(href);
    close();
  }, [router, close]);

  // Global keyboard shortcut
  useEffect(() => {
    function handler(e: KeyboardEvent) {
      if ((e.metaKey || e.ctrlKey) && e.key === "k") {
        e.preventDefault();
        setOpen((prev) => {
          if (!prev) setTimeout(() => inputRef.current?.focus(), 10);
          return !prev;
        });
      }
      if (e.key === "Escape") close();
    }
    window.addEventListener("keydown", handler);
    return () => window.removeEventListener("keydown", handler);
  }, [close]);

  // Debounced search
  useEffect(() => {
    if (debounceRef.current) clearTimeout(debounceRef.current);
    if (query.length < 2) { setResults([]); setLoading(false); return; }
    setLoading(true);
    debounceRef.current = setTimeout(async () => {
      try {
        const res = await fetch(`/api/admin/search?q=${encodeURIComponent(query)}`);
        const data: SearchResults = await res.json();
        setResults(flattenResults(data));
        setSelectedIdx(0);
      } finally {
        setLoading(false);
      }
    }, 300);
    return () => { if (debounceRef.current) clearTimeout(debounceRef.current); };
  }, [query]);

  // Keyboard navigation within modal
  function handleKeyDown(e: React.KeyboardEvent) {
    if (e.key === "ArrowDown") {
      e.preventDefault();
      setSelectedIdx((i) => Math.min(i + 1, flatItems.length - 1));
    } else if (e.key === "ArrowUp") {
      e.preventDefault();
      setSelectedIdx((i) => Math.max(i - 1, 0));
    } else if (e.key === "Enter" && flatItems[selectedIdx]) {
      navigate(flatItems[selectedIdx].href);
    }
  }

  if (!open) return null;

  let flatIdx = 0;

  return (
    <div
      className="fixed inset-0 z-[100] flex items-start justify-center pt-[10vh] px-4"
      onMouseDown={(e) => { if (e.target === e.currentTarget) close(); }}
    >
      {/* Backdrop */}
      <div className="absolute inset-0 bg-black/50 backdrop-blur-sm" />

      {/* Modal */}
      <div className="relative w-full max-w-xl bg-white rounded-2xl shadow-2xl overflow-hidden border border-slate-200">
        {/* Input */}
        <div className="flex items-center gap-3 px-4 py-3 border-b">
          {loading ? (
            <Loader2 className="h-4 w-4 text-slate-400 animate-spin flex-shrink-0" />
          ) : (
            <Search className="h-4 w-4 text-slate-400 flex-shrink-0" />
          )}
          <input
            ref={inputRef}
            value={query}
            onChange={(e) => setQuery(e.target.value)}
            onKeyDown={handleKeyDown}
            placeholder="Search helpers, machines, segments…"
            className="flex-1 text-sm text-slate-900 placeholder-slate-400 outline-none bg-transparent"
            autoComplete="off"
          />
          <button onClick={close} className="text-slate-400 hover:text-slate-600 flex-shrink-0">
            <X className="h-4 w-4" />
          </button>
        </div>

        {/* Results */}
        {results.length > 0 ? (
          <div className="max-h-96 overflow-y-auto py-2">
            {results.map((group) => (
              <div key={group.group}>
                <div className="flex items-center gap-1.5 px-4 py-1.5 text-xs font-semibold text-slate-400 uppercase tracking-wide">
                  {group.icon}
                  {group.group}
                </div>
                {group.items.map((item) => {
                  const idx = flatIdx++;
                  const active = idx === selectedIdx;
                  return (
                    <button
                      key={item.id}
                      onMouseEnter={() => setSelectedIdx(idx)}
                      onClick={() => navigate(item.href)}
                      className={`w-full flex items-center justify-between px-4 py-2.5 text-left transition-colors ${
                        active ? "bg-blue-50" : "hover:bg-slate-50"
                      }`}
                    >
                      <div className="min-w-0">
                        <p className={`text-sm font-medium truncate ${active ? "text-blue-700" : "text-slate-900"}`}>
                          {item.label}
                        </p>
                        {item.sub && (
                          <p className="text-xs text-slate-400 font-mono truncate">{item.sub}</p>
                        )}
                      </div>
                      {item.badge && (
                        <Badge variant={item.badgeVariant ?? "outline"} className="text-xs ml-3 flex-shrink-0">
                          {item.badge}
                        </Badge>
                      )}
                    </button>
                  );
                })}
              </div>
            ))}
          </div>
        ) : query.length >= 2 && !loading ? (
          <div className="py-10 text-center text-slate-400 text-sm">
            No results for <span className="font-medium text-slate-600">&ldquo;{query}&rdquo;</span>
          </div>
        ) : query.length < 2 ? (
          <div className="py-8 text-center text-slate-400 text-sm">
            Type at least 2 characters to search
          </div>
        ) : null}

        {/* Footer hint */}
        <div className="px-4 py-2 border-t bg-slate-50 flex items-center gap-3 text-xs text-slate-400">
          <span className="flex items-center gap-1"><kbd className="bg-white border rounded px-1 font-mono">↑↓</kbd> navigate</span>
          <span className="flex items-center gap-1"><kbd className="bg-white border rounded px-1 font-mono">↵</kbd> open</span>
          <span className="flex items-center gap-1"><kbd className="bg-white border rounded px-1 font-mono">esc</kbd> close</span>
        </div>
      </div>
    </div>
  );
}