/* One shift: the cash count, the summary, and its sales. */
import { Link } from '@inertiajs/react';
import { Clock, Receipt } from 'lucide-react';
import ShopLayout from '../../layouts/ShopLayout';
import { Badge, Card, CardHeader, EmptyState, PageHeader, cx } from '../../components/ui';
import { CashSum, Difference, Summary, type ShiftData } from './Shift';
import { useT } from '../../i18n';
import type { Sale } from '../../types';

export default function ShiftDetail({ detail: shift, sales }: { detail: ShiftData; sales: Sale[] }) {
    const t = useT();
    return (
        <ShopLayout title="Shift">
            <PageHeader title={`${shift.by ?? t('Shift')} · ${shift.openedAt}`} subtitle={shift.closedAt ? `Closed ${shift.closedAt}${shift.closedBy && shift.closedBy !== shift.by ? ` by ${shift.closedBy}` : ''}` : t('Shift open since') + ' ' + shift.openedAt}
                back={{ href: route('shifts.index'), label: t('My shift') }} />
            <div className="grid gap-4 md:grid-cols-2">
                <Card>
                    <CardHeader icon={Clock} title={t('Expected cash')} />
                    <div className="mt-3"><CashSum shift={shift} /></div>
                    {shift.countedCash !== null && (
                        <div className="mt-3 flex items-center justify-between gap-3 border-t border-line pt-3">
                            <span className="text-[15px] text-ink-2">{t('Cash counted')}: <span className="font-bold text-ink">{shift.countedCash}</span></span>
                            <Difference shift={shift} />
                        </div>
                    )}
                    {shift.note && <p className="mt-2 text-sm text-muted">“{shift.note}”</p>}
                </Card>
                <Card><Summary shift={shift} /></Card>
            </div>
            <h2 className="mt-6 mb-2 text-sm font-bold text-muted">{t('Sales')}</h2>
            {sales.length === 0 ? <EmptyState icon={Receipt}>No sales in this shift.</EmptyState> : (
                <ul className="divide-y divide-line overflow-hidden rounded-card border border-line bg-white shadow-card">
                    {sales.map((s) => (
                        <li key={s.id}>
                            <Link href={route('sales.show', { sale: s.id })} className={cx('flex items-center gap-3 px-4 py-3 hover:bg-line-2/50', s.voided && 'opacity-60')}>
                                <span className="w-12 text-sm font-bold text-muted">{s.time}</span>
                                <span className={cx('min-w-0 flex-1 truncate text-[15px] font-bold text-ink', s.voided && 'line-through')}>{s.summary}</span>
                                <span className="text-[15px] font-extrabold text-ink">{s.totalLabel}</span>
                                {s.voided && <Badge tone="rose">{t('Cancelled')}</Badge>}
                            </Link>
                        </li>
                    ))}
                </ul>
            )}
        </ShopLayout>
    );
}