import { useEffect, useMemo, useState } from 'react';
import { Link, useForm } from '@inertiajs/react';
import { Printer, RotateCcw, Package, Scale, Truck, Eye, EyeOff, Loader2 } from 'lucide-react';
import AppLayout from '@/Layouts/AppLayout';
import { FloatingField } from '@/Components/Proto/UI/FloatingField';
import { useToast } from '@/Components/Toast';
import { usePrintLabelPdf } from '@/lib/pdf/usePrintLabelPdf';

// PrintRelabel — port legacy printlabelnsproduct.php. Tampilan mengikuti Proto; data & tulis DB
// mengikuti legacy. Dropdown Produk/Lot dari NetSuite (prop options, fixture/[] sampai token
// dicolok). Submit → INSERT relabelhistory → cetak label PDF (react-pdf) + auto-print. Panel
// preview me-render dokumen react-pdf yang SAMA → preview = hasil cetak (termasuk barcode).

const PAGE_OPTS = [{ v: 3, l: 'A3' }, { v: 4, l: 'A4' }, { v: 5, l: 'A5' }, { v: 6, l: 'A6' }];
const LOGO = (typeof window !== 'undefined' ? window.location.origin : '') + '/img/logo.png';

const CARD = 'rounded-2xl border border-border bg-card shadow-sm';
const TILE = 'grid size-7 shrink-0 place-items-center rounded-lg bg-accent text-primary';

const EMPTY = {
    product: '', productPrint: '',
    itemid: '', itembrand: '', itemname: '', pvintid: '', pvid: '', pvname: '', pvoriname: '',
    lot: '', lotPrint: '', lotnum: '', lotloc: '',
    gwc: '', gwu: '', gwp: '',
    nwc: '', nwu: '', nwp: '',
    origin: '', md: '', ed: '', page: 4,
};

const SectionHeader = ({ icon: Icon, title }) => (
    <header className="mb-5 flex items-center gap-2.5">
        <span className={TILE} aria-hidden="true"><Icon className="size-4" /></span>
        <h2 className="m-0 text-sm font-bold uppercase tracking-wide text-foreground">{title}</h2>
    </header>
);

