import { db } from "@/lib/db";
import { colegio } from "@/db/schema";
import { eq, asc } from "drizzle-orm";
import Navbar from "@/components/front/Navbar";
import Footer from "@/components/front/Footer";
import Link from "next/link";
import { MapPin, Phone, Mail, MessageCircle, BookOpen } from "lucide-react";

export const dynamic = "force-dynamic";


export default async function SedesPage() {
  const sedes = await db
    .select()
    .from(colegio)
    .where(eq(colegio.activo, true))
    .orderBy(asc(colegio.nombre));

  return (
    <>
      <Navbar />
      <main className="min-h-screen bg-white">
        {/* Hero */}
        <section className="bg-gradient-to-br from-[#3e2723] via-[#2b1910] to-[#1a0f0a] text-white py-28 px-8 relative overflow-hidden">
          <div className="absolute inset-0 opacity-10 bg-cover bg-center" style={{ backgroundImage: "url('https://upload.wikimedia.org/wikipedia/commons/thumb/d/d5/Pila_de_libros.svg/512px-Pila_de_libros.svg.png')" }} />
          <div className="absolute top-0 right-0 w-64 h-64 bg-[#43a047] rounded-full blur-[100px] opacity-20 -mr-20 -mt-20"></div>
          <div className="absolute bottom-0 left-0 w-64 h-64 bg-[#f57c00] rounded-full blur-[100px] opacity-20 -ml-20 -mb-20"></div>
          
          <div className="relative z-10 max-w-3xl mx-auto text-center">
            <span className="inline-block bg-[#f57c00]/20 text-[#fbc02d] font-bold text-sm px-4 py-1.5 rounded-full mb-6 tracking-wider uppercase shadow-sm">
              Red de Instituciones
            </span>
            <h1 className="text-4xl md:text-5xl font-extrabold mb-4 tracking-tight drop-shadow-md">
              Instituciones en la Plataforma
            </h1>
            <p className="text-gray-300 text-lg">
              Explora las sedes y centros de formación registrados en CursosNirgua.
              Cada una con su oferta académica actualizada.
            </p>
          </div>
        </section>

        {/* Grid de sedes */}
        <section className="max-w-7xl mx-auto px-8 py-20 relative">
          <div className="absolute inset-0 opacity-5 bg-repeat pointer-events-none" style={{ backgroundImage: "url('https://files.uncapitalized.com/patterns/pattern-agri.svg')" }}></div>
          {sedes.length === 0 ? (
            <div className="text-center py-20 text-gray-400 relative z-10">
              <BookOpen className="w-16 h-16 mx-auto mb-4 text-[#e8f5e9]" />
              <p className="text-xl font-semibold text-[#3e2723]">No hay sedes registradas aún.</p>
            </div>
          ) : (
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 relative z-10">
              {sedes.map((sede) => (
                <div key={sede.id}
                  className="group bg-white rounded-2xl border border-gray-100 shadow-md hover:shadow-2xl transition-all duration-300 overflow-hidden flex flex-col transform hover:-translate-y-2">
                  {/* Cabecera colorida con logo/inicial */}
                  <div
                    className="h-36 flex items-center justify-center relative"
                    style={{ backgroundColor: (sede as any).color || "#3e2723" }}
                  >
                    <div className="absolute inset-0 opacity-10 bg-[radial-gradient(circle_at_70%_30%,white,transparent_60%)]" />
                    {(sede as any).logoUrl ? (
                      <img
                        src={(sede as any).logoUrl}
                        alt={sede.nombre}
                        className="h-20 max-w-[180px] object-contain drop-shadow-lg group-hover:scale-110 transition-transform duration-500"
                      />
                    ) : (
                      <div className="w-20 h-20 bg-white/20 rounded-2xl flex items-center justify-center text-white font-extrabold text-4xl backdrop-blur-sm shadow-xl group-hover:scale-110 transition-transform duration-500">
                        {sede.nombre.charAt(0).toUpperCase()}
                      </div>
                    )}
                    {/* Dot activo */}
                    <span className="absolute top-4 right-4 flex items-center gap-1.5 bg-white/20 backdrop-blur-md text-white text-xs font-bold px-3 py-1.5 rounded-full shadow-sm">
                      <span className="w-2 h-2 rounded-full bg-[#43a047] animate-pulse shadow-[0_0_8px_#43a047]" />
                      Activa
                    </span>
                  </div>

                  {/* Contenido */}
                  <div className="p-8 flex flex-col flex-1">
                    <h2 className="text-xl font-extrabold text-[#3e2723] mb-4 group-hover:text-[#f57c00] transition-colors">
                      {sede.nombre}
                    </h2>

                    <div className="space-y-3 text-sm font-medium text-gray-600 mb-6 bg-neutral-50 p-4 rounded-xl border border-gray-100">
                      {sede.ubicacion && (
                        <div className="flex items-start gap-3">
                          <MapPin className="w-4 h-4 text-[#f57c00] shrink-0 mt-0.5" />
                          <span>{sede.ubicacion}</span>
                        </div>
                      )}
                      {sede.telefono && (
                        <div className="flex items-center gap-3">
                          <Phone className="w-4 h-4 text-[#43a047] shrink-0" />
                          <a href={`tel:${sede.telefono}`} className="hover:text-[#43a047] transition-colors">
                            {sede.telefono}
                          </a>
                        </div>
                      )}
                      {sede.whatsapp && (
                        <div className="flex items-center gap-3">
                          <MessageCircle className="w-4 h-4 text-[#43a047] shrink-0" />
                          <a
                            href={`https://wa.me/${sede.whatsapp.replace(/\D/g, "")}`}
                            target="_blank" rel="noreferrer"
                            className="hover:text-[#43a047] transition-colors font-bold"
                          >
                            WhatsApp
                          </a>
                        </div>
                      )}
                      {sede.email && (
                        <div className="flex items-center gap-3">
                          <Mail className="w-4 h-4 text-[#fbc02d] shrink-0" />
                          <a href={`mailto:${sede.email}`} className="hover:text-[#f57c00] transition-colors truncate">
                            {sede.email}
                          </a>
                        </div>
                      )}
                    </div>

                    <div className="mt-auto">
                      <Link
                        href={`/cursos?sede=${sede.id}`}
                        className="w-full flex items-center justify-center gap-2 py-3.5 rounded-xl font-bold text-white hover:brightness-110 transition-all text-sm shadow-md"
                        style={{ backgroundColor: (sede as any).color || "#f57c00" }}
                      >
                        <BookOpen className="w-4 h-4" />
                        Ver Cursos de esta Sede
                      </Link>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          )}
        </section>
      </main>
      <Footer />
    </>
  );
}