/* The audit trail: cancelled sales, price and stock changes, staff changes. Who did it, and when. */
import { History } from 'lucide-react';
import ShopLayout from '../../layouts/ShopLayout';
import { EmptyState, PageHeader, Pagination } from '../../components/ui';
import type { Paginated } from '../../types';

type Entry = { id: number; action: string; description: string; changes: Record<string, string> | null; by: string | null; when: string };

export default function Activity({ entries }: { entries: Paginated<Entry> }) {
    return (
        <ShopLayout title="Activity">
            <PageHeader title="Activity log" subtitle="Cancelled sales, price and stock changes, and staff changes. It can't be edited." />
            {entries.data.length === 0 ? <EmptyState icon={History}>Nothing yet.</EmptyState> : (
                <ul className="divide-y divide-line overflow-hidden rounded-card border border-line bg-white shadow-card">
                    {entries.data.map((e) => (
                        <li key={e.id} className="px-4 py-3">
                            <p className="text-[15px] font-bold text-ink">{e.description}</p>
                            {e.changes && (
                                <dl className="mt-1 space-y-0.5 text-sm text-ink-2">
                                    {Object.entries(e.changes).map(([k, v]) => <div key={k}><dt className="inline font-semibold">{k[0].toUpperCase() + k.slice(1)}: </dt><dd className="inline">{v}</dd></div>)}
                                </dl>
                            )}
                            <p className="mt-1 text-xs text-muted">{e.when}{e.by ? ` · ${e.by}` : ''}</p>
                        </li>
                    ))}
                </ul>
            )}
            <Pagination page={entries} />
        </ShopLayout>
    );
}