/* The platform at a glance: how many businesses in each billing state, money expected and collected, SMS sent,
   and who needs chasing. */
import { Link } from '@inertiajs/react';
import { AlertTriangle, Banknote, Building2, Plus, MessageSquareText, TrendingUp, UserPlus } from 'lucide-react';
import PlatformLayout from '../../layouts/PlatformLayout';
import { ButtonLink, Card, CardHeader, EmptyState, PageHeader, Stat } from '../../components/ui';
import { StatusBadge } from '../../components/status';
import type { BillingStatus } from '../../types';

type Row = { id: number; name: string; owner: string | null; ownerPhone: string | null; status: BillingStatus; statusLabel: string; fee: string; locksOn: string | null; paidUntil: string | null; trialEnds: string | null };
type Props = {
    counts: { key: BillingStatus; label: string; count: number }[];
    total: number; newThisMonth: number; monthlyRevenue: string; collectedThisMonth: string; smsThisMonth: number;
    attention: Row[];
};

export default function Dashboard({ counts, total, newThisMonth, monthlyRevenue, collectedThisMonth, smsThisMonth, attention }: Props) {
    return (
        <PlatformLayout title="Overview">
            <PageHeader title="Overview" subtitle="Businesses on the app and their subscriptions. Their sales stay private to them." actions={<ButtonLink href={route('platform.businesses.create')} icon={Plus}>Add business</ButtonLink>} />
            <div className="grid grid-cols-2 gap-3 lg:grid-cols-5">
                <Stat label="Businesses" value={total} icon={Building2} href={route('platform.businesses.index')} />
                <Stat label="New this month" value={newThisMonth} icon={UserPlus} tone="violet" />
                <Stat label="Expected per month" value={monthlyRevenue} icon={TrendingUp} tone="sky" />
                <Stat label="Collected this month" value={collectedThisMonth} icon={Banknote} tone="green" />
                <Stat label="SMS this month" value={smsThisMonth} icon={MessageSquareText} />
            </div>

            <div className="mt-6 grid gap-6 lg:grid-cols-[320px_minmax(0,1fr)]">
                <Card>
                    <CardHeader icon={Building2} title="By billing status" />
                    <ul className="mt-3 space-y-1">
                        {counts.map((c) => (
                            <li key={c.key}>
                                <Link href={route('platform.businesses.index', { status: c.key })} className="flex items-center justify-between rounded-lg px-2 py-2 hover:bg-line-2">
                                    <StatusBadge status={c.key} label={c.label} />
                                    <span className="font-bold text-ink">{c.count}</span>
                                </Link>
                            </li>
                        ))}
                    </ul>
                </Card>
                <Card>
                    <CardHeader icon={AlertTriangle} title="Needs attention" subtitle="Payment due or locked for not paying, the longest overdue first." />
                    {attention.length ? (
                        <ul className="mt-3 divide-y divide-line">
                            {attention.map((b) => (
                                <li key={b.id}>
                                    <Link href={route('platform.businesses.show', { business: b.id })} className="flex items-center gap-3 py-2.5 hover:bg-line-2/40">
                                        <div className="min-w-0 flex-1">
                                            <p className="truncate font-bold text-ink">{b.name}</p>
                                            <p className="truncate text-xs text-muted">{b.owner} · {b.ownerPhone}</p>
                                        </div>
                                        <div className="text-right">
                                            <StatusBadge status={b.status} label={b.statusLabel} />
                                            <p className="mt-0.5 text-xs text-muted">{b.locksOn ? `Locks ${b.locksOn}` : `Since ${b.paidUntil ?? b.trialEnds ?? '–'}`}</p>
                                        </div>
                                    </Link>
                                </li>
                            ))}
                        </ul>
                    ) : <EmptyState icon={AlertTriangle}>Everyone is paid up.</EmptyState>}
                </Card>
            </div>
        </PlatformLayout>
    );
}