"use client";
import { envConfig } from "@/app/lib/config";
import axios from "axios";
import { useEffect, useState } from "react";
import toast from "react-hot-toast";
import Swal from "sweetalert2";

interface Equipos {
  id_equipo: number;
  id_plataforma: number;
  id_area_ubicacion: number;
  nombre_equipo: string;
  ubicacion: string;
  activo: boolean;
  ip: string;
}

interface Programa {
  id_programa: number;
  programa: string;
}

export default function ProgramSelector({
  ubicacion,
  id,
}: {
  ubicacion?: string | null;
  id?: number | null;
}) {
  const [equipoSelection, setEquipoSelection] = useState<string>("");
  const [roomSelection, setRoomSelection] = useState<number>();
  const [programas, setProgramas] = useState<Programa[]>([]);
  const [checkboxes, setCheckboxes] = useState<Record<number, boolean>>({});

  useEffect(() => {
    const fetchData = async () => {
      const [programasRes] = await Promise.all([
        axios.get(`${envConfig.apiUrl}/programa`),
      ]);

      setProgramas(programasRes.data);

      const initialCheckboxes: Record<number, boolean> = {};
      programasRes.data.forEach((p: Programa) => {
        initialCheckboxes[p.id_programa] = false;
      });
      setCheckboxes(initialCheckboxes);
    };

    fetchData();
  }, []);

  const handleTogglePrograma = (id: number) => {
    setCheckboxes((prev) => ({
      ...prev,
      [id]: !prev[id],
    }));
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();

    const programasSeleccionados = Object.keys(checkboxes)
      .filter((id) => checkboxes[Number(id)])
      .map(Number);

    try {
      if (ubicacion && ubicacion !== "0") {
        await axios.patch(
          `${envConfig.apiUrl}/programa-equipo/equipo/${ubicacion}`,
          {
            programas: programasSeleccionados,
          },
        );

        toast.success("Programas actualizados en la máquina");
        return;
      }

      if (id) {
        await axios.patch(`${envConfig.apiUrl}/programa-equipo/sala`, {
          sala: id,
          programas: programasSeleccionados,
        });

        toast.success("Programas actualizados en la sala");
        return;
      }

      toast.error("No se pudo determinar el destino");
    } catch (error) {
      toast.error("Error al guardar cambios");
      Swal.fire({
        title: "Error al guardar cambios!",
        icon: "success",
        draggable: true,
      });
    }
  };

  useEffect(() => {
    if (!programas.length) return;
    if (ubicacion === null && id === null) return;

    const buildCheckboxes = async () => {
      const baseCheckboxes: Record<number, boolean> = {};
      programas.forEach((p) => {
        baseCheckboxes[p.id_programa] = false;
      });

      try {
        let res;

        if (ubicacion && ubicacion !== "0") {
          res = await axios.get(
            `${envConfig.apiUrl}/programa-equipo/${ubicacion}`,
          );
        }

        if (id) {
          res = await axios.get(
            `${envConfig.apiUrl}/area-ubicacion/programs/${id}`,
          );
        }

        res?.data.forEach((item: any) => {
          baseCheckboxes[item.id_programa] = true;
        });
      } catch (error: any) {
        if (axios.isAxiosError(error)) {
          if (error.response?.status === 404) {
            toast.error("Sin programas asignados");
          } else {
            toast.error("Error al cargar programas");
            
          }
        } else {
          toast.error("Error inesperado");
        }
      }

      setCheckboxes(baseCheckboxes);
    };

    buildCheckboxes();
  }, [programas, ubicacion, id]);

  return (
    <form className="form-container" onSubmit={handleSubmit}>
      <div className="checkbox-grid">
        {programas.map((prog) => (
          <label key={prog.id_programa}>
            <input
              type="checkbox"
              checked={checkboxes[prog.id_programa] || false}
              onChange={() => handleTogglePrograma(prog.id_programa)}
            />
            {prog.programa}
          </label>
        ))}
      </div>

      <button className="button buttonSearch" type="submit">
        Guardar cambios
      </button>
    </form>
  );
}
//IO