import React, { useEffect, useState } from "react";

const Materias_List = () => {
  const [originalData, setOriginalData] = useState([]);
  const [dataApi, setDataApi] = useState([]);

  const [estadoChecked, setEstadoChecked] = useState({
    materia_promocionada: false,
    materia_pendiente: false,
    materia_cursando: false,
    materia_tiene_apuntes: false,
  });

  const fetchData = async () => {
    try {
      // Simulated fetch (replace with real fetch if needed)
      const response = await fetch("/path/to/your/degree_in_software_development.json");
      const json = await response.json();
      setOriginalData(json.subjects);
      setDataApi(json.subjects);
    } catch (e) {
      console.error("Error al consumir API", e);
    }
  };

  const handleOnChange = (e) => {
    const { name, checked } = e.target;
    setEstadoChecked((prev) => ({
      ...prev,
      [name]: checked,
    }));
  };

  useEffect(() => {
    fetchData();
  }, []);

  // Apply filters every time estadoChecked changes
  useEffect(() => {
    let filtered = [...originalData];

    const filters = [];

    if (estadoChecked.materia_promocionada) filters.push("Promocionada");
    if (estadoChecked.materia_pendiente) filters.push("Pendiente");
    if (estadoChecked.materia_cursando) filters.push("Cursando");

    // Filter by estado (Promocionada, Pendiente, Cursando)
    if (filters.length > 0) {
      filtered = filtered.filter((s) => filters.includes(s.estado));
    }

    // Filter by tiene_apuntes
    if (estadoChecked.materia_tiene_apuntes) {
      filtered = filtered.filter((s) => s.tiene_apuntes);
    }

    setDataApi(filtered);
  }, [estadoChecked, originalData]);

  return (
    <>
      <div>
        <p>Filtrar por: </p>
        <label>
          <input
            type="checkbox"
            name="materia_promocionada"
            onChange={handleOnChange}
          />
          Promocionada
        </label>
        <label>
          <input
            type="checkbox"
            name="materia_pendiente"
            onChange={handleOnChange}
          />
          Pendiente
        </label>
        <label>
          <input
            type="checkbox"
            name="materia_cursando"
            onChange={handleOnChange}
          />
          Cursando
        </label>
        <label>
          <input
            type="checkbox"
            name="materia_tiene_apuntes"
            onChange={handleOnChange}
          />
          Tiene apuntes
        </label>
      </div>

      <div id="materias_container">
        <ul id="materias_lista">
          {dataApi.map((subject) => (
            <li key={subject.codigo}>
              <div className="materias__item">
                <span className={`estado_${subject.estado.toLowerCase()}`}>
                  {subject.estado}
                </span>
                <h4>{subject.nombre}</h4>
                <p className="materias__item-detalle">
                  <span>Código: {subject.codigo}</span>
                  {subject.tiene_apuntes && subject.link_apuntes && (
                    <span>
                      <a href={`/${subject.link_apuntes}`} target="_blank">
                        📚 Apuntes
                      </a>
                    </span>
                  )}
                </p>
              </div>
            </li>
          ))}
        </ul>
      </div>
    </>
  );
};

export default Materias_List;