'use client';

import { useEffect, useState } from 'react';
import KPI from './KPI';
import Chart from './Chart';

type MetricData = {
  totalSold: number;
  pendingValidation: number;
  redeemed: number;
  revenueBs: number;
  chartData: Array<{ label: string; sales: number; revenue: number }>;
};

const defaultMetrics: MetricData = {
  totalSold: 0,
  pendingValidation: 0,
  redeemed: 0,
  revenueBs: 0,
  chartData: [
    { label: 'Lun', sales: 0, revenue: 0 },
    { label: 'Mar', sales: 0, revenue: 0 },
    { label: 'Mié', sales: 0, revenue: 0 },
    { label: 'Jue', sales: 0, revenue: 0 },
    { label: 'Vie', sales: 0, revenue: 0 },
    { label: 'Sáb', sales: 0, revenue: 0 },
    { label: 'Dom', sales: 0, revenue: 0 },
  ],
};

export default function DashboardMetrics() {
  const [metrics, setMetrics] = useState<MetricData>(defaultMetrics);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    async function loadMetrics() {
      try {
        const response = await fetch('/api/dashboard/metrics');
        const data = await response.json();

        if (!response.ok || !data.success) {
          throw new Error(data.error || 'No se pudieron cargar las métricas');
        }

        setMetrics(data.metrics || defaultMetrics);
      } catch (error: any) {
        setError(error?.message || 'Error al cargar métricas');
      } finally {
        setLoading(false);
      }
    }

    loadMetrics();
  }, []);

  return (
    <>
      <section className="grid gap-4 sm:grid-cols-2 xl:grid-cols-4 mb-6">
        <KPI title="Total de cupones vendidos" value={metrics.totalSold} trend={0} />
        <KPI title="Cupones pendientes por validar" value={metrics.pendingValidation} trend={0} variant="warning" />
        <KPI title="Cupones ya canjeados" value={metrics.redeemed} trend={0} variant="success" />
        <KPI title="Ingresos acumulados estimados" value={metrics.revenueBs} trend={0} variant="accent" isCurrency />
      </section>

      <section className="rounded-[2rem] border border-slate-200 bg-white p-6 shadow-sm">
        <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
          <div>
            <h2 className="text-xl font-semibold text-slate-900">Gráfico de rendimiento</h2>
            <p className="text-sm text-slate-500">Ventas y ingresos de la última semana.</p>
          </div>
          <div className="rounded-full bg-slate-100 px-4 py-2 text-sm font-medium text-slate-700">{loading ? 'Cargando métricas...' : 'Datos actualizados'}</div>
        </div>

        {error ? (
          <div className="mt-6 rounded-3xl bg-rose-50 p-6 text-sm text-rose-700">{error}. Mostrando datos de ejemplo con 0 ventas.</div>
        ) : (
          <div className="mt-6">
            <Chart data={metrics.chartData} />
          </div>
        )}
      </section>
    </>
  );
}