/* Missing stock over time: across all stock counts in a period, how much left without a sale, which products go
   missing most (and how often), and each count with a link to its full breakdown. */
import { Link, router } from '@inertiajs/react';
import { ChevronRight, ClipboardCheck, PackageSearch, Printer } from 'lucide-react';
import ShopLayout from '../../layouts/ShopLayout';
import { Badge, Button, ButtonLink, Card, CardHeader, EmptyState, Field, Input, PageHeader } from '../../components/ui';

type Props = {
    filters: { from: string; to: string };
    totals: { counts: number; missingValue: string; missingCost: string; extraValue: string; moneyGap: string };
    products: { name: string; times: number; qty: string; value: string; cost: string }[];
    counts: { id: number; when: string; by: string | null; items: number; missingItems: number; missingValue: string; gap: string | null }[];
    dayTotal: boolean;
};

export default function StockLoss({ filters, totals, products, counts, dayTotal }: Props) {
    const apply = (patch: Partial<Props['filters']>) => router.get(route('stock-count.report'), { ...filters, ...patch }, { preserveState: true, replace: true });
    const outWord = dayTotal ? 'went out' : 'missing';

    return (
        <ShopLayout title="Missing stock" wide>
            <PageHeader title="Missing stock" subtitle={dayTotal ? 'What went out between stock counts, and money not accounted for.' : 'Stock that left without a sale, found by your stock counts.'}
                actions={<span className="flex gap-2 print:hidden">
                    <ButtonLink href={route('stock-count')} icon={ClipboardCheck}>Count stock</ButtonLink>
                    <Button variant="secondary" icon={Printer} onClick={() => window.print()}>Print</Button>
                </span>} />

            <div className="mb-4 flex flex-wrap gap-3 print:hidden">
                <Field label="From" htmlFor="ml-from"><Input id="ml-from" type="date" value={filters.from} max={filters.to} onChange={(e) => apply({ from: e.target.value })} /></Field>
                <Field label="To" htmlFor="ml-to"><Input id="ml-to" type="date" value={filters.to} min={filters.from} onChange={(e) => apply({ to: e.target.value })} /></Field>
            </div>

            <div className="grid gap-3 sm:grid-cols-3">
                <div className="rounded-card bg-rose-50 p-4 text-rose-950 ring-1 ring-rose-200">
                    <p className="text-sm font-semibold opacity-80">Stock {outWord}, at your prices</p>
                    <p className="text-3xl font-extrabold tracking-tight">{totals.missingValue}</p>
                    <p className="text-xs opacity-80">{totals.missingCost} at cost · {totals.counts} count{totals.counts === 1 ? '' : 's'}</p>
                </div>
                {dayTotal ? (
                    <div className="rounded-card bg-amber-50 p-4 text-amber-950 ring-1 ring-amber-200">
                        <p className="text-sm font-semibold opacity-80">Money not accounted for</p>
                        <p className="text-3xl font-extrabold tracking-tight">{totals.moneyGap}</p>
                        <p className="text-xs opacity-80">Stock that went out minus the money recorded (full counts only)</p>
                    </div>
                ) : null}
                <div className="rounded-card bg-sky-50 p-4 text-sky-950 ring-1 ring-sky-200">
                    <p className="text-sm font-semibold opacity-80">More than expected</p>
                    <p className="text-3xl font-extrabold tracking-tight">{totals.extraValue}</p>
                    <p className="text-xs opacity-80">Usually stock added without recording it</p>
                </div>
            </div>

            <div className="mt-6 grid gap-6 lg:grid-cols-[minmax(0,1fr)_380px]">
                <Card pad={false}>
                    <div className="p-4 sm:p-5"><CardHeader icon={PackageSearch} title={`Products most often ${outWord}`} subtitle="Highest value first. “Times” is in how many counts it came up short." /></div>
                    {products.length ? (
                        <div className="overflow-x-auto">
                            <table className="w-full min-w-[440px] text-sm">
                                <thead className="border-y border-line bg-line-2/50 text-left text-xs text-muted">
                                    <tr><th className="px-4 py-2 font-semibold sm:px-5">Product</th><th className="px-3 py-2 text-right font-semibold">Times</th><th className="px-3 py-2 text-right font-semibold">Quantity</th><th className="px-4 py-2 text-right font-semibold sm:px-5">Value</th></tr>
                                </thead>
                                <tbody className="divide-y divide-line">
                                    {products.map((p) => (
                                        <tr key={p.name}>
                                            <td className="px-4 py-2.5 font-bold text-ink sm:px-5">{p.name}</td>
                                            <td className="px-3 py-2.5 text-right">{p.times > 1 ? <Badge tone="rose">{p.times}×</Badge> : <span className="text-muted">1×</span>}</td>
                                            <td className="px-3 py-2.5 text-right text-ink-2">{p.qty}</td>
                                            <td className="px-4 py-2.5 text-right font-bold text-ink sm:px-5">{p.value}<span className="block text-xs font-normal text-muted">{p.cost} at cost</span></td>
                                        </tr>
                                    ))}
                                </tbody>
                            </table>
                        </div>
                    ) : <div className="px-4 pb-5"><EmptyState icon={PackageSearch}>{totals.counts ? `Nothing ${outWord} in this period.` : 'No stock counts in this period.'}</EmptyState></div>}
                </Card>

                <Card>
                    <CardHeader icon={ClipboardCheck} title="Counts" subtitle="Open one to go through it product by product." />
                    {counts.length ? (
                        <ul className="mt-2 divide-y divide-line">
                            {counts.map((c) => (
                                <li key={c.id}>
                                    <Link href={route('stock-count.show', { stockCount: c.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">{c.when}</p>
                                            <p className="truncate text-xs text-muted">{c.missingItems} of {c.items} {outWord}{c.by ? ` · ${c.by}` : ''}{c.gap ? ` · ${c.gap} unaccounted` : ''}</p>
                                        </div>
                                        <span className="font-bold text-ink">{c.missingValue}</span>
                                        <ChevronRight className="size-4 text-muted" aria-hidden />
                                    </Link>
                                </li>
                            ))}
                        </ul>
                    ) : <EmptyState icon={ClipboardCheck}>No counts yet.</EmptyState>}
                </Card>
            </div>
        </ShopLayout>
    );
}