"use client";
import React, { useEffect, useState } from "react";
import { useSearchParams } from "next/navigation";
import { globalSearch } from "@/app/actions/search";
import { Search, User, BookOpen, Building2, CreditCard, Bell, ChevronRight, Loader2 } from "lucide-react";
import Link from "next/link";

export default function SearchClient() {
  const searchParams = useSearchParams();
  const query = searchParams.get("q") || "";
  const [loading, setLoading] = useState(true);
  const [results, setResults] = useState<any>(null);

  useEffect(() => {
    if (query) {
      handleSearch();
    }
  }, [query]);

  const handleSearch = async () => {
    setLoading(true);
    const res = await globalSearch(query);
    if (res.success) {
      setResults(res.results);
    }
    setLoading(false);
  };

  if (!query) return (
    <div className="flex flex-col items-center justify-center min-h-[60vh] text-gray-400">
      <Search className="w-16 h-16 mb-4 opacity-20" />
      <p className="text-xl font-medium">Escribe algo para buscar en el sistema</p>
    </div>
  );

  return (
    <div className="max-w-5xl mx-auto space-y-8 animate-in fade-in duration-500">
      <div className="flex items-center gap-4 border-b border-gray-100 pb-6">
        <div className="bg-blue-600 p-3 rounded-2xl text-white shadow-lg shadow-blue-100">
          <Search className="w-6 h-6" />
        </div>
        <div>
          <h1 className="text-3xl font-bold text-gray-800">Resultados para: <span className="text-blue-600">"{query}"</span></h1>
          <p className="text-gray-500">Búsqueda general en toda la plataforma</p>
        </div>
      </div>

      {loading ? (
        <div className="flex flex-col items-center justify-center py-20">
          <Loader2 className="w-12 h-12 text-blue-600 animate-spin mb-4" />
          <p className="text-gray-500 font-medium">Escaneando base de datos...</p>
        </div>
      ) : (
        <div className="grid grid-cols-1 md:grid-cols-2 gap-8 pb-20">
          {/* Usuarios / Estudiantes */}
          <Section 
            title="Usuarios y Estudiantes" 
            icon={<User className="w-5 h-5" />} 
            count={results?.usuarios?.length}
            color="blue"
          >
            {results?.usuarios?.map((u: any) => (
              <ResultItem 
                key={u.id}
                title={u.name || u.email}
                subtitle={`${u.role} | ${u.email}`}
                href={`/dashboard/usuarios?search=${u.email}`}
              />
            ))}
          </Section>

          {/* Cursos */}
          <Section 
            title="Cursos y Programas" 
            icon={<BookOpen className="w-5 h-5" />} 
            count={results?.cursos?.length}
            color="emerald"
          >
            {results?.cursos?.map((c: any) => (
              <ResultItem 
                key={c.id}
                title={c.titulo}
                subtitle="Ver detalles del curso"
                href={`/dashboard/cursos`}
              />
            ))}
          </Section>

          {/* Pagos */}
          <Section 
            title="Pagos e Inscripciones" 
            icon={<CreditCard className="w-5 h-5" />} 
            count={results?.pagos?.length}
            color="amber"
          >
            {results?.pagos?.map((p: any) => (
              <ResultItem 
                key={p.id}
                title={p.user.name}
                subtitle={`Inscrito en: ${p.curso.titulo}`}
                href={`/dashboard/pagos`}
              />
            ))}
          </Section>

          {/* Colegios (Solo Superadmin verá datos aquí) */}
          {results?.colegios?.length > 0 && (
            <Section 
              title="Sedes e Instituciones" 
              icon={<Building2 className="w-5 h-5" />} 
              count={results?.colegios?.length}
              color="purple"
            >
              {results?.colegios?.map((col: any) => (
                <ResultItem 
                  key={col.id}
                  title={col.nombre}
                  subtitle="Gestión administrativa de sede"
                  href={`/dashboard/colegios`}
                />
              ))}
            </Section>
          )}

          {/* Notificaciones */}
          <Section 
            title="Notificaciones" 
            icon={<Bell className="w-5 h-5" />} 
            count={results?.notificaciones?.length}
            color="rose"
          >
            {results?.notificaciones?.map((n: any) => (
              <ResultItem 
                key={n.id}
                title={n.titulo}
                subtitle={new Date(n.createdAt).toLocaleDateString()}
                href={`/dashboard/notificaciones`}
              />
            ))}
          </Section>
        </div>
      )}
    </div>
  );
}

function Section({ title, icon, children, count, color }: any) {
  const colors: any = {
    blue: "bg-blue-50 text-blue-600",
    emerald: "bg-emerald-50 text-emerald-600",
    amber: "bg-amber-50 text-amber-600",
    purple: "bg-purple-50 text-purple-600",
    rose: "bg-rose-50 text-rose-600",
  };

  if (!count) return null;

  return (
    <div className="bg-white rounded-3xl p-6 border border-gray-100 shadow-sm hover:shadow-md transition-shadow">
      <div className="flex items-center justify-between mb-6">
        <div className="flex items-center gap-3">
          <div className={`p-2 rounded-xl ${colors[color]}`}>
            {icon}
          </div>
          <h2 className="font-bold text-gray-800 uppercase tracking-wider text-sm">{title}</h2>
        </div>
        <span className="bg-gray-100 text-gray-500 text-xs font-bold px-2 py-1 rounded-lg">{count}</span>
      </div>
      <div className="space-y-2">
        {children}
      </div>
    </div>
  );
}

function ResultItem({ title, subtitle, href }: any) {
  return (
    <Link href={href} className="group flex items-center justify-between p-4 rounded-2xl hover:bg-gray-50 transition-all border border-transparent hover:border-gray-100">
      <div>
        <h3 className="font-bold text-gray-800 group-hover:text-blue-600 transition-colors">{title}</h3>
        <p className="text-xs text-gray-400 font-medium">{subtitle}</p>
      </div>
      <ChevronRight className="w-4 h-4 text-gray-300 group-hover:text-blue-500 group-hover:translate-x-1 transition-all" />
    </Link>
  );
}