'use client';

import { Badge } from '@/components/ui/badge';
import { CardHeader, CardTitle } from '@/components/ui/card';
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';

interface SaleRow {
    invoiceId: string;
    customer: string;
    date: string;
    total: number;
    paid: number;
    due: number;
    status: string;
}

interface Props {
    data?: SaleRow[];
}

const statusStyles: Record<string, string> = {
    'Paid':           'bg-emerald-100 text-emerald-700',
    'Partially Paid': 'bg-amber-100 text-amber-700',
    'Unpaid':         'bg-red-100 text-red-700',
};

export function RecentSalesTable({ data = [] }: Props) {
    return (
        <div className="w-80 sm:w-full">
            <CardHeader className="flex flex-row items-center justify-between px-2 pb-4">
                <div>
                    <CardTitle className="text-lg font-bold text-foreground/80">Recent Sales Report</CardTitle>
                    <p className="text-xs text-foreground/70">Last 10 orders</p>
                </div>
            </CardHeader>

            <div className="overflow-hidden rounded-xl border bg-card">
                <div className="overflow-x-auto">
                    <Table>
                        <TableHeader className="sticky top-0 z-10 bg-card">
                            <TableRow className="border-b hover:bg-transparent">
                                <TableHead className="px-6 py-4 text-left text-xs font-medium tracking-wider whitespace-nowrap text-gray-500 uppercase">Invoice ID</TableHead>
                                <TableHead className="px-6 py-4 text-left text-xs font-medium tracking-wider whitespace-nowrap text-gray-500 uppercase">Customer Name</TableHead>
                                <TableHead className="px-6 py-4 text-left text-xs font-medium tracking-wider whitespace-nowrap text-gray-500 uppercase">Date</TableHead>
                                <TableHead className="px-6 py-4 text-right text-xs font-medium tracking-wider whitespace-nowrap text-gray-500 uppercase">Total Amount</TableHead>
                                <TableHead className="px-6 py-4 text-right text-xs font-medium tracking-wider whitespace-nowrap text-gray-500 uppercase">Paid</TableHead>
                                <TableHead className="px-6 py-4 text-right text-xs font-medium tracking-wider whitespace-nowrap text-gray-500 uppercase">Due</TableHead>
                                <TableHead className="px-6 py-4 text-center text-xs font-medium tracking-wider whitespace-nowrap text-gray-500 uppercase">Payment Status</TableHead>
                            </TableRow>
                        </TableHeader>
                        <TableBody>
                            {data.length === 0 ? (
                                <TableRow>
                                    <TableCell colSpan={7} className="px-6 py-8 text-center text-muted-foreground">
                                        No recent orders found.
                                    </TableCell>
                                </TableRow>
                            ) : (
                                data.map((sale) => (
                                    <TableRow key={sale.invoiceId} className="hover:bg-muted/50">
                                        <TableCell className="px-6 font-medium whitespace-nowrap">{sale.invoiceId}</TableCell>
                                        <TableCell className="px-6 whitespace-nowrap">{sale.customer}</TableCell>
                                        <TableCell className="px-6 whitespace-nowrap text-muted-foreground">{sale.date}</TableCell>
                                        <TableCell className="px-6 text-right font-medium whitespace-nowrap">{sale.total.toLocaleString()}</TableCell>
                                        <TableCell className="px-6 text-right font-medium whitespace-nowrap text-emerald-600">
                                            {sale.paid.toLocaleString()}
                                        </TableCell>
                                        <TableCell className="px-6 text-right font-medium whitespace-nowrap">{sale.due.toLocaleString()}</TableCell>
                                        <TableCell className="px-6 text-center whitespace-nowrap">
                                            <Badge
                                                variant="secondary"
                                                className={`px-4 py-1 font-medium ${statusStyles[sale.status] ?? ''}`}
                                            >
                                                {sale.status}
                                            </Badge>
                                        </TableCell>
                                    </TableRow>
                                ))
                            )}
                        </TableBody>
                    </Table>
                </div>
            </div>
        </div>
    );
}