import React, { useEffect, useState } from "react";
import axios from "axios";
import { Link, useNavigate } from "react-router-dom";
import "bootstrap/dist/css/bootstrap.min.css";
import "bootstrap/dist/js/bootstrap.bundle.min";
import "../App.css";
import ListaServicios from "./ListaServicios";
import ListaClientes from "./ListaClientes";

const Dashboard = () => {
  const [clientes, setClientes] = useState([]);
  const [searchParams, setSearchParams] = useState({
    id: "",
    nombre: "",
  });
  const [filteredClientes, setFilteredClientes] = useState([]);
  const [filteredServices, setFilteredServices] = useState([]);
  const [errorMessage, setErrorMessage] = useState("");
  const [showClientes, setShowClientes] = useState(true);
  const navigate = useNavigate();

  // Función para ordenar por ID de manera descendente
  const ordenarPorId = (array) => {
    return [...array].sort((a, b) => b.id - a.id);
  };

  // Función para filtrar y ordenar clientes
  const filtrarYOrdenarClientes = (clientesArray, searchId, searchNombre) => {
    return ordenarPorId(
      clientesArray.filter((cliente) => {
        const matchId = searchId === "" || 
          cliente.id.toString().toLowerCase().includes(searchId.toLowerCase());
        const matchNombre = searchNombre === "" || 
          cliente.nombreCliente.toLowerCase().includes(searchNombre.toLowerCase());
        return matchId && matchNombre;
      })
    );
  };

  // Función para obtener servicios de clientes
  const obtenerServicios = (clientesArray) => {
    const servicios = [];
    clientesArray.forEach((cliente) => {
      cliente.equipos.forEach((equipo) => {
        equipo.servicios.forEach((servicio) => {
          servicios.push({
            ...servicio,
            nombreCliente: cliente.nombreCliente,
            clienteId: cliente.id,
          });
        });
      });
    });
    return ordenarPorId(servicios);
  };

  useEffect(() => {
    const fetchData = async () => {
      const authToken = localStorage.getItem('authToken');
      if (!authToken) {
        navigate('/login');
        return;
      }

      try {
        const response = await axios.get("http://localhost:8080/clientes", {
          headers: {
            'Authorization': authToken,
          },
        });

        const clientesOrdenados = ordenarPorId(response.data);
        setClientes(clientesOrdenados);
        setFilteredClientes(clientesOrdenados);
        setFilteredServices(obtenerServicios(clientesOrdenados));
      } catch (error) {
        console.error("Error al obtener los datos:", error);
        setErrorMessage("Error al obtener los datos.");
      }
    };

    fetchData();
  }, [navigate]);

  // Manejar cambios en los campos de búsqueda
  const handleInputChange = (e) => {
    const { name, value } = e.target;
    setSearchParams((prev) => ({ ...prev, [name]: value }));
    
    // Realizar búsqueda en tiempo real
    const clientesFiltrados = filtrarYOrdenarClientes(
      clientes,
      name === 'id' ? value : searchParams.id,
      name === 'nombre' ? value : searchParams.nombre
    );
    
    setFilteredClientes(clientesFiltrados);
    setFilteredServices(obtenerServicios(clientesFiltrados));
  };

  // Manejar el envío del formulario de búsqueda
  const handleSearch = (e) => {
    e.preventDefault();
    setErrorMessage("");
    
    try {
      const clientesFiltrados = filtrarYOrdenarClientes(
        clientes,
        searchParams.id,
        searchParams.nombre
      );
      
      setFilteredClientes(clientesFiltrados);
      setFilteredServices(obtenerServicios(clientesFiltrados));
    } catch (error) {
      console.error("Error al buscar:", error);
      setFilteredClientes([]);
      setFilteredServices([]);
      setErrorMessage("Error al realizar la búsqueda");
    }
  };

  const handleClientesClick = () => setShowClientes(true);
  const handleServiciosClick = () => setShowClientes(false);

  return (
    <div className="box-wrapper">
      <nav className="navbar navbar-expand-lg navbar-light navBar">
        <button
          className="nav-link btn btn-link"
          onClick={() => window.location.href = '/home'}
        >
          INICIO
        </button>
        
        <div className="collapse navbar-collapse" id="navbarSupportedContent">
          <ul className="navbar-nav mr-auto">
            <li className="nav-item">
              <button
                className={`nav-link btn btn-link ${showClientes ? "active" : ""}`}
                onClick={handleClientesClick}
              >
                Clientes
              </button>
            </li>
            <li className="nav-item">
              <button
                className={`nav-link btn btn-link ${!showClientes ? "active" : ""}`}
                onClick={handleServiciosClick}
              >
                Servicios Pendientes
              </button>
            </li>
            <li className="nav-item">
              <Link className="nav-link" to="/service-form">
                Formulario
              </Link>
            </li>
            <li className="nav-item">
              <Link className="nav-link" to="/Request-service">
                Solicitud Servicio
              </Link>
            </li>
          </ul>
          
          <form className="form-inline my-2 my-lg-0" onSubmit={handleSearch}>
            <input
              className="form-control mr-sm-2"
              type="search"
              placeholder="Buscar por ID"
              aria-label="Search"
              name="id"
              value={searchParams.id}
              onChange={handleInputChange}
            />
            <input
              className="form-control mr-sm-2"
              type="search"
              placeholder="Buscar por Nombre"
              aria-label="Search"
              name="nombre"
              value={searchParams.nombre}
              onChange={handleInputChange}
            />
            <button
              className="btn btn-outline-success my-2 my-sm-0"
              type="submit"
            >
              Buscar
            </button>
          </form>
        </div>
      </nav>

      <div className="container-fluid table-wrapper">
        {showClientes ? (
          <ListaClientes
            clientes={clientes}
            filteredClientes={filteredClientes}
            filteredServices={filteredServices}
            errorMessage={errorMessage}
          />
        ) : (
          <ListaServicios />
        )}
        {errorMessage && (
          <div className="alert alert-danger mt-3">{errorMessage}</div>
        )}
      </div>
    </div>
  );
};

export default Dashboard;