/* Products, services and supplies, in three tabs.
   - Products: sold and counted (hair mesh, earrings, a soda).
   - Services: sold, not counted; can use supplies (wash and set uses shampoo and conditioner).
   - Supplies: bought by the bottle, used up in services, never sold. Followed bottle by bottle: anyone can open a
     new bottle or mark one finished; the app counts the services each bottle served and, for the owner, what
     they brought in against what the bottle cost.
   Everyone sees the lists (staff without costs or profit); the owner adds, edits, removes and restocks. */
import { Link, router, useForm, usePage } from '@inertiajs/react';
import { useEffect, useState, type FormEvent } from 'react';
import { AlertTriangle, Archive, ArchiveRestore, ChevronRight, Droplets, PackagePlus, Package, Pencil, Plus, Scissors, Search, Sparkles } from 'lucide-react';
import ShopLayout from '../../layouts/ShopLayout';
import { Badge, Button, Choice, EmptyState, Field, Input, PageHeader, Pagination, Select, cx } from '../../components/ui';
import { Modal } from '../../components/overlays';
import { money, qty, toMinor } from '../../lib';
import type { Paginated, Product, SharedProps } from '../../types';

type Kind = 'product' | 'service' | 'supply';
type Category = { id: number; name: string; count: number };
type Supply = { id: number; name: string; unit: string | null };
type Row = Product & {
    supplyIds?: number[]; supplyNames?: string[]; supplyCost?: string | null; kept?: number | null;
    open?: { id: number; since: string; uses: number; revenue?: string; cost?: string; paidOff?: boolean } | null;
    usesLeft?: number | null; finishedCount?: number; costPerUse?: string | null;
};
type Props = {
    kind: Kind; counts: Partial<Record<Kind, number>>; products: Paginated<Row>; categories: Category[]; supplies: Supply[];
    filters: { q: string; category: string; show: string }; lowCount: number; businessType: string;
    sellUnits: Record<string, string>;
};
const SHORT: Record<string, string> = { kg: 'kg', litre: 'L', metre: 'm' };

const TABS: { key: Kind; label: string; icon: typeof Package; hint: string }[] = [
    { key: 'product', label: 'Products', icon: Package, hint: 'Sold and counted: you know the price and the stock.' },
    { key: 'service', label: 'Services', icon: Scissors, hint: 'Sold, not counted. A service can use supplies.' },
    { key: 'supply', label: 'Supplies', icon: Droplets, hint: 'Used up in services (shampoo, relaxer, cooking oil). Not sold.' },
];
const unitOf = (p: { unit?: string | null }) => p.unit || 'bottle';
const cap = (s: string) => s[0].toUpperCase() + s.slice(1);

/** Markup on cost, and the profit on one: shown while the prices are typed, before saving. */
function Markup({ price, cost, per, currency }: { price: string; cost: string; per: string | null; currency: string }) {
    const p = toMinor(price), c = toMinor(cost);
    if (p === null || c === null || c === 0) return null;
    const profit = p - c;
    const markup = Math.round((profit / c) * 100);
    return (
        <div className={cx('rounded-xl px-3 py-2.5 text-sm', profit > 0 ? 'bg-emerald-50 text-emerald-900' : 'bg-rose-50 text-rose-900')} role="status">
            {profit > 0
                ? <><b className="text-base">Markup {markup}%</b> · profit {money(profit, currency)} {per ? `per ${per}` : 'each'}</>
                : profit === 0 ? <><b>No profit:</b> the selling price is the same as the cost.</>
                    : <><b>Loss of {money(-profit, currency)}</b> {per ? `per ${per}` : 'each'}: the selling price is below the cost.</>}
        </div>
    );
}

