"use client";

import { useSearchParams } from "next/navigation";
import { useEffect, useState } from "react";
import { useRouter } from "next/navigation";
import axios from "axios";
import Cookies from "js-cookie";
import toast from "react-hot-toast";
import { SO_POR_EQUIPO } from "@/data/so_por_equipo";
import { PROCESADORES_POR_EQUIPO } from "@/data/procesadores";

import "../app/styles/layout/agregarEquipo.scss";
import "./editar.css";

export default function Editar() {
  const searchParams = useSearchParams();
  const inventario = searchParams.get("equipoId");

  const router = useRouter();

  const [formData, setFormData] = useState({
    inventario: "",
    serie: "",
    modelo: "",
    id_tipo_equipo: 0,
    id_marca: 0,
    id_estado: 0,
    id_uso: 0,
    id_adscripcion: 0,
    id_sistema_operativo: 0,
    id_procesador: 0,
    lugar: "",
    observaciones: "",
    responsable: "",
    id_periferico: 0,
    id_laboratorio: 0,
    id_proyecto: 0,
    fechaMovimiento: "",
  });

  interface TipoUso {
    id_uso: number;
    tipo_uso: string;
  }

  interface Estado {
    id_estado: number;
    estado: string;
  }

  interface TipoEquipo {
    id_tipo_de_equipo: number;
    tipo_equipo: string;
  }

  interface SistemaOperativo {
    id_sistema_operativo: number;
    sistema_operativo: string;
  }

  interface Procesador {
    id_procesador: number;
    procesador: string;
  }

  interface Marca {
    id_marca: number;
    marca: string;
  }

  interface Adscripcion {
    id_adscripcion: number;
    adscripcion: string;
  }

  interface Perifericos {
    id_periferico: number;
    periferico: string;
  }

  interface Laboratorio {
    id_laboratorio: number;
    laboratorio: string;
  }

  interface Proyecto {
    id_proyecto: number;
    proyecto: string;
  }

  const [tiposUso, setTiposUso] = useState<TipoUso[]>([]);
  const [marcas, setMarcas] = useState<Marca[]>([]);
  const [estados, setEstados] = useState<Estado[]>([]);
  const [adscripciones, setAdscripciones] = useState<Adscripcion[]>([]);
  const [tiposEquipo, setTiposEquipo] = useState<TipoEquipo[]>([]);
  const [laboratorios, setLaboratorios] = useState<Laboratorio[]>([]);
  const [proyectos, setProyectos] = useState<Proyecto[]>([]);
  const [sistemasOperativos, setSistemasOperativos] = useState<
    SistemaOperativo[]
  >([]);
  const [procesadores, setProcesadores] = useState<Procesador[]>([]);
  const [perifericos, setPerifericos] = useState<Perifericos[]>([]);
  const [adscripcionLabel, setAdscripcionLabel] = useState("");
  const [id, setId] = useState(0);

  const [suggestions, setSuggestions] = useState({
    adscripcion: [] as string[],
  });

  const api_url = process.env.NEXT_PUBLIC_API_URL;
  const mostrarCamposComputadora = Number(formData.id_tipo_equipo) !== 9;

  useEffect(() => {
    const fetchCatalogos = async () => {
      const token = Cookies.get("token");
      const headers = { Authorization: `Bearer ${token}` };

      try {
        const [
          usosRes,
          marcasRes,
          estadosRes,
          adscripcionesRes,
          tiposEquipoRes,
          sistemasOperativosRes,
          procesadoresRes,
          laboratoriosRes,
          proyectosRes,
        ] = await Promise.all([
          axios.get(`${api_url}/equipos/usos`, { headers }),
          axios.get(`${api_url}/equipos/marcas`, { headers }),
          axios.get(`${api_url}/equipos/estados`, { headers }),
          axios.get(`${api_url}/equipos/adscripciones`, { headers }),
          axios.get(`${api_url}/equipos/tipos-equipo`, { headers }),
          axios.get(`${api_url}/equipos/sistemas-operativos`, { headers }),
          axios.get(`${api_url}/equipos/procesadores`, { headers }),
          axios.get(`${api_url}/equipos/laboratorios`, { headers }),
          axios.get(`${api_url}/equipos/proyectos`, { headers }),
        ]);

        setTiposUso(usosRes.data);
        setMarcas(marcasRes.data);
        setEstados(estadosRes.data);
        setAdscripciones(adscripcionesRes.data);
        setTiposEquipo(tiposEquipoRes.data);
        setSistemasOperativos(sistemasOperativosRes.data);
        setProcesadores(procesadoresRes.data);
        setLaboratorios(laboratoriosRes.data);
        setProyectos(proyectosRes.data);
      } catch (error) {
        console.error("Error cargando catálogos:", error);
        toast.error("No se pudieron cargar los catálogos de datos");
      }
    };

    fetchCatalogos();
  }, []);

  useEffect(() => {
    interface UnidadResponsable {
      idUnidadResponsable: number;
      unidadResponsable: string;
      cargo: string;
      titulo: string;
      nombre: string;
      apellidos: string;
      telefono: string;
      correo: string;
      nivel: number;
      idUnidadResponsablePapa: number;
      unidadResponsablePapa: string;
    }

    interface EquipoResponse {
      [key: string]: unknown;
      id_equipo: number;
      inventario: string;
      serie: string;
      lugar: string;
      fechaMovimiento: string;
      antiguedad: string;
      modelo: string;
      estado: { id_estado: number; estado: string };
      adscripcion: { id_adscripcion: number; adscripcion: string };
      sistemaOperativo: {
        id_sistema_operativo: number;
        sistema_operativo: string;
      } | null;
      tipoEquipo: { id_tipo_de_equipo: number; tipo_equipo: string } | null;
      procesador: {
        id_procesador: number;
        procesador: string;
      };
      tipoUso: { id_uso: number; tipo_uso: string };
      marca: { id_marca: number; marca: string };
      periferico: { id_periferico: number; periferico: string };
      observaciones?: string;
      laboratorio: {
        id_laboratorio?: number;
      };
      proyecto: {
        id_proyecto?: number;
      };
    }

    const fetchEquipo = async () => {
      if (!inventario) return;
      const token = Cookies.get("token");
      const headers = { Authorization: `Bearer ${token}` };

      try {
        const response = await axios.get(
          `${api_url}/equipos/buscar/${inventario}`,
          { headers }
        );

        const equipo = response.data as EquipoResponse;

        const idAdscripcion = equipo.adscripcion?.id_adscripcion;

        const responsables: UnidadResponsable[] = Object.values(equipo).filter(
          (v): v is UnidadResponsable =>
            typeof v === "object" &&
            v !== null &&
            "idUnidadResponsable" in v &&
            "nombre" in v &&
            "apellidos" in v
        );

        const responsableEncontrado = responsables.find(
          (r) => r.idUnidadResponsable === idAdscripcion
        );

        const responsable = responsableEncontrado
          ? `${responsableEncontrado.nombre} ${responsableEncontrado.apellidos}`
          : "";

        setFormData({
          inventario: equipo.inventario || "",
          serie: (equipo.serie || "").toUpperCase(),
          id_marca: equipo.marca?.id_marca || 0,
          modelo: equipo.modelo || "",
          id_tipo_equipo: equipo.tipoEquipo?.id_tipo_de_equipo || 0,
          id_estado: equipo.estado?.id_estado || 0,
          id_sistema_operativo:
            equipo.sistemaOperativo?.id_sistema_operativo || 0,
          id_procesador: equipo.procesador?.id_procesador || 0,
          id_uso: equipo.tipoUso?.id_uso || 0,
          observaciones: equipo.observaciones || "",
          id_adscripcion: equipo.adscripcion?.id_adscripcion || 0,
          lugar: equipo.lugar || "",
          id_periferico: equipo.periferico?.id_periferico || 0,
          id_laboratorio: equipo.laboratorio?.id_laboratorio || 0,
          id_proyecto: equipo.proyecto?.id_proyecto || 0,
          fechaMovimiento: equipo.fechaMovimiento || "",
          responsable,
        });

        setAdscripcionLabel(equipo.adscripcion?.adscripcion);
        setId(equipo.id_equipo);
      } catch (err) {
        if (axios.isAxiosError(err)) {
          if (err.response) {
            toast.error(
              err.response.data?.message || "Error al crear la cuenta"
            );
          } else if (err.request) {
            toast.error("No se pudo conectar con el servidor");
          } else {
            toast.error("Ocurrió un error inesperado");
          }
        } else {
          toast.error("Ocurrió un error inesperado");
        }
        toast.error("No se pudo cargar la información del equipo.");
      }
    };

    fetchEquipo();
  }, [inventario]);

  useEffect(() => {
    const fetchProcesador = async () => {
      const token = Cookies.get("token");
      const headers = { Authorization: `Bearer ${token}` };

      const response = await axios.get(
        `${api_url}/equipos/procesador-tipo-equipos`,
        {
          headers,
        }
      );

      setProcesadores(response.data);
    };
    fetchProcesador();
  }, [tiposEquipo]);

  useEffect(() => {
    const fetchPerifericos = async () => {
      if (Number(formData.id_tipo_equipo) != 9) return;

      const token = Cookies.get("token");
      const headers = { Authorization: `Bearer ${token}` };

      try {
        const response = await axios.get(`${api_url}/equipos/perifericos`, {
          headers,
        });
        setPerifericos(response.data);
      } catch (err) {
        console.error(err);
        toast.error("No se pudieron cargar los periféricos");
      }
    };

    fetchPerifericos();
  }, [formData.id_tipo_equipo]);

  const handleGuardar = async () => {
    if (!formData.inventario) {
      toast.error("Inventario no encontrado");
      return;
    }

    if (!formData.id_marca) {
      toast.error("marca no encontrada");
      return;
    }

    if (!formData.id_tipo_equipo) {
      toast.error("Tipo de equipo no encontrado");
      return;
    }

    if (!formData.id_estado) {
      toast.error("estado no encontrado");
      return;
    }

    if (!formData.id_uso) {
      toast.error("tipo de uso no encontrado");
      return;
    }

    if (!formData.id_adscripcion) {
      toast.error("adscripción no encontrada");
      return;
    }

    {
      /*if (!formData.id_laboratorio) {
      toast.error("Laboratorio no seleccionado");
      return;
    }

    if (!formData.id_proyecto) {
      toast.error("Proyecto no seleccionado");
      return;
    }*/
    }

    if (formData.id_tipo_equipo == 9) {
      if (!formData.id_periferico) {
        toast.error("Periférico no encontrado");
        return;
      }
    }

    if (
      formData.id_tipo_equipo != 8 &&
      formData.id_tipo_equipo != 7 &&
      formData.id_tipo_equipo != 9
    ) {
      if (!formData.id_sistema_operativo) {
        toast.error("Sistema operativo no encontrado");
        return;
      }
    }

    if (formData.id_tipo_equipo != 9) {
      if (!formData.id_procesador) {
        toast.error("Procesador no encontrado");
        return;
      }
    }

    const token = Cookies.get("token");
    const headers = { Authorization: `Bearer ${token}` };

    const data = {
      id_procesador: formData.id_procesador,
      id_estado: formData.id_estado,
      id_adscripcion: formData.id_adscripcion,
      id_laboratorio: formData.id_laboratorio,
      id_proyecto: formData.id_proyecto,
      lugar: formData.lugar,
      id_sistema_operativo: formData.id_sistema_operativo,
      id_tipo_uso: formData.id_uso,
      id_periferico: formData.id_periferico,
      serie: formData.serie,
      modelo: formData.modelo,
      id_marca: formData.id_marca,
      observaciones: formData.observaciones,
    };

    try {
      await axios.patch(`${api_url}/equipos/update/${id}`, data, {
        headers,
      });
      toast.success("Equipo actualizado correctamente");
      router.push("/escaner");
    } catch (error) {
      console.error("Error al guardar:", error);
      toast.error("Hubo un error al guardar el equipo.");
    }
  };

  const handleInputChange = (
    field: string,
    value: string | number | boolean
  ) => {
    if (field === "adscripcionLabel") {
      const textValue = value as string;
      setAdscripcionLabel(textValue);

      const normalize = (str: string) =>
        str
          .normalize("NFD")
          .replace(/[\u0300-\u036f]/g, "")
          .toLowerCase();

      const matches = adscripciones
        .filter((a) => normalize(a.adscripcion).includes(normalize(textValue)))
        .map((a) => a.adscripcion);

      setSuggestions((prev) => ({
        ...prev,
        adscripcion: matches.slice(0, 5),
      }));
      return;
    }

    setFormData((prev) => {
      const newValue =
        field.startsWith("id_") && value !== "" ? Number(value) : value;

      if (field === "id_tipo_equipo") {
        const idTipoEquipo = Number(value);
        const tipoSeleccionado = tiposEquipo.find(
          (t) => t.id_tipo_de_equipo === idTipoEquipo
        );
        const esPeriferico = tipoSeleccionado?.tipo_equipo === "PERIFÉRICO";

        return {
          ...prev,
          id_tipo_equipo: idTipoEquipo,
          isImpresora: esPeriferico,
        };
      }

      return { ...prev, [field]: newValue };
    });
  };

  useEffect(() => {
    const fetchResponsable = async () => {
      if (!formData.id_adscripcion) return;

      try {
        const response = await axios.post(
          "https://venus.acatlan.unam.mx/funcionarios_test/test",
          {
            tipoBusqueda: "area",
            IdUnidadResponsable: formData.id_adscripcion,
          }
        );

        const data = response.data;

        if (Array.isArray(data) && data.length > 0) {
          const first = data[0];
          setFormData((prev) => ({
            ...prev,
            responsable: `${first.nombre ?? ""} ${
              first.apellidos ?? ""
            }`.trim(),
          }));
        } else {
          toast.error(
            "No se encontró información de la adscripción seleccionada"
          );
          setFormData((prev) => ({ ...prev, responsable: "" }));
        }
      } catch (err) {
        console.error("Error al obtener responsable:", err);
        toast.error("No se pudo conseguir el responsable");
        setFormData((prev) => ({ ...prev, responsable: "" }));
      }
    };

    fetchResponsable();
  }, [formData.id_adscripcion]);

  const handleCancelar = () => {
    router.push("/escaner");
  };

  return (
    <div className="agregarEquipoContainer">
      <div className="innerContainer">
        <h2 className="information">
          <span>
            {tiposEquipo.find(
              (t) => t.id_tipo_de_equipo === Number(formData.id_tipo_equipo)
            )?.tipo_equipo || "Sin tipo"}
          </span>
          <span>Inventario: {formData.inventario}</span>
          <span>
            Fecha de censo:{" "}
            {formData.fechaMovimiento
              ? new Date(formData.fechaMovimiento).toLocaleDateString("es-MX")
              : "Sin fecha"}
          </span>
        </h2>

        <form className="equipoForm">
          {/* Columna 1 */}
          <div className="column">
            <div className="formGroup">
              <label>Serie</label>
              <input
                type="text"
                value={formData.serie}
                placeholder="Ingresa serie"
                onChange={(e) =>
                  setFormData({
                    ...formData,
                    serie: e.target.value.toUpperCase(),
                  })
                }
              />
            </div>

            <div className="formGroup">
              <label>Marca</label>
              <select
                value={formData.id_marca}
                onChange={(e) =>
                  setFormData({ ...formData, id_marca: Number(e.target.value) })
                }
              >
                <option value="">Selecciona marca</option>
                {marcas.map((m) => (
                  <option key={m.id_marca} value={m.id_marca}>
                    {m.marca}
                  </option>
                ))}
              </select>
            </div>

            <div className="formGroup">
              <label>Modelo</label>
              <input
                type="text"
                value={formData.modelo}
                placeholder="Ingresa modelo"
                onChange={(e) =>
                  setFormData({ ...formData, modelo: e.target.value })
                }
              />
            </div>

            {/* <div className="formGroup">
              <label>Tipo de equipo</label>
              <select
                style={{ background: "#f6f7f9" }}
                disabled
                required
                value={formData.id_tipo_equipo}
                onChange={(e) =>
                  handleInputChange("id_tipo_equipo", e.target.value)
                }
              >
                <option value="">Selecciona tipo de equipo</option>
                {tiposEquipo.map((t) => (
                  <option key={t.id_tipo_de_equipo} value={t.id_tipo_de_equipo}>
                    {t.tipo_equipo}
                  </option>
                ))}
              </select>
            </div> */}

            <div className="formGroup">
              <label>Estado</label>
              <select
                value={formData.id_estado}
                onChange={(e) =>
                  setFormData({
                    ...formData,
                    id_estado: Number(e.target.value),
                  })
                }
              >
                <option value="">Selecciona estado</option>
                {estados.map((e) => (
                  <option key={e.id_estado} value={e.id_estado}>
                    {e.estado}
                  </option>
                ))}
              </select>
            </div>
            {mostrarCamposComputadora && (
              <div className="formGroup">
                <label>Laboratorio</label>
                <select
                  value={formData.id_laboratorio}
                  onChange={(e) =>
                    handleInputChange("id_laboratorio", e.target.value)
                  }
                >
                  <option value="">Selecciona laboratorio</option>
                  {laboratorios.map((lab) => (
                    <option key={lab.id_laboratorio} value={lab.id_laboratorio}>
                      {lab.laboratorio}
                    </option>
                  ))}
                </select>
              </div>
            )}
          </div>

          {/* Columna 2 */}
          <div className="column">
            <div className="formGroup">
              <label>Tipo de uso</label>
              <select
                value={formData.id_uso}
                onChange={(e) =>
                  setFormData({ ...formData, id_uso: Number(e.target.value) })
                }
              >
                <option value="">Selecciona uso</option>
                {tiposUso.map((t) => (
                  <option key={t.id_uso} value={t.id_uso}>
                    {t.tipo_uso}
                  </option>
                ))}
              </select>
            </div>
            {mostrarCamposComputadora && (
              <>
                <div className="formGroup">
                  <label>Procesador</label>
                  <select
                    value={formData.id_procesador}
                    onChange={(e) =>
                      handleInputChange("id_procesador", e.target.value)
                    }
                  >
                    <option value="">
                      {formData.id_tipo_equipo
                        ? "Selecciona procesador"
                        : "Selecciona primero el tipo de equipo"}
                    </option>
                    {PROCESADORES_POR_EQUIPO[formData.id_tipo_equipo]?.map(
                      (p) => (
                        <option key={p.id_procesador} value={p.id_procesador}>
                          {p.procesador}
                        </option>
                      )
                    )}
                  </select>
                </div>

                <div className="formGroup">
                  <label>Sistema operativo</label>
                  <select
                    value={formData.id_sistema_operativo}
                    onChange={(e) =>
                      handleInputChange("id_sistema_operativo", e.target.value)
                    }
                  >
                    <option value="">Selecciona sistema operativo</option>
                    {SO_POR_EQUIPO[formData.id_tipo_equipo]?.map((so) => (
                      <option
                        key={so.id_sistema_operativo}
                        value={so.id_sistema_operativo}
                      >
                        {so.sistema_operativo}
                      </option>
                    ))}
                  </select>
                </div>
              </>
            )}

            {!mostrarCamposComputadora && (
              <div className="formGroup">
                <label>Tipos de Periféricos</label>
                <select
                  value={formData.id_periferico || 0}
                  onChange={(e) =>
                    handleInputChange("id_periferico", e.target.value)
                  }
                >
                  <option value="">Selecciona periférico</option>
                  {perifericos.map((p) => (
                    <option key={p.id_periferico} value={p.id_periferico}>
                      {p.periferico}
                    </option>
                  ))}
                </select>
              </div>
            )}

            <div className="formGroup" style={{ position: "relative" }}>
              <label>Adscripción</label>
              <input
                required
                type="text"
                placeholder="Ingresa adscripción"
                value={adscripcionLabel}
                onChange={(e) =>
                  handleInputChange("adscripcionLabel", e.target.value)
                }
                style={{ fontSize: "13px" }}
              />
              {suggestions.adscripcion.length > 0 && (
                <ul className="suggestions">
                  {suggestions.adscripcion.map((s) => (
                    <li
                      key={s}
                      onClick={() => {
                        const selected = adscripciones.find(
                          (a) => a.adscripcion === s
                        );
                        if (selected) {
                          setFormData((prev) => ({
                            ...prev,
                            id_adscripcion: selected.id_adscripcion,
                          }));
                          setAdscripcionLabel(selected.adscripcion);
                          setSuggestions((prev) => ({
                            ...prev,
                            adscripcion: [],
                          }));
                        }
                      }}
                    >
                      {s}
                    </li>
                  ))}
                </ul>
              )}
            </div>

            <div className="formGroup">
              <label>Responsable</label>
              <input
                style={{ background: "#f6f7f9" }}
                type="text"
                value={formData.responsable}
                disabled
                placeholder="Selecciona una Adscripción"
              />
            </div>
            
          </div>

          {/* Columna 3 */}
          <div className="column">
            {mostrarCamposComputadora && (
              <div className="formGroup">
                <label>Proyecto</label>
                <select
                  value={formData.id_proyecto}
                  onChange={(e) =>
                    handleInputChange("id_proyecto", e.target.value)
                  }
                >
                  <option value="">Selecciona proyecto</option>
                  {proyectos.map((proy) => (
                    <option key={proy.id_proyecto} value={proy.id_proyecto}>
                      {proy.proyecto}
                    </option>
                  ))}
                </select>
              </div>
            )}
            <div className="formGroup">
              <label>Lugar</label>
              <textarea
                value={formData.lugar}
                onChange={(e) =>
                  setFormData({ ...formData, lugar: e.target.value })
                }
                maxLength={200}
                rows={5}
                className="textAreaLarge"
              />
            </div>

            <div className="formGroup">
              <label>Observaciones</label>
              <textarea
                value={formData.observaciones}
                onChange={(e) =>
                  setFormData({ ...formData, observaciones: e.target.value })
                }
                maxLength={200}
                rows={5}
                className="textAreaLarge"
              />
            </div>

            <div className="formActions">
              <button
                type="button"
                className="btnGuardar"
                onClick={handleGuardar}
              >
                Guardar
              </button>
              <button
                type="button"
                className="btnCancelar"
                onClick={handleCancelar}
              >
                Cancelar
              </button>
            </div>
          </div>
        </form>
      </div>
    </div>
  );
}