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

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 [equipoSeleccionado, setEquipoSeleccionado] = 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 handleChangeEquipo = (e: React.ChangeEvent<HTMLSelectElement>) => {
    setEquipoSeleccionado(Number(e.target.value));
  };

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

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

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

    console.log("Equipo:", equipoSeleccionado);
    console.log("Programas seleccionados:", programasSeleccionados);
  };

  useEffect(() => {
    if (!programas.length) return;

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

      if (ubicacion) {
        try {
          const res = await axios.get(
            `${envConfig.apiUrl}/programa-equipo/${ubicacion}`,
          );

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

      setCheckboxes(baseCheckboxes);
    };

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

  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>
  );
}
