import Layout from '@/components/Layout';
import PageHeader from '@/components/PageHeader';
import { StatsCard } from '@/components/StatsCard';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { usePage } from '@inertiajs/react';
import {
    Table,
    TableBody,
    TableCell,
    TableHead,
    TableHeader,
    TableRow,
} from '@/components/ui/table';
import {
    Empty,
    EmptyContent,
    EmptyDescription,
    EmptyHeader,
    EmptyMedia,
    EmptyTitle,
} from '@/components/ui/empty';
import { Frown } from 'lucide-react';

interface SalesProps {
    currentSales: number | 0;
    salesPercentage: number | 0;
}
interface DueProps {
    currentSalesDue: number | 0;
    duePercentage: number | 0;
}
interface PaymentProps {
    currentSalesPayment: number | 0;
    paymentPercentage: number | 0;
}

interface RecentSales {
    customer: {
        name: string;
    };
    subtotal: number;
    payment: number | 0;
    due: number | 0;
}

interface RecentBank {
    date: string;
    amount: number;
}
interface LowStock {
    name: string;
    stock: number;
}

interface PageProps {
    sales: SalesProps;
    due: DueProps;
    payment: PaymentProps;
    todaysSales: number;
    todaysSalesPercentage: number;
    recentSales?: RecentSales[];
    recentBank: RecentBank[];
    recentSalesTr: RecentBank[];
    lowStock?: LowStock[];
}

export default function home({
    sales,
    due,
    payment,
    todaysSales,
    todaysSalesPercentage,
    recentSales,
    recentBank,
    recentSalesTr,
    lowStock,
}: PageProps) {
    const { auth } = usePage().props;
    const user = auth.user;
    return (
        <Layout title="Dashboard">
            <PageHeader
                title={`Welcome, ${user.name}`}
                subtitle="Here's an overview of your business performance and financial activity."
            />

            <div className="grid grid-cols-1 gap-4 md:grid-cols-4">
                <StatsCard
                    title="Totals Sales"
                    value={sales.currentSales.toLocaleString('en-BD', {
                        maximumFractionDigits: 2,
                        maximumSignificantDigits: 2,
                    })}
                    change={sales.salesPercentage}
                />
                <StatsCard
                    title="Totals Payment"
                    value={payment.currentSalesPayment.toLocaleString('en-BD', {
                        maximumFractionDigits: 2,
                        maximumSignificantDigits: 2,
                    })}
                    change={payment.paymentPercentage}
                />
                <StatsCard
                    title="Totals Due"
                    value={due.currentSalesDue.toLocaleString('en-BD', {
                        maximumFractionDigits: 2,
                        maximumSignificantDigits: 2,
                    })}
                    change={due.duePercentage}
                />
                <StatsCard
                    title="Todays Sales"
                    value={todaysSales.toLocaleString('en-BD', {
                        maximumFractionDigits: 2,
                        maximumSignificantDigits: 2,
                    })}
                    change={todaysSalesPercentage}
                    changeLabel="from previous day"
                />
            </div>

            <div className="mt-4 grid grid-cols-1 gap-4 md:grid-cols-4">
                <Card>
                    <CardHeader>
                        <CardTitle>Low stock alert</CardTitle>
                    </CardHeader>
                    <CardContent>
                        {(lowStock?.length || 0) > 0 ? (
                            <Table>
                                <TableHeader>
                                    <TableRow>
                                        <TableHead>Name</TableHead>
                                        <TableHead className="text-right">
                                            Stock
                                        </TableHead>
                                    </TableRow>
                                </TableHeader>
                                <TableBody>
                                    {lowStock?.map((val, i) => (
                                        <TableRow key={i}>
                                            <TableCell className="max-w-60 truncate">
                                                {val.name}
                                            </TableCell>
                                            <TableCell className="text-right">
                                                {val.stock}
                                            </TableCell>
                                        </TableRow>
                                    ))}
                                </TableBody>
                            </Table>
                        ) : (
                            <Empty>
                                <EmptyHeader>
                                    <EmptyDescription>
                                        No data found
                                    </EmptyDescription>
                                </EmptyHeader>
                            </Empty>
                        )}
                    </CardContent>
                </Card>
                <Card>
                    <CardHeader>
                        <CardTitle>Recent Sales</CardTitle>
                    </CardHeader>
                    <CardContent>
                        {(recentSales?.length || 0) > 0 ? (
                            <Table>
                                <TableHeader>
                                    <TableRow>
                                        <TableHead>Customer</TableHead>
                                        <TableHead className="text-right">
                                            Total
                                        </TableHead>
                                    </TableRow>
                                </TableHeader>
                                <TableBody>
                                    {recentSales?.map((val, i) => (
                                        <TableRow key={i}>
                                            <TableCell className="max-w-60 truncate">
                                                {val.customer.name}
                                            </TableCell>
                                            <TableCell className="text-right">
                                                {val.subtotal.toLocaleString(
                                                    'en-BD',
                                                )}
                                            </TableCell>
                                        </TableRow>
                                    ))}
                                </TableBody>
                            </Table>
                        ) : (
                            <Empty>
                                <EmptyHeader>
                                    <EmptyDescription>
                                        No data found
                                    </EmptyDescription>
                                </EmptyHeader>
                            </Empty>
                        )}
                    </CardContent>
                </Card>
                <Card>
                    <CardHeader>
                        <CardTitle>Recent Bank Transactions</CardTitle>
                    </CardHeader>
                    <CardContent>
                        {(recentBank.length || 0) > 0 ? (
                            <Table>
                                <TableHeader>
                                    <TableRow>
                                        <TableHead>Date</TableHead>
                                        <TableHead className="text-right">
                                            Amount
                                        </TableHead>
                                    </TableRow>
                                </TableHeader>
                                <TableBody>
                                    {recentBank?.map((val, i) => (
                                        <TableRow key={i}>
                                            <TableCell className="max-w-60 truncate">
                                                {val.date}
                                            </TableCell>
                                            <TableCell className="text-right">
                                                {val.amount.toLocaleString(
                                                    'en-BD',
                                                )}
                                            </TableCell>
                                        </TableRow>
                                    ))}
                                </TableBody>
                            </Table>
                        ) : (
                            <Empty>
                                <EmptyHeader>
                                    <EmptyDescription>
                                        No data found
                                    </EmptyDescription>
                                </EmptyHeader>
                            </Empty>
                        )}
                    </CardContent>
                </Card>
                <Card>
                    <CardHeader>
                        <CardTitle>Recent Sales Transactions</CardTitle>
                    </CardHeader>
                    <CardContent>
                        {(recentSalesTr.length || 0) > 0 ? (
                            <Table>
                                <TableHeader>
                                    <TableRow>
                                        <TableHead>Date</TableHead>
                                        <TableHead className="text-right">
                                            Amount
                                        </TableHead>
                                    </TableRow>
                                </TableHeader>
                                <TableBody>
                                    {recentSalesTr?.map((val, i) => (
                                        <TableRow key={i}>
                                            <TableCell className="max-w-60 truncate">
                                                {val.date}
                                            </TableCell>
                                            <TableCell className="text-right">
                                                {val.amount.toLocaleString(
                                                    'en-BD',
                                                )}
                                            </TableCell>
                                        </TableRow>
                                    ))}
                                </TableBody>
                            </Table>
                        ) : (
                            <Empty>
                                <EmptyHeader>
                                    <EmptyDescription>
                                        No data found
                                    </EmptyDescription>
                                </EmptyHeader>
                            </Empty>
                        )}
                    </CardContent>
                </Card>
            </div>
        </Layout>
    );
}