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

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() {
  const [equipoSeleccionado, setEquipoSeleccionado] = useState<number | "">("");
  const [equipos, setEquipos] = useState<Equipos[]>([]);
  const [programas, setProgramas] = useState<Programa[]>([]);
  const [checkboxes, setCheckboxes] = useState<Record<number, boolean>>({});

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

      setEquipos(equiposRes.data);
      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);
  };

  return (
    <form className="form-container" onSubmit={handleSubmit}>
      <select value={equipoSeleccionado} onChange={handleChangeEquipo}>
        <option value="">-- Selecciona un equipo --</option>
        {equipos.map((eq) => (
          <option key={eq.id_equipo} value={eq.id_equipo}>
            {eq.nombre_equipo}
          </option>
        ))}
      </select>

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