'use client';

import { useState } from 'react';
import { Header } from '@/components/layouts/header';
import { KpiCard } from '@/components/charts/kpi-card';
import { BarChart } from '@/components/charts/bar-chart';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { PeriodSelector } from '@/components/period-selector';
import { useKpis, useIngresosEgresos, useAlertas, useResumenFiscal } from '@/lib/hooks/use-dashboard';
import {
  TrendingUp,
  TrendingDown,
  Wallet,
  Receipt,
  FileText,
  AlertTriangle,
} from 'lucide-react';

export default function DashboardPage() {
  const [año, setAño] = useState(new Date().getFullYear());
  const [mes, setMes] = useState(new Date().getMonth() + 1);

  const { data: kpis, isLoading: kpisLoading } = useKpis(año, mes);
  const { data: chartData, isLoading: chartLoading } = useIngresosEgresos(año);
  const { data: alertas, isLoading: alertasLoading } = useAlertas(5);
  const { data: resumenFiscal } = useResumenFiscal(año, mes);

  const formatCurrency = (value: number) =>
    new Intl.NumberFormat('es-MX', {
      style: 'currency',
      currency: 'MXN',
      minimumFractionDigits: 0,
    }).format(value);

  return (
    <>
      <Header title="Dashboard">
        <PeriodSelector
          año={año}
          mes={mes}
          onAñoChange={setAño}
          onMesChange={setMes}
        />
      </Header>
      <main className="p-6 space-y-6">
        {/* KPIs */}
        <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
          <KpiCard
            title="Ingresos del Mes"
            value={kpis?.ingresos || 0}
            icon={<TrendingUp className="h-4 w-4" />}
            trend="up"
            trendValue="+12.5%"
            subtitle="vs mes anterior"
          />
          <KpiCard
            title="Egresos del Mes"
            value={kpis?.egresos || 0}
            icon={<TrendingDown className="h-4 w-4" />}
            trend="down"
            trendValue="-3.2%"
            subtitle="vs mes anterior"
          />
          <KpiCard
            title="Utilidad"
            value={kpis?.utilidad || 0}
            icon={<Wallet className="h-4 w-4" />}
            trend={kpis?.utilidad && kpis.utilidad > 0 ? 'up' : 'down'}
            trendValue={`${kpis?.margen || 0}% margen`}
          />
          <KpiCard
            title="Balance IVA"
            value={kpis?.ivaBalance || 0}
            icon={<Receipt className="h-4 w-4" />}
            trend={kpis?.ivaBalance && kpis.ivaBalance > 0 ? 'up' : 'down'}
            trendValue={kpis?.ivaBalance && kpis.ivaBalance > 0 ? 'Por pagar' : 'A favor'}
          />
        </div>

        {/* Charts and Alerts */}
        <div className="grid gap-6 lg:grid-cols-3">
          <div className="lg:col-span-2">
            <BarChart
              title="Ingresos vs Egresos"
              data={chartData || []}
            />
          </div>

          <Card>
            <CardHeader>
              <CardTitle className="flex items-center gap-2 text-base font-medium">
                <AlertTriangle className="h-4 w-4" />
                Alertas
              </CardTitle>
            </CardHeader>
            <CardContent className="space-y-3">
              {alertasLoading ? (
                <p className="text-sm text-muted-foreground">Cargando...</p>
              ) : alertas?.length === 0 ? (
                <p className="text-sm text-muted-foreground">No hay alertas pendientes</p>
              ) : (
                alertas?.map((alerta) => (
                  <div
                    key={alerta.id}
                    className={`p-3 rounded-lg border ${
                      alerta.prioridad === 'alta'
                        ? 'border-destructive/50 bg-destructive/10'
                        : 'border-border bg-muted/50'
                    }`}
                  >
                    <p className="text-sm font-medium">{alerta.titulo}</p>
                    <p className="text-xs text-muted-foreground mt-1">
                      {alerta.mensaje}
                    </p>
                  </div>
                ))
              )}
            </CardContent>
          </Card>
        </div>

        {/* Resumen Fiscal */}
        <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
          <Card>
            <CardContent className="p-4">
              <p className="text-sm text-muted-foreground">CFDIs Emitidos</p>
              <p className="text-2xl font-bold">{kpis?.cfdisEmitidos || 0}</p>
            </CardContent>
          </Card>
          <Card>
            <CardContent className="p-4">
              <p className="text-sm text-muted-foreground">CFDIs Recibidos</p>
              <p className="text-2xl font-bold">{kpis?.cfdisRecibidos || 0}</p>
            </CardContent>
          </Card>
          <Card>
            <CardContent className="p-4">
              <p className="text-sm text-muted-foreground">IVA a Favor Acumulado</p>
              <p className="text-2xl font-bold text-success">
                {formatCurrency(resumenFiscal?.ivaAFavor || 0)}
              </p>
            </CardContent>
          </Card>
          <Card>
            <CardContent className="p-4">
              <p className="text-sm text-muted-foreground">Declaraciones Pendientes</p>
              <p className="text-2xl font-bold">
                {resumenFiscal?.declaracionesPendientes || 0}
              </p>
            </CardContent>
          </Card>
        </div>
      </main>
    </>
  );
}