SIDAC/diplomas/src/pages/diplomasVista.jsx

import React, { useEffect, useState } from "react";
import Layout from "@/components/layout/Layout";
import { supabaseClient } from "@/utils/supabase";
import { Button } from "@/components/ui/button";
import VistaPreviaDiplomaDialog from "@/components/dialogs/vistaPreviaDiplomaDialog";

export default function DiplomasVista() {
  const [alumnos, setAlumnos] = useState([]);
  const [alumnoSeleccionado, setAlumnoSeleccionado] = useState(null);
  const [mostrarDialog, setMostrarDialog] = useState(false);

  // Estado compartido para los datos del diploma
  const [competencias, setCompetencias] = useState([]);
  const [competenciasAcreditadas, setCompetenciasAcreditadas] = useState([]);
  const [fecha, setFecha] = useState("");

  useEffect(() => {
    const cargarAlumnos = async () => {
      const { data, error } = await supabaseClient
        .from("alumno")
        .select(
          `
          id,
          nombre,
          correo,
          telefono,
          tipo_formacion,
          curso_id,
          curso(id, nombre),
          inyeccion_id,
          inyeccion(id, nombre),
          pildoras_id,
          pildoras(id, nombre)
        `
        )
        .order("id", { ascending: true });
      setAlumnos(data || []);
    };
    cargarAlumnos();
  }, []);

  // Limpiar datos al cerrar dialog
  const handleCloseDialog = (open) => {
    setMostrarDialog(open);
    if (!open) {
      setAlumnoSeleccionado(null);
      setCompetencias([]);
      setCompetenciasAcreditadas([]);
      setFecha("");
    }
  };

  useEffect(() => {
    if (alumnoSeleccionado) {
      if (
        alumnoSeleccionado.tipo_formacion === "curso" &&
        alumnoSeleccionado.curso?.id
      ) {
        supabaseClient
          .from("curso_competencia")
          .select("competencia(id, descripcion)")
          .eq("curso_id", alumnoSeleccionado.curso.id)
          .then(({ data }) => {
            const comps = data?.map((c) => c.competencia).filter(Boolean) || [];
            setCompetencias(comps);
            setCompetenciasAcreditadas(comps.map((c) => c.id));
          });
      } else if (
        alumnoSeleccionado.tipo_formacion === "inyeccion" &&
        alumnoSeleccionado.inyeccion?.id
      ) {
        supabaseClient
          .from("inyeccion_competencia_inyeccion")
          .select("competencia_inyeccion(id, descripcion)")
          .eq("inyeccion_id", alumnoSeleccionado.inyeccion.id)
          .then(({ data }) => {
            const comps =
              data?.map((c) => c.competencia_inyeccion).filter(Boolean) || [];
            setCompetencias(comps);
            setCompetenciasAcreditadas(comps.map((c) => c.id));
          });
      } else {
        setCompetencias([]);
        setCompetenciasAcreditadas([]);
      }
    }
  }, [alumnoSeleccionado]);

  return (
    <Layout>
      <div className="w-full pt-10 flex flex-col items-center text-black">
        <h1 className="text-2xl font-semibold mb-6">Vista de Diplomas</h1>
        <div className="overflow-x-auto w-full">
          <table className="w-full bg-white border">
            <thead>
              <tr className="bg-gray-100">
                <th className="py-2 border-b">ID</th>
                <th className="py-2 border-b">Nombre</th>
                <th className="py-2 border-b">Correo</th>
                <th className="py-2 border-b">Teléfono</th>
                <th className="py-2 border-b">Tipo</th>
                <th className="py-2 border-b">Formación</th>
                <th className="py-2 border-b">Acciones</th>
              </tr>
            </thead>
            <tbody>
              {alumnos.map((alumno) => (
                <tr key={alumno.id}>
                  <td className="py-2 px-4 border-b">{alumno.id}</td>
                  <td className="py-2 px-4 border-b">{alumno.nombre}</td>
                  <td className="py-2 px-4 border-b">{alumno.correo}</td>
                  <td className="py-2 px-4 border-b">{alumno.telefono}</td>
                  <td className="py-2 px-4 border-b">
                    {alumno.tipo_formacion === "curso"
                      ? "Curso"
                      : alumno.tipo_formacion === "inyeccion"
                      ? "Inyección"
                      : alumno.tipo_formacion === "pildora"
                      ? "Píldora"
                      : ""}
                  </td>
                  <td className="py-2 px-4 border-b">
                    {alumno.tipo_formacion === "curso" && alumno.curso?.nombre}
                    {alumno.tipo_formacion === "inyeccion" &&
                      alumno.inyeccion?.nombre}
                    {alumno.tipo_formacion === "pildora" &&
                      alumno.pildoras?.nombre}
                  </td>
                  <td className="py-2 px-4 border-b">
                    <Button
                      className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-1 px-3 rounded"
                      onClick={() => {
                        setAlumnoSeleccionado(alumno);
                        setMostrarDialog(true);
                      }}
                    >
                      Crear Diploma
                    </Button>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
      {/* Dialog para crear diploma y vista previa juntos */}
      {mostrarDialog && (
        <div className="fixed inset-0 z-50 flex items-center justify-center w-screen">
          <div className="flex bg-black bg-opacity-30 p-8 rounded">
            <VistaPreviaDiplomaDialog
              open={mostrarDialog}
              onOpenChange={handleCloseDialog}
              alumno={alumnoSeleccionado}
              competencias={competencias}
              fecha={fecha}
              competenciasAcreditadas={competenciasAcreditadas}
            />
          </div>
        </div>
      )}
    </Layout>
  );
}