'use client';

import { useState } from 'react';
import { Header } from '@/components/layouts/header';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { useCfdis } from '@/lib/hooks/use-cfdi';
import type { CfdiFilters, TipoCfdi } from '@horux/shared';
import { FileText, Search, ChevronLeft, ChevronRight } from 'lucide-react';

export default function CfdiPage() {
  const [filters, setFilters] = useState<CfdiFilters>({
    page: 1,
    limit: 20,
  });
  const [searchTerm, setSearchTerm] = useState('');

  const { data, isLoading } = useCfdis(filters);

  const handleSearch = () => {
    setFilters({ ...filters, search: searchTerm, page: 1 });
  };

  const handleFilterType = (tipo?: TipoCfdi) => {
    setFilters({ ...filters, tipo, page: 1 });
  };

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

  const formatDate = (dateString: string) =>
    new Date(dateString).toLocaleDateString('es-MX', {
      day: '2-digit',
      month: 'short',
      year: 'numeric',
    });

  return (
    <>
      <Header title="Gestion de CFDI" />
      <main className="p-6 space-y-6">
        {/* Filters */}
        <Card>
          <CardContent className="p-4">
            <div className="flex flex-wrap gap-4">
              <div className="flex gap-2 flex-1 min-w-[300px]">
                <Input
                  placeholder="Buscar por UUID, RFC o nombre..."
                  value={searchTerm}
                  onChange={(e) => setSearchTerm(e.target.value)}
                  onKeyDown={(e) => e.key === 'Enter' && handleSearch()}
                />
                <Button onClick={handleSearch}>
                  <Search className="h-4 w-4" />
                </Button>
              </div>
              <div className="flex gap-2">
                <Button
                  variant={filters.tipo === undefined ? 'default' : 'outline'}
                  size="sm"
                  onClick={() => handleFilterType(undefined)}
                >
                  Todos
                </Button>
                <Button
                  variant={filters.tipo === 'ingreso' ? 'default' : 'outline'}
                  size="sm"
                  onClick={() => handleFilterType('ingreso')}
                >
                  Ingresos
                </Button>
                <Button
                  variant={filters.tipo === 'egreso' ? 'default' : 'outline'}
                  size="sm"
                  onClick={() => handleFilterType('egreso')}
                >
                  Egresos
                </Button>
              </div>
            </div>
          </CardContent>
        </Card>

        {/* Table */}
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2 text-base">
              <FileText className="h-4 w-4" />
              CFDIs ({data?.total || 0})
            </CardTitle>
          </CardHeader>
          <CardContent>
            {isLoading ? (
              <div className="text-center py-8 text-muted-foreground">
                Cargando...
              </div>
            ) : data?.data.length === 0 ? (
              <div className="text-center py-8 text-muted-foreground">
                No se encontraron CFDIs
              </div>
            ) : (
              <div className="overflow-x-auto">
                <table className="w-full">
                  <thead>
                    <tr className="border-b text-left text-sm text-muted-foreground">
                      <th className="pb-3 font-medium">Fecha</th>
                      <th className="pb-3 font-medium">Tipo</th>
                      <th className="pb-3 font-medium">Serie/Folio</th>
                      <th className="pb-3 font-medium">Emisor/Receptor</th>
                      <th className="pb-3 font-medium text-right">Total</th>
                      <th className="pb-3 font-medium">Estado</th>
                    </tr>
                  </thead>
                  <tbody className="text-sm">
                    {data?.data.map((cfdi) => (
                      <tr key={cfdi.id} className="border-b hover:bg-muted/50">
                        <td className="py-3">{formatDate(cfdi.fechaEmision)}</td>
                        <td className="py-3">
                          <span
                            className={`px-2 py-1 rounded-full text-xs font-medium ${
                              cfdi.tipo === 'ingreso'
                                ? 'bg-success/10 text-success'
                                : 'bg-destructive/10 text-destructive'
                            }`}
                          >
                            {cfdi.tipo === 'ingreso' ? 'Ingreso' : 'Egreso'}
                          </span>
                        </td>
                        <td className="py-3">
                          {cfdi.serie || '-'}-{cfdi.folio || '-'}
                        </td>
                        <td className="py-3">
                          <div>
                            <p className="font-medium">
                              {cfdi.tipo === 'ingreso'
                                ? cfdi.nombreReceptor
                                : cfdi.nombreEmisor}
                            </p>
                            <p className="text-xs text-muted-foreground">
                              {cfdi.tipo === 'ingreso'
                                ? cfdi.rfcReceptor
                                : cfdi.rfcEmisor}
                            </p>
                          </div>
                        </td>
                        <td className="py-3 text-right font-medium">
                          {formatCurrency(cfdi.total)}
                        </td>
                        <td className="py-3">
                          <span
                            className={`px-2 py-1 rounded-full text-xs font-medium ${
                              cfdi.estado === 'vigente'
                                ? 'bg-success/10 text-success'
                                : 'bg-muted text-muted-foreground'
                            }`}
                          >
                            {cfdi.estado === 'vigente' ? 'Vigente' : 'Cancelado'}
                          </span>
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            )}

            {/* Pagination */}
            {data && data.totalPages > 1 && (
              <div className="flex items-center justify-between mt-4 pt-4 border-t">
                <p className="text-sm text-muted-foreground">
                  Pagina {data.page} de {data.totalPages}
                </p>
                <div className="flex gap-2">
                  <Button
                    variant="outline"
                    size="sm"
                    disabled={data.page <= 1}
                    onClick={() =>
                      setFilters({ ...filters, page: (filters.page || 1) - 1 })
                    }
                  >
                    <ChevronLeft className="h-4 w-4" />
                  </Button>
                  <Button
                    variant="outline"
                    size="sm"
                    disabled={data.page >= data.totalPages}
                    onClick={() =>
                      setFilters({ ...filters, page: (filters.page || 1) + 1 })
                    }
                  >
                    <ChevronRight className="h-4 w-4" />
                  </Button>
                </div>
              </div>
            )}
          </CardContent>
        </Card>
      </main>
    </>
  );
}