'use client';

import { useState } from 'react';
import { Card, CardContent, CardHeader, CardTitle, Button } from '@horux/shared-ui';
import { formatCurrency } from '@/lib/utils';
import { Download, ChevronRight } from 'lucide-react';
import type { EstadoResultadosDetallado } from '@horux/shared';
import { getExportEstadoResultadosUrl } from '@/lib/api/reportes';
import { EstadoResultadosDrillDownModal } from './drill-down-modal';

interface Props {
  data: EstadoResultadosDetallado;
  fechaInicio: string;
  fechaFin: string;
  regimen?: string | null;
}

type FilaConcepto = {
  concepto: string;
  monto: number;
  vertical: number;
  anterior: number;
  variacion: number;
  isTotal: boolean;
  categoria?: string;
};

export function EstadoResultadosTable({ data, fechaInicio, fechaFin, regimen }: Props) {
  const [drillDownCategoria, setDrillDownCategoria] = useState<string | null>(null);

  const ventas = data.ventas || 1;

  const filas: FilaConcepto[] = [
    {
      concepto: 'Ventas',
      monto: data.ventas,
      vertical: (data.ventas / ventas) * 100,
      anterior: data.anterior.ventas,
      variacion: data.anterior.ventas ? ((data.ventas - data.anterior.ventas) / data.anterior.ventas) * 100 : 0,
      isTotal: false,
      categoria: 'ventas',
    },
    {
      concepto: 'Devoluciones y cancelaciones',
      monto: -data.devoluciones,
      vertical: -(data.devoluciones / ventas) * 100,
      anterior: -data.anterior.devoluciones,
      variacion: data.anterior.devoluciones
        ? ((-data.devoluciones + data.anterior.devoluciones) / data.anterior.devoluciones) * 100
        : 0,
      isTotal: false,
      categoria: 'devoluciones',
    },
    {
      concepto: 'Ventas netas',
      monto: data.ventasNetas,
      vertical: (data.ventasNetas / ventas) * 100,
      anterior: data.anterior.ventasNetas,
      variacion: data.anterior.ventasNetas
        ? ((data.ventasNetas - data.anterior.ventasNetas) / data.anterior.ventasNetas) * 100
        : 0,
      isTotal: true,
    },
    {
      concepto: 'Costo de ventas',
      monto: -data.costoVentas,
      vertical: -(data.costoVentas / ventas) * 100,
      anterior: -data.anterior.costoVentas,
      variacion: data.anterior.costoVentas
        ? ((-data.costoVentas + data.anterior.costoVentas) / data.anterior.costoVentas) * 100
        : 0,
      isTotal: false,
      categoria: 'costo-ventas',
    },
    {
      concepto: 'Utilidad bruta',
      monto: data.utilidadBruta,
      vertical: (data.utilidadBruta / ventas) * 100,
      anterior: data.anterior.utilidadBruta,
      variacion: data.anterior.utilidadBruta
        ? ((data.utilidadBruta - data.anterior.utilidadBruta) / data.anterior.utilidadBruta) * 100
        : 0,
      isTotal: true,
    },
    {
      concepto: 'Gastos operativos',
      monto: -data.gastosOperativos,
      vertical: -(data.gastosOperativos / ventas) * 100,
      anterior: -data.anterior.gastosOperativos,
      variacion: data.anterior.gastosOperativos
        ? ((-data.gastosOperativos + data.anterior.gastosOperativos) / data.anterior.gastosOperativos) * 100
        : 0,
      isTotal: false,
      categoria: 'gastos-operativos',
    },
    {
      concepto: 'Utilidad de la operación',
      monto: data.utilidadOperacion,
      vertical: (data.utilidadOperacion / ventas) * 100,
      anterior: data.anterior.utilidadOperacion,
      variacion: data.anterior.utilidadOperacion
        ? ((data.utilidadOperacion - data.anterior.utilidadOperacion) / data.anterior.utilidadOperacion) * 100
        : 0,
      isTotal: true,
    },
  ];

  const handleExport = () => {
    const url = getExportEstadoResultadosUrl(fechaInicio, fechaFin, regimen || undefined);
    window.open(url, '_blank');
  };

  return (
    <>
      <Card>
        <CardHeader className="flex flex-row items-center justify-between">
          <CardTitle>Estado de Resultados</CardTitle>
          <Button variant="outline" size="sm" onClick={handleExport}>
            <Download className="h-4 w-4 mr-2" />
            Exportar Excel
          </Button>
        </CardHeader>
        <CardContent>
          <div className="overflow-x-auto">
            <table className="w-full text-sm">
              <thead>
                <tr className="border-b text-left text-muted-foreground">
                  <th className="pb-3 font-medium">Concepto</th>
                  <th className="pb-3 font-medium text-right">Monto</th>
                  <th className="pb-3 font-medium text-right">% Vertical</th>
                  <th className="pb-3 font-medium text-right">Año Anterior</th>
                  <th className="pb-3 font-medium text-right">Var. %</th>
                  <th className="pb-3 w-8"></th>
                </tr>
              </thead>
              <tbody>
                {filas.map((fila) => (
                  <tr
                    key={fila.concepto}
                    className={`border-b ${
                      fila.isTotal ? 'font-bold bg-muted/30' : 'hover:bg-muted/50'
                    } ${fila.categoria ? 'cursor-pointer' : ''}`}
                    onClick={() => fila.categoria && setDrillDownCategoria(fila.categoria)}
                  >
                    <td className="py-3">{fila.concepto}</td>
                    <td
                      className={`py-3 text-right ${
                        fila.monto >= 0 ? 'text-success' : 'text-destructive'
                      }`}
                    >
                      {formatCurrency(fila.monto)}
                    </td>
                    <td className="py-3 text-right text-muted-foreground">
                      {fila.vertical.toFixed(1)}%
                    </td>
                    <td className="py-3 text-right text-muted-foreground">
                      {formatCurrency(fila.anterior)}
                    </td>
                    <td className="py-3 text-right">
                      <span className={fila.variacion >= 0 ? 'text-success' : 'text-destructive'}>
                        {fila.variacion >= 0 ? '+' : ''}
                        {fila.variacion.toFixed(1)}%
                      </span>
                    </td>
                    <td className="py-3 text-right">
                      {fila.categoria && (
                        <ChevronRight className="h-4 w-4 text-muted-foreground" />
                      )}
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </CardContent>
      </Card>

      {drillDownCategoria && (
        <EstadoResultadosDrillDownModal
          categoria={drillDownCategoria}
          fechaInicio={fechaInicio}
          fechaFin={fechaFin}
          regimen={regimen}
          onClose={() => setDrillDownCategoria(null)}
        />
      )}
    </>
  );
}
