"use client";

import { useState, useRef, useEffect } from "react";
import { useRouter } from "next/navigation";
import { Trash2, Edit, Plus, CheckCircle, XCircle, Building2, AlertTriangle, Users, UserCircle, ChevronDown, Search, Info, BookOpen } from "lucide-react";
import { deleteCurso, createCurso, updateCurso } from "@/app/actions/cursos";
import Link from "next/link";
import DataTable from "@/components/ui/DataTable";
import dynamic from "next/dynamic";
import "react-quill-new/dist/quill.snow.css";

const ReactQuill = dynamic(() => import("react-quill-new"), { ssr: false });

type Colegio    = { id: string; nombre: string };
type Categoria  = { id: string; nombre: string; icono: string | null };
type Instructor = { id: string; name: string | null; email: string; colegioId: string | null };
type Estudiante = { id: string; name: string | null; email: string; colegioId: string | null };
type Curso = {
  id: string; titulo: string; precio: number; inscritosCount: number;
  fechaInicio: Date; detallesGraduacion: string | null; categoria: string;
  matriculaMax: number | null; colegio: Colegio;
  horaEntrada: string | null; horaSalida: string | null;
  instructorIds: string[]; instructorNombres: string[];
  estudianteIds?: string[];
  tipoCobro: "GRATIS" | "PAGO" | "COLABORACION";
};

// ─── Componente de Selección con Búsqueda ──────────────────────────────────
function SearchableSelect({ 
  label, 
  options, 
  value: initialValue, 
  onChange, 
  placeholder, 
  required,
  name
}: { 
  label: string; 
  options: { id: string; label: string; icon?: string }[]; 
  value: string; 
  onChange: (val: string) => void;
  placeholder?: string;
  required?: boolean;
  name?: string;
}) {
  const [isOpen, setIsOpen] = useState(false);
  const [search, setSearch] = useState("");
  const [internalValue, setInternalValue] = useState(initialValue);
  const containerRef = useRef<HTMLDivElement>(null);

  // Sincronizar valor externo si cambia
  useEffect(() => {
    setInternalValue(initialValue);
  }, [initialValue]);

  const filtered = options.filter(o => 
    o.label.toLowerCase().includes(search.toLowerCase())
  );

  const selected = options.find(o => o.id === internalValue);

  useEffect(() => {
    const handleClick = (e: MouseEvent) => {
      if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
        setIsOpen(false);
      }
    };
    document.addEventListener("mousedown", handleClick);
    return () => document.removeEventListener("mousedown", handleClick);
  }, []);

  return (
    <div className="relative" ref={containerRef}>
      <label className="block text-sm font-semibold text-gray-700 mb-1">{label} {required && "*"}</label>
      <div 
        onClick={() => setIsOpen(!isOpen)}
        className={`w-full border border-gray-200 p-3 rounded-lg flex justify-between items-center transition-all bg-white cursor-pointer ${isOpen ? 'ring-2 ring-blue-500 border-blue-500' : 'hover:border-gray-300 shadow-sm'}`}
      >
        <span className={`truncate ${selected ? "text-gray-800 font-medium" : "text-gray-400"}`}>
          {selected ? (selected.icon ? `${selected.icon} ${selected.label}` : selected.label) : (placeholder || "-- Seleccionar --")}
        </span>
        <ChevronDown className={`w-4 h-4 text-gray-400 transition-transform duration-200 ${isOpen ? 'rotate-180' : ''}`} />
      </div>
      <input type="hidden" name={name} value={internalValue} required={required} />
      
      {isOpen && (
        <div className="absolute z-[110] w-full mt-1 bg-white border border-gray-200 rounded-xl shadow-2xl overflow-hidden animate-in fade-in slide-in-from-top-2 duration-200">
          <div className="p-3 border-b border-gray-100 bg-gray-50/50">
            <div className="relative">
              <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
              <input 
                autoFocus
                type="text" 
                placeholder="Escribe para buscar..." 
                value={search}
                onChange={e => setSearch(e.target.value)}
                className="w-full pl-10 pr-4 py-2 text-sm border border-gray-200 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-all shadow-inner"
              />
            </div>
          </div>
          <div className="max-h-64 overflow-y-auto p-1 custom-scrollbar">
            {filtered.length > 0 ? (
              filtered.map(opt => (
                <div 
                  key={opt.id}
                  onClick={() => { 
                    setInternalValue(opt.id);
                    onChange(opt.id); 
                    setIsOpen(false); 
                    setSearch(""); 
                  }}
                  className={`flex items-center gap-3 px-4 py-2.5 rounded-lg cursor-pointer transition-all mb-0.5 ${internalValue === opt.id ? 'bg-blue-600 text-white shadow-md' : 'hover:bg-blue-50 text-gray-700'}`}
                >
                  {opt.icon && <span className="text-lg">{opt.icon}</span>}
                  <span className="text-[14px] font-semibold">{opt.label}</span>
                  {internalValue === opt.id && <CheckCircle className="w-4 h-4 ml-auto" />}
                </div>
              ))
            ) : (
              <div className="p-8 text-center">
                <p className="text-gray-400 text-sm">No se encontraron resultados</p>
              </div>
            )}
          </div>
        </div>
      )}
    </div>
  );
}

