import { Head, Link } from '@inertiajs/react';
import AppLayout from '@/Layouts/AppLayout';
import PageHeader from '@/Components/PageHeader';
import StatCard from '@/Components/StatCard';
import { formatBDT } from '@/utils/formatters';

export default function AccountsDashboard({ stats, recentInvoices, overdueInvoices }) {
    return (
        <AppLayout>
            <Head title="Accounts Dashboard" />
            <PageHeader title="Accounts" subtitle="Financial overview" />
            <div className="p-4 sm:p-6 space-y-6">
                <div className="grid grid-cols-4 gap-4">
                    <StatCard title="Total Receivables" value={formatBDT(stats?.total_receivables ?? 0)} subtitle="Outstanding invoices" color="blue" />
                    <StatCard title="Total Payables" value={formatBDT(stats?.total_payables ?? 0)} subtitle="Outstanding payments" color="red" />
                    <StatCard title="This Month Revenue" value={formatBDT(stats?.month_revenue ?? 0)} subtitle="Receipts this month" color="green" />
                    <StatCard title="This Month Expenses" value={formatBDT(stats?.month_expenses ?? 0)} subtitle="Expenses this month" color="orange" />
                </div>

                <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
                    <div className="card p-4">
                        <div className="flex items-center justify-between mb-3">
                            <h3 className="font-semibold text-sm">Recent Invoices</h3>
                            <Link href={route('accounts.invoices.index')} className="text-xs text-primary-600 hover:underline">View all</Link>
                        </div>
                        <table className="min-w-full text-sm divide-y divide-gray-100">
                            <tbody className="divide-y divide-gray-50">
                                {(recentInvoices ?? []).map(inv => (
                                    <tr key={inv.id}>
                                        <td className="py-2 font-mono text-primary-600">
                                            <Link href={route('accounts.invoices.show', inv.id)}>{inv.code}</Link>
                                        </td>
                                        <td className="py-2 text-gray-600">{inv.client?.name}</td>
                                        <td className="py-2 text-right font-medium">{formatBDT(inv.grand_total)}</td>
                                    </tr>
                                ))}
                                {(recentInvoices ?? []).length === 0 && <tr><td colSpan={3} className="py-4 text-center text-gray-400">No invoices yet.</td></tr>}
                            </tbody>
                        </table>
                    </div>

                    <div className="card p-4">
                        <div className="flex items-center justify-between mb-3">
                            <h3 className="font-semibold text-sm text-red-600">Overdue Invoices</h3>
                            <Link href={route('accounts.reports.receivables')} className="text-xs text-primary-600 hover:underline">View all</Link>
                        </div>
                        <table className="min-w-full text-sm divide-y divide-gray-100">
                            <tbody className="divide-y divide-gray-50">
                                {(overdueInvoices ?? []).map(inv => (
                                    <tr key={inv.id}>
                                        <td className="py-2 font-mono text-primary-600">
                                            <Link href={route('accounts.invoices.show', inv.id)}>{inv.code}</Link>
                                        </td>
                                        <td className="py-2 text-gray-600">{inv.client?.name}</td>
                                        <td className="py-2 text-right font-semibold text-red-600">{formatBDT(inv.balance_due)}</td>
                                    </tr>
                                ))}
                                {(overdueInvoices ?? []).length === 0 && <tr><td colSpan={3} className="py-4 text-center text-gray-400">No overdue invoices.</td></tr>}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </AppLayout>
    );
}
