// react
import React, { useState, useEffect } from "react";
// application
import { productsApi } from "~/admin/services/productsApi";
import { vehiclesApi } from "~/admin/services/vehiclesApi";
import { offersApi } from "~/admin/services/offersApi";
import AppLink from "./AppLink";

function Dashboard() {
  const [stats, setStats] = useState({
    products: 0,
    vehicles: 0,
    offers: 0,
    productsActive: 0,
    productsInactive: 0,
  });
  const [completeness, setCompleteness] = useState<{
    total: number;
    con_imagen: number;
    sin_imagen: number;
    sin_categoria: number;
    sin_reference: number;
    incompletos: number;
  } | null>(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    loadStats();
    loadCompleteness();
  }, []);

  const loadCompleteness = async () => {
    try {
      const res = await productsApi.getStats();
      setCompleteness(res);
    } catch (error) {
      console.error("Error loading completeness stats:", error);
    }
  };

  const loadStats = async () => {
    try {
      const [
        productsResponse,
        models,
        offersCount,
        activeResponse,
        inactiveResponse,
      ] = await Promise.all([
        productsApi.getAll(1, 1),
        vehiclesApi.getAllModels(),
        offersApi.getCount(),
        productsApi.getAll(1, 1, undefined, undefined, 1), // status=1 activos
        productsApi.getAll(1, 1, undefined, undefined, 0), // status=0 inactivos
      ]);

      const totalProducts =
        productsResponse.pagination?.total_items || productsResponse.count || 0;
      const totalOffers = offersCount;

      setStats({
        products: totalProducts,
        vehicles: models.length,
        offers: totalOffers,
        productsActive: activeResponse.count ?? 0,
        productsInactive: inactiveResponse.count ?? 0,
      });
    } catch (error) {
      console.error("Error loading stats:", error);
    } finally {
      setLoading(false);
    }
  };

  if (loading) {
    return (
      <div className="dashboard">
        <div className="text-center py-5">
          <div className="spinner-border" role="status">
            <span className="sr-only">Cargando...</span>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="dashboard">
      <div className="dashboard__header">
        <h1>Dashboard</h1>
        <p>
          Bienvenido al panel administrativo de MONTICARS
        </p>
      </div>
      <div className="dashboard__stats">
        <div className="row">
          <div className="col-md-4">
            <AppLink href="/productos" className="stat-card">
              <div className="stat-card__icon stat-card__icon--blue">
                <i className="fas fa-box" />
              </div>
              <div className="stat-card__content">
                <h3>{stats.products}</h3>
                <p>Productos</p>
              </div>
            </AppLink>
          </div>
          <div className="col-md-4">
            <div className="stat-card">
              <div className="stat-card__icon stat-card__icon--green">
                <i className="fas fa-car" />
              </div>
              <div className="stat-card__content">
                <h3>{stats.vehicles}</h3>
                <p>Vehículos</p>
              </div>
            </div>
          </div>
          <div className="col-md-4">
            <AppLink href="/ofertas" className="stat-card">
              <div className="stat-card__icon stat-card__icon--orange">
                <i className="fas fa-tag" />
              </div>
              <div className="stat-card__content">
                <h3>{stats.offers}</h3>
                <p>Ofertas Activas</p>
              </div>
            </AppLink>
          </div>
        </div>
        <div className="row mt-3">
          <div className="col-md-4">
            <AppLink href="/productos?status=1" className="stat-card">
              <div className="stat-card__icon stat-card__icon--green">
                <i className="fas fa-check-circle" />
              </div>
              <div className="stat-card__content">
                <h3>{stats.productsActive}</h3>
                <p>Productos activos</p>
              </div>
            </AppLink>
          </div>
          <div className="col-md-4">
            <AppLink href="/productos?status=0" className="stat-card">
              <div className="stat-card__icon stat-card__icon--secondary">
                <i className="fas fa-pause-circle" />
              </div>
              <div className="stat-card__content">
                <h3>{stats.productsInactive}</h3>
                <p>Productos inactivos</p>
              </div>
            </AppLink>
          </div>
        </div>
      </div>

      {completeness && (
        <div className="dashboard__completeness">
          <h4 className="dashboard__completeness-title">Datos del catálogo por completar</h4>
          <p className="text-muted dashboard__completeness-hint">
            Haz clic en una tarjeta para ver y corregir esos productos.
          </p>
          <div className="row">
            <div className="col-md-3">
              <AppLink href="/productos?filter=sin_imagen" className="stat-card">
                <div className="stat-card__icon stat-card__icon--red">
                  <i className="fas fa-image" />
                </div>
                <div className="stat-card__content">
                  <h3>{completeness.sin_imagen}</h3>
                  <p>Sin imagen</p>
                </div>
              </AppLink>
            </div>
            <div className="col-md-3">
              <AppLink href="/productos?filter=sin_categoria" className="stat-card">
                <div className="stat-card__icon stat-card__icon--orange">
                  <i className="fas fa-tags" />
                </div>
                <div className="stat-card__content">
                  <h3>{completeness.sin_categoria}</h3>
                  <p>Sin categoría</p>
                </div>
              </AppLink>
            </div>
            <div className="col-md-3">
              <AppLink href="/productos?filter=sin_reference" className="stat-card">
                <div className="stat-card__icon stat-card__icon--purple">
                  <i className="fas fa-barcode" />
                </div>
                <div className="stat-card__content">
                  <h3>{completeness.sin_reference}</h3>
                  <p>Sin número de piezas</p>
                </div>
              </AppLink>
            </div>
            <div className="col-md-3">
              <AppLink href="/productos?filter=incompletos" className="stat-card">
                <div className="stat-card__icon stat-card__icon--yellow">
                  <i className="fas fa-exclamation-triangle" />
                </div>
                <div className="stat-card__content">
                  <h3>{completeness.incompletos}</h3>
                  <p>Incompletos</p>
                </div>
              </AppLink>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

export default Dashboard;