// @ts-nocheck
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import type { SessionSummary } from "@/types/modules/cashRegister";

interface Props {
  summary: SessionSummary | undefined;
  isLoading: boolean;
}

export default function SessionSalesTable({ summary, isLoading }: Props) {
  const breakdown = summary?.payment_breakdown ?? [];

  return (
    <Card>
      <CardHeader>
        <CardTitle className="text-base">Resumen de Ventas por Método de Pago</CardTitle>
      </CardHeader>
      <CardContent>
        {isLoading ? (
          <p className="text-center text-gray-500 py-4 text-sm">Cargando...</p>
        ) : breakdown.length === 0 ? (
          <p className="text-center text-gray-500 py-4 text-sm">Sin transacciones</p>
        ) : (
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>Método de Pago</TableHead>
                <TableHead className="text-right">Transacciones</TableHead>
                <TableHead className="text-right">Total</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {breakdown.map((item, idx) => (
                <TableRow key={idx}>
                  <TableCell>
                    <Badge variant="outline">{item.payment_method_name}</Badge>
                  </TableCell>
                  <TableCell className="text-right">{item.transaction_count}</TableCell>
                  <TableCell className="text-right font-medium">
                    ${item.total_amount.toLocaleString("es-CL")}
                  </TableCell>
                </TableRow>
              ))}
              <TableRow className="font-bold border-t-2">
                <TableCell>Total</TableCell>
                <TableCell className="text-right">
                  {breakdown.reduce((sum, i) => sum + i.transaction_count, 0)}
                </TableCell>
                <TableCell className="text-right">
                  ${breakdown.reduce((sum, i) => sum + i.total_amount, 0).toLocaleString("es-CL")}
                </TableCell>
              </TableRow>
            </TableBody>
          </Table>
        )}
      </CardContent>
    </Card>
  );
}