"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import { Plus, XCircle, Trash2, Edit, BookOpen, Beaker, Monitor, ArrowLeft, AlertTriangle } from "lucide-react";
import { createClase, updateClase, deleteClase } from "@/app/actions/clases";
import Link from "next/link";

type Clase = {
  id: string; numero: number; titulo: string; descripcion: string | null;
  contenido: string | null; requisitos: string | null; modalidad: string;
  duracionHoras: number; materialesNecesarios: string | null;
  fechaInicio: Date; fechaFin: Date; estado: string;
  activo: boolean;
};

type Curso = {
  id: string; titulo: string; colegioId: string;
  colegio: { id: string; nombre: string };
};

const MODALIDADES = [
  { val: "TEORICA", label: "📖 Teórica", icon: "📖", color: "bg-blue-100 text-blue-700" },
  { val: "PRACTICA", label: "🔧 Práctica", icon: "🔧", color: "bg-orange-100 text-orange-700" },
  { val: "MIXTA", label: "📖🔧 Mixta", icon: "📖🔧", color: "bg-purple-100 text-purple-700" },
];

export default function ClasesClient({ curso, clases }: { curso: Curso; clases: Clase[] }) {
  const router = useRouter();
  const [showCreate, setShowCreate] = useState(false);
  const [editing, setEditing] = useState<Clase | null>(null);
  const [errorMsg, setErrorMsg] = useState("");

  const totalHoras = clases.reduce((sum, c) => sum + c.duracionHoras, 0);

  return (
    <div className="p-8 max-w-6xl mx-auto">
      {/* Header */}
      <div className="mb-8">
        <Link href="/dashboard/cursos"
          className="text-sm text-gray-500 hover:text-[#0066ff] flex items-center gap-1 mb-3 font-semibold transition-colors">
          <ArrowLeft className="w-4 h-4" /> Volver a Cursos
        </Link>
        <div className="flex flex-wrap justify-between items-start gap-4">
          <div>
            <h1 className="text-3xl font-extrabold text-gray-800">
              Estructura de Clases
            </h1>
            <p className="text-gray-500 mt-1">
              📘 <span className="font-semibold text-[#1e2a47]">{curso.titulo}</span> — 🏫 {curso.colegio.nombre}
            </p>
          </div>
          <div className="flex items-center gap-3">
            <div className="bg-gray-100 rounded-lg px-4 py-2 text-sm font-semibold text-gray-600">
              {clases.length} clases · {totalHoras}h totales
            </div>
            <button onClick={() => setShowCreate(true)}
              className="bg-[#0066ff] hover:bg-blue-700 text-white font-bold py-3 px-5 rounded-lg flex items-center gap-2 shadow-sm transition-colors">
              <Plus className="w-5 h-5" /> Nueva Clase
            </button>
          </div>
        </div>
      </div>

      {errorMsg && (
        <div className="bg-red-50 text-red-700 p-4 mb-6 rounded-lg font-semibold">{errorMsg}</div>
      )}

      {/* Lista de clases */}
      {clases.length === 0 ? (
        <div className="bg-white rounded-2xl shadow-sm border border-gray-100 p-16 text-center text-gray-400">
          <BookOpen className="w-14 h-14 mx-auto mb-4 text-gray-200" />
          <p className="text-lg font-semibold mb-2">Sin clases definidas</p>
          <p className="text-sm">Agrega la primera clase para definir la estructura del curso.</p>
        </div>
      ) : (
        <div className="space-y-3">
          {clases.map(clase => {
            const mod = MODALIDADES.find(m => m.val === clase.modalidad) || MODALIDADES[2];
            return (
              <div key={clase.id} className="bg-white rounded-xl shadow-sm border border-gray-100 p-5 hover:shadow-md transition-shadow">
                <div className="flex items-start gap-4">
                  {/* Número */}
                  <div className="w-12 h-12 rounded-xl bg-[#1e2a47] text-white font-extrabold flex items-center justify-center text-lg flex-shrink-0">
                    {clase.numero}
                  </div>

                  {/* Contenido */}
                  <div className="flex-1 min-w-0">
                    <div className="flex items-center gap-2 mb-1 flex-wrap">
                      <h3 className="font-bold text-gray-800 text-[15px]">{clase.titulo}</h3>
                      <span className={`px-2 py-0.5 rounded-full text-[10px] font-bold ${mod.color}`}>
                        {mod.label}
                      </span>
                      <span className="text-xs text-gray-400 font-semibold">⏱ {clase.duracionHoras}h</span>
                      <span className={`px-2 py-0.5 rounded-full text-[10px] font-bold ${
                        clase.estado === "DICTADA" ? "bg-green-100 text-green-700" :
                        clase.estado === "CANCELADA" ? "bg-red-100 text-red-700" :
                        "bg-yellow-100 text-yellow-700"
                      }`}>
                        {clase.estado}
                      </span>
                    </div>

                    {clase.descripcion && (
                      <p className="text-sm text-gray-600 mb-1">{clase.descripcion}</p>
                    )}

                    <div className="flex flex-wrap gap-x-6 gap-y-1 text-xs text-gray-500 mt-2">
                      {clase.contenido && (
                        <span><strong className="text-gray-700">📋 Contenido:</strong> {clase.contenido.slice(0, 80)}...</span>
                      )}
                      {clase.requisitos && (
                        <span><strong className="text-gray-700">📝 Requisitos:</strong> {clase.requisitos.slice(0, 60)}...</span>
                      )}
                      {clase.materialesNecesarios && (
                        <span><strong className="text-gray-700">🧰 Materiales:</strong> {clase.materialesNecesarios.slice(0, 60)}...</span>
                      )}
                    </div>
                  </div>

                  {/* Acciones */}
                  <div className="flex gap-1 flex-shrink-0">
                    <button onClick={() => setEditing(clase)}
                      className="text-blue-500 hover:bg-blue-50 p-2 rounded transition-colors">
                      <Edit className="w-4 h-4" />
                    </button>
                    <button onClick={async () => {
                      if (confirm("¿Eliminar esta clase?")) {
                        const res = await deleteClase(clase.id);
                        if (!res.success) setErrorMsg(res.error || "Error");
                      }
                    }}
                      className="text-red-500 hover:bg-red-50 p-2 rounded transition-colors">
                      <Trash2 className="w-4 h-4" />
                    </button>
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      )}

      {/* Modal Crear */}
      {showCreate && (
        <Modal title="Nueva Clase" onClose={() => setShowCreate(false)}>
          <ClaseForm
            cursoId={curso.id}
            colegioId={curso.colegioId}
            nextNumero={clases.length + 1}
            onSubmit={async (fd) => { 
              const res = await createClase(fd); 
              if (res.success) {
                setShowCreate(false); 
                router.refresh();
                return { success: true };
              } else {
                return { success: false, error: res.error || "Error al crear la clase" };
              }
            }}
            onCancel={() => setShowCreate(false)}
          />
        </Modal>
      )}

      {/* Modal Editar */}
      {editing && (
        <Modal title={`Editar: ${editing.titulo}`} onClose={() => setEditing(null)}>
          <ClaseForm
            cursoId={curso.id}
            colegioId={curso.colegioId}
            defaults={editing}
            nextNumero={editing.numero}
            isEdit
            onSubmit={async (fd) => { 
              const res = await updateClase(editing.id, fd); 
              if (res.success) {
                setEditing(null); 
                router.refresh();
                return { success: true };
              } else {
                return { success: false, error: res.error || "Error al actualizar la clase" };
              }
            }}
            onCancel={() => setEditing(null)}
          />
        </Modal>
      )}
    </div>
  );
}

// ─── Formulario ──────────────────────────────────────────────────────────────
function ClaseForm({ cursoId, colegioId, defaults, nextNumero, isEdit, onSubmit, onCancel }: {
  cursoId: string; colegioId: string; defaults?: Clase | null;
  nextNumero: number; isEdit?: boolean;
  onSubmit: (fd: FormData) => Promise<{ success: boolean; error?: string }>; onCancel: () => void;
}) {
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [error, setError] = useState("");
  const fmtDate = (d: Date | string | null) => {
    if (!d) return "";
    const dt = new Date(d);
    return dt.toISOString().slice(0, 10);
  };

  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    setError("");
    setIsSubmitting(true);
    const fd = new FormData(e.currentTarget);
    fd.set("cursoId", cursoId);
    fd.set("colegioId", colegioId);
    fd.set("fechaFin", fd.get("fechaInicio") as string);
    const res = await onSubmit(fd);
    if (!res.success) {
      setError(res.error || "Ocurrió un error.");
    }
    setIsSubmitting(false);
  };

  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>
      )}
      <div className="grid grid-cols-3 gap-4">
        <div>
          <label className="block text-xs font-semibold text-gray-700 mb-1"># Clase</label>
          <input name="numero" type="number" min="1" defaultValue={nextNumero}
            className="w-full border border-gray-200 p-3 rounded-lg focus:ring-2 focus:ring-[#0066ff] outline-none" />
        </div>
        <div className="col-span-2">
          <label className="block text-xs font-semibold text-gray-700 mb-1">Título *</label>
          <input required name="titulo" defaultValue={defaults?.titulo || ""}
            placeholder="Ej. Introducción al corte de cabello"
            className="w-full border border-gray-200 p-3 rounded-lg focus:ring-2 focus:ring-[#0066ff] outline-none" />
        </div>
      </div>

      <div>
        <label className="block text-xs font-semibold text-gray-700 mb-1">Descripción</label>
        <textarea name="descripcion" rows={2} defaultValue={defaults?.descripcion || ""}
          placeholder="Resumen breve de la clase..."
          className="w-full border border-gray-200 p-3 rounded-lg focus:ring-2 focus:ring-[#0066ff] outline-none resize-none" />
      </div>

      <div>
        <label className="block text-xs font-semibold text-gray-700 mb-1">📋 Contenido (qué se va a dar)</label>
        <textarea name="contenido" rows={3} defaultValue={defaults?.contenido || ""}
          placeholder="Detalle del tema, objetivos, puntos a cubrir..."
          className="w-full border border-gray-200 p-3 rounded-lg focus:ring-2 focus:ring-[#0066ff] outline-none resize-none" />
      </div>

      <div className="grid grid-cols-2 gap-4">
        <div>
          <label className="block text-xs font-semibold text-gray-700 mb-1">📝 Requisitos</label>
          <textarea name="requisitos" rows={2} defaultValue={defaults?.requisitos || ""}
            placeholder="Conocimientos previos, herramientas..."
            className="w-full border border-gray-200 p-3 rounded-lg focus:ring-2 focus:ring-[#0066ff] outline-none resize-none" />
        </div>
        <div>
          <label className="block text-xs font-semibold text-gray-700 mb-1">🧰 Materiales necesarios</label>
          <textarea name="materialesNecesarios" rows={2} defaultValue={defaults?.materialesNecesarios || ""}
            placeholder="Tijeras, peine, crema..."
            className="w-full border border-gray-200 p-3 rounded-lg focus:ring-2 focus:ring-[#0066ff] outline-none resize-none" />
        </div>
      </div>

      <div className="grid grid-cols-3 gap-4">
        <div>
          <label className="block text-xs font-semibold text-gray-700 mb-1">Modalidad</label>
          <select name="modalidad" defaultValue={defaults?.modalidad || "MIXTA"}
            className="w-full border border-gray-200 p-3 rounded-lg focus:ring-2 focus:ring-[#0066ff] outline-none bg-white">
            <option value="TEORICA">📖 Teórica</option>
            <option value="PRACTICA">🔧 Práctica</option>
            <option value="MIXTA">📖🔧 Mixta</option>
          </select>
        </div>
        <div>
          <label className="block text-xs font-semibold text-gray-700 mb-1">Duración (horas)</label>
          <input name="duracionHoras" type="number" step="0.5" min="0.5" defaultValue={defaults?.duracionHoras || 2}
            className="w-full border border-gray-200 p-3 rounded-lg focus:ring-2 focus:ring-[#0066ff] outline-none" />
        </div>
        {isEdit && (
          <div>
            <label className="block text-xs font-semibold text-gray-700 mb-1">Estado</label>
            <select name="estado" defaultValue={defaults?.estado || "PROGRAMADA"}
              className="w-full border border-gray-200 p-3 rounded-lg focus:ring-2 focus:ring-[#0066ff] outline-none bg-white">
              <option value="PROGRAMADA">📅 Programada</option>
              <option value="DICTADA">✅ Dictada</option>
              <option value="CANCELADA">❌ Cancelada</option>
            </select>
          </div>
        )}
      </div>

      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
        <div>
          <label className="block text-xs font-semibold text-gray-700 mb-1">Fecha de la Clase *</label>
          <input required name="fechaInicio" type="date" defaultValue={fmtDate(defaults?.fechaInicio || null)}
            className="w-full border border-gray-200 p-3 rounded-lg focus:ring-2 focus:ring-[#0066ff] outline-none" />
        </div>
        {/* Helper invisible state/info if needed */}
        <div className="hidden sm:block"></div>
      </div>

      <div className="pt-4 flex justify-end 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-[#f04b50] text-white px-6 py-3 rounded-lg font-bold transition-colors shadow-md disabled:opacity-50 flex items-center gap-2">
          {isSubmitting ? <span className="animate-spin block">⟳</span> : null}
          {isEdit ? "Guardar Cambios" : "Crear Clase"}
        </button>
      </div>
    </form>
  );
}

function Modal({ title, onClose, children }: { title: string; onClose: () => void; children: React.ReactNode }) {
  return (
    <div className="fixed inset-0 bg-black/50 backdrop-blur-sm z-50 flex items-center justify-center p-4">
      <div className="bg-white rounded-2xl w-full max-w-2xl shadow-2xl p-8 max-h-[90vh] overflow-y-auto">
        <div className="flex justify-between items-center mb-6">
          <h2 className="text-xl font-bold text-gray-800">{title}</h2>
          <button onClick={onClose} className="text-gray-400 hover:text-gray-600"><XCircle className="w-6 h-6" /></button>
        </div>
        {children}
      </div>
    </div>
  );
}