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

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

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

  useEffect(() => {
    if (!user) return;
    apiGet(`/cursos/${user.origen === "SAM" ? "sam" : "empresa"}`)
      .then(setCursosTodos)
      .catch(() => {});
  }, [user]);

  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 planDe = (id: number) => cursosTodos.find((c) => c.idCursos === id)?.planNombre ?? "Otros";
  const total = Object.values(asignaciones).reduce((s, as) => s + as.length, 0);
  const grupos = new Map<string, typeof cursos>();
  cursos.forEach((c) => {
    const p = planDe(c.idCursos);
    if (!grupos.has(p)) grupos.set(p, []);
    grupos.get(p)!.push(c);
  });

  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>}
      {[...grupos.entries()].map(([plan, cs]) => (
        <div key={plan} className="mb-3">
          <div className="section-header mb-2"><i className="bx bx-book me-1" /> {plan} <span className="badge bg-light text-dark">{cs.length}</span></div>
          <div className="row row-cards">
            {cs.map((c) => (
              <div className="col-md-6" key={c.idCursos}>
                <div className="app-card p-3 h-100">
                  <h6>{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>
        </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>
  );
}