/* Every business on the platform, with its billing state. */
import { Link, router } from '@inertiajs/react';
import { useEffect, useState } from 'react';
import { Building2, Plus, Search } from 'lucide-react';
import PlatformLayout from '../../layouts/PlatformLayout';
import { ButtonLink, EmptyState, Input, PageHeader, Select, Table } from '../../components/ui';
import { StatusBadge } from '../../components/status';
import type { BillingStatus } from '../../types';

type Row = {
    id: number; name: string; type: string; owner: string | null; ownerPhone: string | null; status: BillingStatus; statusLabel: string;
    fee: string; trialEnds: string | null; paidUntil: string | null; locksOn: string | null; users: number | null; joined: string;
};
type Props = { businesses: Row[]; statuses: Record<string, string>; filters: { q: string; status: string } };

export default function Businesses({ businesses, statuses, filters }: Props) {
    const [q, setQ] = useState(filters.q);
    const apply = (patch: Partial<Props['filters']>) => router.get(route('platform.businesses.index'), { ...filters, ...patch }, { preserveState: true, replace: true });
    useEffect(() => {
        if (q === filters.q) return;
        const t = setTimeout(() => apply({ q }), 350);
        return () => clearTimeout(t);
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [q]);

    return (
        <PlatformLayout title="Businesses">
            <PageHeader title="Businesses" subtitle={`${businesses.length} shown`} actions={<ButtonLink href={route('platform.businesses.create')} icon={Plus}>Add business</ButtonLink>} />
            <div className="mb-4 grid gap-2 sm:grid-cols-[minmax(0,1fr)_220px]">
                <div className="relative">
                    <Search className="pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2 text-muted" aria-hidden />
                    <Input type="search" placeholder="Business name or phone" value={q} onChange={(e) => setQ(e.target.value)} className="pl-9" />
                </div>
                <Select value={filters.status} onChange={(e) => apply({ status: e.target.value })} aria-label="Status">
                    <option value="">All statuses</option>
                    {Object.entries(statuses).map(([k, v]) => <option key={k} value={k}>{v}</option>)}
                </Select>
            </div>
            <div className="overflow-hidden rounded-card border border-line bg-white shadow-card">
                <Table head={['Business', 'Owner', 'Status', 'Paid / trial until', 'Fee', 'People', 'Joined']}
                    empty={businesses.length === 0 && <EmptyState icon={Building2}>No businesses match.</EmptyState>}>
                    {businesses.map((b) => (
                        <tr key={b.id}>
                            <td>
                                <Link href={route('platform.businesses.show', { business: b.id })} className="font-bold text-ink hover:text-brand">{b.name}</Link>
                                <p className="text-xs text-muted">{b.type}</p>
                            </td>
                            <td><p className="text-ink">{b.owner ?? '–'}</p><p className="text-xs text-muted">{b.ownerPhone}</p></td>
                            <td><StatusBadge status={b.status} label={b.statusLabel} /></td>
                            <td className="text-ink-2">{b.status === 'free' ? '–' : b.paidUntil ?? b.trialEnds ?? '–'}{b.locksOn && <p className="text-xs text-amber-700">locks {b.locksOn}</p>}</td>
                            <td className="text-ink-2">{b.fee}</td>
                            <td className="text-ink-2">{b.users}</td>
                            <td className="text-muted">{b.joined}</td>
                        </tr>
                    ))}
                </Table>
            </div>
        </PlatformLayout>
    );
}