function ItemForm({ item, kind: startKind, categories, supplies, sellUnits, businessType, currency, onDone }: { item: Row | null; kind: Kind; categories: Category[]; supplies: Supply[]; sellUnits: Record<string, string>; businessType: string; currency: string; onDone: () => void }) {
    const form = useForm({
        kind: (item?.kind as Kind) ?? startKind,
        name: item?.name ?? '', price: item?.priceInput ?? '', cost_price: item?.costInput ?? '', unit: item?.unit ?? '',
        sell_unit: (item?.sellUnit ?? 'each') as string,
        category_id: item?.categoryId ? String(item.categoryId) : '', new_category: '',
        stock: item?.stock != null ? qty(item.stock) : '', low_stock_at: item?.lowStockAt != null ? qty(item.lowStockAt) : '',
        supply_ids: item?.supplyIds ?? ([] as number[]),
    });
    const err = form.errors as Record<string, string | undefined>;
    const d = form.data;
    const [newCat, setNewCat] = useState(false);
    const submit = (e: FormEvent) => {
        e.preventDefault();
        const opts = { preserveScroll: true, onSuccess: onDone };
        if (item) form.put(route('products.update', { product: item.id }), opts);
        else form.post(route('products.store'), opts);
    };
    const toggleSupply = (id: number, on: boolean) => form.setData('supply_ids', on ? [...d.supply_ids, id] : d.supply_ids.filter((x) => x !== id));
    const unit = d.unit || 'bottle';
    // a loose product's prices and stock are per kg / litre / metre
    const per = d.kind === 'product' && d.sell_unit !== 'each' ? SHORT[d.sell_unit] : null;

    return (
        <form onSubmit={submit} className="space-y-4" noValidate>
            {!item && (
                <div className="grid grid-cols-3 gap-2" role="radiogroup" aria-label="What is it?">
                    {TABS.map((t) => (
                        <button key={t.key} type="button" role="radio" aria-checked={d.kind === t.key} onClick={() => form.setData('kind', t.key)}
                            className={cx('flex flex-col items-center gap-1 rounded-xl border-2 px-2 py-2.5 text-sm font-bold', d.kind === t.key ? 'border-brand bg-brand/[0.06] text-brand' : 'border-line text-ink-2')}>
                            <t.icon className="size-5" aria-hidden />{({ product: 'Product', service: 'Service', supply: 'Supply' } as const)[t.key]}
                        </button>
                    ))}
                </div>
            )}
            <p className="-mt-1 text-xs text-muted">{TABS.find((t) => t.key === d.kind)?.hint}</p>

            <Field label="Name" htmlFor="p-name" error={err.name} required>
                <Input id="p-name" value={d.name} onChange={(e) => form.setData('name', e.target.value)} invalid={!!err.name}
                    placeholder={d.kind === 'service' ? (businessType === 'barber' ? 'e.g. Haircut' : 'e.g. Wash and set') : d.kind === 'supply' ? 'e.g. Shampoo 1L'
                        : businessType === 'salon' ? 'e.g. Hair mesh' : d.sell_unit === 'each' ? 'e.g. Sugar 1kg' : d.sell_unit === 'litre' ? 'e.g. Paraffin' : 'e.g. Rice'} autoFocus />
            </Field>

            {d.kind === 'product' && (
                <Field label="How is it sold?">
                    <div className="grid grid-cols-2 gap-2">
                        {Object.entries(sellUnits).map(([k, v]) => (
                            <Choice key={k} name="sell_unit" value={k} checked={d.sell_unit === k} onChange={() => form.setData('sell_unit', k)} className="py-2.5">{v}</Choice>
                        ))}
                    </div>
                    {d.sell_unit === 'each' ? (
                        <Input className="mt-2" placeholder="Piece: packet, tin… (optional)" value={d.unit} onChange={(e) => form.setData('unit', e.target.value)} />
                    ) : (
                        <p className="mt-1.5 text-xs text-muted">Sold loose on a scale or measure: at the till you type the weight, or the money the customer wants to spend.</p>
                    )}
                </Field>
            )}

            {d.kind === 'supply' ? (
                <div className="grid grid-cols-2 gap-3">
                    <Field label="It comes in a" htmlFor="p-unit" hint="bottle, tub, tin, packet…"><Input id="p-unit" placeholder="bottle" value={d.unit} onChange={(e) => form.setData('unit', e.target.value)} /></Field>
                    <Field label={`Cost of one ${unit}`} htmlFor="p-cost" error={err.cost_price || err.cost_minor}><Input id="p-cost" inputMode="decimal" placeholder="8000" value={d.cost_price} onChange={(e) => form.setData('cost_price', e.target.value)} /></Field>
                </div>
            ) : (
                <div className="grid grid-cols-2 gap-3">
                    <Field label={per ? `Selling price per ${per}` : 'Selling price'} htmlFor="p-price" error={err.price_minor} required>
                        <Input id="p-price" inputMode="decimal" placeholder="1500" value={d.price} onChange={(e) => form.setData('price', e.target.value)} invalid={!!err.price_minor} />
                    </Field>
                    {d.kind === 'product' && (
                        <Field label={per ? `Cost per ${per}` : 'Cost price'} htmlFor="p-cost" error={err.cost_price || err.cost_minor} hint="What you paid. For profit.">
                            <Input id="p-cost" inputMode="decimal" placeholder="1200" value={d.cost_price} onChange={(e) => form.setData('cost_price', e.target.value)} />
                        </Field>
                    )}
                </div>
            )}

            {d.kind === 'product' && <Markup price={d.price} cost={d.cost_price} per={per} currency={currency} />}

            {d.kind === 'service' && (
                <Field label="Supplies it uses" error={err.supply_ids ?? err['supply_ids.0']} hint={supplies.length ? 'Each service sold counts against the open bottle of these. That is how you learn what it really costs.' : undefined}>
                    {supplies.length === 0 ? (
                        <p className="rounded-xl bg-line-2 p-3 text-sm text-ink-2">No supplies yet. Add shampoo, relaxer and so on under the <b>Supplies</b> tab, then tick them here.</p>
                    ) : (
                        <div className="grid grid-cols-2 gap-2">
                            {supplies.map((s) => (
                                <Choice key={s.id} type="checkbox" name="supply_ids[]" value={String(s.id)} checked={d.supply_ids.includes(s.id)} onChange={(v) => toggleSupply(s.id, v)} className="py-2.5">{s.name}</Choice>
                            ))}
                        </div>
                    )}
                </Field>
            )}

            {d.kind !== 'service' && (
                <div className="grid grid-cols-2 gap-3">
                    <Field label={d.kind === 'supply' ? `Unopened ${unit}s` : per ? `In stock now (${per})` : 'In stock now'} htmlFor="p-stock" error={err.stock}>
                        <Input id="p-stock" inputMode="decimal" placeholder="0" value={d.stock} onChange={(e) => form.setData('stock', e.target.value)} />
                    </Field>
                    <Field label={per ? `Warn when at (${per})` : 'Warn when at'} htmlFor="p-low" error={err.low_stock_at} hint="Low-stock alert">
                        <Input id="p-low" inputMode="decimal" placeholder={d.kind === 'supply' ? 'e.g. 1' : 'e.g. 5'} value={d.low_stock_at} onChange={(e) => form.setData('low_stock_at', e.target.value)} />
                    </Field>
                </div>
            )}

            {d.kind !== 'supply' && (
                <Field label={<>Category <span className="font-normal text-muted">(optional)</span></>} error={err.category_id || err.new_category}>
                    {newCat || !categories.length ? (
                        <Input placeholder="New category, e.g. Hair" value={d.new_category} onChange={(e) => form.setData('new_category', e.target.value)} />
                    ) : (
                        <Select value={d.category_id} onChange={(e) => (e.target.value === 'new' ? setNewCat(true) : form.setData('category_id', e.target.value))}>
                            <option value="">No category</option>
                            {categories.map((c) => <option key={c.id} value={String(c.id)}>{c.name}</option>)}
                            <option value="new">+ New category…</option>
                        </Select>
                    )}
                </Field>
            )}

            <Button type="submit" size="lg" className="w-full" disabled={form.processing}>{form.processing ? 'Saving…' : item ? 'Save' : 'Add'}</Button>
            {item && (
                <button type="button" onClick={() => router.post(route('products.archive', { product: item.id }), {}, { preserveScroll: true, onSuccess: onDone })}
                    className="flex w-full items-center justify-center gap-2 py-2 text-sm font-semibold text-muted hover:text-ink">
                    {item.isActive ? <><Archive className="size-4" aria-hidden />Remove (keeps its history)</> : <><ArchiveRestore className="size-4" aria-hidden />Put back</>}
                </button>
            )}
        </form>
    );
}

