import React from 'react';
import { db } from "@/lib/db";
import { curso, colegio } from "@/db/schema";
import { eq } from "drizzle-orm";
import { notFound } from 'next/navigation';
import Navbar from '@/components/front/Navbar';
import Footer from '@/components/front/Footer';
import InscripcionForm from './InscripcionForm';
import Link from 'next/link';

export const dynamic = "force-dynamic";

export default async function InscripcionCursoPage({ params }: { params: Promise<{ id: string }> }) {
  const { id } = await params;
  
  const cursoResult = await db
    .select({
      curso: curso,
      nombreColegio: colegio.nombre
    })
    .from(curso)
    .innerJoin(colegio, eq(curso.colegioId, colegio.id))
    .where(eq(curso.id, id))
    .limit(1);

  if (cursoResult.length === 0) {
    notFound();
  }

  const cursoData = cursoResult[0].curso;
  const nombreColegio = cursoResult[0].nombreColegio;

  return (
    <>
      <Navbar />
      <div className="min-h-screen bg-[#fafafa] flex flex-col pt-10 pb-24">
        <div className="max-w-3xl mx-auto w-full px-6">
          <div className="mb-8">
            <Link href={`/cursos/${cursoData.id}`} className="text-gray-400 font-semibold hover:text-[#0066ff] transition-colors flex items-center gap-2">
              ← Volver a los detalles del curso
            </Link>
          </div>

          <div className="bg-white rounded-3xl shadow-xl shadow-gray-200/50 p-8 md:p-12 border border-gray-100 relative overflow-hidden">
             <div className="absolute top-0 left-0 w-full h-2 bg-[#0066ff]"></div>
             
             <div className="mb-10 text-center">
               <h1 className="text-3xl font-extrabold text-[#1e2a47] mb-3">Formulario de Inscripción</h1>
               <p className="text-gray-500 font-medium">Estás a punto de registrarte en el curso:</p>
               <h2 className="text-2xl font-black text-[#f57c00] mt-2">{cursoData.titulo}</h2>
               <p className="text-sm font-semibold text-gray-400 mt-2">Sede: {nombreColegio}</p>
             </div>

             <InscripcionForm cursoId={cursoData.id} tituloCurso={cursoData.titulo} />
          </div>
        </div>
      </div>
      <Footer />
    </>
  );
}