"use client";

import Link from "next/link";
import { useEffect, useMemo, useRef, useState } from "react";
import { useRouter } from "next/navigation";
import { supabase } from "@/lib/supabase";

interface Resultado {
  id: string | number;
  tipo: "guia" | "cliente" | "contenedor";
  titulo: string;
  subtitulo: string;
  href: string;
}

export default function BuscadorGlobal({
  className = "",
}: {
  className?: string;
}) {
  const router = useRouter();
  const inputRef = useRef<HTMLInputElement>(null);
  const wrapperRef = useRef<HTMLDivElement>(null);

  const [query, setQuery] = useState("");
  const [abierto, setAbierto] = useState(false);
  const [cargando, setCargando] = useState(false);
  const [resultados, setResultados] = useState<Resultado[]>([]);
  const [indiceActivo, setIndiceActivo] = useState(0);

  const memoQuery = useMemo(() => query.trim(), [query]);

  useEffect(() => {
    function onKeyDown(e: KeyboardEvent) {
      if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === "k") {
        e.preventDefault();
        inputRef.current?.focus();
        setAbierto(true);
      }

      if (e.key === "Escape") {
        setAbierto(false);
        inputRef.current?.blur();
      }
    }

    window.addEventListener("keydown", onKeyDown);
    return () => window.removeEventListener("keydown", onKeyDown);
  }, []);

  useEffect(() => {
    function onClickOutside(e: MouseEvent) {
      if (
        wrapperRef.current &&
        !wrapperRef.current.contains(e.target as Node)
      ) {
        setAbierto(false);
      }
    }

    document.addEventListener("mousedown", onClickOutside);
    return () => document.removeEventListener("mousedown", onClickOutside);
  }, []);

  useEffect(() => {
    if (!memoQuery) {
      setResultados([]);
      setAbierto(false);
      return;
    }

    const timeout = setTimeout(() => {
      void buscar(memoQuery);
    }, 250);

    return () => clearTimeout(timeout);
  }, [memoQuery]);

  async function buscar(valor: string) {
    try {
      setCargando(true);
      setAbierto(true);
      setIndiceActivo(0);

      const termino = `%${valor}%`;

      const [guiasRes, clientesRes, contenedoresRes] = await Promise.all([
        supabase
          .from("hce_guias")
          .select("id,numero,cliente,estado")
          .or(`numero.ilike.${termino},numero_guia.ilike.${termino},cliente.ilike.${termino}`)
          .order("id", { ascending: false })
          .limit(5),

        supabase
          .from("hce_clientes")
          .select("id,nombre,telefono")
          .or(`nombre.ilike.${termino},telefono.ilike.${valor}`)
          .order("id", { ascending: false })
          .limit(5),

        supabase
          .from("contenedores")
          .select("id,numero,naviera")
          .or(`numero.ilike.${termino},naviera.ilike.${termino}`)
          .order("id", { ascending: false })
          .limit(5),
      ]);

      const lista: Resultado[] = [];

      if (!guiasRes.error && guiasRes.data) {
        lista.push(
          ...guiasRes.data.map((g: any) => ({
            id: g.id,
            tipo: "guia" as const,
            titulo: `Guía ${g.numero || g.numero_guia || g.id}`,
            subtitulo: `${g.cliente || "Sin cliente"} · ${g.estado || "Sin estado"}`,
            href: `/guias/${g.id}`,
          }))
        );
      }

      if (!clientesRes.error && clientesRes.data) {
        lista.push(
          ...clientesRes.data.map((c: any) => ({
            id: c.id,
            tipo: "cliente" as const,
            titulo: c.nombre || "Cliente sin nombre",
            subtitulo: c.telefono ? `Tel: ${c.telefono}` : "Cliente",
            href: `/clientes`,
          }))
        );
      }

      if (!contenedoresRes.error && contenedoresRes.data) {
        lista.push(
          ...contenedoresRes.data.map((c: any) => ({
            id: c.id,
            tipo: "contenedor" as const,
            titulo: `Contenedor ${c.numero || c.id}`,
            subtitulo: c.naviera || "Contenedor",
            href: `/contenedores`,
          }))
        );
      }

      setResultados(lista);
    } catch (error) {
      console.error("Error en búsqueda global:", error);
      setResultados([]);
    } finally {
      setCargando(false);
    }
  }

  function onKeyDown(e: React.KeyboardEvent<HTMLInputElement>) {
    if (!abierto || resultados.length === 0) return;

    if (e.key === "ArrowDown") {
      e.preventDefault();
      setIndiceActivo((prev) => (prev + 1) % resultados.length);
    } else if (e.key === "ArrowUp") {
      e.preventDefault();
      setIndiceActivo((prev) =>
        prev === 0 ? resultados.length - 1 : prev - 1
      );
    } else if (e.key === "Enter") {
      e.preventDefault();
      const seleccionado = resultados[indiceActivo];
      if (seleccionado) {
        setAbierto(false);
        router.push(seleccionado.href);
      }
    }
  }

  return (
    <div ref={wrapperRef} className={`relative ${className}`}>
      <div className="flex w-full items-center gap-3 rounded-full border border-[var(--border)] bg-[var(--input-bg)] px-4 py-2.5 text-[var(--text-secondary)] transition focus-within:border-[var(--accent)] focus-within:ring-1 focus-within:ring-[var(--accent)]/30">
        <svg
          className="h-5 w-5 shrink-0 text-[var(--text-muted)]"
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
        >
          <path
            strokeLinecap="round"
            strokeLinejoin="round"
            strokeWidth={2}
            d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
          />
        </svg>

        <input
          ref={inputRef}
          type="text"
          value={query}
          onChange={(e) => setQuery(e.target.value)}
          onFocus={() => {
            if (memoQuery) setAbierto(true);
          }}
          onKeyDown={onKeyDown}
          placeholder="Buscar guía, cliente o contenedor..."
          className="flex-1 bg-transparent text-sm text-[var(--text-primary)] outline-none placeholder:text-[var(--text-muted)]"
        />

        <span className="hidden rounded-md border border-[var(--border)] bg-[var(--bg-secondary)] px-1.5 py-0.5 text-[10px] font-medium text-[var(--text-muted)] sm:block">
          Ctrl + K
        </span>
      </div>

      {abierto && memoQuery && (
        <div className="absolute left-0 right-0 top-full z-50 mt-2 max-h-80 overflow-y-auto rounded-2xl border border-[var(--border)] bg-[var(--bg-secondary)] p-2 shadow-xl">
          {cargando && resultados.length === 0 && (
            <p className="px-3 py-2 text-sm text-[var(--text-muted)]">
              Buscando...
            </p>
          )}

          {!cargando && resultados.length === 0 && (
            <p className="px-3 py-2 text-sm text-[var(--text-muted)]">
              No se encontraron resultados.
            </p>
          )}

          {resultados.length > 0 && (
            <ul className="space-y-1">
              {resultados.map((r, index) => (
                <li key={`${r.tipo}-${r.id}`}>
                  <Link
                    href={r.href}
                    onClick={() => setAbierto(false)}
                    className={`flex items-center gap-3 rounded-xl px-3 py-2 transition ${
                      index === indiceActivo
                        ? "bg-[var(--accent)]/10 text-[var(--accent)]"
                        : "hover:bg-[var(--bg-primary)]"
                    }`}
                  >
                    <span
                      className={`flex h-8 w-8 shrink-0 items-center justify-center rounded-lg text-xs font-black text-white ${
                        r.tipo === "guia"
                          ? "bg-gradient-to-br from-blue-500 to-blue-700"
                          : r.tipo === "cliente"
                          ? "bg-gradient-to-br from-emerald-500 to-emerald-700"
                          : "bg-gradient-to-br from-orange-500 to-orange-700"
                      }`}
                    >
                      {r.tipo === "guia"
                        ? "G"
                        : r.tipo === "cliente"
                        ? "C"
                        : "CT"}
                    </span>
                    <div className="min-w-0">
                      <p className="truncate text-sm font-semibold text-[var(--text-primary)]">
                        {r.titulo}
                      </p>
                      <p className="truncate text-xs text-[var(--text-muted)]">
                        {r.subtitulo}
                      </p>
                    </div>
                  </Link>
                </li>
              ))}
            </ul>
          )}
        </div>
      )}
    </div>
  );
}