export default function CursosListClient({
  cursos, colegios, categorias, instructores, estudiantes
}: { cursos: Curso[]; colegios: Colegio[]; categorias: Categoria[]; instructores: Instructor[]; estudiantes: Estudiante[] }) {
  const router = useRouter();
  const [loadingId, setLoadingId] = useState<string | null>(null);
  const [showCreateModal, setShowCreateModal] = useState(false);
  const [editingCurso, setEditingCurso] = useState<Curso | null>(null);
  const [errorMsg, setErrorMsg] = useState("");
  const [filtroSede, setFiltroSede] = useState("");

  const cursosVisibles = filtroSede ? cursos.filter(c => c.colegio.id === filtroSede) : cursos;

  const handleDelete = async (id: string, inscritos: number) => {
    if (inscritos > 0) { alert("Bloqueado: El curso tiene alumnos inscritos."); return; }
    if (confirm("¿Ocultar e inhabilitar este curso?")) {
      setLoadingId(id);
      const res = await deleteCurso(id);
      if (!res.success) setErrorMsg(res.error || "Error.");
      setLoadingId(null);
    }
  };

  return (
    <div className="p-8 max-w-7xl mx-auto">
      <div className="flex justify-between items-center mb-8">
        <div>
          <h1 className="text-3xl font-extrabold text-gray-800">Cursos Registrados</h1>
          <p className="text-gray-500">Gestión académica y de matrículas.</p>
        </div>
        <button onClick={() => setShowCreateModal(true)}
          className="bg-[#0066ff] hover:bg-blue-700 text-white font-bold py-3 px-6 rounded-lg flex items-center gap-2 shadow-sm transition-colors">
          <Plus className="w-5 h-5" /> Crear Curso
        </button>
      </div>

      {errorMsg && (
        <div className="bg-red-50 text-red-700 p-4 mb-6 rounded-lg font-semibold flex gap-2 items-center">
          <AlertTriangle className="w-5 h-5 shrink-0" /> {errorMsg}
        </div>
      )}

      {/* Filtro Sede para SuperAdmin */}
      {colegios.length > 1 && (
        <div className="mb-6 bg-white p-4 rounded-xl shadow-sm border border-gray-100 flex items-center gap-4">
          <label className="font-semibold text-gray-700 text-sm">Filtrar por Institución:</label>
          <select value={filtroSede} onChange={e => setFiltroSede(e.target.value)}
            className="border border-gray-200 p-2 rounded-lg focus:ring-2 focus:ring-[#0066ff] outline-none bg-gray-50 text-sm min-w-[250px]">
            <option value="">Todas las Sedes / Colegios</option>
            {colegios.map(c => <option key={c.id} value={c.id}>{c.nombre}</option>)}
          </select>
        </div>
      )}

      <DataTable
        data={cursosVisibles}
        title="Cursos Registrados"
        exportFilename="cursos"
        searchPlaceholder="Buscar curso..."
        searchKeys={["titulo", "categoria"]}
        pageSize={10}
        columns={[
          { key: "colegio", label: "Sede", render: c => (
            <span className="font-semibold text-gray-800">{c.colegio.nombre}</span>
          ), exportValue: c => c.colegio.nombre },
          { key: "titulo", label: "Curso", render: c => (
            <div>
              <div className="font-bold text-gray-800">{c.titulo}</div>
              {c.instructorNombres.length > 0 && (
                <div className="flex flex-wrap gap-1 mt-1">
                  {c.instructorNombres.map((n: string) => (
                    <span key={n} className="bg-purple-50 text-purple-600 text-[10px] font-bold px-2 py-0.5 rounded-full">👤 {n}</span>
                  ))}
                </div>
              )}
            </div>
          ), exportValue: c => c.titulo },
          { key: "categoria", label: "Categoría", render: c => (
            <span className="bg-blue-50 text-blue-700 px-3 py-1 rounded-full text-xs font-semibold">{c.categoria}</span>
          ) },
          { key: "inscritosCount", label: "Inscritos", render: c => (
            <span className={`inline-flex px-3 py-1 rounded-full text-xs font-bold ${c.inscritosCount > 0 ? 'bg-orange-100 text-orange-700' : 'bg-gray-100 text-gray-500'}`}>
              {c.inscritosCount} / {c.matriculaMax ?? '∞'}
            </span>
          ), exportValue: c => `${c.inscritosCount}/${c.matriculaMax ?? '∞'}` },
          { key: "tipoCobro", label: "Tipo / Precio", render: c => (
            <div>
               <span className={`px-2 py-0.5 rounded text-[10px] font-bold uppercase ${c.tipoCobro === 'GRATIS' ? 'bg-green-100 text-green-700' : c.tipoCobro === 'COLABORACION' ? 'bg-yellow-100 text-yellow-700' : 'bg-gray-200 text-gray-700'}`}>{c.tipoCobro}</span>
               {c.tipoCobro === 'PAGO' && <div className="font-extrabold text-[#1e2a47] mt-1">${c.precio.toFixed(2)}</div>}
            </div>
          ), exportValue: c => c.tipoCobro === 'PAGO' ? `$${c.precio.toFixed(2)}` : c.tipoCobro },
        ]}
        actions={curso => (
          <div className="flex justify-end gap-1">
            <Link href={`/dashboard/cursos/${curso.id}/clases`}
              className="text-purple-500 hover:bg-purple-50 p-2 rounded transition-colors" title="Clases">
              <BookOpen className="w-4 h-4" />
            </Link>
            <button onClick={() => setEditingCurso(curso)} className="text-blue-500 hover:bg-blue-50 p-2 rounded transition-colors">
              <Edit className="w-4 h-4" />
            </button>
            <button onClick={() => handleDelete(curso.id, curso.inscritosCount)} disabled={loadingId === curso.id}
              className="text-red-500 hover:bg-red-50 p-2 rounded transition-colors disabled:opacity-50">
              {loadingId === curso.id ? <span className="animate-spin block">⟳</span> : <Trash2 className="w-4 h-4" />}
            </button>
          </div>
        )}
      />

      {/* Modal Crear */}
      {showCreateModal && (
        <Modal title="Crear Nuevo Curso" onClose={() => setShowCreateModal(false)}>
          <CursoForm
            colegios={colegios}
            categorias={categorias}
            instructores={instructores}
            estudiantes={estudiantes}
            onSubmit={async (fd) => {
              const res = await createCurso(fd);
              if (res.success) {
                setShowCreateModal(false);
                router.refresh();
                return { success: true };
              } else {
                return { success: false, error: res.error || "Error al crear" };
              }
            }}
            onCancel={() => setShowCreateModal(false)}
          />
        </Modal>
      )}

      {/* Modal Editar */}
      {editingCurso && (
        <Modal title={`Editar: ${editingCurso.titulo}`} onClose={() => setEditingCurso(null)}>
          <CursoForm
            colegios={colegios}
            categorias={categorias}
            instructores={instructores}
            estudiantes={estudiantes}
            defaults={editingCurso}
            isEdit
            onSubmit={async (fd) => {
              const res = await updateCurso(editingCurso.id, fd);
              if (res.success) {
                setEditingCurso(null);
                router.refresh();
                return { success: true };
              } else {
                return { success: false, error: res.error || "Error al actualizar" };
              }
            }}
            onCancel={() => setEditingCurso(null)}
          />
        </Modal>
      )}
    </div>
  );
}

