import { Fragment, useMemo, useState } from 'react';
import { Link, useForm } from '@inertiajs/react';
import { ArrowLeft, Loader2, Send, X } from 'lucide-react';
import { HistoryTimelinePopover } from '@/Components/MenuQuotations/QuotationDetailPage/HistoryTimelinePopover';
import { DecisionBar } from '@/Components/MenuSampleOrders/DecisionBar';
import AppLayout from '@/Layouts/AppLayout';
import { Button } from '@/Components/ui/button';
import { Switch } from '@/Components/ui/switch';
import { CheckBox } from '@/Components/Proto/UI/CheckBox';
import { useToast } from '@/Components/Toast';
import { StatusBadge } from '@/Components/Proto/UI/StatusBadge';
import { mapIndexedErrors } from '@/lib/formErrors';
import { complaintStatusTone, complaintTypeTone } from '@/Proto/complaintsData';

const PRIMARY_BTN = 'inline-flex h-9 items-center justify-center gap-1.5 rounded-lg bg-linear-to-br from-violet-500 to-primary px-4 text-xs font-bold text-white shadow-sm transition-[filter] hover:brightness-105 disabled:opacity-60';
const BACK_BTN = 'inline-flex h-9 items-center justify-center gap-1.5 rounded-lg border border-input bg-card px-4 text-center text-xs font-bold text-foreground transition-colors hover:border-primary hover:text-primary';
const CARD = 'rounded-2xl border border-border bg-card shadow-sm';
const RING_ICON = 'inline-grid size-6 shrink-0 place-items-center rounded-full border border-primary/50 bg-transparent text-primary';
const INPUT = 'h-8 w-full min-w-[92px] rounded-md border border-input bg-card px-2 text-[12px] text-card-foreground outline-none focus:border-primary';
const INPUT_INVALID = 'border-destructive focus:border-destructive';

// complainitemdetailslot.PONumber / .GoodReceiptNumber are varchar(100) — and the SNAPSHOT table
// complainitemdetailslotassignment matches them column for column, so 100 is the real ceiling on
// both writes. Held here so the box cannot accept text the server must then reject.
const LOT_TEXT_MAXLENGTH = 100;

// NO blanket [&_tbody_td]:font-normal here. An arbitrary variant compiles to a
// DESCENDANT selector (.[&_tbody_td]:font-normal tbody td, specificity 0-2-1), which
// outranks every plain .font-bold / .font-semibold a <td> sets on itself (0-1-0). With
// it, all 25-odd per-cell weights in this file were dead code and the table rendered
// one flat weight — reported 2026-08-24. A <td> is font-normal by default anyway, so
// dropping it changes nothing except letting the cells speak. Same trap applies to
// colour: never add [&_tbody_td]:text-* back unless no cell sets its own.
// Table type matches the app majority — header 11px/600, body 12px — the sizes Quotation
// and Company Rebate detail tables use. This file ran 12px/700 headers over 13px body,
// one step up on BOTH, which is what made the page read larger than every screen beside
// it (measured 2026-08-24). Keep the four Complaint Handling detail files identical:
// their TABLE constants are copies, so changing one alone splits four twin screens.
const TABLE = 'w-full border-collapse '
    + '[&_thead_tr]:bg-card [&_thead_th]:whitespace-nowrap [&_thead_th]:border-b [&_thead_th]:border-border [&_thead_th]:px-4 [&_thead_th]:py-3 [&_thead_th]:text-left [&_thead_th]:text-[11px] [&_thead_th]:font-semibold [&_thead_th]:uppercase [&_thead_th]:tracking-wide [&_thead_th]:text-muted-foreground [&_th.text-right]:text-right '
    + '[&_tbody_td]:whitespace-nowrap [&_tbody_td]:border-b [&_tbody_td]:border-border/40 [&_tbody_td]:px-4 [&_tbody_td]:py-3 [&_tbody_td]:align-top [&_tbody_td]:text-[12px] [&_tbody_td]:text-foreground '
    + '[&_tbody_tr:last-child_td]:border-b-0 [&_tbody_tr:hover_td]:bg-muted/20';
