SIDAC/diplomas/src/pages/pildorasVista.jsx

import React, { useEffect, useState } from "react";
import Layout from "@/components/layout/Layout";
import { supabaseClient } from "@/utils/supabase";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription,
  DialogFooter,
} from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";

export default function PildorasVista() {
  const [pildoras, setPildoras] = useState([]);
  const [pildoraEditando, setPildoraEditando] = useState(null);
  const [nuevoNombre, setNuevoNombre] = useState("");
  const [nuevaDescripcion, setNuevaDescripcion] = useState("");
  const [nuevaHoras, setNuevaHoras] = useState("");
  const [mostrarModal, setMostrarModal] = useState(false);
  const [modalMensaje, setModalMensaje] = useState("");
  const [confirmarEliminar, setConfirmarEliminar] = useState(false);
  const [pildoraAEliminar, setPildoraAEliminar] = useState(null);

  useEffect(() => {
    cargarPildoras();
  }, []);

  const cargarPildoras = async () => {
    const { data, error } = await supabaseClient
      .from("pildoras")
      .select("*")
      .order("id", { ascending: true });
    if (error) {
      setModalMensaje("Error al cargar píldoras: " + error.message);
      setMostrarModal(true);
    } else {
      setPildoras(data);
    }
  };

  const iniciarEdicion = (pildora) => {
    setPildoraEditando(pildora.id);
    setNuevoNombre(pildora.nombre);
    setNuevaDescripcion(pildora.descripcion);
    setNuevaHoras(pildora.horas);
  };

  const cancelarEdicion = () => {
    setPildoraEditando(null);
    setNuevoNombre("");
    setNuevaDescripcion("");
    setNuevaHoras("");
  };

  const guardarEdicion = async (id) => {
    const { error } = await supabaseClient
      .from("pildoras")
      .update({
        nombre: nuevoNombre,
        descripcion: nuevaDescripcion,
        horas: nuevaHoras,
      })
      .eq("id", id);

    if (error) {
      setModalMensaje("Error al actualizar la píldora");
    } else {
      setModalMensaje("Píldora actualizada exitosamente");
      await cargarPildoras();
      cancelarEdicion();
    }
    setMostrarModal(true);
  };

  const confirmarEliminacion = (id) => {
    setPildoraAEliminar(id);
    setConfirmarEliminar(true);
  };

  const eliminarPildora = async () => {
    const { error } = await supabaseClient
      .from("pildoras")
      .delete()
      .eq("id", pildoraAEliminar);

    if (error) {
      setModalMensaje("Error al eliminar la píldora");
    } else {
      setModalMensaje("Píldora eliminada exitosamente");
      await cargarPildoras();
    }
    setConfirmarEliminar(false);
    setMostrarModal(true);
  };

  return (
    <Layout>
      <div className="w-full pt-10 flex flex-col items-center text-black">
        <h1 className="text-2xl font-semibold mb-6">Lista de Píldoras</h1>
        <div className="overflow-x-auto w-full">
          <table className="min-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">Descripción</th>
                <th className="py-2 border-b">Horas</th>
                <th className="py-2 border-b">Acciones</th>
              </tr>
            </thead>
            <tbody>
              {pildoras.map((pildora) =>
                pildoraEditando === pildora.id ? (
                  <tr key={pildora.id}>
                    <td className="py-2 px-4 border-b text-center">
                      {pildora.id}
                    </td>
                    <td className="py-2 px-4 border-b">
                      <Input
                        value={nuevoNombre}
                        onChange={(e) => setNuevoNombre(e.target.value)}
                      />
                    </td>
                    <td className="py-2 px-4 border-b">
                      <Input
                        value={nuevaDescripcion}
                        onChange={(e) => setNuevaDescripcion(e.target.value)}
                      />
                    </td>
                    <td className="py-2 px-4 border-b">
                      <Input
                        type="number"
                        value={nuevaHoras}
                        onChange={(e) => setNuevaHoras(e.target.value)}
                      />
                    </td>
                    <td className="py-2 px-4 border-b flex justify-center">
                      <Button
                        className="bg-green-500 hover:bg-green-700 text-white font-bold py-1 px-3 m-2 rounded"
                        onClick={() => guardarEdicion(pildora.id)}
                      >
                        Guardar
                      </Button>
                      <Button
                        className="bg-gray-400 hover:bg-gray-600 text-white font-bold py-1 px-3 m-2 rounded"
                        onClick={cancelarEdicion}
                      >
                        Cancelar
                      </Button>
                    </td>
                  </tr>
                ) : (
                  <tr key={pildora.id}>
                    <td className="py-2 px-4 border-b">{pildora.id}</td>
                    <td className="py-2 px-4 border-b">{pildora.nombre}</td>
                    <td className="py-2 px-4 border-b">
                      {pildora.descripcion}
                    </td>
                    <td className="py-2 px-4 border-b">{pildora.horas}</td>
                    <td className="py-2 px-4 border-b flex justify-center">
                      <Button
                        className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-1 px-3 m-1 rounded"
                        onClick={() => iniciarEdicion(pildora)}
                      >
                        Editar
                      </Button>
                      <Button
                        className="bg-red-500 hover:bg-red-700 text-white font-bold py-1 px-3 m-1 rounded"
                        onClick={() => confirmarEliminacion(pildora.id)}
                      >
                        Eliminar
                      </Button>
                    </td>
                  </tr>
                )
              )}
            </tbody>
          </table>
        </div>
      </div>

      {/* Dialog para eliminar píldora */}
      <Dialog open={confirmarEliminar} onOpenChange={setConfirmarEliminar}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle className="text-black">
              Confirmar eliminación
            </DialogTitle>
            <DialogDescription>
              ¿Estás seguro de que deseas eliminar esta píldora? Esta acción no
              se puede deshacer.
            </DialogDescription>
          </DialogHeader>
          <DialogFooter>
            <Button
              className="bg-red-500 hover:bg-red-700 text-white"
              onClick={eliminarPildora}
            >
              Eliminar
            </Button>
            <Button
              className="bg-gray-400 hover:bg-gray-600 text-white"
              onClick={() => setConfirmarEliminar(false)}
            >
              Cancelar
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      {/* Modal de resultado */}
      <Dialog open={mostrarModal} onOpenChange={setMostrarModal}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle className="text-black">
              Resultado de la operación
            </DialogTitle>
            <DialogDescription>{modalMensaje}</DialogDescription>
          </DialogHeader>
          <DialogFooter>
            <Button onClick={() => setMostrarModal(false)}>Cerrar</Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </Layout>
  );
}