/** Stock bought: how many, and the cost if it changed. */
function StockForm({ item, onDone }: { item: Row; onDone: () => void }) {
    const form = useForm({ quantity: '', cost_price: item.costInput ?? '' });
    const err = form.errors as Record<string, string | undefined>;
    const loose = item.kind === 'product' && item.sellUnit !== 'each';
    const unit = item.kind === 'supply' ? `${unitOf(item)}s` : loose ? (item.unitLabel ?? '') : '';
    // loose stock usually comes in bags: 2 bags of 50 kg at MWK 120,000 a bag -> 100 kg at MWK 2,400 a kg
    const [bags, setBags] = useState({ count: '', size: '', price: '' });
    const fromBags = (b: typeof bags) => {
        const count = Number(b.count), size = Number(b.size), price = Number(b.price.replace(/,/g, ''));
        form.setData((d) => ({
            ...d,
            quantity: count > 0 && size > 0 ? String(Math.round(count * size * 1000) / 1000) : d.quantity,
            cost_price: price > 0 && size > 0 ? String(Math.round((price / size) * 100) / 100) : d.cost_price,
        }));
    };
    const setBag = (patch: Partial<typeof bags>) => { const next = { ...bags, ...patch }; setBags(next); fromBags(next); };
    return (
        <form onSubmit={(e) => { e.preventDefault(); form.post(route('products.stock', { product: item.id }), { preserveScroll: true, onSuccess: onDone }); }} className="space-y-4" noValidate>
            {loose && (
                <div className="rounded-xl bg-line-2/60 p-3">
                    <p className="mb-2 text-xs font-semibold text-ink-2">Bought in bags? (optional)</p>
                    <div className="grid grid-cols-3 gap-2">
                        <Input inputMode="numeric" placeholder="Bags" value={bags.count} onChange={(e) => setBag({ count: e.target.value })} aria-label="How many bags" />
                        <Input inputMode="decimal" placeholder={`${unit} each`} value={bags.size} onChange={(e) => setBag({ size: e.target.value })} aria-label={`${unit} in one bag`} />
                        <Input inputMode="decimal" placeholder="Price a bag" value={bags.price} onChange={(e) => setBag({ price: e.target.value })} aria-label="Price of one bag" />
                    </div>
                </div>
            )}
            <div className="grid grid-cols-2 gap-3">
                <Field label={`How many${unit ? ` ${unit}` : ''} did you buy?`} error={err.quantity}><Input inputMode="decimal" value={form.data.quantity} onChange={(e) => form.setData('quantity', e.target.value)} autoFocus /></Field>
                <Field label={item.kind === 'supply' ? `Cost of one ${unitOf(item)}` : loose ? `Cost per ${unit}` : 'Cost of one'} error={err.cost_minor}><Input inputMode="decimal" value={form.data.cost_price} onChange={(e) => form.setData('cost_price', e.target.value)} /></Field>
            </div>
            <p className="text-xs text-muted">Don’t also record this as an expense: the cost is counted when items sell{item.kind === 'supply' ? ` (supplies: when a ${unitOf(item)} is opened)` : ''}.</p>
            <Button type="submit" size="lg" className="w-full" disabled={form.processing}>Add stock</Button>
        </form>
    );
}

