import { getServerSession } from 'next-auth';
import { redirect } from 'next/navigation';
import { authOptions } from '@/lib/auth';
import { prisma } from '@/lib/db';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Users, Trophy, Calendar, Target, BookOpen, Activity, FileText, Settings } from 'lucide-react';
import Link from 'next/link';

// Mapeo de nombres de iconos a componentes
const iconMap: Record<string, React.ElementType> = {
  Users, Trophy, Calendar, Target, BookOpen, Activity, FileText, Settings
};

interface ContenidoCMS {
  id: string;
  tipo: string;
  clave: string;
  titulo: string | null;
  contenido: string | null;
  icono: string | null;
  orden: number;
  activo: boolean;
}

async function getContenidoCMS() {
  try {
    const contenidos = await prisma.contenidoWeb.findMany({
      where: { activo: true },
      orderBy: [{ tipo: 'asc' }, { orden: 'asc' }]
    });
    return contenidos;
  } catch (error) {
    console.error('Error fetching CMS content:', error);
    return [];
  }
}

export default async function HomePage() {
  const session = await getServerSession(authOptions);

  if (session) {
    redirect('/dashboard');
  }

  const contenidos = await getContenidoCMS();
  
  // Organizar contenido por tipo
  const heroTitulo = contenidos.find((c: ContenidoCMS) => c.tipo === 'HERO_TITULO');
  const heroDesc = contenidos.find((c: ContenidoCMS) => c.tipo === 'HERO_DESCRIPCION');
  const seccionTitulo = contenidos.find((c: ContenidoCMS) => c.tipo === 'SECCION_TITULO');
  const features = contenidos.filter((c: ContenidoCMS) => c.tipo === 'FEATURE_CARD').sort((a: ContenidoCMS, b: ContenidoCMS) => a.orden - b.orden);
  const contacto = contenidos.find((c: ContenidoCMS) => c.tipo === 'CONTACTO');

  // Contenido por defecto si no hay CMS configurado
  const defaultFeatures = [
    { titulo: 'Gestión de Alumnos', contenido: 'Control completo de datos personales, evaluaciones y seguimiento del progreso de cada alumno.', icono: 'Users' },
    { titulo: 'Eventos y Asistencias', contenido: 'Organiza entrenamientos, amistosos y campeonatos con control detallado de asistencias.', icono: 'Calendar' },
    { titulo: 'Evaluaciones', contenido: 'Evaluaciones físicas y deportivas para el desarrollo integral de los jugadores.', icono: 'Activity' },
    { titulo: 'Objetivos Individuales', contenido: 'Seguimiento personalizado de objetivos técnicos, tácticos y psicológicos.', icono: 'Target' },
    { titulo: 'Gestión Financiera', contenido: 'Control de pagos, matrículas y finanzas de la escuela de manera transparente.', icono: 'BookOpen' },
    { titulo: 'Campeonatos', contenido: 'Gestión completa de campeonatos, planteles y estadísticas de competencia.', icono: 'Trophy' }
  ];

  const displayFeatures = features.length > 0 ? features : defaultFeatures;

  return (
    <div className="min-h-screen bg-gradient-to-b from-blue-50 to-white">
      {/* Header */}
      <header className="sticky top-0 z-50 bg-white/80 backdrop-blur-sm border-b shadow-sm">
        <div className="container max-w-6xl mx-auto px-4 py-4 flex items-center justify-between">
          <div className="flex items-center space-x-3">
            <div className="w-10 h-10 bg-blue-600 rounded-full flex items-center justify-center">
              <Trophy className="w-6 h-6 text-white" />
            </div>
            <h1 className="text-2xl font-bold text-gray-900">Escuela de Fútbol Lobezno</h1>
          </div>
          <Link href="/auth/signin">
            <Button className="bg-blue-600 hover:bg-blue-700">
              Ingresar al Sistema
            </Button>
          </Link>
        </div>
      </header>

      {/* Hero Section */}
      <section className="py-20 text-center">
        <div className="container max-w-4xl mx-auto px-4">
          <h2 className="text-5xl font-bold text-gray-900 mb-6">
            {heroTitulo?.titulo ? (
              <>
                {heroTitulo.titulo.split(heroTitulo.contenido || '')[0]}
                <span className="text-blue-600">{heroTitulo.contenido}</span>
                {heroTitulo.titulo.split(heroTitulo.contenido || '')[1]}
              </>
            ) : (
              <>Formando <span className="text-blue-600">Campeones</span> del Futuro</>
            )}
          </h2>
          <p className="text-xl text-gray-600 mb-8 leading-relaxed">
            {heroDesc?.contenido || 'Sistema integral de gestión para nuestra escuela de fútbol. Donde la pasión por el deporte se encuentra con la excelencia formativa.'}
          </p>
          <div className="flex flex-col sm:flex-row gap-4 justify-center">
            <Link href="/auth/signin">
              <Button size="lg" className="bg-blue-600 hover:bg-blue-700 px-8">
                Acceder al Sistema
              </Button>
            </Link>
            <a href="#features">
              <Button size="lg" variant="outline" className="px-8">
                Conocer Más
              </Button>
            </a>
          </div>
        </div>
      </section>

      {/* Features Grid */}
      <section id="features" className="py-16 bg-gray-50">
        <div className="container max-w-6xl mx-auto px-4">
          <h3 className="text-3xl font-bold text-center text-gray-900 mb-12">
            {seccionTitulo?.titulo || 'Sistema Integral de Gestión'}
          </h3>
          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
            {displayFeatures.map((feature: any, index: number) => {
              const IconComponent = iconMap[feature.icono || 'FileText'] || FileText;
              return (
                <Card key={feature.id || index} className="border-0 shadow-md hover:shadow-lg transition-shadow">
                  <CardHeader>
                    <IconComponent className="w-12 h-12 text-blue-600 mb-4" />
                    <CardTitle>{feature.titulo}</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <p className="text-gray-600">
                      {feature.contenido}
                    </p>
                  </CardContent>
                </Card>
              );
            })}
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer className="bg-gray-900 text-white py-12">
        <div className="container max-w-6xl mx-auto px-4 text-center">
          <div className="flex items-center justify-center space-x-3 mb-4">
            <div className="w-8 h-8 bg-blue-600 rounded-full flex items-center justify-center">
              <Trophy className="w-5 h-5 text-white" />
            </div>
            <h4 className="text-xl font-bold">{contacto?.titulo || 'Escuela de Fútbol Lobezno'}</h4>
          </div>
          <p className="text-gray-400 mb-4">
            {contacto?.contenido || 'Formando campeones dentro y fuera del campo'}
          </p>
          <p className="text-sm text-gray-500">
            © {new Date().getFullYear()} Escuela de Fútbol Lobezno. Todos los derechos reservados.
          </p>
        </div>
      </footer>
    </div>
  );
}