// @ts-nocheck
// @ts-nocheck
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { Building, FileText } from "lucide-react";
import { format } from "date-fns";
import { es } from "date-fns/locale";
import { useLedger } from "@/hooks/useLedger";

export default function LedgerPage() {
  const {
    selectedCompany,
    accounts,
    selectedAccount,
    dateFrom,
    dateTo,
    ledgerEntries,
    totalDebit,
    totalCredit,
    isLoading,
    setSelectedAccount,
    setDateFrom,
    setDateTo,
  } = useLedger();

  if (isLoading) {
    return <div className="p-8">Cargando...</div>;
  }

  return (
    <div className="p-4 lg:p-8 space-y-8">
      <div className="flex flex-col lg:flex-row justify-between items-start lg:items-center gap-4">
        <div>
          <h1 className="text-3xl font-bold text-gradient">Libro Mayor</h1>
          <p className="text-gray-600 mt-1">{selectedCompany?.name}</p>
        </div>
      </div>

      {!selectedCompany ? (
        <div className="text-center py-16">
          <Building className="w-16 h-16 text-gray-400 mx-auto mb-4" />
          <h2 className="text-xl font-semibold text-gray-900 mb-2">Ninguna Empresa Seleccionada</h2>
          <p className="text-gray-500">Por favor selecciona una empresa para ver el libro mayor.</p>
        </div>
      ) : (
        <>
          <Card className="glass-card border-white/20">
            <CardContent className="p-6">
              <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
                <div>
                  <Label>Seleccionar cuenta</Label>
                  <Select
                    value={selectedAccount?.id}
                    onValueChange={(val) => setSelectedAccount(accounts.find((a) => a.id === val))}
                  >
                    <SelectTrigger>
                      <SelectValue placeholder="Elegir cuenta" />
                    </SelectTrigger>
                    <SelectContent>
                      {accounts.map((acc) => (
                        <SelectItem key={acc.id} value={acc.id}>
                          {acc.account_code} - {acc.name}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </div>
                <div>
                  <Label>Desde</Label>
                  <Input type="date" value={dateFrom} onChange={(e) => setDateFrom(e.target.value)} />
                </div>
                <div>
                  <Label>Hasta</Label>
                  <Input type="date" value={dateTo} onChange={(e) => setDateTo(e.target.value)} />
                </div>
                <div className="flex items-end">
                  <Button className="w-full">Generar reporte</Button>
                </div>
              </div>
            </CardContent>
          </Card>

          {selectedAccount && (
            <Card className="glass-card border-white/20">
              <CardHeader>
                <CardTitle>
                  Libro Mayor: {selectedAccount.account_code} - {selectedAccount.name}
                </CardTitle>
              </CardHeader>
              <CardContent>
                <Table>
                  <TableHeader>
                    <TableRow>
                      <TableHead>Fecha</TableHead>
                      <TableHead>Referencia</TableHead>
                      <TableHead>Descripcion</TableHead>
                      <TableHead className="text-right">Debito</TableHead>
                      <TableHead className="text-right">Credito</TableHead>
                      <TableHead className="text-right">Saldo</TableHead>
                    </TableRow>
                  </TableHeader>
                  <TableBody>
                    {ledgerEntries.length > 0 ? (
                      ledgerEntries.map((entry, idx) => (
                        <TableRow key={idx}>
                          <TableCell>{format(new Date(entry.date), "d MMM yyyy", { locale: es })}</TableCell>
                          <TableCell className="font-mono text-sm">{entry.reference}</TableCell>
                          <TableCell>{entry.description}</TableCell>
                          <TableCell className="text-right font-mono">
                            {entry.debit > 0 ? `$${entry.debit.toLocaleString()}` : "-"}
                          </TableCell>
                          <TableCell className="text-right font-mono">
                            {entry.credit > 0 ? `$${entry.credit.toLocaleString()}` : "-"}
                          </TableCell>
                          <TableCell className="text-right font-mono font-semibold">
                            ${entry.balance.toLocaleString()}
                          </TableCell>
                        </TableRow>
                      ))
                    ) : (
                      <TableRow>
                        <TableCell colSpan={6} className="h-24 text-center">
                          <FileText className="w-8 h-8 text-gray-400 mx-auto mb-2" />
                          {selectedAccount
                            ? "No se encontraron transacciones para el periodo seleccionado."
                            : "Por favor selecciona una cuenta."}
                        </TableCell>
                      </TableRow>
                    )}
                    {ledgerEntries.length > 0 && (
                      <TableRow className="font-bold bg-slate-50">
                        <TableCell colSpan={3}>Total</TableCell>
                        <TableCell className="text-right">${totalDebit.toLocaleString()}</TableCell>
                        <TableCell className="text-right">${totalCredit.toLocaleString()}</TableCell>
                        <TableCell className="text-right">${(totalDebit - totalCredit).toLocaleString()}</TableCell>
                      </TableRow>
                    )}
                  </TableBody>
                </Table>
              </CardContent>
            </Card>
          )}
        </>
      )}
    </div>
  );
}