import Layout from '@/components/Layout';
import React from 'react';
import {
    Table,
    TableBody,
    TableCaption,
    TableCell,
    TableHead,
    TableHeader,
    TableRow,
} from '@/components/ui/table';
import {
    Card,
    CardContent,
    CardDescription,
    CardFooter,
    CardHeader,
    CardTitle,
} from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Printer } from 'lucide-react';

interface InvestProps {
    amount: number;
    customer: {
        name: string;
    };
}

interface SalesProps {
    id: number;
    payable: number;
    due: number | 0;
}

interface DueProps {
    customer: {
        name: string;
    };
}

interface ExpenseProps {
    note?: string | '--';
    amount: number;
}

interface TotalProps {
    invest: number | 0;
    sales: number | 0;
    expense: number | 0;
    due: number | 0;
    previousCash: number | 0;
}

interface PageProps {
    invest?: InvestProps[];
    sales?: SalesProps[];
    expense?: ExpenseProps[];
    due?: (DueProps & SalesProps)[];
    maxCol: number | 0;
    total: TotalProps;
    today: string;
    day: string;
}

export default function report({
    invest,
    sales,
    expense,
    due,
    maxCol,
    total,
    today,
    day,
}: PageProps) {
    const getNeedCol = (count: number) => {
        return maxCol - count || 0;
    };

    return (
        <Layout title="Daily report">
            <Card className="print:fixed print:top-0 print:left-1/2 print:z-999 print:h-auto print:min-h-screen print:w-full print:-translate-x-1/2 print:rounded-none print:bg-white">
                <CardHeader>
                    <div className="flex items-start justify-between">
                        <div>
                            <CardTitle className="text-3xl print:text-black">
                                ইনসাফ ফ্যাশন
                            </CardTitle>
                            <CardDescription className="print:text-black">
                                <h1>তারিখঃ {today}</h1>
                                <h1>রোজঃ {day}</h1>
                            </CardDescription>
                        </div>

                        <Button
                            onClick={() => window.print()}
                            className="print:hidden"
                        >
                            <Printer />
                            Print
                        </Button>
                    </div>
                </CardHeader>

                <CardContent className="grid grid-cols-4">
                    {/* invest */}
                    <Table className="table-fixed border border-border">
                        <TableHeader>
                            <TableRow className="border-b border-border">
                                <TableHead
                                    className="border-border text-center print:text-black"
                                    colSpan={2}
                                >
                                    জমা
                                </TableHead>
                            </TableRow>
                        </TableHeader>

                        <TableBody>
                            {invest?.map((val, i) => (
                                <TableRow
                                    key={i}
                                    className="border-b border-border last:border-0 print:text-black"
                                >
                                    <TableCell className="truncate border-r border-border">
                                        {val.customer.name}
                                    </TableCell>
                                    <TableCell className="border-r border-border text-right">
                                        {val.amount.toLocaleString('en-BD')}
                                    </TableCell>
                                </TableRow>
                            ))}

                            {Array.from({
                                length: getNeedCol(invest?.length || 0),
                            }).map((_, index) => (
                                <TableRow
                                    key={index}
                                    className="border-b border-border last:border-0"
                                >
                                    <TableCell className="border-r border-border text-right">
                                        <span className="opacity-0">--</span>
                                    </TableCell>
                                    <TableCell className="border-r border-border text-right">
                                        <span className="opacity-0">--</span>
                                    </TableCell>
                                </TableRow>
                            ))}
                        </TableBody>
                    </Table>

                    {/* sales */}
                    <Table className="table-fixed border border-x-0 border-r-0 border-border">
                        <TableHeader>
                            <TableRow className="border-b border-border">
                                <TableHead
                                    className="border-r border-border text-center print:text-black"
                                    colSpan={2}
                                >
                                    বিক্রয়
                                </TableHead>
                            </TableRow>
                        </TableHeader>

                        <TableBody>
                            {sales?.map((val, i) => (
                                <TableRow
                                    key={i}
                                    className="border-b border-border last:border-0 print:text-black"
                                >
                                    <TableCell className="border-r border-border text-right">
                                        {val.id}
                                    </TableCell>
                                    <TableCell className="border-r border-border text-right">
                                        {val.payable.toLocaleString('en-BD')}
                                    </TableCell>
                                </TableRow>
                            ))}

                            {Array.from({
                                length: getNeedCol(sales?.length || 0),
                            }).map((_, index) => (
                                <TableRow
                                    key={index}
                                    className="border-b border-border last:border-0"
                                >
                                    <TableCell className="border-r border-border text-right">
                                        <span className="opacity-0">--</span>
                                    </TableCell>
                                    <TableCell className="border-r border-border text-right">
                                        <span className="opacity-0">--</span>
                                    </TableCell>
                                </TableRow>
                            ))}
                        </TableBody>
                    </Table>

                    {/* expense */}
                    <Table className="table-fixed border border-x-0 border-border">
                        <TableHeader>
                            <TableRow className="border-b border-border">
                                <TableHead
                                    className="border-r border-border text-center print:text-black"
                                    colSpan={2}
                                >
                                    খরচ
                                </TableHead>
                            </TableRow>
                        </TableHeader>

                        <TableBody>
                            {expense?.map((val, i) => (
                                <TableRow
                                    key={i}
                                    className="border-b border-border last:border-0 print:text-black"
                                >
                                    <TableCell className="truncate border-r border-border">
                                        {val.note || '--'}
                                    </TableCell>
                                    <TableCell className="border-r border-border text-right">
                                        {val.amount.toLocaleString('en-BD')}
                                    </TableCell>
                                </TableRow>
                            ))}

                            {Array.from({
                                length: getNeedCol(expense?.length || 0),
                            }).map((_, index) => (
                                <TableRow
                                    key={index}
                                    className="border-b border-border last:border-0"
                                >
                                    <TableCell className="border-r border-border text-right">
                                        <span className="opacity-0">--</span>
                                    </TableCell>
                                    <TableCell className="border-r border-border text-right">
                                        <span className="opacity-0">--</span>
                                    </TableCell>
                                </TableRow>
                            ))}
                        </TableBody>
                    </Table>

                    {/* due */}
                    <Table className="table-fixed border border-x-0 border-r-0 border-border">
                        <TableHeader>
                            <TableRow className="border-b border-border">
                                <TableHead
                                    className="border-r border-border text-center print:text-black"
                                    colSpan={2}
                                >
                                    বাকি
                                </TableHead>
                            </TableRow>
                        </TableHeader>

                        <TableBody>
                            {due?.map((val, i) => (
                                <TableRow
                                    key={i}
                                    className="border-b border-border last:border-0 print:text-black"
                                >
                                    <TableCell className="truncate border-r border-border">
                                        {val.customer.name}
                                    </TableCell>
                                    <TableCell className="border-r border-border text-right">
                                        {(val.due || 0).toLocaleString('en-BD')}
                                    </TableCell>
                                </TableRow>
                            ))}

                            {Array.from({
                                length: getNeedCol(due?.length || 0),
                            }).map((_, index) => (
                                <TableRow
                                    key={index}
                                    className="border-b border-border last:border-0"
                                >
                                    <TableCell className="border-r border-border text-right">
                                        <span className="opacity-0">--</span>
                                    </TableCell>
                                    <TableCell className="border-r border-border text-right">
                                        <span className="opacity-0">--</span>
                                    </TableCell>
                                </TableRow>
                            ))}
                        </TableBody>
                    </Table>

                    <div className="col-span-4 grid grid-cols-4">
                        {/* invest */}
                        <Table className="table-fixed border border-t-0 border-border print:text-black">
                            <TableBody>
                                <TableRow className="border-b border-border last:border-0">
                                    <TableCell className="border-r border-border text-right">
                                        Total
                                    </TableCell>
                                    <TableCell className="border-r border-border text-right">
                                        {total.invest.toLocaleString('en-DB')}
                                    </TableCell>
                                </TableRow>
                            </TableBody>
                        </Table>

                        {/* sales */}
                        <Table className="table-fixed border border-x-0 border-t-0 border-border print:text-black">
                            <TableBody>
                                <TableRow className="border-b border-border last:border-0">
                                    <TableCell className="border-r border-border text-right">
                                        Total
                                    </TableCell>
                                    <TableCell className="border-r border-border text-right">
                                        {total.sales.toLocaleString('en-DB')}
                                    </TableCell>
                                </TableRow>
                            </TableBody>
                        </Table>

                        {/* expense */}
                        <Table className="table-fixed border border-x-0 border-t-0 border-border print:text-black">
                            <TableBody>
                                <TableRow className="border-b border-border last:border-0">
                                    <TableCell className="border-r border-border text-right">
                                        Total
                                    </TableCell>
                                    <TableCell className="border-r border-border text-right">
                                        {total.expense.toLocaleString('en-DB')}
                                    </TableCell>
                                </TableRow>
                            </TableBody>
                        </Table>

                        {/* due */}
                        <Table className="table-fixed border border-x-0 border-t-0 border-border print:text-black">
                            <TableBody>
                                <TableRow className="border-b border-border last:border-0">
                                    <TableCell className="border-r border-border text-right">
                                        Total
                                    </TableCell>
                                    <TableCell className="border-r border-border text-right">
                                        {total.due.toLocaleString('en-DB')}
                                    </TableCell>
                                </TableRow>
                            </TableBody>
                        </Table>
                    </div>
                </CardContent>

                <CardFooter className="max-w-106">
                    <Table className="table-fixed border">
                        <TableBody>
                            <TableRow>
                                <TableCell className="border-r border-border print:text-black">
                                    সাবেক ক্যাশ
                                </TableCell>
                                <TableCell className="text-right print:text-black">
                                    {total.previousCash.toLocaleString('en-BD')}
                                </TableCell>
                            </TableRow>
                            <TableRow>
                                <TableCell className="border-r border-border print:text-black">
                                    বিক্রয়
                                </TableCell>
                                <TableCell className="text-right print:text-black">
                                    {total.sales.toLocaleString('en-BD')}
                                </TableCell>
                            </TableRow>
                            <TableRow>
                                <TableCell className="border-r border-border print:text-black">
                                    জমা
                                </TableCell>
                                <TableCell className="text-right print:text-black">
                                    {total.invest.toLocaleString('en-BD')}
                                </TableCell>
                            </TableRow>
                            <TableRow>
                                <TableCell className="border-r border-border print:text-black">
                                    বাকি/হুলাত
                                </TableCell>
                                <TableCell className="text-right print:text-black">
                                    -{total.due.toLocaleString('en-BD')}
                                </TableCell>
                            </TableRow>
                            <TableRow>
                                <TableCell className="border-r border-border print:text-black">
                                    খরচ
                                </TableCell>
                                <TableCell className="text-right print:text-black">
                                    -{total.expense.toLocaleString('en-BD')}
                                </TableCell>
                            </TableRow>
                            <TableRow className="bg-destructive print:bg-white">
                                <TableCell className="border-r border-border print:text-black">
                                    ক্যাশ
                                </TableCell>
                                <TableCell className="text-right print:text-black">
                                    {(
                                        total.invest -
                                        total.expense +
                                        total.previousCash
                                    ).toLocaleString('en-DB')}
                                </TableCell>
                            </TableRow>
                        </TableBody>
                    </Table>
                </CardFooter>
            </Card>
        </Layout>
    );
}