export default function Products({ kind, counts, products, categories, supplies, filters, lowCount, sellUnits, businessType }: Props) {
    const { auth, business } = usePage<SharedProps>().props;
    const owner = auth?.role === 'owner';
    const [editing, setEditing] = useState<Row | 'new' | null>(null);
    const [restocking, setRestocking] = useState<Row | null>(null);
    const [q, setQ] = useState(filters.q);
    const apply = (patch: Partial<Props['filters'] & { kind: Kind }>) => router.get(route('products.index'), { kind, ...filters, ...patch }, { preserveState: true, preserveScroll: true, replace: true });
    useEffect(() => {
        if (q === filters.q) return;
        const timer = setTimeout(() => apply({ q }), 350);
        return () => clearTimeout(timer);
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [q]);
    const post = (url: string) => router.post(url, {}, { preserveScroll: true });
    const tab = TABS.find((t) => t.key === kind)!;

    return (
        <ShopLayout title="Products">
            <PageHeader title="Products" actions={owner && <>
                {kind === 'product' && <Link href={route('stock-count')} className="inline-flex items-center gap-1.5 rounded-lg border border-line bg-white px-3 py-2.5 text-sm font-semibold text-ink-2 hover:bg-line-2">Count stock</Link>}
                <Button icon={Plus} onClick={() => setEditing('new')}>Add</Button>
            </>} />

            <div className="mb-3 grid grid-cols-3 rounded-xl bg-line-2 p-1" role="tablist">
                {TABS.map((t) => (
                    <button key={t.key} role="tab" aria-selected={kind === t.key} onClick={() => router.get(route('products.index'), { kind: t.key }, { preserveScroll: true })}
                        className={cx('flex items-center justify-center gap-1.5 rounded-lg py-2.5 text-sm font-bold', kind === t.key ? 'bg-white text-ink shadow-card' : 'text-muted')}>
                        <t.icon className="size-4" aria-hidden />{t.label}<span className="text-xs font-semibold text-muted">{counts[t.key] ?? 0}</span>
                    </button>
                ))}
            </div>
            <p className="mb-3 text-sm text-muted">{tab.hint}</p>

            {lowCount > 0 && filters.show !== 'low' && (
                <button onClick={() => apply({ show: 'low' })} className="mb-3 flex w-full items-center gap-2 rounded-xl bg-amber-50 px-3 py-2.5 text-left text-sm font-semibold text-amber-900">
                    <AlertTriangle className="size-4 shrink-0" aria-hidden />{lowCount} running low. Show them
                </button>
            )}

            <div className="mb-3 grid gap-2 sm:grid-cols-[minmax(0,1fr)_160px]">
                <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="Search" value={q} onChange={(e) => setQ(e.target.value)} className="pl-9" />
                </div>
                <Select value={filters.show} onChange={(e) => apply({ show: e.target.value })} aria-label="Show">
                    <option value="">In use</option>
                    {kind !== 'service' && <option value="low">Running low</option>}
                    {owner && <option value="archived">Removed</option>}
                </Select>
            </div>

            {products.data.length === 0 ? (
                <EmptyState icon={tab.icon}>
                    {filters.q || filters.show ? 'Nothing matches.' : kind === 'supply' ? 'No supplies yet. Add the shampoo, relaxer and other things your services use up.' : kind === 'service' ? 'No services yet, e.g. Wash and set, Braiding.' : 'Nothing here yet.'}
                </EmptyState>
            ) : (
                <ul className="divide-y divide-line overflow-hidden rounded-card border border-line bg-white shadow-card">
                    {products.data.map((p) => (
                        <li key={p.id} className="px-4 py-3">
                            <div className="flex items-start gap-3">
                                <button type="button" disabled={!owner} onClick={() => setEditing(p)} className="min-w-0 flex-1 text-left">
                                    <p className="truncate text-[15px] font-bold text-ink">{p.name} {!p.isActive && <Badge>Removed</Badge>}</p>
                                    <p className="truncate text-xs text-muted">
                                        {p.kind === 'product' && <>{p.category ?? 'No category'}{owner && p.costLabel && <> · cost {p.costLabel}{p.margin != null && <> · <span className={cx(p.margin < 10 ? 'text-rose-600' : 'text-emerald-700')}>{p.margin}% margin</span></>}</>}</>}
                                        {p.kind === 'service' && (p.supplyNames?.length ? <>Uses {p.supplyNames.join(', ')}</> : 'Uses no supplies')}
                                        {p.kind === 'supply' && <>{owner && p.costLabel ? `${p.costLabel} a ${unitOf(p)}` : cap(unitOf(p))}{owner && p.costPerUse && <> · about {p.costPerUse} a service</>}</>}
                                    </p>
                                    {p.kind === 'service' && owner && p.supplyCost && (
                                        <p className="mt-0.5 text-xs font-semibold text-emerald-700">Supplies ≈ {p.supplyCost} a service · you keep {p.kept}%</p>
                                    )}
                                    {p.kind === 'service' && owner && !p.supplyCost && !!p.supplyNames?.length && (
                                        <p className="mt-0.5 text-xs text-muted">Cost per service shows once each supply has finished a bottle.</p>
                                    )}
                                </button>
                                <div className="shrink-0 text-right">
                                    {p.kind !== 'supply' && <p className="text-[15px] font-extrabold text-ink">{p.priceLabel}{p.sellUnit !== 'each' && <span className="text-xs font-semibold text-muted">/{p.unitLabel}</span>}</p>}
                                    {p.kind !== 'service' && p.stock !== null && (
                                        <p className={cx('text-xs font-bold', p.stock <= 0 ? 'text-rose-600' : p.isLow ? 'text-amber-600' : 'text-muted')}>
                                            {p.kind === 'supply' ? `${qty(Math.max(0, p.stock))} unopened` : p.stock <= 0 ? 'Out of stock'
                                                : p.unitLabel ? `${qty(p.stock)} ${p.sellUnit !== 'each' || p.stock === 1 ? p.unitLabel : `${p.unitLabel}s`} in stock` : `${qty(p.stock)} in stock`}
                                        </p>
                                    )}
                                    {p.kind === 'service' && <p className="text-xs text-muted">Service</p>}
                                </div>
                                {owner && p.kind !== 'service' && p.isActive && (
                                    <button onClick={() => setRestocking(p)} className="grid size-9 shrink-0 place-items-center rounded-lg text-muted hover:bg-line-2 hover:text-ink" aria-label={`Add stock of ${p.name}`} title="Add stock"><PackagePlus className="size-4" /></button>
                                )}
                                {owner && <Pencil className="mt-2 size-4 shrink-0 text-muted" aria-hidden />}
                            </div>

                            {/* a supply: its open bottle, at a glance, with one tap to finish it or open the next */}
                            {p.kind === 'supply' && p.isActive && (
                                <div className="mt-2 rounded-xl bg-line-2/60 p-3">
                                    {p.open ? (
                                        <>
                                            <div className="flex flex-wrap items-baseline justify-between gap-2 text-sm">
                                                <span className="font-bold text-ink">Open {unitOf(p)} · {p.open.since}</span>
                                                <span className="text-ink-2">used {qty(p.open.uses)}×{p.usesLeft != null && <> · about {p.usesLeft} left</>}</span>
                                            </div>
                                            {owner && p.open.revenue && (
                                                <p className="mt-0.5 text-xs text-muted">Services so far brought in <b className={p.open.paidOff ? 'text-emerald-700' : 'text-ink'}>{p.open.revenue}</b> · the {unitOf(p)} cost {p.open.cost}</p>
                                            )}
                                            <div className="mt-2 flex flex-wrap gap-2">
                                                <Button size="sm" variant="secondary" onClick={() => post(route('batches.finish', { batch: p.open!.id }))}>{cap(unitOf(p))} finished</Button>
                                                <Button size="sm" variant="ghost" onClick={() => post(route('supplies.open', { product: p.id }))}>Finished + open a new one</Button>
                                                <Link href={route('supplies.show', { product: p.id })} className="ml-auto flex items-center gap-1 self-center text-xs font-semibold text-brand">History<ChevronRight className="size-3.5" aria-hidden /></Link>
                                            </div>
                                        </>
                                    ) : (
                                        <div className="flex flex-wrap items-center justify-between gap-2">
                                            <span className="text-sm text-ink-2">No {unitOf(p)} open.{p.finishedCount ? '' : ' Open one when you start using it.'}</span>
                                            <div className="flex items-center gap-2">
                                                {!!p.finishedCount && <Link href={route('supplies.show', { product: p.id })} className="text-xs font-semibold text-brand">History</Link>}
                                                <Button size="sm" icon={Sparkles} onClick={() => post(route('supplies.open', { product: p.id }))}>Open a new {unitOf(p)}</Button>
                                            </div>
                                        </div>
                                    )}
                                </div>
                            )}
                        </li>
                    ))}
                </ul>
            )}
            <Pagination page={products} />

            <Modal open={editing !== null} onClose={() => setEditing(null)} title={editing === 'new' ? 'Add' : editing?.name ?? ''}>
                {editing !== null && <ItemForm key={editing === 'new' ? 'new' : editing.id} item={editing === 'new' ? null : editing} kind={kind} categories={categories} supplies={supplies} sellUnits={sellUnits} businessType={businessType} currency={business?.currency ?? 'MWK'} onDone={() => setEditing(null)} />}
            </Modal>
            <Modal open={!!restocking} onClose={() => setRestocking(null)} title="Add stock" subtitle={restocking?.name}>
                {restocking && <StockForm item={restocking} onDone={() => setRestocking(null)} />}
            </Modal>
        </ShopLayout>
    );
}