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

const programas = [
  "3D MAX STUDIO 2014",
  "ADOBE CREATIVE SUITE",
  "ARCHICAD 20",
  "AUDACITY -win - 2.0",
  "AUTOCAD",
  "CODE-BLOCKS",
  "COREL DRAW",
  "DEV-C++",
  "EVIEWS Enterprise",
  "Google Earth",
  "INTERNERT",
  "MAPLE",
  "MATHEMATICA",
  "MATLAB",
  "Maxima",
  "miktex",
  "NETBEANS",
  "OFFICE 2016",
  "PSeint",
  "R 3.0.1",
  "R Studio",
  "SPPS Statiscs",
  "STATA 13",
  "STATGRAOHICS Centurion XVI",
];

const caracteristicasPorEquipo: Record<string, string[]> = {
  "Equipo 1": ["3D MAX STUDIO 2014", "AUTOCAD", "MATLAB"],
  "Equipo 2": ["ADOBE CREATIVE SUITE", "COREL DRAW", "R Studio"],
  "Equipo 3": ["ARCHICAD 20", "EVIEWS Enterprise", "SPPS Statiscs"],
  "Equipo 4": ["MATHEMATICA", "MAPLE", "Maxima"],
};

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

export default function ProgramSelector() {
  const [equipoSeleccionado, setEquipoSeleccionado] = useState("");
  const [checkboxes, setCheckboxes] = useState<Record<string, boolean>>(
    programas.reduce((acc, prog) => ({ ...acc, [prog]: false }), {})
  );
  const [equipo, setEquipo] = useState<Equipos[]>();

  useEffect(() => {
    const getEquipos = async () => {
      const equipos = await axios.get(`${envConfig.apiUrl}/equipo`);
      setEquipo(equipos.data);
    };
    getEquipos();
  }, []);

  useEffect(() => {
    const response = axios.get(
      "https://venus.acatlan.unam.mx/asignacionTiempo_test/equipo"
    );
    setPrograma(response)
  });

    const nuevosCheckboxes: Record<string, boolean> = {};
    programas.forEach((prog) => {
      nuevosCheckboxes[prog] =
        caracteristicasPorEquipo[equipo]?.includes(prog) || false;
    });
    setCheckboxes(nuevosCheckboxes);
  };

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    console.log(
      tipo === "sala" ? "Sala:" : "Equipo:",
      seleccion,
      "\nProgramas seleccionados:",
      Object.keys(checkboxes).filter((p) => checkboxes[p])
    );
  };

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

      <div className="checkbox-grid">
        {programas.map((prog) => (
          <label key={prog}>
            <input
              type="checkbox"
              checked={checkboxes[prog]}
              onChange={() =>
                setCheckboxes({ ...checkboxes, [prog]: !checkboxes[prog] })
              }
            />
            {prog}
          </label>
        ))}
      </div>

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