
'use client';

import { SidebarProvider } from '@/components/ui/sidebar';
import { DashboardLayout } from '@/components/dashboard-layout';
import { Card, CardContent, CardHeader, CardTitle, CardDescription, CardFooter } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, TableFooter as ShadTableFooter } from '@/components/ui/table';
import { Printer } from 'lucide-react';
import Link from 'next/link';

type InvoiceDetail = {
    trackingNumber: string;
    codAmount: number;
    deliveryCharges: number;
    gst: number;
    netAmount: number;
};

const mockInvoiceDetails: InvoiceDetail[] = [
    { trackingNumber: 'PCL162818', codAmount: 1000, deliveryCharges: 150, gst: 24, netAmount: 1174 },
    { trackingNumber: 'PCL162819', codAmount: 2000, deliveryCharges: 200, gst: 32, netAmount: 2232 },
    { trackingNumber: 'PCL162820', codAmount: 1500, deliveryCharges: 150, gst: 24, netAmount: 1674 },
];

const totalCOD = mockInvoiceDetails.reduce((sum, item) => sum + item.codAmount, 0);
const totalDelivery = mockInvoiceDetails.reduce((sum, item) => sum + item.deliveryCharges, 0);
const totalGST = mockInvoiceDetails.reduce((sum, item) => sum + item.gst, 0);
const totalNet = mockInvoiceDetails.reduce((sum, item) => sum + item.netAmount, 0);

export default function InvoiceDetailPage({ params }: { params: { invoiceId: string } }) {
  
  return (
    <SidebarProvider>
      <DashboardLayout onBookingComplete={() => {}} userRole="seller">
        <div className="flex flex-col gap-8">
            <div className="flex items-center justify-end">
                <Button onClick={() => window.print()}>
                    <Printer className="mr-2 h-4 w-4" />
                    Print Invoice
                </Button>
            </div>
            <Card>
                <CardHeader>
                    <div className="flex justify-between items-start">
                        <div>
                            <CardTitle>Al-wasi Soft Tech</CardTitle>
                            <CardDescription>
                                Invoice <span className="font-bold text-primary">{params.invoiceId}</span> | 
                                Date: {new Date().toLocaleDateString()}
                            </CardDescription>
                        </div>
                        <div>
                           <p className="font-semibold">Seller Name</p>
                           <p className="text-sm text-muted-foreground">Main Office, Multan</p>
                        </div>
                    </div>
                </CardHeader>
                <CardContent>
                    <Table>
                        <TableHeader>
                            <TableRow>
                                <TableHead>Tracking #</TableHead>
                                <TableHead className="text-right">COD Amount</TableHead>
                                <TableHead className="text-right">Delivery Charges</TableHead>
                                <TableHead className="text-right">GST (16%)</TableHead>
                                <TableHead className="text-right">Net Amount</TableHead>
                            </TableRow>
                        </TableHeader>
                        <TableBody>
                            {mockInvoiceDetails.map(item => (
                                <TableRow key={item.trackingNumber}>
                                    <TableCell>{item.trackingNumber}</TableCell>
                                    <TableCell className="text-right">{item.codAmount.toFixed(2)}</TableCell>
                                    <TableCell className="text-right">{item.deliveryCharges.toFixed(2)}</TableCell>
                                    <TableCell className="text-right">{item.gst.toFixed(2)}</TableCell>
                                    <TableCell className="text-right">{item.netAmount.toFixed(2)}</TableCell>
                                </TableRow>
                            ))}
                        </TableBody>
                        <ShadTableFooter>
                            <TableRow>
                                <TableCell className="font-bold">Total</TableCell>
                                <TableCell className="text-right font-bold">{totalCOD.toFixed(2)}</TableCell>
                                <TableCell className="text-right font-bold">{totalDelivery.toFixed(2)}</TableCell>
                                <TableCell className="text-right font-bold">{totalGST.toFixed(2)}</TableCell>
                                <TableCell className="text-right font-bold">{totalNet.toFixed(2)}</TableCell>
                            </TableRow>
                        </ShadTableFooter>
                    </Table>
                </CardContent>
                <CardFooter>
                    <p className="text-xs text-muted-foreground">
                        This is a computer-generated invoice and does not require a signature.
                    </p>
                </CardFooter>
            </Card>
        </div>
      </DashboardLayout>
    </SidebarProvider>
  );
}
