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

export default function Resultados() {
  const { user } = useSession();
  const { cursos } = useMisCursos();
  const [templates, setTemplates] = useState<Template[]>([]);
  const [rows, setRows] = useState<(Rendicion & { prueba: string; curso: string })[]>([]);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState("");

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

  useEffect(() => {
    if (!user || cursos.length === 0) return;
    (async () => {
      setLoading(true);
      try {
        const todas: (Rendicion & { prueba: string; curso: string })[] = [];
        for (const c of cursos) {
          const as: Asignacion[] = await apiGet(`/asignaciones?origen=${user.origen}&idCursos=${c.idCursos}`);
          for (const a of as) {
            const rs: Rendicion[] = await apiGet(`/asignaciones/${a.id}/rendiciones`);
            const tpl = templates.find((t) => t.id === a.templateId)?.nombre ?? "Prueba";
            rs.filter((r) => r.idAlumno === user.idAlumno).forEach((r) =>
              todas.push({ ...r, prueba: tpl, curso: c.nombreCurso })
            );
          }
        }
        setRows(todas.sort((x, y) => y.inicio.localeCompare(x.inicio)));
      } catch (e: any) {
        setError(e.message);
      } finally {
        setLoading(false);
      }
    })();
  }, [user, cursos, templates]);

  return (
    <SamShell title="Mis resultados" subtitle="Historial de tus rendiciones." icon="bx-bar-chart-alt-2" activeHref="/resultados">
      {error && <div className="alert alert-danger">{error}</div>}
      {loading && <div className="spinner-border" role="status" />}
      <table className="table table-striped">
        <thead><tr><th>Prueba</th><th>Curso</th><th>Puntaje</th><th>Estado</th><th>Fecha</th></tr></thead>
        <tbody>
          {rows.map((r) => (
            <tr key={r.id}>
              <td>{r.prueba}</td>
              <td>{r.curso}</td>
              <td>{r.puntajeObtenido ?? "—"}/{r.puntajeMaximo ?? "—"}</td>
              <td>
                {!r.termino ? <span className="badge bg-secondary">Sin cerrar</span>
                  : r.aprobado ? <span className="badge bg-success">Aprobado</span>
                  : <span className="badge bg-danger">Reprobado</span>}
              </td>
              <td>{new Date(r.inicio).toLocaleString()}</td>
            </tr>
          ))}
        </tbody>
      </table>
      {rows.length === 0 && !loading && <p className="text-muted">Aún no tienes rendiciones.</p>}
    </SamShell>
  );
}