export default function PrintRelabel({ options = {} }) {
    const products = options.products ?? [];
    const lotsByProduct = options.lotsByProduct ?? {};

    const { show } = useToast();
    const { busy, printRelabel } = usePrintLabelPdf();
    const form = useForm(EMPTY);
    const d = form.data;
    const [showPreview, setShowPreview] = useState(false);
    const [previewUrl, setPreviewUrl] = useState(null);

    const lots = useMemo(() => (d.product ? (lotsByProduct[d.product] ?? []) : []), [d.product, lotsByProduct]);

    // Autofill saat produk dipilih (legacy pcf + getlotinjs): field master + print name + origin, reset lot.
    const onProduct = (e) => {
        const id = e.target.value;
        const p = products.find((x) => String(x.internalid) === String(id));
        form.setData({
            ...form.data,
            product: id,
            itemid: p?.itemid ?? '', itembrand: p?.itembrand ?? '', itemname: p?.label ?? '',
            pvintid: p?.pvintid ?? '', pvid: p?.pvid ?? '', pvname: p?.pvname ?? '', pvoriname: p?.pvoriname ?? '',
            productPrint: p?.label ?? '', origin: p?.country ?? '',
            lot: '', lotPrint: '', lotnum: '', lotloc: '', nwc: '', nwu: '', nwp: '', ed: '',
        });
    };

    // Autofill saat lot dipilih (legacy lncf): lot print/master + nett content/unit/pack + expiry.
    const onLot = (e) => {
        const id = e.target.value;
        const l = lots.find((x) => String(x.lotinternalid) === String(id));
        const hasContent = l && l.content !== '';
        form.setData({
            ...form.data,
            lot: id,
            lotnum: l?.inventorynumber ?? '', lotloc: l?.location ?? '', lotPrint: l?.inventorynumber ?? '',
            nwc: hasContent ? l.content : '', nwu: hasContent ? (l.unit ?? '') : '', nwp: hasContent ? (l.pack ?? '') : '',
            ed: l?.expiration ?? '',
        });
    };

    const setF = (k) => (e) => form.setData(k, e.target.value);

    // Data untuk PDF (cetak & preview) — nama/lot yang DICETAK (print field, fallback master).
    const pdfData = useMemo(() => ({
        product: d.productPrint || d.itemname, lot: d.lotPrint || d.lotnum,
        grossVal: d.gwc, grossUnit: d.gwu, grossPack: d.gwp,
        nettVal: d.nwc, nettUnit: d.nwu, nettPack: d.nwp,
        origin: d.origin, mfg: d.md, exp: d.ed, page: d.page,
    }), [d]);
    const pdfKey = JSON.stringify(pdfData);

    // Live preview = dokumen react-pdf yang sama dgn cetak (debounce 400ms).
    useEffect(() => {
        if (!showPreview) return undefined;
        let cancelled = false;
        const t = setTimeout(async () => {
            try {
                const { renderRelabelLabelBlob } = await import('@/Components/MenuPrintLabel/pdf/RelabelLabelPdf');
                const blob = await renderRelabelLabelBlob({ data: pdfData, logo: LOGO });
                if (cancelled) return;
                setPreviewUrl(URL.createObjectURL(blob));
            } catch { /* abaikan error preview */ }
        }, 400);
        return () => { cancelled = true; clearTimeout(t); };
    }, [showPreview, pdfKey]);

    // Lepas blob preview: cabut URL lama tiap berubah + URL terakhir saat unmount (cegah kebocoran).
    useEffect(() => () => { if (previewUrl) URL.revokeObjectURL(previewUrl); }, [previewUrl]);

    const submit = () => {
        form.transform((data) => ({ ...data, page: Number(data.page) }));
        form.post(route('print-label.relabel.store'), {
            preserveScroll: true,
            onSuccess: () => {
                printRelabel({ data: pdfData, logo: LOGO });
                form.reset();
            },
            onError: () => show('Please check the form and try again.', 'error'),
        });
    };

    const err = (k) => form.errors[k];

    return (
        <section className="flex min-w-0 flex-col gap-5">
            <header className="flex flex-wrap items-start justify-between gap-3">
                <div>
                    <p className="m-0 mb-1.5 flex items-center gap-2 text-xs font-semibold text-muted-foreground">
                        <span>Print Label CC Product</span><span aria-hidden="true">›</span><span className="text-foreground">Print Relabel</span>
                    </p>
                    <h1 className="m-0 text-2xl font-extrabold leading-[1.2] tracking-tight text-foreground">Print Relabel</h1>
                </div>
                <button type="button" onClick={() => setShowPreview((v) => !v)} aria-pressed={showPreview}
                    className={`inline-flex h-9 shrink-0 items-center gap-1.5 rounded-lg border px-3.5 text-xs font-bold transition-colors ${showPreview ? 'border-primary bg-accent text-primary' : 'border-input bg-card text-foreground hover:border-primary hover:text-primary'}`}>
                    {showPreview ? <EyeOff className="size-4" /> : <Eye className="size-4" />}
                    {showPreview ? 'Hide Preview' : 'Show Preview'}
                </button>
            </header>

            <div className="flex items-center gap-6 border-b border-border">
                <span className="relative flex h-9 items-center text-sm font-semibold text-primary">
                    Active Batch
                    <span className="absolute inset-x-0 -bottom-px h-0.5 rounded-full bg-primary" aria-hidden="true" />
                </span>
                <Link href={route('print-label.history')} className="flex h-9 items-center text-sm font-medium text-muted-foreground no-underline transition-colors hover:text-foreground">
                    History
                </Link>
            </div>

            <div className={showPreview ? 'grid items-start gap-5 lg:grid-cols-[minmax(0,1fr)_360px]' : 'grid'}>
                <article className={CARD}>
                    <div className="flex flex-col gap-8 p-5 sm:p-6">
                        <section>
                            <SectionHeader icon={Package} title="Product Information" />
                            <div className="grid grid-cols-1 gap-x-6 gap-y-5 sm:grid-cols-2">
                                <div>
                                    <FloatingField as="select" label="Product Name *" value={d.product} onChange={onProduct}>
                                        <option value="">Select Product</option>
                                        {products.map((o) => <option key={o.internalid} value={o.internalid}>{o.label}</option>)}
                                    </FloatingField>
                                    {err('product') && <p className="mt-1 text-sm text-destructive">{err('product')}</p>}
                                </div>
                                <FloatingField label="Product Print Name" value={d.productPrint} onChange={setF('productPrint')} placeholder=" " />

                                <div>
                                    <FloatingField as="select" label="Product Lot Number *" value={d.lot} onChange={onLot} disabled={!d.product}>
                                        <option value="">{d.product ? 'Select Lot Number' : 'Select product first…'}</option>
                                        {lots.map((o) => <option key={o.lotinternalid} value={o.lotinternalid}>{o.inventorynumber}</option>)}
                                    </FloatingField>
                                    {err('lot') && <p className="mt-1 text-sm text-destructive">{err('lot')}</p>}
                                </div>
                                <FloatingField label="Lot Print Number" value={d.lotPrint} onChange={setF('lotPrint')} placeholder=" " />
                            </div>
                        </section>

                        <hr className="border-border/60" />

                        <section>
                            <SectionHeader icon={Scale} title="Weight Specification" />
                            <div className="grid grid-cols-1 gap-x-6 gap-y-5 sm:grid-cols-2">
                                <div>
                                    <div className="mb-1.5 text-[10.5px] font-bold uppercase tracking-wide text-muted-foreground">Gross Weight</div>
                                    <div className="grid grid-cols-[1fr_auto_1fr_auto_1fr] items-center gap-1.5">
                                        <FloatingField size="sm" label="Value" value={d.gwc} onChange={setF('gwc')} inputMode="decimal" placeholder=" " />
                                        <span className="text-muted-foreground/60">/</span>
                                        <FloatingField size="sm" label="Unit" value={d.gwu} onChange={setF('gwu')} placeholder=" " />
                                        <span className="text-muted-foreground/60">/</span>
                                        <FloatingField size="sm" label="Packing" value={d.gwp} onChange={setF('gwp')} placeholder=" " />
                                    </div>
                                </div>
                                <div>
                                    <div className="mb-1.5 text-[10.5px] font-bold uppercase tracking-wide text-muted-foreground">Nett Weight *</div>
                                    <div className="grid grid-cols-[1fr_auto_1fr_auto_1fr] items-center gap-1.5">
                                        <FloatingField size="sm" label="Value" value={d.nwc} onChange={setF('nwc')} inputMode="decimal" placeholder=" " />
                                        <span className="text-muted-foreground/60">/</span>
                                        <FloatingField size="sm" label="Unit" value={d.nwu} onChange={setF('nwu')} placeholder=" " />
                                        <span className="text-muted-foreground/60">/</span>
                                        <FloatingField size="sm" label="Packing" value={d.nwp} onChange={setF('nwp')} placeholder=" " />
                                    </div>
                                    {(err('nwc') || err('nwu') || err('nwp')) && <p className="mt-1 text-sm text-destructive">{err('nwc') || err('nwu') || err('nwp')}</p>}
                                </div>
                            </div>
                        </section>

                        <hr className="border-border/60" />

                        <section>
                            <SectionHeader icon={Truck} title="Logistics & Date" />
                            <div className="grid grid-cols-1 gap-x-6 gap-y-5 sm:grid-cols-2">
                                <FloatingField label="Origin" value={d.origin} onChange={setF('origin')} placeholder=" " />
                                <div>
                                    <FloatingField as="select" label="Page *" value={d.page} onChange={setF('page')}>
                                        {PAGE_OPTS.map((o) => <option key={o.v} value={o.v}>{o.l}</option>)}
                                    </FloatingField>
                                    {err('page') && <p className="mt-1 text-sm text-destructive">{err('page')}</p>}
                                </div>
                                <FloatingField type="date" label="Manufacture Date" value={d.md} onChange={setF('md')} />
                                <FloatingField type="date" label="Expiry Date" value={d.ed} onChange={setF('ed')} />
                            </div>
                        </section>
                    </div>

                    {/* Bottom-LEFT, primary first — matches the sibling Print Barcode page (user request),
                        a deliberate exception to the default bottom-right form-action placement. */}
                    <div className="flex flex-wrap items-center justify-start gap-2.5 border-t border-border px-5 py-4">
                        <button type="button" onClick={submit} disabled={form.processing || busy}
                            className="inline-flex h-9 items-center justify-center gap-1.5 rounded-lg bg-linear-to-br from-violet-500 to-primary px-5 text-[13px] font-bold text-white shadow-sm transition-[filter] hover:brightness-105 disabled:cursor-not-allowed disabled:opacity-60">
                            {form.processing || busy ? <><Loader2 className="size-4 animate-spin" /> Menyiapkan…</> : <><Printer className="size-4" /> Print Relabel</>}
                        </button>
                        <button type="button" onClick={() => form.reset()}
                            className="inline-flex h-9 items-center justify-center gap-1.5 rounded-lg border border-input bg-card px-5 text-[13px] font-bold text-foreground transition-colors hover:border-primary hover:text-primary">
                            <RotateCcw className="size-3.5" /> Reset
                        </button>
                    </div>
                </article>

                {showPreview && (
                    <aside className="lg:sticky lg:top-4">
                        <article className={CARD}>
                            <header className="flex items-center gap-2.5 border-b border-border/60 px-5 py-3.5">
                                <span className={TILE} aria-hidden="true"><Eye className="size-4" /></span>
                                <h2 className="m-0 text-sm font-bold uppercase tracking-wide text-foreground">Label Preview</h2>
                                <span className="ml-auto rounded-full bg-secondary px-2.5 py-0.5 text-[11px] font-bold text-muted-foreground">{PAGE_OPTS.find((o) => o.v === Number(d.page))?.l}</span>
                            </header>
                            <div className="p-4">
                                {previewUrl ? (
                                    <iframe title="Label Preview" src={previewUrl} className="aspect-4/3 w-full rounded-lg border border-border bg-white" />
                                ) : (
                                    <div className="grid aspect-4/3 w-full place-items-center rounded-lg border border-dashed border-border text-[12px] text-muted-foreground">Menyiapkan preview…</div>
                                )}
                                <p className="m-0 mt-3 text-center text-[11px] italic text-muted-foreground/70">Preview = hasil cetak (dokumen PDF yang sama).</p>
                            </div>
                        </article>
                    </aside>
                )}
            </div>
        </section>
    );
}

PrintRelabel.layout = [AppLayout];