"use client";
import { useEffect, useState } from "react";
import SamShell from "./components/SamShell";
import { apiGet, nombreCompleto, useMisCursos, type Asignacion, type Template } from "./lib/mis";
import { useSession } from "./lib/session";

export default function Home() {
  const { user } = useSession();
  const [templates, setTemplates] = useState<Template[]>([]);
  const [asignaciones, setAsignaciones] = useState<Record<number, Asignacion[]>>({});
  const { cursos, loading, error } = useMisCursos();

  useEffect(() => {
    apiGet("/templates").then(setTemplates).catch(() => {});
  }, []);

  useEffect(() => {
    if (!user || cursos.length === 0) return;
    cursos.forEach((c) => {
      apiGet(`/asignaciones?origen=${user.origen}&idCursos=${c.idCursos}`)
        .then((as: Asignacion[]) => setAsignaciones((m) => ({ ...m, [c.idCursos]: as })))
        .catch(() => {});
    });
  }, [user, cursos]);

  const tplNombre = (id: string) => templates.find((t) => t.id === id)?.nombre ?? "Prueba";
  const total = Object.values(asignaciones).reduce((s, as) => s + as.length, 0);

  return (
    <SamShell title="Mis cursos" subtitle={user ? `${nombreCompleto(user)} · ${user.origen === "SAM" ? "Plan central" : "Empresas"}` : ""} icon="bx-home" activeHref="/">
      {loading && <div className="spinner-border" role="status" />}
      {error && <div className="alert alert-danger">{error}</div>}
      <div className="row row-cards">
        {cursos.map((c) => (
          <div className="col-md-6" key={c.idCursos}>
            <div className="app-card p-3 h-100">
              <h6><i className="bx bx-book me-1" /> {c.nombreCurso}</h6>
              {(asignaciones[c.idCursos] ?? []).length === 0 ? (
                <p className="text-muted mb-0">Sin pruebas asignadas por ahora.</p>
              ) : (
                <ul className="mb-2">
                  {(asignaciones[c.idCursos] ?? []).map((a) => (
                    <li key={a.id}>{tplNombre(a.templateId)}</li>
                  ))}
                </ul>
              )}
              <a href="/rendir" className="btn btn-success btn-sm">Rendir</a>
            </div>
          </div>
        ))}
      </div>
      {cursos.length > 0 && (
        <p className="text-muted">Tienes {total} prueba(s) asignada(s) en {cursos.length} curso(s) con matrícula activa.</p>
      )}
    </SamShell>
  );
}