import { useState } from 'react';
import { Link, useForm } from '@inertiajs/react';
import { ArrowLeft, Clock, FileText, Package } from 'lucide-react';
import AppLayout from '@/Layouts/AppLayout';
import { StatusBadge } from '@/Components/Proto/UI/StatusBadge';
import { NativeSelect } from '@/Components/ui/native-select';
import { Button } from '@/Components/ui/button';
import { DecisionBar } from '@/Components/MenuSampleOrders/DecisionBar';
import { DecisionConfirmDialog } from '@/Components/MenuSampleOrders/DecisionConfirmDialog';
import { DOC_SECTION, DocList, SectionHeading } from '@/Components/MenuSampleOrders/SampleImport/detail/DetailGrammar';
import { LineItemsTable } from '@/Components/MenuSampleOrders/SampleImport/detail/LineItemsTable';
import { HistoryTable } from '@/Components/MenuSampleOrders/SampleImport/detail/HistoryTable';
import { useToast } from '@/Components/Toast';

const BACK_BTN = 'inline-flex h-9 items-center justify-center gap-1.5 rounded-lg border border-input bg-card px-4 text-xs font-bold text-foreground transition-colors hover:border-primary hover:text-primary';
const FIELD = 'h-9 w-full rounded-lg border border-input bg-card px-3 text-[13px] text-foreground outline-none transition-colors focus:border-primary';

export default function ReviewImportDetail({ record, activeLineIds, deliveryOptions }) {
    const { show: showToast } = useToast();
    const listUrl = route('sample-orders.request-import.review');
    const [confirm, setConfirm] = useState(false);

    const form = useForm({
        DeliveryID: record.deliveryId ?? '',
        ETD: record.etd ?? '',
        ETA: record.eta ?? '',
        Comment: '',
        lineIds: activeLineIds,
    });

    const submit = () => {
        form.transform((d) => ({ ...d, DeliveryID: d.DeliveryID === '' ? null : d.DeliveryID }));
        form.post(route('sample-orders.request-import.review.act', { id: record.no }), {
            onError: () => showToast('Please check the form and try again.', 'error'),
            preserveScroll: true,
            onSuccess: () => setConfirm(false),
        });
    };

    // Read-only header identity on the left; editable delivery/dates on the right.
    const headerLeft = {
        'No': <span className="font-bold tabular-nums text-primary">{record.no}</span>,
        'Principal': record.principal,
        'Creator': record.creator,
        'Status': <StatusBadge tone="primary">{record.status}</StatusBadge>,
        'Request From': record.requestFrom,
        'Tanggal': <span className="tabular-nums">{record.tanggal}</span>,
        'Attention': record.attention,
        'Address': record.address,
    };

    return (
        <section className="flex min-w-0 flex-col gap-5">
            <header>
                <p className="m-0 mb-1.5 flex items-center gap-2 text-xs font-semibold text-muted-foreground">
                    <Link href={listUrl} className="no-underline hover:text-primary">Review Import — Sample Request Import</Link>
                    <span aria-hidden="true">›</span><span className="text-foreground">Detail</span>
                </p>
                <div className="flex flex-col items-start gap-3 sm:flex-row sm:items-center sm:justify-between sm:gap-4">
                    <div className="flex min-w-0 flex-col gap-1">
                        <div className="flex items-center gap-3">
                            <h1 className="m-0 text-2xl font-extrabold tracking-tight text-foreground">Sample Request Import #{record.no}</h1>
                            <StatusBadge tone="primary">{record.status}</StatusBadge>
                        </div>
                        <p className="m-0 text-[13px] font-medium text-muted-foreground">{record.principal}</p>
                    </div>
                    <Link href={listUrl} className={BACK_BTN}><ArrowLeft className="size-3.5" />Back to List</Link>
                </div>
            </header>

            <section className={DOC_SECTION}>
                <SectionHeading icon={<FileText className="size-3" />} title="Sample Request Import" />
                <div className="grid grid-cols-2 gap-x-10 pt-1 max-[760px]:grid-cols-1 max-[760px]:gap-x-0">
                    <DocList fields={headerLeft} />
                    <div className="grid content-start gap-3 pt-2">
                        <label className="grid gap-1">
                            <span className="text-[11px] font-medium text-muted-foreground">Delivery</span>
                            <NativeSelect className={FIELD} value={form.data.DeliveryID}
                                onChange={(e) => form.setData('DeliveryID', e.target.value)}>
                                <option value="">— none —</option>
                                {deliveryOptions.map((d) => <option key={d.id} value={d.id}>{d.name}</option>)}
                            </NativeSelect>
                        </label>
                        <div className="grid grid-cols-2 gap-3">
                            <label className="grid gap-1">
                                <span className="text-[11px] font-medium text-muted-foreground">ETD</span>
                                <input type="date" className={FIELD} value={form.data.ETD} onChange={(e) => form.setData('ETD', e.target.value)} />
                            </label>
                            <label className="grid gap-1">
                                <span className="text-[11px] font-medium text-muted-foreground">ETA</span>
                                <input type="date" className={FIELD} value={form.data.ETA} onChange={(e) => form.setData('ETA', e.target.value)} />
                            </label>
                        </div>
                        <div className="grid grid-cols-[minmax(0,120px)_1fr] items-baseline gap-2.5 border-t border-border/40 pt-2">
                            <span className="text-[11px] font-medium text-muted-foreground">Comment</span>
                            <span className="text-xs font-medium text-foreground">{record.comment || <span className="text-muted-foreground/50">—</span>}</span>
                        </div>
                    </div>
                </div>
            </section>

            <section className={DOC_SECTION}>
                <SectionHeading icon={<Package className="size-3" />} title="Details List Sample Request Import" pill={record.lines.length} />
                <LineItemsTable lines={record.lines} />
            </section>

            <section className={DOC_SECTION}>
                <SectionHeading icon={<Clock className="size-3" />} title="History Sample Request Import" pill={record.history.length} />
                <HistoryTable history={record.history} />
            </section>

            <DecisionBar>
                <Button type="button" disabled={form.processing} onClick={() => setConfirm(true)}
                    className="h-9 rounded-lg bg-primary px-4.5 text-xs font-bold text-primary-foreground shadow-sm transition-colors hover:bg-primary/90">
                    Review Import
                </Button>
            </DecisionBar>

            <DecisionConfirmDialog
                action={confirm ? 'approve' : null}
                label="Review Import"
                onCancel={() => setConfirm(false)}
                onConfirm={submit}
                comment={form.data.Comment}
                onCommentChange={(v) => form.setData('Comment', v)}
                commentRequired={false}
                processing={form.processing}
                error={form.errors.Comment}
            />
        </section>
    );
}

ReviewImportDetail.layout = [AppLayout];