// ─── Formulario de Curso ───────────────────────────────────────────────────
function CursoForm({ colegios, categorias, instructores, estudiantes, defaults, isEdit = false, onSubmit, onCancel }: {
  colegios: Colegio[]; categorias: Categoria[]; instructores: Instructor[]; estudiantes: Estudiante[];
  defaults?: Curso | null;
  isEdit?: boolean; onSubmit: (fd: FormData) => Promise<{ success: boolean; error?: string }>; onCancel: () => void;
}) {
  const [selectedColegioId, setSelectedColegioId] = useState(
    defaults?.colegio.id || (colegios.length === 1 ? colegios[0].id : "")
  );
  const [selectedInstructors, setSelectedInstructors] = useState<string[]>(defaults?.instructorIds || []);
  const [selectedStudents, setSelectedStudents] = useState<string[]>(defaults?.estudianteIds || []);
  const [tipoCobro, setTipoCobro] = useState<"GRATIS" | "PAGO" | "COLABORACION">(defaults?.tipoCobro || "PAGO");
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [error, setError] = useState("");

  // Textos Estructurados RTF
  const [descripcion, setDescripcion] = useState<string>((defaults as any)?.descripcion || "");
  const [requisitos, setRequisitos] = useState<string>((defaults as any)?.requisitos || "");
  const [detallesGraduacion, setDetallesGraduacion] = useState<string>(defaults?.detallesGraduacion || "");

  const instructoresFiltrados = selectedColegioId 
    ? instructores.filter(i => i.colegioId === selectedColegioId)
    : [];

  const estudiantesFiltrados = selectedColegioId
    ? estudiantes.filter(e => e.colegioId === selectedColegioId)
    : [];

  const toggleInstructor = (id: string) => {
    setSelectedInstructors(prev =>
      prev.includes(id) ? prev.filter(x => x !== id) : [...prev, id]
    );
  };

  const toggleStudent = (id: string) => {
    setSelectedStudents(prev =>
      prev.includes(id) ? prev.filter(x => x !== id) : [...prev, id]
    );
  };

  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    setError("");
    setIsSubmitting(true);
    const fd = new FormData(e.currentTarget);
    // Añadir los campos RTF y Tipo Cobro
    fd.append("descripcion", descripcion);
    fd.append("requisitos", requisitos);
    fd.append("detallesGraduacion", detallesGraduacion);
    fd.append("tipoCobro", tipoCobro);

    // Limpiar instructores previos y añadir los seleccionados
    selectedInstructors.forEach(id => fd.append("instructorId", id));
    // Añadir estudiantes
    selectedStudents.forEach(id => fd.append("estudianteId", id));
    
    const res = await onSubmit(fd);
    if (!res.success) {
      setError(res.error || "Error al guardar el curso.");
    }
    setIsSubmitting(false);
  };
  
  const modules = {
    toolbar: [
      [{ 'header': [1, 2, 3, false] }],
      ['bold', 'italic', 'underline', 'strike', 'blockquote'],
      [{'list': 'ordered'}, {'list': 'bullet'}],
      ['clean']
    ]
  };

  return (
    <form onSubmit={handleSubmit} className="space-y-4">
      {error && (
        <div className="bg-red-50 text-red-700 p-3 rounded-lg text-sm font-bold flex gap-2 items-center">
          <AlertTriangle className="w-4 h-4 shrink-0" /> {error}
        </div>
      )}
      {!isEdit && colegios.length > 1 ? (
        <SearchableSelect 
          label="Sede Gestora"
          name="colegioId"
          required
          placeholder="-- Seleccionar Sede --"
          value={selectedColegioId}
          onChange={val => { 
            setSelectedColegioId(val); 
            setSelectedInstructors([]); 
            setSelectedStudents([]);
          }}
          options={colegios.map(c => ({ id: c.id, label: c.nombre }))}
        />
      ) : (
        <div className="bg-blue-50/50 rounded-xl px-5 py-4 border border-blue-100/50 flex items-center justify-between">
          <div className="flex items-center gap-3">
            <div className="bg-blue-600 p-2 rounded-lg text-white">
              <Building2 className="w-5 h-5" />
            </div>
            <div>
              <p className="text-[10px] uppercase tracking-wider text-blue-600 font-bold">Sede Vinculada</p>
              <h3 className="font-bold text-[#1e2a47] text-lg">
                {isEdit ? defaults?.colegio.nombre : (colegios.find(c => c.id === selectedColegioId)?.nombre || "Sin Sede")}
              </h3>
            </div>
          </div>
          <input type="hidden" name="colegioId" value={selectedColegioId} />
          {!isEdit && <span className="text-[10px] bg-blue-100 text-blue-700 px-2 py-1 rounded-full font-bold">Pre-asignado</span>}
        </div>
      )}

      <div>
        <label className="block text-sm font-semibold text-gray-700 mb-1">Título del Curso *</label>
        <input required name="titulo" type="text" defaultValue={defaults?.titulo || ""}
          placeholder="Ej. Barbería Profesional Nivel 1"
          className="w-full border border-gray-200 p-3 rounded-lg focus:ring-2 focus:ring-[#0066ff] outline-none" />
      </div>

      <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
        <div className="col-span-2">
          <SearchableSelect 
            label="Categoría"
            name="categoria"
            required
            placeholder="-- Seleccionar Categoría --"
            value={defaults?.categoria || ""}
            options={categorias.map(cat => ({ id: cat.nombre, label: cat.nombre, icon: cat.icono || undefined }))}
            onChange={() => {}} // Handle via form submission
          />
        </div>
        
        <div>
           <label className="block text-sm font-semibold text-gray-700 mb-1">Tipo de Ingreso *</label>
           <select 
             value={tipoCobro}
             onChange={e => setTipoCobro(e.target.value as any)}
             className="w-full border border-gray-200 p-3 rounded-lg focus:ring-2 focus:ring-[#0066ff] outline-none bg-white font-bold"
           >
             <option value="GRATIS">🎁 GRATIS</option>
             <option value="COLABORACION">🤝 COLABORACIÓN</option>
             <option value="PAGO">💰 DE PAGO</option>
           </select>
        </div>

        <div className="space-y-2">
          <label className="block text-sm font-semibold text-gray-700">Precio (USD) {tipoCobro === 'PAGO' ? '*' : ''}</label>
          <input name="precio" type="number" min="0" step="0.01"
            defaultValue={defaults?.precio || ""}
            disabled={tipoCobro !== 'PAGO'}
            className={`w-full border border-gray-200 p-3 rounded-lg focus:ring-2 focus:ring-[#0066ff] outline-none ${tipoCobro !== 'PAGO' ? 'bg-gray-100 opacity-50' : 'bg-white'}`} 
          />
          {/* Toggle mostrar precio */}
          <label className="flex items-center gap-2 cursor-pointer select-none">
            <input type="checkbox" name="mostrarPrecio"
              defaultChecked={(defaults as any)?.mostrarPrecio !== false}
              className="w-4 h-4 accent-[#0066ff]" />
            <span className="text-xs text-gray-600 font-semibold">Mostrar precio públicamente</span>
          </label>
        </div>
      </div>

      <div className="grid grid-cols-2 gap-4">
        <div>
          <label className="block text-sm font-semibold text-gray-700 mb-1">📅 Fecha de Inicio *</label>
          <input required name="fechaInicio" type="date"
            defaultValue={defaults?.fechaInicio ? new Date(defaults.fechaInicio).toISOString().slice(0,10) : ""}
            className="w-full border border-gray-200 p-3 rounded-lg focus:ring-2 focus:ring-[#0066ff] outline-none cursor-pointer" />
        </div>
        <div>
          <label className="block text-sm font-semibold text-gray-700 mb-1">Cupos Máximos</label>
          <input name="matriculaMax" type="number" min="1"
            defaultValue={defaults?.matriculaMax ?? ""}
            placeholder="Sin límite"
            className="w-full border border-gray-200 p-3 rounded-lg focus:ring-2 focus:ring-[#0066ff] outline-none" />
        </div>
      </div>

      <div className="grid grid-cols-2 gap-4">
        <div>
          <label className="block text-sm font-semibold text-gray-700 mb-1">🕐 Hora de Entrada</label>
          <input name="horaEntrada" type="time"
            defaultValue={defaults?.horaEntrada || ""}
            className="w-full border border-gray-200 p-3 rounded-lg focus:ring-2 focus:ring-[#0066ff] outline-none cursor-pointer" />
        </div>
        <div>
          <label className="block text-sm font-semibold text-gray-700 mb-1">🕔 Hora de Salida</label>
          <input name="horaSalida" type="time"
            defaultValue={defaults?.horaSalida || ""}
            className="w-full border border-gray-200 p-3 rounded-lg focus:ring-2 focus:ring-[#0066ff] outline-none cursor-pointer" />
        </div>
      </div>

      <div className="grid grid-cols-2 gap-4">
        <div>
          <label className="block text-sm font-semibold text-gray-700 mb-1">Duración (Semanas)</label>
          <input name="duracionSemanas" type="number" min="1"
            defaultValue={(defaults as any)?.duracionSemanas ?? ""}
            placeholder="Ej. 12"
            className="w-full border border-gray-200 p-3 rounded-lg focus:ring-2 focus:ring-[#0066ff] outline-none" />
        </div>
      </div>

      <div className="space-y-6 pt-2">
        <div>
          <label className="block text-sm font-semibold text-gray-700 mb-2">Descripción General del Curso</label>
          <div className="bg-white rounded-lg border border-gray-200 overflow-hidden quill-wrapper">
             <ReactQuill theme="snow" value={descripcion} onChange={setDescripcion} modules={modules} placeholder="Detalles, objetivos, módulos, materias..." />
          </div>
        </div>

        <div>
           <label className="block text-sm font-semibold text-gray-700 mb-2">Requisitos de Ingreso</label>
           <div className="bg-white rounded-lg border border-gray-200 overflow-hidden quill-wrapper">
             <ReactQuill theme="snow" value={requisitos} onChange={setRequisitos} modules={modules} placeholder="Edad, educación previa, materiales a llevar el primer día..." />
           </div>
        </div>

        <div>
           <label className="block text-sm font-semibold text-gray-700 mb-2">Detalles de Graduación / Certificacíon (Opcional)</label>
           <div className="bg-white rounded-lg border border-gray-200 overflow-hidden quill-wrapper">
             <ReactQuill theme="snow" value={detallesGraduacion} onChange={setDetallesGraduacion} modules={modules} placeholder="Acreditación MPPE, formalidad..." />
           </div>
        </div>
      </div>

      <style jsx global>{`
        .quill-wrapper .ql-toolbar { border: none; border-bottom: 1px solid #e5e7eb; background: #f9fafb; font-family: inherit; }
        .quill-wrapper .ql-container { border: none; font-size: 14px; font-family: inherit; min-height: 120px; }
        .quill-wrapper .ql-editor { min-height: 120px; }
      `}</style>

      {/* Instructores */}
      <div>
        <label className="block text-sm font-semibold text-gray-700 mb-2">
          👨‍🏫 Instructores asignados
          {selectedColegioId || isEdit
            ? <span className="text-gray-400 font-normal ml-2 text-xs">({instructoresFiltrados.length} disponibles)</span>
            : <span className="text-orange-400 font-normal ml-2 text-xs">Selecciona una sede primero</span>}
        </label>
        {instructoresFiltrados.length > 0 ? (
          <div className="border border-gray-200 rounded-lg divide-y divide-gray-100 max-h-48 overflow-y-auto">
            {instructoresFiltrados.map(inst => (
              <label key={inst.id}
                className={`flex items-center gap-3 px-4 py-3 cursor-pointer hover:bg-blue-50 transition-colors ${
                  selectedInstructors.includes(inst.id) ? 'bg-blue-50' : ''
                }`}>
                <input
                  type="checkbox"
                  checked={selectedInstructors.includes(inst.id)}
                  onChange={() => toggleInstructor(inst.id)}
                  className="w-4 h-4 accent-[#0066ff]"
                />
                <div>
                  <div className="font-semibold text-gray-800 text-sm">{inst.name || "Sin nombre"}</div>
                  <div className="text-xs text-gray-400">{inst.email}</div>
                </div>
                {selectedInstructors.includes(inst.id) && (
                  <span className="ml-auto text-[#0066ff] text-xs font-bold">✓ Asignado</span>
                )}
              </label>
            ))}
          </div>
        ) : (
          <div className="border border-dashed border-gray-200 rounded-lg p-6 text-center text-gray-400 text-sm">
            {selectedColegioId || isEdit
              ? "No hay instructores registrados en esta sede."
              : "Selecciona una sede para ver sus instructores."}
          </div>
        )}
      </div>

      {/* Estudiantes */}
      <div>
        <label className="block text-sm font-semibold text-gray-700 mb-2">
          🎓 Alumnos asignados
          <span className="text-gray-400 font-normal ml-2 text-xs">({estudiantesFiltrados.length} alumnos activos)</span>
        </label>
        {estudiantesFiltrados.length > 0 ? (
          <div className="border border-gray-200 rounded-lg divide-y divide-gray-100 max-h-48 overflow-y-auto">
            {estudiantesFiltrados.map(est => (
              <label key={est.id}
                className={`flex items-center gap-3 px-4 py-3 cursor-pointer hover:bg-blue-50 transition-colors ${
                  selectedStudents.includes(est.id) ? 'bg-blue-50' : ''
                }`}>
                <input
                  type="checkbox"
                  checked={selectedStudents.includes(est.id)}
                  onChange={() => toggleStudent(est.id)}
                  className="w-4 h-4 accent-[#0066ff]"
                />
                <div>
                  <div className="font-semibold text-gray-800 text-sm">{est.name || "Sin nombre"}</div>
                  <div className="text-xs text-gray-400">{est.email}</div>
                </div>
                {selectedStudents.includes(est.id) && (
                  <span className="ml-auto text-[#0066ff] text-xs font-bold">✓ Asignado</span>
                )}
              </label>
            ))}
          </div>
        ) : (
          <div className="border border-dashed border-gray-200 rounded-lg p-6 text-center text-gray-400 text-sm">
            {selectedColegioId || isEdit
              ? "No hay estudiantes activos registrados en esta sede."
              : "Selecciona una sede para ver sus estudiantes."}
          </div>
        )}
      </div>

      <div className="pt-8 flex justify-between items-center border-t border-gray-100 mt-4">
        <div>
           {isEdit && defaults?.id && (
             <Link href={`/dashboard/cursos/${defaults.id}/clases`} 
                   className="text-purple-600 font-bold bg-purple-50 hover:bg-purple-100 px-4 py-2 rounded-lg flex items-center gap-2 transition-colors border border-purple-200">
               📚 Gestionar Módulos y Clases
             </Link>
           )}
        </div>
        <div className="flex gap-3">
          <button type="button" onClick={onCancel} disabled={isSubmitting}
            className="px-5 py-3 rounded-lg font-semibold text-gray-600 hover:bg-gray-100 transition-colors disabled:opacity-50">Cancelar</button>
          <button type="submit" disabled={isSubmitting}
            className="bg-[#1e2a47] hover:bg-black text-white px-6 py-3 rounded-lg font-bold transition-colors shadow-md hover:shadow-lg disabled:opacity-50 flex items-center gap-2">
            {isSubmitting ? <span className="animate-spin block">⟳</span> : null}
            {isEdit ? "Guardar Cambios" : "Crear Curso"}
          </button>
        </div>
      </div>
    </form>
  );
}

// ─── UI Modal ──────────────────────────────────────────────────────────────
function Modal({ title, onClose, children }: { title: string; onClose: () => void; children: React.ReactNode }) {
  return (
    <div className="fixed inset-0 z-[100] overflow-y-auto bg-black/50 backdrop-blur-sm">
      <div className="flex min-h-full items-start md:items-center justify-center p-4 sm:p-6">
        <div className="w-full max-w-2xl bg-white rounded-2xl shadow-2xl relative my-8 md:my-12">
          <div className="sticky top-0 bg-white z-10 flex justify-between items-center p-6 md:p-8 border-b border-gray-100 rounded-t-2xl">
            <h2 className="text-xl font-bold text-gray-800">{title}</h2>
            <button type="button" onClick={onClose} className="text-gray-400 hover:text-red-500 transition-colors">
               <XCircle className="w-6 h-6" />
            </button>
          </div>
          <div className="p-6 md:p-8">
            {children}
          </div>
        </div>
      </div>
    </div>
  );
}