"use client";

import { useEffect, useState } from "react";
import { envConfig } from "@/app/lib/config";
import { Alumno, AlumnoSancion, Sancion } from "@/app/types/sanction";
import { GetSancionByStudent } from "@/app/lib/getSancionByStudent";
import TableSanction from "./TableSanction";
import axios from "axios";
import Swal from "sweetalert2";
import Cookies from "js-cookie";

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 [loading, setLoading] = useState(false);
  const [loadingTable, setLoadingTable] = useState(false);

  const token = Cookies.get("token");
  const headers = { Authorization: `Bearer ${token}` };

  const fetchAlumnoSanciones = async () => {

    const res = await GetSancionByStudent(idCuenta);

    setAlumno(res.student ?? null);
    setAlumnoSanciones(res.alusancion ?? []);
    setLoadingTable(true)

    if (res.error) {
      setLoadingTable(false)
    }
  };

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

    fetchAlumnoSanciones();

    axios
      .get(`${envConfig.apiUrl}/sancion`, { headers })
      .then((res) => setSanciones(res.data))
      .catch(() =>

        Swal.fire({
          title: "Error al obtener el catálogo de sanciones!",
          icon: "error",
          draggable: true
        })
      );

  }, [idCuenta]);

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

    if (!selectedSancion) {

      Swal.fire({
        title: "Selecciona una sanción!",
        icon: "error",
        draggable: true
      });
      return;
    }

    try {
      setLoading(true);

      await axios.post(`${envConfig.apiUrl}/alumno-sancion/`, {
        id_sancion: Number(selectedSancion),
        id_cuenta: idCuenta,
      }, { headers });

      await fetchAlumnoSanciones();
      setSelectedSancion("");

      Swal.fire({
        title: "Sanción aplicada correctamente!",
        icon: "success",
        draggable: true
      });
    } catch {

      Swal.fire({
        title: "Error al aplicar la sanción!",
        icon: "error",
        draggable: true
      });
    } finally {
      setLoading(false);
    }
  };

  return (
    <>
      <TableSanction alumnoSanciones={alumnoSanciones} alumno={alumno} />

      {loadingTable && 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}
            disabled={loading}
          >
            {loading ? "Aplicando..." : "Aplicar sanción"}
          </button>
        </>
      )}
    </>
  );
}