"use client";

import { useEffect, useState } from "react";
import { envConfig } from "@/app/lib/config";
import { useRouter } from "next/navigation";
import { Alumno, AlumnoSancion, Sancion } from "@/app/types/student";
import TableSanction from "./TableSanction";
import axios from "axios";
import toast from "react-hot-toast";

if (!envConfig.apiUrl) {
  console.error("API URL is not defined in envConfig");
}

export default function ApplySanction({ idCuenta }: { idCuenta: number }) {
  const [sanciones, setSanciones] = useState<Sancion[]>([]);
  const [alumno, setAlumno] = useState<Alumno>();
  const [alumnoSanciones, setAlumnoSanciones] = useState<AlumnoSancion[]>([]);
  const [selectedSancion, setSelectedSancion] = useState("");

  const router = useRouter();

  useEffect(() => {
    if (!idCuenta) return;

    axios
      .get(`${envConfig.apiUrl}/alumno-sancion/${idCuenta}`)
      .then((res) => {
        setAlumno(res.data.student);
        setAlumnoSanciones(
          res.data.alusancion?.length ? res.data.alusancion : [],
        );
      })
      .catch((err) => {
        const mensaje =
          err.response?.data?.message ||
          "Error al obtener las sanciones del alumno";

      });

    axios
      .get(`${envConfig.apiUrl}/sancion`)
      .then((res) => setSanciones(res.data))
      .catch((err) =>
        toast.error("Error al obtener el catálogo de sanciones:", err),
      );
  }, [idCuenta]);

  const calcularFechaFin = (fechaInicio: string, duracionSemanas: number) => {
    const fecha = new Date(fechaInicio);
    fecha.setDate(fecha.getDate() + duracionSemanas * 7);
    return fecha.toLocaleDateString();
  };

  const handleButton = (e: React.MouseEvent<HTMLButtonElement>) => {
    e.preventDefault();

    if (!selectedSancion) {
      toast.error("selecciona una sancion")
    }
    axios.post(`${envConfig.apiUrl}/alumno-sancion/`, { id_sancion: Number(selectedSancion), id_cuenta: idCuenta })
    router.refresh();
  }

  return (
    <>
      <TableSanction alumnoSanciones={alumnoSanciones} alumno={alumno} />
      {!(alumnoSanciones?.length > 0) &&
        <>
          <form className="containerForm">
            <div className="groupInput">
              <select
                value={selectedSancion}
                onChange={(e) => setSelectedSancion(e.target.value)}
              >
                <option value="">-- Selecciona una sanción --</option>
                {sanciones.map((sancion) => (
                  <option key={sancion.id_sancion} value={sancion.id_sancion}>
                    {sancion.sancion} ({sancion.duracion} semana/s)
                  </option>
                ))}
              </select>
            </div>
          </form>

          <button
            className="button buttonSearch"
            style={{ margin: "1rem 0" }}
            onClick={handleButton}
          >
            Aplicar sanción
          </button>
        </>
      }
    </>
  );
}