"use client";

import { useEffect, useState } from "react";
import { useRouter } from "next/navigation";
import Cookies from "js-cookie";
import axios from "axios";
import toast from "react-hot-toast";

import "../app/styles/layout/history.scss";

export default function History() {
  const [historial, setHistorial] = useState<any[]>([]);
  const [selected, setSelected] = useState<any | null>(null);

  const api_url = process.env.NEXT_PUBLIC_API_URL;
  const router = useRouter();

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

        const response = await axios.get(`${api_url}/movimientos/historial`, {
          headers,
        });

        setHistorial(response.data);
      } catch (error) {
        toast.error("No se pudo cargar el historial");
      }
    };

    fetchHistorial();
  }, []);

  const handleClick = (item: any) => {
    setSelected(item); // <-- abrir modal con datos del equipo
  };

  const handleBuscar = () => {
    if (!selected) return;
    const inventario = selected.inventario;
    router.push(`/editar?equipoId=${inventario}`);
  };

  return (
    <div className="history-table-container">
      {/* TABLA */}
      <table className="history-table">
        <thead>
          <tr className="rowTotal">
            <td colSpan={2} className="total">
              Numero total modificado:
            </td>
            <td colSpan={1} className="total">
              {historial.length}
            </td>
          </tr>

          <tr>
            <th>Inventario</th>
            <th>Tipo de Equipo</th>
            <th>Fecha de Censo</th>
          </tr>
        </thead>

        <tbody>
          {historial.length > 0 ? (
            historial.map((item: any, index: number) => (
              <tr
                key={item.id || index}
                onClick={() => handleClick(item)}
                className="clickable-row"
              >
                <td>{item.inventario}</td>
                <td>
                  {item.tipo_equipo === "PERIFÉRICO"
                    ? item.periferico
                    : item.tipo_equipo}
                </td>
                <td>
                  {item.fechaMovimiento
                    ? new Date(item.fechaMovimiento).toLocaleDateString("es-MX")
                    : "—"}
                </td>
              </tr>
            ))
          ) : (
            <tr>
              <td colSpan={3} className="empty-row">
                No hay registros de historial
              </td>
            </tr>
          )}
        </tbody>
      </table>
      
      {selected && (
        <div className="modal-overlay">
          <div className="modal-content fade-in">
            <h2>Detalles del Equipo</h2>

            <div className="modal-body">
              {/* Encabezado limpio */}
              <div className="headerSelected">
                <div className="headerCard">
                  <span className="label">Inventario</span>
                  <span className="value">{selected.inventario}</span>
                </div>

                <div className="headerCard">
                  <span className="label">Equipo</span>
                  <span className="value">
                    {selected.tipo_equipo === "PERIFÉRICO"
                      ? selected.periferico
                      : selected.tipo_equipo}
                  </span>
                </div>
              </div>

              {/* Lugar */}
              <div className="sectionCard">
                <span className="sectionLabel">Lugar</span>
                <p className="sectionText">
                  {selected.lugar || "Sin especificar"}
                </p>
              </div>

              {/* Observaciones */}
              <div className="sectionCard">
                <span className="sectionLabel">Observaciones</span>
                <p className="sectionText">{selected.observaciones || "—"}</p>
              </div>
            </div>

            <div className="modal-buttons">
              <button className="btn cancel" onClick={() => setSelected(null)}>
                Cancelar
              </button>

              <button className="btn search" onClick={handleBuscar}>
                Editar
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}