import { Button } from '@/components/ui/button';
import {
    Table,
    TableHeader,
    TableRow,
    TableHead,
    TableBody,
    TableCell,
} from '@/components/ui/table';
import { Separator } from '@/components/ui/separator';

interface ProductsData {
    id: number;
    qty: number;
    name: number;
    price: number;
}
interface DataProps {
    id: any;
    subtotal: number;
    payable: number;
    payment?: number | 0;
    due?: number | 0;
    date: string;
    customer?: {
        id: number;
        name: string;
        phone?: string;
    };
    products: ProductsData[];
}

interface PropsData {
    data?: DataProps | null;
    setData?: any;
}

export default function Invoice({ data, setData }: PropsData) {
    if (!data) return null;
    return (
        <div className="fixed top-0 left-0 z-50 flex h-screen w-full items-center justify-center overflow-y-auto bg-background/10 backdrop-blur-2xl print:items-start print:bg-white">
            <div className="flex w-[210mm] print:h-full flex-col">
                <header className="flex items-center justify-between p-6">
                    <h1 className="text-2xl font-bold print:text-black">
                        Invoice #{data.id}
                    </h1>
                    <div className="flex items-center gap-4 print:hidden">
                        <Button
                            variant="outline"
                            onClick={() => window.print()}
                        >
                            Print
                        </Button>
                        <Button
                            variant="destructive"
                            onClick={() => setData(null)}
                        >
                            Close
                        </Button>
                    </div>
                </header>
                <main className="flex-1 overflow-auto p-6">
                    <div className="grid gap-6">
                        <div className="grid gap-2">
                            <h2 className="text-lg font-semibold print:text-black">
                                Billing Information
                            </h2>
                            <div className="grid gap-1 print:text-black">
                                <div className="font-medium">
                                    {data.customer?.name}
                                </div>
                                <div>{data.customer?.phone}</div>
                            </div>
                        </div>
                        <div className="mt-5 grid gap-2">
                            <h2 className="text-lg font-semibold print:text-black">
                                Invoice Items
                            </h2>
                            <Table>
                                <TableHeader>
                                    <TableRow>
                                        <TableHead className="print:text-black">
                                            Description
                                        </TableHead>
                                        <TableHead className="print:text-black">
                                            Quantity
                                        </TableHead>
                                        <TableHead className="text-right print:text-black">
                                            Price
                                        </TableHead>
                                        <TableHead className="text-right print:text-black">
                                            Total
                                        </TableHead>
                                    </TableRow>
                                </TableHeader>
                                <TableBody>
                                    {data.products.map((val, i) => (
                                        <TableRow key={i}>
                                            <TableCell className="print:text-black">
                                                {val.name}
                                            </TableCell>
                                            <TableCell className="print:text-black">
                                                {val.qty}
                                            </TableCell>
                                            <TableCell className="text-right print:text-black">
                                                {val.price.toLocaleString(
                                                    'en-DB',
                                                )}{' '}
                                                Tk
                                            </TableCell>
                                            <TableCell className="text-right print:text-black">
                                                {(
                                                    val.price * val.qty
                                                ).toLocaleString('en-DB')}{' '}
                                                Tk
                                            </TableCell>
                                        </TableRow>
                                    ))}
                                </TableBody>
                            </Table>
                        </div>
                        <div className="mr-0 ml-auto grid w-100 gap-2">
                            <h2 className="text-lg font-semibold print:text-black">
                                Payment
                            </h2>
                            <div className="grid gap-1">
                                <div className="flex items-center print:text-black">
                                    <div>Subtotal</div>
                                    <div className="ml-auto">
                                        {data.subtotal.toLocaleString('en-BD')}{' '}
                                        Tk
                                    </div>
                                </div>
                                <div className="flex items-center print:text-black">
                                    <div>Payment</div>
                                    <div className="ml-auto">
                                        {(data.payment || 0).toLocaleString(
                                            'en-BD',
                                        )}{' '}
                                        Tk
                                    </div>
                                </div>
                                <div className="flex items-center print:text-black">
                                    <div>Due</div>
                                    <div className="ml-auto">
                                        {(data.due || 0).toLocaleString(
                                            'en-BD',
                                        )}{' '}
                                        Tk
                                    </div>
                                </div>
                                <Separator />
                                <div className="flex items-center font-medium print:text-black">
                                    <div>Total</div>
                                    <div className="ml-auto">
                                        {(data.due || 0).toLocaleString(
                                            'en-BD',
                                        )}{' '}
                                        Tk
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </main>

                <small className="mt-auto text-black hidden print:block">
                    Development By{' '}
                    <a
                        href="https://www.facebook.com/Ctg.it.soft.bd/"
                        target="_blank"
                    >
                        Ctgitsoft
                    </a>
                    {'  |  '}
                    <a
                        href="https://www.facebook.com/codesuab/"
                        target="_blank"
                    >
                        Codesuab
                    </a>
                </small>
            </div>
        </div>
    );
}