SIDAC/diplomas/src/components/cursosManualForm.jsx

import React, { useState } from "react";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { cursosSchema } from "@/schemas/CursosSchema";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import { supabaseClient } from "@/utils/supabase";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription,
  DialogFooter,
} from "@/components/ui/dialog";

export function CursosManualForm({ nombreSugerido = "" }) {
  const [addCompetencia, setAddCompetencia] = useState(false);
  const [competenciasGuardadas, setCompetenciasGuardadas] = useState([]);
  const [loading, setLoading] = useState(false);
  const [mostrarDialog, setMostrarDialog] = useState(false);
  const [mensajeDialog, setMensajeDialog] = useState("");
  const [mostrarDialogCompetencia, setMostrarDialogCompetencia] = useState(false);

  const form = useForm({
    resolver: zodResolver(cursosSchema),
    defaultValues: {
      nombre: nombreSugerido,
      descripcion: "",
      horas: 0,
      nuevaCompetencia: "",
    },
  });

  const {
    register,
    handleSubmit,
    setValue,
    getValues,
    formState: { errors },
  } = form;

  const handleSaveCompetencia = async (e) => {
    e.preventDefault();
    const nuevaCompetencia = getValues("nuevaCompetencia").trim();
    if (!nuevaCompetencia) return;

    if (competenciasGuardadas.some((c) => c.descripcion === nuevaCompetencia)) {
      alert("La competencia ya fue agregada.");
      return;
    }

    let competenciaId = null;
    try {
      const { data: existente } = await supabaseClient
        .from("competencia")
        .select("id")
        .eq("descripcion", nuevaCompetencia)
        .maybeSingle();

      if (existente && existente.id) {
        competenciaId = existente.id;
      } else {
        const { data: insertada, error } = await supabaseClient
          .from("competencia")
          .insert([{ descripcion: nuevaCompetencia }])
          .select("id")
          .single();
        if (error) throw error;
        competenciaId = insertada.id;
      }

      setCompetenciasGuardadas([
        ...competenciasGuardadas,
        { id: competenciaId, descripcion: nuevaCompetencia },
      ]);
      setAddCompetencia(false);
      setValue("nuevaCompetencia", "");
      setMostrarDialogCompetencia(true);
    } catch (err) {
      alert("Error al guardar la competencia: " + (err.message || err));
    }
  };

  const handleDeleteCompetencia = (index) => {
    setCompetenciasGuardadas(
      competenciasGuardadas.filter((_, i) => i !== index)
    );
  };

  const onSubmit = async (data) => {
    const { nombre, descripcion } = data;
    const horas = parseInt(data.horas, 10);

    setLoading(true);

    try {
      const { data: cursoInsertado, error: errorCurso } = await supabaseClient
        .from("curso")
        .insert([{ nombre, descripcion, horas }])
        .select("id")
        .single();

      if (errorCurso) {
        setMensajeDialog("Error al guardar el curso: " + errorCurso.message);
        setMostrarDialog(true);
        setLoading(false);
        return;
      }

      const cursoId = cursoInsertado.id;
      const relaciones = competenciasGuardadas.map((c) => ({
        curso_id: cursoId,
        competencia_id: c.id,
      }));

      if (relaciones.length > 0) {
        const { error: errorPivote } = await supabaseClient
          .from("curso_competencia")
          .insert(relaciones);
        if (errorPivote) {
          setMensajeDialog(
            "Error al asociar competencias: " + errorPivote.message
          );
          setMostrarDialog(true);
          setLoading(false);
          return;
        }
      }

      setMensajeDialog("Curso guardado exitosamente");
      setMostrarDialog(true);
      form.reset();
      setCompetenciasGuardadas([]);
    } catch (err) {
      alert("Ocurrió un error inesperado");
    } finally {
      setLoading(false);
    }
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)} className="w-full">
      <Input
        type="text"
        placeholder="Nombre del curso"
        {...register("nombre")}
        className="w-full px-3 py-2 border border-gray-300 rounded-md mb-3 text-black"
      />
      {errors.nombre && (
        <p className="text-red-500 text-sm">{errors.nombre.message}</p>
      )}

      <Textarea
        placeholder="Descripción"
        {...register("descripcion")}
        className="w-full px-3 py-2 border border-gray-300 rounded-md mb-3 h-24 text-black"
      />
      {errors.descripcion && (
        <p className="text-red-500 text-sm">{errors.descripcion.message}</p>
      )}

      <Input
        type="number"
        placeholder="Horas del curso"
        {...register("horas", { valueAsNumber: true })}
        className="w-full px-3 py-2 border border-gray-300 rounded-md mb-3 text-black"
      />
      {errors.horas && (
        <p className="text-red-500 text-sm">{errors.horas.message}</p>
      )}

      <h2 className="text-lg font-semibold mb-3 text-black">Competencias</h2>
      <p className="text-xs text-gray-500 mb-2">
        Puedes agregar competencias nuevas sin necesidad de crear un nuevo
        curso. Las competencias se guardarán y podrás asociarlas a otros cursos
        después.
      </p>

      {competenciasGuardadas.length > 0 && (
        <div className="mt-5 w-full flex-wrap">
          {competenciasGuardadas.map((competencia, index) => (
            <div
              key={index}
              className="w-full flex justify-between items-center px-2 mb-2"
            >
              <span className="text-black">{competencia.descripcion}</span>
              <Button
                type="button"
                onClick={() => handleDeleteCompetencia(index)}
                className="bg-red-400 hover:bg-red-500 text-white font-bold py-1 px-3 rounded-md"
              >
                X
              </Button>
            </div>
          ))}
        </div>
      )}

      {addCompetencia && (
        <div className="w-full flex flex-col md:flex-row mt-5">
          <div className="flex flex-col">
            <Input
              type="text"
              placeholder="Nueva competencia"
              {...register("nuevaCompetencia")}
              className="w-80 px-3 py-2 border border-gray-300 rounded-md mb-3 text-black"
            />
            {errors.nuevaCompetencia && (
              <p className="text-red-500 text-sm">
                {errors.nuevaCompetencia.message}
              </p>
            )}
          </div>
          <div className="flex flex-row">
            <Button
              type="button"
              onClick={handleSaveCompetencia}
              className="bg-green-400 hover:bg-green-500 text-white font-bold py-2 px-4 rounded-md mr-2"
            >
              Guardar
            </Button>
            <Button
              type="button"
              onClick={() => {
                setAddCompetencia(false);
                setValue("nuevaCompetencia", "");
              }}
              className="bg-gray-400 hover:bg-gray-500 text-white font-bold py-2 px-4 rounded-md"
            >
              Cancelar
            </Button>
          </div>
        </div>
      )}

      <Button
        type="button"
        onClick={() => setAddCompetencia(true)}
        className="w-full bg-blue-400 hover:bg-blue-500 text-white font-bold py-2 px-4 rounded-md mt-5"
      >
        Agregar competencia
      </Button>

      <div className="flex justify-center w-full mt-5">
        <Button
          type="submit"
          className="bg-green-400 hover:bg-green-500 text-white font-bold py-2 px-4 rounded-md"
          disabled={loading}
        >
          {loading ? "Guardando..." : "Guardar curso"}
        </Button>
      </div>

      <Dialog open={mostrarDialog} onOpenChange={setMostrarDialog}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle className="text-black">Resultado</DialogTitle>
            <DialogDescription>{mensajeDialog}</DialogDescription>
          </DialogHeader>
          <DialogFooter>
            <Button onClick={() => setMostrarDialog(false)}>Cerrar</Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      <Dialog
        open={mostrarDialogCompetencia}
        onOpenChange={setMostrarDialogCompetencia}
      >
        <DialogContent>
          <DialogHeader>
            <DialogTitle className="text-black">
              Competencia agregada
            </DialogTitle>
            <DialogDescription>
              ¡La competencia fue agregada exitosamente!
            </DialogDescription>
          </DialogHeader>
          <DialogFooter>
            <Button onClick={() => setMostrarDialogCompetencia(false)}>
              Cerrar
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </form>
  );
}