const HISTORY_TABLE = 'w-full min-w-[560px] border-collapse '
    + '[&_thead_tr]:bg-card [&_tbody_td]:border-b [&_tbody_td]:border-border/40 [&_tbody_td]:px-4 [&_tbody_td]:py-2.5 [&_tbody_td]:align-middle [&_tbody_td]:text-[12px] [&_tbody_td]:text-foreground [&_tbody_tr:last-child_td]:border-b-0 [&_tbody_tr:hover_td]:bg-muted/20 '
    + '[&_thead_th]:whitespace-nowrap [&_thead_th]:px-4 [&_thead_th]:py-2.5 [&_thead_th]:text-left [&_thead_th]:text-[11px] [&_thead_th]:font-semibold [&_thead_th]:uppercase [&_thead_th]:tracking-wide [&_thead_th]:text-muted-foreground';

// Which lot fields each department may edit. Everything else renders read-only.
const EDITABLE_BY_DEPT = {
    po: ['PONumber', 'POQuantity', 'PODate', 'ETA'],
    pogr: ['PONumber', 'POQuantity', 'PODate', 'ETA', 'GoodReceiptNumber', 'GoodReceiptDate'],
    payment: ['IsPayment', 'PaymentDate'],
};

// Lot-extra columns (revealed when there is anything to show/edit there).
const EXTRA_COLS = [
    { key: 'PONumber', src: 'poNumber', label: 'PO No', type: 'text' },
    { key: 'POQuantity', src: 'poQuantity', label: 'PO Qty', type: 'number', align: true },
    { key: 'PODate', src: 'poDate', label: 'PO Date', type: 'date' },
    { key: 'ETA', src: 'eta', label: 'ETA', type: 'date' },
    { key: 'GoodReceiptNumber', src: 'grNumber', label: 'GR No', type: 'text' },
    { key: 'GoodReceiptDate', src: 'grDate', label: 'GR Date', type: 'date' },
    { key: 'IsPayment', src: 'isPayment', label: 'Is Payment', type: 'check' },
    { key: 'PaymentDate', src: 'paymentDate', label: 'Payment Date', type: 'date' },
    { key: 'stdLotNumber', src: 'stdLotNumber', label: 'Std Lot No', type: 'display' },
];
const TAIL_COLS = [
    { key: 'lotQty', label: 'Lot Qty', align: true },
    { key: 'lotQtyProblem', label: 'Lot Problem', align: true },
    { key: 'packaging', label: 'Packaging' },
    { key: 'expiredDate', label: 'Expiry' },
    { key: 'complainDetails', label: 'Details' },
    { key: 'complainExpectation', label: 'Expectation' },
];

const cv = (v) => (v === '' || v === null || v === undefined) ? <span className="text-muted-foreground/40">—</span> : v;

function Ring({ d }) {
    return (
        <span className={RING_ICON} aria-hidden="true">
            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">{d}</svg>
        </span>
    );
}

export default function ReviewDetail({ dept, report }) {
    const { show: showToast } = useToast();
    const editable = EDITABLE_BY_DEPT[dept.lotEdit] ?? [];
    const isEditable = (key) => editable.includes(key);

    // Flatten every lot into the form payload the store endpoint expects.
    const initialLots = useMemo(() => report.products.flatMap((p) => p.lots.map((l) => ({
        id: l.id,
        PONumber: l.poNumber ?? '',
        POQuantity: l.poQuantity ?? '',
        PODate: l.poDate ?? '',
        ETA: l.eta ?? '',
        GoodReceiptNumber: l.grNumber ?? '',
        GoodReceiptDate: l.grDate ?? '',
        IsPayment: !!l.isPayment,
        PaymentDate: l.paymentDate ?? '',
    }))), [report]);

    const form = useForm({ ReviewRemark: '', lots: initialLots });
    const lotById = useMemo(() => Object.fromEntries(form.data.lots.map((l) => [l.id, l])), [form.data.lots]);

    /*
     * The server rejects lot fields with DOT-NOTATION keys (`lots.3.PONumber`), and this page used
     * to render only `form.errors.ReviewRemark` — so a 100-char PO No or a negative PO Qty came
     * back as a generic toast with nothing marked, on a form whose offending box sits BEHIND the
     * confirm dialog. Keyed by lot id, not payload index, so the marker cannot land on the wrong
     * row if the payload order ever stops matching the render order.
     */
    const lotErrors = useMemo(
        () => mapIndexedErrors(form.errors, 'lots', form.data.lots.map((l) => l.id)),
        [form.errors, form.data.lots],
    );

    // Same errors as a readable list: "Lot ABC · PO No — message". Walks the table's own render
    // order so the list reads top-to-bottom against what the user is looking at.
    const lotErrorList = useMemo(() => {
        if (Object.keys(lotErrors).length === 0) {
            return [];
        }
        const labelOf = Object.fromEntries(EXTRA_COLS.map((c) => [c.key, c.label]));

        return report.products.flatMap((p) => p.lots.flatMap((l) => Object.entries(lotErrors[l.id] ?? {})
            .map(([field, message]) => ({
                key: `${l.id}-${field}`,
                lot: l.lotNumber || `Lot #${l.id}`,
                field: labelOf[field] ?? field,
                message,
            }))));
    }, [lotErrors, report]);
    const [showLots, setShowLots] = useState(dept.lotEdit !== null);

    const patchLot = (id, patch) => {
        form.setData('lots', form.data.lots.map((l) => (l.id === id ? { ...l, ...patch } : l)));
    };
    const setLot = (id, key, value) => patchLot(id, { [key]: value });

    // Submit opens the confirm dialog; the Review Remark is entered THERE (design-system
    // decision flow: comment lives in the dialog, never inline / window.confirm).
    const [confirmOpen, setConfirmOpen] = useState(false);
    const submit = () => {
        // Success toast comes from the server flash (redirect ->with('toast')) rendered by
        // AppLayout's FlashToaster; a client onSuccess toast here would double-notify.
        form.post(route('complaint-handling.review.store', { dept: dept.slug, id: report.id }), {
            preserveScroll: true,
            onSuccess: () => setConfirmOpen(false),
            // The locked 422 wording (.claude/rules/notifications.md) — 139 call sites use this
            // exact sentence. The toast says WHAT happened; the summary above the table and the
            // marked boxes say WHICH field.
            onError: () => showToast('Please check the form and try again.', 'error'),
        });
    };

    const infoRows = [
        ['ID', <span className="font-bold tabular-nums text-primary">{report.id}</span>],
        ['Principal Name', <span className="font-semibold text-foreground">{report.principal}</span>],
        ['Complain Type', <StatusBadge tone={complaintTypeTone(report.complainType)}>{report.complainType}</StatusBadge>],
        ['File', report.fileUrl
            ? <a href={report.fileUrl} className="font-semibold text-primary underline underline-offset-2 hover:text-primary-hover">{report.file}</a>
            : <span className="font-semibold text-foreground">No File</span>],
        ['Created Date', report.createdDate],
        ['Status', <StatusBadge tone={complaintStatusTone(report.status)}>{report.status}</StatusBadge>],
        ['Created By', <span className="font-semibold text-foreground">{report.createdBy}</span>],
        ['Creator Role', <span className="font-semibold text-foreground">{report.creatorRole}</span>],
    ];

    const extraCols = showLots ? EXTRA_COLS : [];

    // Render one lot cell for a lot-extra column: an input when this dept edits it, else display.
    const extraCell = (col, lot, formLot) => {
        if (col.type === 'display' || !isEditable(col.key)) {
            if (col.type === 'check') return (lot[col.src] ? 'Yes' : 'No');
            return cv(lot[col.src]);
        }
        if (col.type === 'check') {
            // Unchecking clears the date too: the server rewrites PaymentDate to the
            // zero-date sentinel whenever IsPayment is 0, so a date left sitting in the
            // box is silently discarded on submit. Mirrors CreatePm's payment switch.
            return (
                <div className="flex items-center justify-center">
                    <CheckBox
                        checked={!!formLot?.IsPayment}
                        onChange={(e) => patchLot(lot.id, e.target.checked
                            ? { IsPayment: true }
                            : { IsPayment: false, PaymentDate: '' })}
                        ariaLabel="Is Payment"
                        size="sm"
                    />
                </div>
            );
        }
        // Payment Date is only meaningful while Is Payment is checked.
        const locked = col.key === 'PaymentDate' && ! formLot?.IsPayment;
        const error = lotErrors[lot.id]?.[col.key];

        return (
            <input
                type={col.type === 'number' ? 'number' : (col.type === 'date' ? 'date' : 'text')}
                value={formLot?.[col.key] ?? ''}
                disabled={locked}
                // Hold the column's real limits at the box. The server validates all of this
                // anyway, but a `type=number` with no `min` let -5 be typed into a `min:0` rule,
                // and an unbounded text box let 150 characters into a varchar(100) — two 422s
                // that were reachable from the keyboard alone.
                {...(col.type === 'text' ? { maxLength: LOT_TEXT_MAXLENGTH } : {})}
                {...(col.type === 'number' ? { min: 0, step: 'any' } : {})}
                onChange={(e) => setLot(lot.id, col.key, e.target.value)}
                aria-invalid={error ? true : undefined}
                // The cells are `whitespace-nowrap`, so the message itself would widen the
                // column; it is spelled out in the summary above the table (and in the dialog),
                // and the title carries it for a hover.
                title={error || undefined}
                className={`${INPUT}${locked ? ' cursor-not-allowed opacity-50' : ''}${error ? ' '+INPUT_INVALID : ''}`}
            />
        );
    };

    return (
        <section className="flex min-w-0 flex-col gap-4.5">
            <header className="flex items-center justify-between gap-4">
                <p className="m-0 flex items-center gap-2 text-xs font-semibold text-muted-foreground">
                    <Link href={route('complaint-handling.review', { dept: dept.slug })} className="text-muted-foreground no-underline hover:text-primary">Review {dept.name}</Link>
                    <span aria-hidden="true">›</span>
                    <span className="text-foreground">Review Complaint Handling Report</span>
                </p>
                <div className="flex shrink-0 items-center gap-2">
                    <HistoryTimelinePopover entries={report.history.map((e) => ({
                        Status: e.dept ? `${e.status} ${e.dept}` : e.status,
                        Tanggal: e.tanggal,
                        User: e.user,
                        Comment: e.remark,
                    }))} />
                    <Link href={route('complaint-handling.review', { dept: dept.slug })} className={BACK_BTN}>
                        <ArrowLeft className="size-3.5" /> Back to List
                    </Link>
                </div>
            </header>

            <article className="flex flex-wrap items-center justify-between gap-4 rounded-2xl border border-border bg-card shadow-sm p-[18px_22px]">
                <div className="flex min-w-0 items-center gap-3.5">
                    <span className="inline-grid size-11.5 shrink-0 place-items-center rounded-xl bg-accent text-primary" aria-hidden="true">
                        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
                            <path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z" /><line x1="12" y1="9" x2="12" y2="13" /><line x1="12" y1="17" x2="12.01" y2="17" />
                        </svg>
                    </span>
                    <div className="min-w-0">
                        <h1 className="m-0 text-[22px] font-extrabold leading-[1.2] text-card-foreground">Review Complaint Handling Report - {dept.name}</h1>
                        <small className="flex flex-wrap items-center gap-2 text-xs font-medium text-muted-foreground">
                            <StatusBadge tone={complaintTypeTone(report.complainType)}>{report.complainType}</StatusBadge>
                            <span>Report #{report.id}</span>
                        </small>
                    </div>
                </div>
            </article>

            <article className={CARD}>
                <h3 className="m-0 flex items-center gap-2 border-b border-border p-[16px_20px] text-xs font-bold uppercase tracking-wide text-foreground">
                    <Ring d={<><circle cx="12" cy="12" r="10" /><line x1="12" y1="16" x2="12" y2="12" /><line x1="12" y1="8" x2="12.01" y2="8" /></>} />
                    Report Information
                </h3>
                <dl className="grid grid-cols-2 gap-x-10 p-[6px_20px_14px] max-[640px]:grid-cols-1">
                    {infoRows.map(([label, value]) => (
                        <div key={label} className="grid grid-cols-[minmax(0,140px)_1fr] items-center gap-2.5 border-b border-dashed border-border py-2.5 last:border-b-0">
                            <dt className="m-0 text-xs font-medium text-muted-foreground">{label}</dt>
                            <dd className="m-0 min-w-0 text-[13px] font-semibold text-foreground">{value}</dd>
                        </div>
                    ))}
                </dl>
            </article>

            <article className={CARD}>
                <header className="flex flex-wrap items-center justify-between gap-3 border-b border-border p-[14px_20px]">
                    <div className="flex items-center gap-2 text-xs font-bold uppercase tracking-wide text-foreground">
                        <Ring d={<><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z" /><polyline points="3.27 6.96 12 12.01 20.73 6.96" /><line x1="12" y1="22.08" x2="12" y2="12" /></>} />
                        Details {dept.lotEdit && <span className="ml-1 rounded-full bg-accent/60 px-2 py-0.5 text-[10px] font-bold text-primary">editable</span>}
                    </div>
                    <label className="flex cursor-pointer items-center gap-2 text-[12px] font-semibold text-muted-foreground select-none">
                        <Switch checked={showLots} onCheckedChange={setShowLots} /> Show Details Lot
                    </label>
                </header>
                {/* Server-rejected lot fields, named. This lives ABOVE the table and OUTSIDE the
                    confirm dialog on purpose: the dialog gets dismissed, and the boxes that need
                    fixing are here. Without it the only feedback was a generic toast. */}
                {lotErrorList.length > 0 && (
                    <div role="alert" className="mx-3 mt-3 rounded-xl border border-destructive/40 bg-destructive/5 p-3">
                        <p className="m-0 text-xs font-bold text-destructive">
                            {lotErrorList.length} field lot ditolak server — perbaiki lalu submit ulang:
                        </p>
                        <ul className="m-0 mt-1.5 list-disc pl-5 text-[12px] text-destructive">
                            {lotErrorList.map((e) => (
                                <li key={e.key}><span className="font-semibold">{e.lot} · {e.field}</span> — {e.message}</li>
                            ))}
                        </ul>
                    </div>
                )}

                <div className="overflow-x-auto p-3">
                    {/* `w-fit min-w-full` is load-bearing, not cosmetic. Without it this box is a
                        plain block pinned to 100% of the scroller, so `overflow-hidden` (which
                        rounds the table's corners) SWALLOWED the overflow: the scroller saw
                        scrollWidth === clientWidth and never produced a scrollbar, while ~316px of
                        lot columns sat clipped and unreachable with "Show Details Lot" on. */}
                    <div className="w-fit min-w-full rounded-xl border border-border/60 shadow-2xs overflow-hidden">
                        <table className={TABLE}>
                            <thead>
                                <tr>
                                    <th>Product</th>
                                    <th className="text-right">Total</th>
                                    <th className="text-right">Problem</th>
                                    <th>Lot No</th>
                                    {extraCols.map((c) => <th key={c.key} className={c.align ? 'text-right' : ''}>{c.label}</th>)}
                                    {TAIL_COLS.map((c) => <th key={c.key} className={c.align ? 'text-right' : ''}>{c.label}</th>)}
                                </tr>
                            </thead>
                            <tbody>
                                {report.products.map((p, pi) => p.lots.map((l, li) => (
                                    <tr key={`${pi}-${li}`} className={li === 0 && pi > 0 ? 'border-t border-border' : ''}>
                                        {li === 0 && (
                                            <Fragment>
                                                <td rowSpan={p.lots.length} className="font-bold text-foreground align-top bg-card border-r border-border/40 text-[12px]">{p.product}</td>
                                                <td rowSpan={p.lots.length} className="text-right tabular-nums font-semibold text-foreground align-top bg-card border-r border-border/40 text-[12px]">{p.totalQty}</td>
                                                <td rowSpan={p.lots.length} className="text-right tabular-nums font-semibold text-foreground align-top bg-card border-r border-border/40 text-[12px]">{p.totalQtyProblem}</td>
                                            </Fragment>
                                        )}
                                        <td className="font-semibold text-foreground text-[12px]">{cv(l.lotNumber)}</td>
                                        {extraCols.map((c) => (
                                            <td key={c.key} className={`${c.align ? 'text-right tabular-nums font-semibold text-foreground' : ''} ${isEditable(c.key) ? 'bg-accent/15' : 'text-foreground font-normal'} text-[13px]`}>
                                                {extraCell(c, l, lotById[l.id])}
                                            </td>
                                        ))}
                                        {TAIL_COLS.map((c) => (
                                            <td key={c.key} className={`${c.align ? 'text-right tabular-nums font-semibold text-foreground' : 'text-foreground font-normal'} text-[13px]`}>{cv(l[c.key])}</td>
                                        ))}
                                    </tr>
                                )))}
                            </tbody>
                        </table>
                    </div>
                </div>

            </article>

            {/* Submit action — floating centre pill (design-system decision bar). The required
                Review Remark is collected in the confirm dialog, never inside the pill. */}
            <DecisionBar>
                <span className="hidden text-[12px] font-medium text-muted-foreground sm:inline">Review {dept.name} · Report #{report.id}</span>
                <span className="hidden h-6 w-px bg-border sm:block" />
                <Button type="button" onClick={() => setConfirmOpen(true)} disabled={form.processing} className={PRIMARY_BTN}>
                    <Send className="size-3.5" /> Submit Review
                </Button>
            </DecisionBar>

            {confirmOpen && (
                <div className="fixed inset-0 z-100 grid place-items-center bg-black/40 p-4" role="dialog" aria-modal="true" onClick={() => !form.processing && setConfirmOpen(false)}>
                    <div className={`${CARD} w-full max-w-md`} onClick={(e) => e.stopPropagation()}>
                        <header className="flex items-center gap-2.5 border-b border-border px-5 py-4">
                            <span className={RING_ICON} aria-hidden="true"><Send className="size-3" /></span>
                            <h2 className="m-0 text-sm font-bold text-card-foreground">Submit {dept.name} Review — Report #{report.id}</h2>
                            <button type="button" onClick={() => setConfirmOpen(false)} className="ml-auto grid size-7 place-items-center rounded-lg text-muted-foreground hover:bg-secondary hover:text-foreground" aria-label="Close">
                                <X className="size-4" />
                            </button>
                        </header>
                        <div className="px-5 py-4">
                            <label htmlFor="reviewRemark" className="mb-1.5 block text-xs font-bold text-foreground">
                                Review Remark <span className="text-danger">*</span>
                            </label>
                            <textarea id="reviewRemark" rows={3} autoFocus value={form.data.ReviewRemark} onChange={(e) => form.setData('ReviewRemark', e.target.value)} placeholder="Tulis catatan review…"
                                className="w-full resize-y rounded-lg border border-input bg-card px-3.5 py-2.5 text-[13px] text-card-foreground outline-none transition-colors focus:border-primary" />
                            {form.errors.ReviewRemark && <p className="mt-1 text-xs text-destructive">{form.errors.ReviewRemark}</p>}

                            {/* The remark is fine but a lot field is not: say so HERE, because
                                this dialog is what the user is looking at when the submit fails,
                                and the offending box is behind it. */}
                            {lotErrorList.length > 0 && (
                                <div role="alert" className="mt-3 rounded-lg border border-destructive/40 bg-destructive/5 p-2.5 text-[12px] text-destructive">
                                    <p className="m-0 font-bold">
                                        {lotErrorList.length} field lot ditolak. Tutup dialog ini untuk memperbaikinya di tabel Details.
                                    </p>
                                    <ul className="m-0 mt-1 list-disc pl-4">
                                        {lotErrorList.slice(0, 3).map((e) => (
                                            <li key={e.key}>{e.lot} · {e.field} — {e.message}</li>
                                        ))}
                                    </ul>
                                    {lotErrorList.length > 3 && <p className="m-0 mt-1">…dan {lotErrorList.length - 3} lagi.</p>}
                                </div>
                            )}
                        </div>
                        <footer className="flex items-center justify-start gap-2.5 border-t border-border px-5 py-3.5">
                            <Button type="button" onClick={submit} disabled={form.processing || !form.data.ReviewRemark.trim()} className={PRIMARY_BTN}>
                                {form.processing ? <><Loader2 className="size-3.5 animate-spin" /> Menyimpan…</> : <><Send className="size-3.5" /> Submit Review</>}
                            </Button>
                            <button type="button" onClick={() => setConfirmOpen(false)} disabled={form.processing}
                                className="inline-flex h-9 items-center justify-center rounded-lg border border-input bg-card px-4 text-xs font-bold text-foreground transition-colors hover:border-primary hover:text-primary">Cancel</button>
                        </footer>
                    </div>
                </div>
            )}
        </section>
    );
}

ReviewDetail.layout = [AppLayout];