@flowselections/floriday-voorraad 1.0.13 → 1.0.15

package/dist-lib/components/voorraad/ArtikelWizard.js

@@ -0,0 +1,1229 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { Link, useNavigate } from "@tanstack/react-router";
+import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, Button, Card, CardContent, Checkbox, Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle, Input, Label, Popover, PopoverContent, PopoverTrigger, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Switch, toast, } from "@flowselections/core";
+import { ArrowLeft, ArrowRight, Check, ChevronDown, ClipboardList, Info, Loader2, Plus, Search, Trash2, Upload, UploadCloud, Users, X, } from "lucide-react";
+import { useFloridayConnection } from "../../hooks/useFloridayConnection";
+import { useFlorydayCustomers } from "../../hooks/useFlorydayCustomers";
+import { floriday } from "../../lib/floriday-client";
+import { listFloricode } from "../../lib/floricode-client";
+import { supabase } from "../../integrations/supabase/client";
+import { buildAddTradeItemPayload, emptyWizardData, floridayCacheToWizardData, PACKAGING_SUPPLIERS, validateStep, } from "../../lib/floriday-payload";
+import { deleteLocalTradeItem, getLocalTradeItem, upsertLocalTradeItem, } from "../../hooks/useLocalTradeItems";
+import { useTradeItemSpec } from "../../hooks/useTradeItemSpec";
+import { useVbnRegulatoryFeatures } from "../../hooks/useVbnRegulatoryFeatures";
+import { useCodeList, useTradeItemFormSchema } from "../../hooks/useFloriday";
+import floridayLogo from "../../assets/floriday-logo.png.asset.json";
+import { VoorraadStockCard } from "../../components/voorraad/VoorraadStockCard";
+const empty = emptyWizardData;
+const STEPS = [
+    { key: "vbn", label: "VBN-code" },
+    { key: "artikel", label: "Artikel" },
+    { key: "paspoort", label: "Plantenpaspoort", onlyForPlants: true },
+    { key: "eigenschappen", label: "Eigenschappen" },
+    { key: "klanten", label: "Klanten" },
+    { key: "fotos", label: "Foto's" },
+    { key: "beladingen", label: "Beladingen" },
+    { key: "verpakking", label: "Aanvullende verpakkingsmaterialen" },
+    { key: "samenstelling", label: "Samenstelling", disabled: true },
+    { key: "beschikbaarheid", label: "Verwachte beschikbaarheid" },
+];
+function visibleSteps(d) {
+    return STEPS.filter((s) => {
+        const meta = s;
+        if (meta.onlyForPlants && d.productGroup === "CUT_FLOWER")
+            return false;
+        return true;
+    });
+}
+export function ArtikelWizard({ draftId: initialDraftId, tradeItemId, } = {}) {
+    const navigate = useNavigate();
+    const { activeId, activeConnection, loading: connLoading } = useFloridayConnection();
+    const { customers: floridayCustomers } = useFlorydayCustomers(activeId);
+    const [step, setStep] = useState(0);
+    const [data, setData] = useState(empty);
+    const [submitting, setSubmitting] = useState(false);
+    const [publishToFloriday, setPublishToFloriday] = useState(true);
+    const [draftId, setDraftId] = useState(initialDraftId);
+    const [draftLoading, setDraftLoading] = useState(Boolean(initialDraftId));
+    const [publishedLoading, setPublishedLoading] = useState(Boolean(tradeItemId));
+    const isEditingDraft = Boolean(initialDraftId);
+    const isEditingPublished = Boolean(tradeItemId);
+    const isEditing = isEditingDraft || isEditingPublished;
+    // Load existing draft when editing
+    useEffect(() => {
+        if (!initialDraftId)
+            return;
+        let cancelled = false;
+        setDraftLoading(true);
+        getLocalTradeItem(initialDraftId)
+            .then((row) => {
+            if (cancelled || !row)
+                return;
+            setData({ ...empty, ...row.data });
+        })
+            .catch((e) => toast.error(`Lokaal artikel laden mislukt: ${e.message}`))
+            .finally(() => {
+            if (!cancelled)
+                setDraftLoading(false);
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [initialDraftId]);
+    // Load existing published trade item from the shared cache
+    useEffect(() => {
+        if (!tradeItemId || !activeId)
+            return;
+        let cancelled = false;
+        setPublishedLoading(true);
+        (async () => {
+            try {
+                const { data: row, error } = await supabase
+                    .from("floriday_trade_items_cache")
+                    .select("data,floriday_id")
+                    .eq("connection_id", activeId)
+                    .eq("floriday_id", tradeItemId)
+                    .maybeSingle();
+                if (cancelled)
+                    return;
+                if (error) {
+                    toast.error(`Artikel laden mislukt: ${error.message}`);
+                    return;
+                }
+                if (!row) {
+                    toast.error("Artikel niet gevonden in de cache");
+                    return;
+                }
+                setData(floridayCacheToWizardData(row.data));
+                setPublishToFloriday(true);
+            }
+            catch (e) {
+                if (!cancelled)
+                    toast.error(`Artikel laden mislukt: ${e.message}`);
+            }
+            finally {
+                if (!cancelled)
+                    setPublishedLoading(false);
+            }
+        })();
+        return () => {
+            cancelled = true;
+        };
+    }, [tradeItemId, activeId]);
+    // Floricode data (PascalCase resource namen zoals ze in floricode_records staan)
+    const [vbnProducts, setVbnProducts] = useState([]);
+    const [featureTypes, setFeatureTypes] = useState([]);
+    const [packagingTypes, setPackagingTypes] = useState([]);
+    const [loadCarriers, setLoadCarriers] = useState([]);
+    const [collectionsList, setCollectionsList] = useState([]);
+    useEffect(() => {
+        // Kleine resources volledig laden
+        listFloricode("FeatureType", undefined, 300).then(setFeatureTypes).catch(() => { });
+        listFloricode("PackagingType", undefined, 100).then(setPackagingTypes).catch(() => { });
+        listFloricode("LoadCarrier", undefined, 600).then(setLoadCarriers).catch(() => { });
+        // VbnProduct (51k records) wordt server-side per productgroep geladen in StepVbn.
+        supabase
+            .from("collections")
+            .select("name")
+            .order("name")
+            .then(({ data }) => setCollectionsList((data ?? []).map((r) => r.name)));
+    }, []);
+    // Schema-gedreven: één HMAC-call levert het generieke trade-item schema
+    // + alle benodigde code-lists (vbn-product-group, characteristic, …) in
+    // één keer aan. Zie docs/floriday-integratie.md §15.
+    const schemaQuery = useTradeItemFormSchema();
+    const steps = useMemo(() => visibleSteps(data), [data.productGroup, data.articleType]);
+    const regulatoryQuery = useVbnRegulatoryFeatures(data.vbnCode);
+    const regulatoryFeatures = useMemo(() => {
+        const rows = regulatoryQuery.data?.features;
+        if (!rows || rows.length === 0)
+            return null;
+        return rows.map((r) => ({
+            code: r.code,
+            label: r.label,
+            regulation: r.regulation,
+            values: r.values,
+        }));
+    }, [regulatoryQuery.data]);
+    const spec = useTradeItemSpec(schemaQuery.data, data.vbnCode, data.productGroup, regulatoryFeatures);
+    // Set van VBN-product-codes die Floriday tijdens write accepteert.
+    // VBN-codes zijn 5- of 6-cijferig en staan in `vbn-product-code` (NIET in
+    // `vbn-product-group`, dat bevat 8-cijferige groeps-ID's).
+    // Leeg/missing → geen filter (graceful fallback).
+    const acceptedVbnCodes = useMemo(() => {
+        const list = schemaQuery.data?.codeLists?.["vbn-product-code"] ?? [];
+        if (!Array.isArray(list) || !list.length)
+            return null;
+        const set = new Set();
+        for (const e of list) {
+            const payload = (e?.payload ?? e?.data ?? {});
+            const code = e?.code ?? payload.code ?? payload.vbn_code ?? payload.vbnCode;
+            if (code != null)
+                set.add(String(code));
+        }
+        return set.size ? set : null;
+    }, [schemaQuery.data]);
+    // Bij wissel van VBN: gooi features weg die niet meer bij het schema horen.
+    const lastPrunedVbnRef = useRef("");
+    useEffect(() => {
+        if (!data.vbnCode)
+            return;
+        if (lastPrunedVbnRef.current === data.vbnCode)
+            return;
+        if (spec.characteristics.length === 0)
+            return; // wachten tot spec geladen is
+        lastPrunedVbnRef.current = data.vbnCode;
+        const allowedByCode = new Map(spec.characteristics.map((c) => [c.code, c]));
+        setData((d) => {
+            const next = {};
+            for (const [k, v] of Object.entries(d.features)) {
+                const c = allowedByCode.get(k);
+                if (!c)
+                    continue; // karakteristiek niet meer relevant
+                if (c.allowedValues.length > 0 &&
+                    !c.allowedValues.some((av) => av.code === v)) {
+                    continue; // waarde valt buiten Floriday-lijst
+                }
+                next[k] = v;
+            }
+            if (Object.keys(next).length === Object.keys(d.features).length &&
+                Object.entries(next).every(([k, v]) => d.features[k] === v)) {
+                return d;
+            }
+            return { ...d, features: next };
+        });
+    }, [data.vbnCode, spec.characteristics]);
+    const validateEigenschappen = (d) => {
+        const hasRegulatoryLookup = /^\d{5,6}$/.test(String(d.vbnCode ?? "").trim());
+        if (hasRegulatoryLookup && regulatoryQuery.isLoading) {
+            return {
+                ok: false,
+                errors: ["Verplichte Floricode-karakteristieken worden nog geladen"],
+            };
+        }
+        if (hasRegulatoryLookup && regulatoryQuery.isError) {
+            return {
+                ok: false,
+                errors: [
+                    `Verplichte Floricode-karakteristieken konden niet worden opgehaald: ${regulatoryQuery.error instanceof Error ? regulatoryQuery.error.message : "onbekende fout"}`,
+                ],
+            };
+        }
+        if (d.vbnCode && !spec.canDetermineCharacteristics) {
+            return {
+                ok: false,
+                errors: [
+                    `Karakteristieken konden niet betrouwbaar worden bepaald: ${spec.characteristicIssue ?? "onbekende schema-response"}`,
+                ],
+            };
+        }
+        const errors = [];
+        for (const c of spec.characteristics) {
+            const v = (d.features[c.code] ?? "").trim();
+            if (!v) {
+                if (c.required)
+                    errors.push(`${c.label} (${c.code}) is verplicht`);
+                continue;
+            }
+            if (c.allowedValues.length > 0 &&
+                !c.allowedValues.some((av) => av.code === v)) {
+                errors.push(`${c.label} (${c.code}): waarde "${v}" valt buiten de door Floriday geaccepteerde lijst`);
+            }
+        }
+        if (errors.length === 0)
+            return { ok: true };
+        return { ok: false, errors };
+    };
+    const validateStepLocal = (key, d) => {
+        if (key === "eigenschappen")
+            return validateEigenschappen(d);
+        return validateStep(key, d);
+    };
+    const update = (key, value) => setData((d) => ({ ...d, [key]: value }));
+    // Stap 1 (VBN) is de poort: zodra die geldig is, mag de gebruiker vrij
+    // tussen alle stappen springen door erop te klikken.
+    const firstStepUnlocked = useMemo(() => steps.length > 0 && validateStepLocal(steps[0].key, data).ok, [steps, data]);
+    // Per-stap validatie → bron voor visuele status én publish-gate.
+    // "samenstelling" is read-only ("binnenkort beschikbaar") en mag nooit
+    // als ongeldig tellen.
+    const stepValidity = useMemo(() => steps.map((s) => {
+        if (s.key === "samenstelling")
+            return true;
+        return validateStepLocal(s.key, data).ok;
+    }), [steps, data, spec, regulatoryQuery.isLoading, regulatoryQuery.isError, regulatoryQuery.error]);
+    const invalidStepCount = stepValidity.filter((v) => !v).length;
+    const firstInvalidIndex = stepValidity.findIndex((v) => !v);
+    const goTo = (i) => {
+        if (isEditing || i <= step || firstStepUnlocked)
+            setStep(i);
+    };
+    const next = () => setStep((s) => Math.min(s + 1, steps.length - 1));
+    // Autoscroll: bij wisselen van stap brengen we de open kaart in beeld zodat
+    // stappen onderaan (6-9) niet "verborgen" openen.
+    const stepRefs = useRef([]);
+    useEffect(() => {
+        const el = stepRefs.current[step];
+        if (!el)
+            return;
+        // Klein uitstel zodat de uitgeklapte content gerenderd is.
+        const id = window.setTimeout(() => {
+            el.scrollIntoView({ behavior: "smooth", block: "start" });
+        }, 50);
+        return () => window.clearTimeout(id);
+    }, [step]);
+    const submit = async () => {
+        if (!activeId) {
+            toast.error("Geen actieve Floriday-connectie geselecteerd");
+            return;
+        }
+        // Publish-gate: blokkeer zolang het trade-item schema niet succesvol
+        // geladen is — anders kunnen verplichte karakteristieken ontbreken.
+        const wantsPublish = (isEditingPublished && Boolean(tradeItemId)) ||
+            (!isEditingPublished && publishToFloriday);
+        if (wantsPublish && !schemaQuery.isSuccess) {
+            toast.error("Floriday-schema nog niet geladen — wacht even of probeer opnieuw.");
+            return;
+        }
+        // Strict valideer alle stappen voor verzending
+        for (const s of steps) {
+            const v = validateStepLocal(s.key, data);
+            if (!v.ok) {
+                toast.error(`${s.label}: ${v.errors[0]}`);
+                const idx = steps.findIndex((x) => x.key === s.key);
+                if (idx >= 0)
+                    setStep(idx);
+                return;
+            }
+        }
+        setSubmitting(true);
+        try {
+            if (isEditingPublished && tradeItemId) {
+                // PUT vervangt het bestaande trade item in Floriday
+                const payload = { ...buildAddTradeItemPayload(data), tradeItemId };
+                const res = await floriday.updateTradeItem(activeId, tradeItemId, payload);
+                if (!res?.attemptId) {
+                    throw new Error("Gateway gaf geen attemptId terug — wijziging niet bevestigd");
+                }
+                // Optimistisch: cache-rij meteen bijwerken zodat de tabel niet 5 min wacht
+                try {
+                    await supabase
+                        .from("floriday_trade_items_cache")
+                        .update({ data: payload, updated_at: new Date().toISOString() })
+                        .eq("connection_id", activeId)
+                        .eq("floriday_id", tradeItemId);
+                }
+                catch {
+                    /* niet kritiek, sync corrigeert binnen 5 min */
+                }
+                toast.success("Artikel bijgewerkt in Floriday");
+            }
+            else if (publishToFloriday) {
+                const payload = buildAddTradeItemPayload(data);
+                const res = await floriday.createTradeItem(activeId, payload);
+                if (!res?.attemptId) {
+                    throw new Error("Gateway gaf geen attemptId terug — aanmaken niet bevestigd");
+                }
+                // Als dit een lokaal artikel was, ruim de draft-rij op
+                if (draftId) {
+                    try {
+                        await deleteLocalTradeItem(draftId);
+                    }
+                    catch {
+                        // Niet kritiek; rij verdwijnt na volgende reload
+                    }
+                }
+                toast.success("Artikel aangemaakt in Floriday");
+            }
+            else {
+                const newId = await upsertLocalTradeItem({
+                    id: draftId,
+                    connectionId: activeId,
+                    data,
+                });
+                setDraftId(newId);
+                toast.success(draftId
+                    ? "Wijzigingen opgeslagen (nog niet gepubliceerd)"
+                    : "Artikel opgeslagen (nog niet gepubliceerd)");
+            }
+            navigate({ to: "/voorraad" });
+        }
+        catch (e) {
+            const msg = e.message;
+            if (msg.includes("NO_ACTIVE_FLORIDAY_CONNECTION")) {
+                toast.error("Geen actieve Floriday-connectie. Ga naar Instellingen → Floriday.");
+            }
+            else {
+                toast.error(`Opslaan mislukt: ${msg}`);
+            }
+        }
+        finally {
+            setSubmitting(false);
+        }
+    };
+    const handleDeleteDraft = async () => {
+        if (!draftId)
+            return;
+        try {
+            await deleteLocalTradeItem(draftId);
+            toast.success("Lokaal artikel verwijderd");
+            navigate({ to: "/voorraad" });
+        }
+        catch (e) {
+            toast.error(`Verwijderen mislukt: ${e.message}`);
+        }
+    };
+    const vbnValid = validateStepLocal("vbn", data).ok;
+    const saveDraft = async () => {
+        if (!activeId) {
+            toast.error("Geen actieve Floriday-connectie geselecteerd");
+            return;
+        }
+        if (!vbnValid) {
+            toast.error("Kies eerst een VBN-code voordat je een concept opslaat");
+            setStep(0);
+            return;
+        }
+        setSubmitting(true);
+        try {
+            const newId = await upsertLocalTradeItem({
+                id: draftId,
+                connectionId: activeId,
+                data,
+            });
+            setDraftId(newId);
+            toast.success(draftId ? "Concept bijgewerkt" : "Concept opgeslagen");
+            navigate({ to: "/voorraad" });
+        }
+        catch (e) {
+            toast.error(`Opslaan mislukt: ${e.message}`);
+        }
+        finally {
+            setSubmitting(false);
+        }
+    };
+    if (connLoading || draftLoading || publishedLoading) {
+        return (_jsx("main", { className: "p-6", children: _jsxs(Card, { className: "p-6 flex items-center gap-2 text-sm text-muted-foreground", children: [_jsx(Loader2, { className: "h-4 w-4 animate-spin" }), publishedLoading
+                        ? "Artikel laden..."
+                        : draftLoading
+                            ? "Lokaal artikel laden..."
+                            : "Floriday-connectie laden..."] }) }));
+    }
+    if (!activeConnection) {
+        return (_jsx("main", { className: "p-6", children: _jsx(Card, { className: "p-6", children: "Geen actieve Floriday-connectie gevonden. Voeg er eerst een toe in Instellingen." }) }));
+    }
+    return (_jsxs("main", { className: "mx-auto w-full max-w-3xl space-y-6 p-6", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx(Button, { variant: "ghost", size: "sm", asChild: true, children: _jsxs(Link, { to: "/voorraad", children: [_jsx(ArrowLeft, { className: "mr-2 h-4 w-4" }), "Terug naar voorraad"] }) }), !isEditingPublished && (_jsxs(Button, { variant: "outline", size: "sm", className: "ml-auto", onClick: saveDraft, disabled: submitting || !vbnValid, children: [submitting ? (_jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" })) : (_jsx(ClipboardList, { className: "mr-2 h-4 w-4" })), isEditingDraft ? "Concept bijwerken" : "Opslaan als concept"] })), isEditingDraft && (_jsxs(AlertDialog, { children: [_jsx(AlertDialogTrigger, { asChild: true, children: _jsxs(Button, { variant: "ghost", size: "sm", className: "text-destructive hover:text-destructive", children: [_jsx(Trash2, { className: "mr-2 h-4 w-4" }), "Verwijderen"] }) }), _jsxs(AlertDialogContent, { children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogTitle, { children: "Lokaal artikel verwijderen?" }), _jsx(AlertDialogDescription, { children: "Dit artikel is nog niet gepubliceerd naar Floriday. Verwijderen is definitief." })] }), _jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, { children: "Annuleren" }), _jsx(AlertDialogAction, { onClick: handleDeleteDraft, children: "Verwijderen" })] })] })] }))] }), isEditing && (_jsx(Card, { className: "p-4 bg-muted/30 flex items-center gap-3 text-sm", children: isEditingPublished ? (_jsxs(_Fragment, { children: [_jsx("img", { src: floridayLogo.url, alt: "Floriday", className: "h-6 w-6 shrink-0" }), _jsxs("div", { className: "flex-1", children: [_jsx("div", { className: "font-medium", children: "Gepubliceerd artikel bewerken" }), _jsx("div", { className: "text-xs text-muted-foreground", children: "Wijzigingen worden direct naar Floriday verstuurd. Je kunt vrij tussen alle secties navigeren." })] }), _jsxs(Button, { onClick: submit, disabled: submitting || invalidStepCount > 0, children: [submitting ? (_jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" })) : (_jsx(Check, { className: "mr-2 h-4 w-4" })), "Wijzigingen opslaan"] })] })) : (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex-1", children: [_jsx("div", { className: "font-medium", children: "Lokaal artikel bewerken" }), _jsx("div", { className: "text-xs text-muted-foreground", children: "Niet gepubliceerd. Je kunt vrij tussen alle secties navigeren." })] }), _jsxs(Button, { onClick: submit, disabled: submitting || invalidStepCount > 0, children: [submitting ? (_jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" })) : (_jsx(Check, { className: "mr-2 h-4 w-4" })), publishToFloriday ? "Publiceren naar Floriday" : "Wijzigingen opslaan"] })] })) })), isEditing && (_jsx(VoorraadStockCard, { connectionId: activeId, tradeItemId: tradeItemId ?? null, draftId: draftId ?? null })), _jsx("ol", { className: "space-y-3", children: steps.map((s, i) => {
+                    const isOpen = i === step;
+                    const isValid = stepValidity[i];
+                    const isVisited = i < step || isEditing;
+                    // Status: valid → blauwe check; visited+invalid → oranje !; untouched → grijs.
+                    const status = isValid
+                        ? "valid"
+                        : isVisited
+                            ? "invalid"
+                            : "untouched";
+                    const isLastStep = i === steps.length - 1;
+                    const navDisabled = !isEditing && i > step && !firstStepUnlocked;
+                    const summary = summaryFor(s.key, data);
+                    return (_jsx("li", { ref: (el) => { stepRefs.current[i] = el; }, className: "w-full min-w-0", children: _jsxs(Card, { className: `w-full min-w-0 ${isOpen ? "border-primary" : status === "untouched" ? "opacity-70" : ""}`, children: [_jsxs("button", { type: "button", onClick: () => goTo(i), disabled: navDisabled, className: "grid w-full grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-3 px-6 py-4 text-left disabled:cursor-not-allowed", children: [_jsx("span", { className: `flex h-7 w-7 shrink-0 items-center justify-center rounded-full border text-xs font-medium ${isOpen
+                                                ? "border-primary text-primary"
+                                                : status === "valid"
+                                                    ? "border-primary bg-primary text-primary-foreground"
+                                                    : status === "invalid"
+                                                        ? "border-destructive bg-destructive text-destructive-foreground"
+                                                        : "border-muted-foreground/30 text-muted-foreground"}`, children: status === "valid" ? (_jsx(Check, { className: "h-4 w-4" })) : status === "invalid" ? ("!") : (i + 1) }), _jsx("span", { className: `min-w-0 truncate font-medium ${status === "untouched" ? "text-muted-foreground" : ""}`, children: s.label }), !isOpen && summary && (_jsx("span", { className: `max-w-xs truncate text-xs ${status === "invalid" ? "text-destructive" : "text-muted-foreground"}`, children: status === "invalid" ? `Onvolledig — ${summary}` : summary }))] }), isOpen && (_jsxs(CardContent, { className: "space-y-4 pt-0", children: [_jsx("div", { "data-wizard-form-content": true, className: "w-full min-w-0", children: _jsx(StepBody, { stepKey: s.key, data: data, update: update, vbnProducts: vbnProducts, featureTypes: featureTypes, packagingTypes: packagingTypes, loadCarriers: loadCarriers, floridayCustomers: floridayCustomers, schemaQuery: schemaQuery, regulatoryQuery: regulatoryQuery, spec: spec, collectionsList: collectionsList, setCollectionsList: setCollectionsList, activeId: activeId, acceptedVbnCodes: acceptedVbnCodes }) }), isLastStep && !isEditingPublished && (_jsxs("div", { className: "rounded-lg border bg-muted/30 p-4 flex items-start gap-3", children: [_jsx("img", { src: floridayLogo.url, alt: "Floriday", className: "h-7 w-7 shrink-0 mt-0.5" }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsx(Label, { htmlFor: "publish-to-floriday", className: "font-medium cursor-pointer", children: "Publiceren naar Floriday" }), _jsx("p", { className: "text-xs text-muted-foreground mt-1", children: publishToFloriday
+                                                                ? "Het artikel wordt aangemaakt in Floriday en is binnen enkele minuten zichtbaar voor klanten."
+                                                                : "Het artikel wordt alleen lokaal opgeslagen. Je kunt het later vanuit de voorraadlijst alsnog publiceren naar Floriday." })] }), _jsx(Switch, { id: "publish-to-floriday", checked: publishToFloriday, onCheckedChange: setPublishToFloriday })] })), (isLastStep || isEditing) && invalidStepCount > 0 && (_jsxs("div", { className: "rounded-md border border-destructive/40 bg-destructive/5 px-3 py-2 text-xs text-destructive flex items-center justify-between gap-3", children: [_jsxs("span", { children: ["Nog ", invalidStepCount, " stap", invalidStepCount === 1 ? "" : "pen", " onvolledig"] }), firstInvalidIndex >= 0 && (_jsxs("button", { type: "button", onClick: () => setStep(firstInvalidIndex), className: "underline font-medium", children: ["Ga naar ", steps[firstInvalidIndex].label] }))] })), _jsx("div", { className: "flex justify-end pt-2", children: isLastStep || isEditing ? (_jsxs(Button, { onClick: submit, disabled: submitting || invalidStepCount > 0, children: [submitting ? (_jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" })) : (_jsx(Check, { className: "mr-2 h-4 w-4" })), isEditingPublished
+                                                        ? "Wijzigingen opslaan"
+                                                        : publishToFloriday
+                                                            ? isEditingDraft
+                                                                ? "Publiceren naar Floriday"
+                                                                : "Aanmaken en publiceren"
+                                                            : isEditingDraft
+                                                                ? "Wijzigingen opslaan"
+                                                                : "Artikel aanmaken"] })) : (_jsxs(Button, { onClick: next, disabled: !isValid, children: ["Volgende stap", _jsx(ArrowRight, { className: "ml-2 h-4 w-4" })] })) })] }))] }) }, s.key));
+                }) })] }));
+}
+function canAdvance(key, d) {
+    return validateStep(key, d).ok;
+}
+function summaryFor(key, d) {
+    switch (key) {
+        case "vbn":
+            if (d.vbnCode && d.vbnName)
+                return `${d.vbnCode} – ${d.vbnName}`;
+            return [d.vbnCode, d.vbnName].filter(Boolean).join(" – ");
+        case "artikel":
+            return [d.articleCode, d.name, d.articleType === "CUSTOMER_SPECIFIC" ? "klantspecifiek" : "regulier"]
+                .filter(Boolean).join(" • ");
+        case "paspoort": {
+            const names = (d.botanicalName ?? "").split(";").map((s) => s.trim()).filter(Boolean);
+            const countries = (d.countryOfOrigin ?? "").split(",").map((s) => s.trim()).filter(Boolean);
+            if (!names.length && !countries.length)
+                return "Niet ingevuld";
+            const a = names.length ? `${names.length} botanische naam${names.length === 1 ? "" : "/namen"}` : "geen naam";
+            const b = countries.length ? `${countries.length} land${countries.length === 1 ? "" : "en"}` : "geen land";
+            return `${a} • ${b}`;
+        }
+        case "eigenschappen": {
+            const n = Object.values(d.features).filter(Boolean).length;
+            return n ? `${n} eigenschap(pen) ingevuld` : "Niet ingevuld";
+        }
+        case "klanten":
+            return d.customerOrganizationIds.length
+                ? `${d.customerOrganizationIds.length} klant(en)`
+                : "Alle klanten";
+        case "fotos":
+            return `${d.images.length} foto('s)`;
+        case "beladingen":
+            return d.packingConfigurations.length
+                ? `${d.packingConfigurations.length} configuratie(s)`
+                : "Geen configuratie";
+        case "verpakking":
+            return d.additionalPackaging.length
+                ? `${d.additionalPackaging.length} item(s)`
+                : "Geen extra verpakking";
+        case "samenstelling":
+            return "Binnenkort beschikbaar";
+        case "beschikbaarheid":
+            return d.yearRound ? "Jaarrond" : `${d.weeks.length} week/weken`;
+        default:
+            return "";
+    }
+}
+function labelForGroup(g) {
+    return g === "CUT_FLOWER" ? "Snijbloem" : g === "POT_PLANT" ? "Kamerplant" : "Tuinplant";
+}
+function StepBody(p) {
+    switch (p.stepKey) {
+        case "vbn":
+            return _jsx(StepVbn, { ...p });
+        case "artikel":
+            return _jsx(StepArtikel, { ...p });
+        case "paspoort":
+            return _jsx(StepPaspoort, { ...p });
+        case "eigenschappen":
+            return _jsx(StepEigenschappen, { ...p });
+        case "klanten":
+            return _jsx(StepKlanten, { ...p });
+        case "fotos":
+            return _jsx(StepFotos, { ...p });
+        case "beladingen":
+            return _jsx(StepBeladingen, { ...p });
+        case "verpakking":
+            return _jsx(StepVerpakking, { ...p });
+        case "samenstelling":
+            return (_jsx("div", { className: "rounded-md border border-dashed p-6 text-center text-sm text-muted-foreground", children: "Binnenkort beschikbaar" }));
+        case "beschikbaarheid":
+            return _jsx(StepBeschikbaarheid, { ...p });
+    }
+}
+// ============================================================
+// Steps
+// ============================================================
+const RECENT_VBN_KEY = "wizard.recentVbn.v1";
+function readRecentVbn() {
+    try {
+        const raw = localStorage.getItem(RECENT_VBN_KEY);
+        return raw ? JSON.parse(raw) : [];
+    }
+    catch {
+        return [];
+    }
+}
+function pushRecentVbn(item) {
+    const list = readRecentVbn().filter((r) => r.code !== item.code);
+    list.unshift(item);
+    localStorage.setItem(RECENT_VBN_KEY, JSON.stringify(list.slice(0, 6)));
+}
+function groupOfRecord(r) {
+    // Floricode VbnProduct gebruikt numeriek product_group_id (bv. 10100202).
+    // Eerste twee cijfers coderen de hoofdgroep:
+    // 10 = Snijbloem, 20 = Kamerplant, 30 = Tuinplant.
+    const raw = r.data?.product_group_id ?? r.data?.productGroupId ?? r.data?.productGroup ?? r.data?.group;
+    if (raw == null)
+        return null;
+    const n = Number(raw);
+    if (Number.isFinite(n) && n > 0) {
+        const s = String(Math.floor(n));
+        if (s.startsWith("10"))
+            return "CUT_FLOWER";
+        if (s.startsWith("20"))
+            return "POT_PLANT";
+        if (s.startsWith("30"))
+            return "GARDEN_PLANT";
+        return null;
+    }
+    const g = String(raw).toLowerCase();
+    if (g.includes("snij") || g.includes("cut"))
+        return "CUT_FLOWER";
+    if (g.includes("kamer") || g.includes("pot"))
+        return "POT_PLANT";
+    if (g.includes("tuin") || g.includes("garden"))
+        return "GARDEN_PLANT";
+    return null;
+}
+function labelOf(r) {
+    return String(r.data?.name ?? r.data?.description ?? r.record_id);
+}
+function codeOf(r) {
+    // PackagingType heeft `id`, LoadCarrier / FeatureValue hebben `code`,
+    // FeatureType heeft `id`.
+    return String(r.data?.code ?? r.data?.id ?? r.record_id);
+}
+// Floricode `product_group_id` is een 8-cijferige string. De eerste twee
+// cijfers bepalen het hoofdsegment, maar Floricode gebruikt méér dan één
+// bucket per Floriday-productgroep:
+//   10*, 11*  → snijbloemen
+//   20*, 21*, 29* → kamerplanten
+//   30*, 31*  → tuinplanten
+// Eén prefix per groep liet daardoor ~6.300 VbnProducts onzichtbaar.
+const GROUP_PREFIXES = {
+    CUT_FLOWER: ["10", "11"],
+    POT_PLANT: ["20", "21", "29"],
+    GARDEN_PLANT: ["30", "31"],
+};
+const GROUP_DOT = {
+    CUT_FLOWER: "bg-amber-400",
+    POT_PLANT: "bg-rose-500",
+    GARDEN_PLANT: "bg-emerald-500",
+};
+function StepVbn({ data, update, acceptedVbnCodes }) {
+    const groups = [
+        { value: "ALL", label: "– Alle productgroepen –" },
+        { value: "CUT_FLOWER", label: "Snijbloem" },
+        { value: "POT_PLANT", label: "Kamerplant" },
+        { value: "GARDEN_PLANT", label: "Tuinplant" },
+    ];
+    const [recent, setRecent] = useState([]);
+    const [open, setOpen] = useState(false);
+    const [query, setQuery] = useState("");
+    const [results, setResults] = useState([]);
+    const [loading, setLoading] = useState(false);
+    const cacheRef = useRef(new Map());
+    // null in data.productGroup = "Alle productgroepen"
+    const groupValue = data.productGroup ?? "ALL";
+    useEffect(() => {
+        setRecent(readRecentVbn());
+    }, []);
+    // Laad records voor gekozen groep + zoekterm (server-side prefix-filter)
+    useEffect(() => {
+        const prefixes = data.productGroup ? GROUP_PREFIXES[data.productGroup] : null;
+        const cacheKey = `${prefixes?.join("|") ?? "ALL"}::${query.trim().toLowerCase()}`;
+        const cached = cacheRef.current.get(cacheKey);
+        if (cached) {
+            setResults(cached);
+            return;
+        }
+        setLoading(true);
+        const t = setTimeout(() => {
+            listFloricode("VbnProduct", query || undefined, 1000, {
+                ...(prefixes
+                    ? { prefixIn: { field: "product_group_id", prefixes } }
+                    : {}),
+                sortField: "record_id",
+                sortAscending: true,
+            })
+                .then((rows) => {
+                cacheRef.current.set(cacheKey, rows);
+                setResults(rows);
+            })
+                .catch(() => setResults([]))
+                .finally(() => setLoading(false));
+        }, query ? 250 : 0);
+        return () => clearTimeout(t);
+    }, [data.productGroup, query]);
+    const selectVbn = (code, name, group) => {
+        update("vbnCode", code);
+        update("vbnName", name);
+        if (group)
+            update("productGroup", group);
+        pushRecentVbn({ code, name, group });
+        setRecent(readRecentVbn());
+        setOpen(false);
+        setQuery("");
+    };
+    const triggerLabel = data.vbnName
+        ? data.vbnName
+        : "Selecteer een VBN productcode";
+    return (_jsxs("div", { className: "space-y-5", children: [_jsxs("div", { children: [_jsx(Label, { className: "mb-2 block", children: "Productcode" }), _jsxs("div", { className: "grid gap-3 md:grid-cols-2", children: [_jsxs(Select, { value: groupValue, onValueChange: (v) => {
+                                    const next = v === "ALL" ? null : v;
+                                    update("productGroup", next);
+                                    // reset selectie als groep wisselt
+                                    if (data.vbnCode) {
+                                        update("vbnCode", "");
+                                        update("vbnName", "");
+                                    }
+                                }, children: [_jsx(SelectTrigger, { children: _jsx(SelectValue, { placeholder: "Kies productgroep" }) }), _jsx(SelectContent, { children: groups.map((g) => (_jsx(SelectItem, { value: g.value, children: g.label }, g.value))) })] }), _jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs("button", { type: "button", className: "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 text-left text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50", children: [_jsx("span", { className: data.vbnName ? "" : "text-muted-foreground", children: triggerLabel }), _jsx(ChevronDown, { className: "h-4 w-4 opacity-50" })] }) }), _jsxs(PopoverContent, { align: "start", sideOffset: 4, className: "w-[var(--radix-popover-trigger-width)] p-0", children: [_jsxs("div", { className: "flex items-center gap-2 border-b px-3 py-2", children: [_jsx(Search, { className: "h-4 w-4 text-muted-foreground" }), _jsx("input", { autoFocus: true, value: query, onChange: (e) => setQuery(e.target.value), placeholder: "Zoek op naam of code\u2026", className: "h-7 w-full border-0 bg-transparent text-sm outline-none placeholder:text-muted-foreground" })] }), _jsxs("div", { className: "max-h-80 overflow-y-auto", children: [loading && (_jsx("div", { className: "px-3 py-3 text-sm text-muted-foreground", children: "Zoeken\u2026" })), (() => {
+                                                        // §15.4 — Floriday-codeLists is bron van waarheid voor wat
+                                                        // tijdens write geaccepteerd wordt. Floricode levert de
+                                                        // verrijking (labels/groep); codes die Floriday niet kent
+                                                        // verbergen we.
+                                                        const filtered = acceptedVbnCodes && acceptedVbnCodes.size > 0
+                                                            ? results.filter((r) => acceptedVbnCodes.has(codeOf(r)))
+                                                            : results;
+                                                        if (!loading && filtered.length === 0) {
+                                                            return (_jsx("div", { className: "px-3 py-3 text-sm text-muted-foreground", children: "Geen resultaten." }));
+                                                        }
+                                                        return !loading && filtered.map((r) => {
+                                                            const code = codeOf(r);
+                                                            const name = labelOf(r);
+                                                            const grp = groupOfRecord(r);
+                                                            const active = data.vbnCode === code;
+                                                            return (_jsxs("button", { type: "button", onClick: () => selectVbn(code, name, grp), className: `flex w-full items-center gap-3 px-3 py-2 text-left text-sm hover:bg-muted ${active ? "bg-primary/5" : ""}`, children: [_jsx("span", { className: `h-6 w-6 shrink-0 rounded-full ${grp ? GROUP_DOT[grp] : "bg-muted-foreground/30"} opacity-80` }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("div", { className: "truncate font-medium", children: name }), _jsxs("div", { className: "font-mono text-xs text-muted-foreground", children: [code, grp ? ` – ${labelForGroup(grp)}` : ""] })] }), active && _jsx(Check, { className: "h-4 w-4 text-primary" })] }, r.record_id));
+                                                        });
+                                                    })()] })] })] })] })] }), recent.length > 0 && (_jsxs("div", { children: [_jsx(Label, { className: "mb-2 block", children: "Meest gebruikt" }), _jsx("div", { className: "grid grid-cols-2 gap-3", children: recent.slice(0, 2).map((r) => {
+                            const selected = data.vbnCode === r.code;
+                            return (_jsxs("button", { type: "button", onClick: () => selectVbn(r.code, r.name, r.group), className: `flex items-center gap-3 rounded-md border p-3 text-left transition-colors ${selected ? "border-primary bg-primary/5" : "hover:border-primary/40"}`, children: [_jsx("span", { className: `h-9 w-9 shrink-0 rounded-full ${r.group ? GROUP_DOT[r.group] : "bg-muted-foreground/30"} opacity-80` }), _jsxs("div", { className: "min-w-0", children: [_jsx("div", { className: "truncate text-sm font-medium", children: r.name || r.code }), _jsxs("div", { className: "text-xs text-muted-foreground", children: [r.code, r.group ? ` - ${labelForGroup(r.group)}` : ""] })] })] }, r.code));
+                        }) })] }))] }));
+}
+function InfoTip({ text }) {
+    return (_jsx("span", { title: text, className: "inline-flex cursor-help text-muted-foreground", children: _jsx(Info, { className: "h-3.5 w-3.5" }) }));
+}
+function StepArtikel({ data, update, collectionsList, setCollectionsList }) {
+    const [newCollection, setNewCollection] = useState("");
+    const [showNewCollection, setShowNewCollection] = useState(false);
+    const addCollection = async (name) => {
+        const v = name.trim();
+        if (!v)
+            return;
+        if (!data.collections.includes(v)) {
+            update("collections", [...data.collections, v]);
+        }
+        if (!collectionsList.includes(v)) {
+            setCollectionsList([...collectionsList, v]);
+            const { data: userData } = await supabase.auth.getUser();
+            await supabase
+                .from("collections")
+                .insert({ name: v, created_by: userData.user?.id ?? null });
+        }
+        setNewCollection("");
+        setShowNewCollection(false);
+    };
+    const removeCollection = (c) => update("collections", data.collections.filter((x) => x !== c));
+    const articleTypes = [
+        { value: "REGULAR", label: "Regulier", description: "Beschikbaar voor iedereen", icon: Users },
+        {
+            value: "CUSTOMER_SPECIFIC",
+            label: "Klantspecifiek",
+            description: "Beschikbaar voor één of meerdere klanten",
+            icon: ClipboardList,
+        },
+    ];
+    return (_jsxs("div", { className: "grid gap-5", children: [_jsxs("div", { className: "space-y-2", children: [_jsxs(Label, { className: "flex items-center gap-1.5", children: ["Artikelcode ", _jsx("span", { className: "text-destructive", children: "*" }), _jsx(InfoTip, { text: "Dit is je eigen referentie naar dit artikel, ook wel bekend als de kweker-artikelcode." })] }), _jsx(Input, { value: data.articleCode, onChange: (e) => update("articleCode", e.target.value) })] }), _jsxs("div", { className: "space-y-2", children: [_jsxs(Label, { children: ["Naam ", _jsx("span", { className: "text-destructive", children: "*" })] }), _jsx(Input, { value: data.name, onChange: (e) => update("name", e.target.value) })] }), _jsxs("div", { className: "space-y-2", children: [_jsxs(Label, { className: "flex items-center gap-1.5", children: ["GTIN ", _jsx("span", { className: "text-muted-foreground font-normal", children: "(optioneel)" }), _jsx(InfoTip, { text: "GTIN staat voor 'Global Trade Item Number', een 13-cijferige barcode" })] }), _jsx(Input, { value: data.gtin, onChange: (e) => update("gtin", e.target.value) })] }), _jsxs("div", { className: "space-y-2", children: [_jsxs(Label, { children: ["Collecties ", _jsx("span", { className: "text-muted-foreground font-normal", children: "(optioneel)" })] }), data.collections.length > 0 && (_jsx("div", { className: "flex flex-wrap gap-1.5", children: data.collections.map((c) => (_jsxs("span", { className: "inline-flex items-center gap-1 rounded-full bg-muted px-2 py-1 text-xs", children: [c, _jsx("button", { type: "button", onClick: () => removeCollection(c), className: "hover:text-destructive", children: _jsx(X, { className: "h-3 w-3" }) })] }, c))) })), !showNewCollection ? (_jsxs(Select, { value: "", onValueChange: (v) => {
+                            if (v === "__new__") {
+                                setShowNewCollection(true);
+                                return;
+                            }
+                            if (v && !data.collections.includes(v)) {
+                                update("collections", [...data.collections, v]);
+                            }
+                        }, children: [_jsx(SelectTrigger, { children: _jsx(SelectValue, { placeholder: "Geen collectie" }) }), _jsxs(SelectContent, { children: [collectionsList
+                                        .filter((c) => !data.collections.includes(c))
+                                        .map((c) => (_jsx(SelectItem, { value: c, children: c }, c))), _jsx(SelectItem, { value: "__new__", children: "+ Nieuwe collectie\u2026" })] })] })) : (_jsxs("div", { className: "flex gap-2", children: [_jsx(Input, { autoFocus: true, value: newCollection, onChange: (e) => setNewCollection(e.target.value), placeholder: "Naam nieuwe collectie", onKeyDown: (e) => {
+                                    if (e.key === "Enter") {
+                                        e.preventDefault();
+                                        addCollection(newCollection);
+                                    }
+                                    else if (e.key === "Escape") {
+                                        setShowNewCollection(false);
+                                        setNewCollection("");
+                                    }
+                                } }), _jsx(Button, { type: "button", size: "sm", onClick: () => addCollection(newCollection), children: _jsx(Plus, { className: "h-4 w-4" }) }), _jsx(Button, { type: "button", size: "sm", variant: "outline", onClick: () => {
+                                    setShowNewCollection(false);
+                                    setNewCollection("");
+                                }, children: "Annuleer" })] }))] }), _jsxs("div", { className: "space-y-2", children: [_jsx(Label, { children: "Type artikel" }), _jsx("div", { className: "grid grid-cols-2 gap-3", children: articleTypes.map((t) => {
+                            const Icon = t.icon;
+                            const active = data.articleType === t.value;
+                            return (_jsxs("button", { type: "button", onClick: () => update("articleType", t.value), className: `flex flex-col items-center gap-2 rounded-lg border p-4 text-center transition-colors ${active
+                                    ? "border-primary bg-primary text-primary-foreground"
+                                    : "border-border hover:border-primary/50"}`, children: [_jsx("div", { className: "flex w-full items-start", children: _jsx("span", { className: `flex h-4 w-4 items-center justify-center rounded-full border ${active ? "border-primary-foreground" : "border-muted-foreground/50"}`, children: active && (_jsx("span", { className: "h-2 w-2 rounded-full bg-primary-foreground" })) }) }), _jsx(Icon, { className: "h-6 w-6" }), _jsx("div", { className: "font-medium", children: t.label }), _jsx("div", { className: `text-xs ${active ? "text-primary-foreground/80" : "text-muted-foreground"}`, children: t.description })] }, t.value));
+                        }) })] }), _jsxs("div", { className: "space-y-1", children: [_jsxs("label", { className: "flex items-start gap-2 text-sm", children: [_jsx(Checkbox, { checked: data.visibleInExplorer, onCheckedChange: (v) => update("visibleInExplorer", v === true), className: "mt-0.5" }), _jsx("span", { children: "Artikel weergeven bij ontdekken in de Explorer voor kopers" })] }), _jsx("p", { className: "pl-6 text-xs text-muted-foreground", children: "Artikel is altijd zichtbaar via de customer API" })] })] }));
+}
+import { COUNTRIES } from "../../lib/countries";
+function StepPaspoort({ data, update }) {
+    const [countryOpen, setCountryOpen] = useState(false);
+    const [countryQuery, setCountryQuery] = useState("");
+    const selectedCountries = (data.countryOfOrigin || "")
+        .split(",")
+        .map((c) => c.trim().toUpperCase())
+        .filter(Boolean);
+    const toggleCountry = (code) => {
+        const set = new Set(selectedCountries);
+        if (set.has(code))
+            set.delete(code);
+        else
+            set.add(code);
+        update("countryOfOrigin", Array.from(set).join(","));
+    };
+    const filteredCountries = COUNTRIES.filter((c) => {
+        const q = countryQuery.trim().toLowerCase();
+        if (!q)
+            return true;
+        return c.name.toLowerCase().includes(q) || c.code.toLowerCase().includes(q);
+    });
+    const countryLabel = selectedCountries.length === 0
+        ? "Selecteer één of meerdere landen"
+        : selectedCountries
+            .map((c) => COUNTRIES.find((o) => o.code === c)?.name ?? c)
+            .join(", ");
+    const botanicalNames = data.botanicalName.length > 0
+        ? data.botanicalName.split(";").map((s) => s.trim()).filter(Boolean)
+        : [];
+    const [botanicalDraft, setBotanicalDraft] = useState("");
+    const commitBotanical = (raw) => {
+        const value = raw.trim();
+        if (!value)
+            return;
+        if (botanicalNames.some((n) => n.toLowerCase() === value.toLowerCase())) {
+            setBotanicalDraft("");
+            return;
+        }
+        update("botanicalName", [...botanicalNames, value].join("; "));
+        setBotanicalDraft("");
+    };
+    const removeBotanical = (idx) => {
+        update("botanicalName", botanicalNames.filter((_, i) => i !== idx).join("; "));
+    };
+    return (_jsxs("div", { className: "grid gap-5", children: [_jsxs("div", { className: "grid gap-2", children: [_jsx(Label, { children: "Botanische naam" }), _jsxs("div", { className: "flex items-center gap-3", children: [_jsx(Input, { value: botanicalDraft, onChange: (e) => setBotanicalDraft(e.target.value), onKeyDown: (e) => {
+                                    if (e.key === "Enter") {
+                                        e.preventDefault();
+                                        commitBotanical(botanicalDraft);
+                                    }
+                                }, placeholder: "", className: "flex-1" }), _jsx("button", { type: "button", "aria-label": "Voeg botanische naam toe", onClick: () => commitBotanical(botanicalDraft), className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-full border border-primary text-primary transition hover:bg-primary hover:text-primary-foreground", children: _jsx(Plus, { className: "h-4 w-4" }) })] }), botanicalNames.length > 0 && (_jsx("div", { className: "flex flex-wrap gap-2 pt-1", children: botanicalNames.map((bn, idx) => (_jsxs("span", { className: "inline-flex items-center gap-2 rounded-md border border-input bg-background px-2.5 py-1 text-sm", children: [bn, _jsx("button", { type: "button", "aria-label": `Verwijder ${bn}`, onClick: () => removeBotanical(idx), className: "flex h-4 w-4 items-center justify-center rounded-full bg-muted-foreground/70 text-background transition hover:bg-destructive", children: _jsx(X, { className: "h-3 w-3" }) })] }, `${bn}-${idx}`))) }))] }), _jsxs("div", { className: "grid gap-2", children: [_jsx(Label, { children: "Land van oorsprong" }), _jsxs(Popover, { open: countryOpen, onOpenChange: setCountryOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs("button", { type: "button", className: "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 text-left text-sm ring-offset-background focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", children: [_jsx("span", { className: selectedCountries.length === 0
+                                                ? "text-muted-foreground"
+                                                : "truncate", children: countryLabel }), _jsx(ChevronDown, { className: "h-4 w-4 shrink-0 opacity-50" })] }) }), _jsxs(PopoverContent, { align: "start", sideOffset: 4, className: "w-[var(--radix-popover-trigger-width)] p-0", children: [_jsxs("div", { className: "flex items-center gap-2 border-b px-3 py-2", children: [_jsx(Search, { className: "h-4 w-4 text-muted-foreground" }), _jsx("input", { autoFocus: true, value: countryQuery, onChange: (e) => setCountryQuery(e.target.value), placeholder: "Zoek land\u2026", className: "h-7 w-full border-0 bg-transparent text-sm outline-none placeholder:text-muted-foreground" })] }), _jsxs("div", { className: "max-h-72 overflow-y-auto py-1", children: [filteredCountries.length === 0 && (_jsx("div", { className: "px-3 py-3 text-sm text-muted-foreground", children: "Geen resultaten." })), filteredCountries.map((c) => {
+                                                const checked = selectedCountries.includes(c.code);
+                                                return (_jsxs("button", { type: "button", onClick: () => toggleCountry(c.code), className: "flex w-full items-center gap-3 px-3 py-2 text-left text-sm hover:bg-muted", children: [_jsx(Checkbox, { checked: checked }), _jsx("span", { className: "flex-1", children: c.name }), _jsx("span", { className: "font-mono text-xs text-muted-foreground", children: c.code })] }, c.code));
+                                            })] })] })] })] })] }));
+}
+function StepEigenschappen({ data, update, spec, schemaQuery, regulatoryQuery }) {
+    if (!data.vbnCode) {
+        return (_jsx("p", { className: "text-sm text-muted-foreground", children: "Selecteer eerst een VBN-code bij stap 1 om de bijbehorende eigenschappen te laden." }));
+    }
+    if (schemaQuery.isLoading) {
+        return (_jsxs("p", { className: "text-sm text-muted-foreground flex items-center gap-2", children: [_jsx(Loader2, { className: "h-4 w-4 animate-spin" }), "Schema wordt geladen\u2026"] }));
+    }
+    if (schemaQuery.isError || !schemaQuery.data) {
+        return (_jsxs("p", { className: "text-sm text-destructive", children: ["Kon het Floriday trade-item schema niet volledig ophalen: ", schemaQuery.error instanceof Error ? schemaQuery.error.message : "onbekende fout"] }));
+    }
+    const hasRegulatoryLookup = /^\d{5,6}$/.test(String(data.vbnCode ?? "").trim());
+    if (hasRegulatoryLookup && regulatoryQuery.isLoading) {
+        return (_jsxs("p", { className: "text-sm text-muted-foreground flex items-center gap-2", children: [_jsx(Loader2, { className: "h-4 w-4 animate-spin" }), "Verplichte Floricode-karakteristieken worden geladen\u2026"] }));
+    }
+    if (hasRegulatoryLookup && regulatoryQuery.isError) {
+        return (_jsxs("p", { className: "text-sm text-destructive", children: ["Kon verplichte Floricode-karakteristieken niet ophalen: ", regulatoryQuery.error instanceof Error ? regulatoryQuery.error.message : "onbekende fout"] }));
+    }
+    if (spec.characteristics.length === 0) {
+        const s = schemaQuery.data ?? {};
+        const diag = {
+            requiredFields: s.requiredFields ?? [],
+            fieldNames: Array.isArray(s.fields) ? s.fields.map((f) => f.name) : [],
+            enumKeys: s.enums ? Object.keys(s.enums) : [],
+            hasRawSchema: Boolean(s.schema),
+            codeListKeys: s.codeLists ? Object.keys(s.codeLists) : [],
+            vbnProductGroupCount: Array.isArray(s.codeLists?.["vbn-product-group"])
+                ? s.codeLists["vbn-product-group"].length
+                : 0,
+            vbnProductCodeCount: Array.isArray(s.codeLists?.["vbn-product-code"])
+                ? s.codeLists["vbn-product-code"].length
+                : 0,
+            vbnCharacteristicCount: Array.isArray(s.codeLists?.["vbn-characteristic"])
+                ? s.codeLists["vbn-characteristic"].length
+                : 0,
+            characteristicCount: Array.isArray(s.codeLists?.characteristic)
+                ? s.codeLists.characteristic.length
+                : 0,
+            productGroupId: spec.productGroupId,
+            canDetermineCharacteristics: spec.canDetermineCharacteristics,
+            characteristicIssue: spec.characteristicIssue ?? null,
+        };
+        return (_jsxs("div", { className: "space-y-2", children: [_jsx("p", { className: "text-sm text-destructive", children: "Karakteristieken konden niet betrouwbaar worden bepaald vanuit het Floriday-schema en de meegeleverde code-lists." }), spec.characteristicIssue && (_jsx("p", { className: "text-xs text-muted-foreground", children: spec.characteristicIssue })), import.meta.env.DEV && (_jsxs("details", { className: "text-xs text-muted-foreground", children: [_jsx("summary", { className: "cursor-pointer", children: "Schema-diagnostiek (dev only)" }), _jsx("pre", { className: "mt-2 whitespace-pre-wrap rounded bg-muted p-2", children: JSON.stringify(diag, null, 2) })] }))] }));
+    }
+    return (_jsx(EigenschappenBody, { data: data, update: update, spec: spec }));
+}
+function EigenschappenBody({ data, update, spec, }) {
+    const [visibleOptional, setVisibleOptional] = useState(new Set());
+    const [addOpen, setAddOpen] = useState(false);
+    const [addSearch, setAddSearch] = useState("");
+    // Reset zichtbare optionele set bij wisselen van VBN-code.
+    useEffect(() => {
+        setVisibleOptional(new Set());
+    }, [data.vbnCode]);
+    const hasValue = (code) => Boolean((data.features[code] ?? "").trim());
+    const visibleFields = spec.characteristics.filter((c) => c.required || visibleOptional.has(c.code) || hasValue(c.code));
+    const hiddenOptional = spec.characteristics.filter((c) => !c.required && !visibleOptional.has(c.code) && !hasValue(c.code));
+    const filteredHidden = hiddenOptional.filter((c) => {
+        if (!addSearch.trim())
+            return true;
+        const q = addSearch.trim().toLowerCase();
+        return (c.code.toLowerCase().includes(q) ||
+            c.label.toLowerCase().includes(q));
+    });
+    const showField = (code) => {
+        setVisibleOptional((prev) => {
+            const next = new Set(prev);
+            next.add(code);
+            return next;
+        });
+        setAddOpen(false);
+        setAddSearch("");
+    };
+    const removeField = (code) => {
+        setVisibleOptional((prev) => {
+            const next = new Set(prev);
+            next.delete(code);
+            return next;
+        });
+        const nextFeatures = { ...data.features };
+        delete nextFeatures[code];
+        update("features", nextFeatures);
+    };
+    return (_jsxs("div", { className: "grid gap-4", children: [spec.characteristicsAreFallback && (_jsx("p", { className: "rounded-md border border-amber-200 bg-amber-50 p-3 text-xs text-amber-900", children: "Floriday levert voor deze VBN-code nog geen specifieke verplichte karakteristieken aan. Voeg via \"+ Eigenschap toevoegen\" de karakteristieken toe die van toepassing zijn." })), visibleFields.length === 0 && !spec.characteristicsAreFallback && (_jsx("p", { className: "text-sm text-muted-foreground", children: "Er zijn geen verplichte karakteristieken voor deze VBN-code. Voeg optioneel eigenschappen toe via de knop hieronder." })), visibleFields.map((f) => (_jsx(CharacteristicField, { field: f, value: data.features[f.code] || "", onChange: (v) => update("features", { ...data.features, [f.code]: v }), onRemove: f.required ? undefined : () => removeField(f.code) }, f.code))), _jsx("div", { children: _jsxs(Popover, { open: addOpen, onOpenChange: (o) => { setAddOpen(o); if (!o)
+                        setAddSearch(""); }, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { type: "button", variant: "outline", disabled: hiddenOptional.length === 0, className: "gap-2", children: [_jsx(Plus, { className: "h-4 w-4" }), "Eigenschap toevoegen", hiddenOptional.length > 0 && (_jsxs("span", { className: "text-xs text-muted-foreground", children: ["(", hiddenOptional.length, ")"] }))] }) }), _jsxs(PopoverContent, { align: "start", className: "w-[380px] p-0", children: [_jsx("div", { className: "border-b p-2", children: _jsxs("div", { className: "relative", children: [_jsx(Search, { className: "absolute left-2 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" }), _jsx(Input, { autoFocus: true, value: addSearch, onChange: (e) => setAddSearch(e.target.value), placeholder: "Zoek op code of naam\u2026", className: "h-8 pl-7 text-sm" })] }) }), _jsx("div", { className: "max-h-64 overflow-y-auto p-1", children: filteredHidden.length === 0 ? (_jsx("p", { className: "p-3 text-xs text-muted-foreground", children: hiddenOptional.length === 0
+                                            ? "Alle beschikbare karakteristieken zijn al toegevoegd."
+                                            : "Geen resultaten." })) : (filteredHidden.map((c) => (_jsxs("button", { type: "button", onClick: () => showField(c.code), className: "flex w-full items-center justify-between gap-2 rounded px-2 py-1.5 text-left text-sm hover:bg-accent", children: [_jsx("span", { className: "truncate", children: c.label }), _jsx("span", { className: "font-mono text-xs text-muted-foreground", children: c.code })] }, c.code)))) })] })] }) })] }));
+}
+function CharacteristicField({ field, value, onChange, onRemove, }) {
+    // Primair: VBN-specifieke waardes uit vbn-characteristic-value (via spec).
+    // Fallback: /gateway/code-list voor niet-VBN karakteristieken.
+    const hasSpecValues = field.allowedValues.length > 0;
+    const codeListQuery = useCodeList(hasSpecValues ? null : field.listName);
+    const values = hasSpecValues
+        ? field.allowedValues
+        : (codeListQuery.data?.values ?? []).map((v) => ({
+            code: v.code,
+            label: v.description ?? v.code,
+        }));
+    const CLEAR = "__clear__";
+    const invalidExistingValue = Boolean(value && values.length > 0 && !values.some((v) => v.code === value));
+    return (_jsxs("div", { className: "space-y-2", children: [_jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsxs(Label, { children: [field.label, field.required && _jsx("span", { className: "ml-1 text-destructive", children: "*" }), " ", _jsxs("span", { className: "font-mono text-xs text-muted-foreground", children: ["(", field.code, ")"] })] }), onRemove && (_jsx(Button, { type: "button", variant: "ghost", size: "sm", className: "h-7 w-7 p-0 text-muted-foreground hover:text-destructive", onClick: onRemove, "aria-label": `Verwijder ${field.label}`, children: _jsx(Trash2, { className: "h-4 w-4" }) }))] }), !hasSpecValues && codeListQuery.isLoading ? (_jsxs("div", { className: "text-xs text-muted-foreground flex items-center gap-2", children: [_jsx(Loader2, { className: "h-3 w-3 animate-spin" }), "Waardelijst ", field.listName, " wordt geladen\u2026"] })) : values.length > 0 ? (_jsxs(_Fragment, { children: [_jsxs(Select, { value: value || undefined, onValueChange: (v) => onChange(v === CLEAR ? "" : v), children: [_jsx(SelectTrigger, { children: _jsx(SelectValue, { placeholder: "Selecteer een door Floriday toegestane waarde\u2026" }) }), _jsxs(SelectContent, { children: [value && (_jsx(SelectItem, { value: CLEAR, children: _jsx("span", { className: "text-muted-foreground", children: "\u2014 Wissen \u2014" }) })), values.slice(0, 1000).map((v) => (_jsxs(SelectItem, { value: v.code, children: [v.label, " ", _jsxs("span", { className: "font-mono text-xs text-muted-foreground", children: ["(", v.code, ")"] })] }, v.code)))] })] }), invalidExistingValue && (_jsxs("p", { className: "text-xs text-destructive", children: ["Huidige waarde \"", value, "\" komt niet voor in de door Floriday toegestane lijst. Kies een geldige waarde."] }))] })) : (_jsx("p", { className: "rounded-md border border-dashed border-muted-foreground/30 bg-muted/40 p-2 text-xs text-muted-foreground", children: "Geen toegestane waarden bekend voor deze karakteristiek. Laat leeg \u2014 vrije invoer wordt door Floriday niet geaccepteerd." }))] }));
+}
+function StepKlanten({ data, update, floridayCustomers }) {
+    if (floridayCustomers.length === 0) {
+        return (_jsx("p", { className: "text-sm text-muted-foreground", children: "Geen klantorganisaties geladen vanuit Floriday. Controleer de connectie of probeer later opnieuw." }));
+    }
+    const toggle = (id) => {
+        if (data.customerOrganizationIds.includes(id)) {
+            update("customerOrganizationIds", data.customerOrganizationIds.filter((c) => c !== id));
+        }
+        else {
+            update("customerOrganizationIds", [...data.customerOrganizationIds, id]);
+        }
+    };
+    return (_jsx("div", { className: "max-h-72 overflow-y-auto rounded-md border divide-y", children: floridayCustomers.map((c) => (_jsxs("label", { className: "flex items-start gap-3 px-3 py-2.5 text-sm hover:bg-muted cursor-pointer", children: [_jsx("input", { type: "checkbox", checked: data.customerOrganizationIds.includes(c.id), onChange: () => toggle(c.id), className: "h-4 w-4 mt-0.5" }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("div", { className: "font-medium truncate", children: c.name }), _jsx("div", { className: "text-[11px] font-mono text-muted-foreground truncate select-all", children: c.id })] })] }, c.id))) }));
+}
+function StepFotos({ data, update, activeId }) {
+    const inputRef = useRef(null);
+    const [isDragging, setIsDragging] = useState(false);
+    const [uploading, setUploading] = useState(false);
+    const fileToBase64 = (file) => new Promise((resolve, reject) => {
+        const r = new FileReader();
+        r.onerror = () => reject(r.error);
+        r.onload = () => {
+            const result = String(r.result || "");
+            const idx = result.indexOf(",");
+            resolve(idx >= 0 ? result.slice(idx + 1) : result);
+        };
+        r.readAsDataURL(file);
+    });
+    const onFiles = async (files) => {
+        if (!files || files.length === 0)
+            return;
+        if (!activeId) {
+            toast.error("Geen actieve Floriday-connectie – kan foto's niet uploaden");
+            return;
+        }
+        const fileArr = Array.from(files);
+        setUploading(true);
+        try {
+            const { data: { user }, } = await supabase.auth.getUser();
+            if (!user) {
+                toast.error("Je bent niet ingelogd – kan geen foto's uploaden");
+                return;
+            }
+            const { prepareFloridayImage, UnsupportedImageTypeError, ImageTooLargeError, ImageDecodeError, } = await import("../../lib/image-resize");
+            const additions = [];
+            // Beperkte concurrency (2) voorkomt dat een drop van 10 bestanden de
+            // gateway overspoelt en tegelijk in throttling loopt.
+            const queue = [...fileArr];
+            const CONCURRENCY = 2;
+            const worker = async () => {
+                while (queue.length) {
+                    const original = queue.shift();
+                    if (!original)
+                        return;
+                    // 1) Normaliseren + valideren tegen Floriday Media-regels
+                    //    (min 640×640, max 5 MB, JPG/PNG). Zie image-resize.ts.
+                    let f;
+                    try {
+                        f = await prepareFloridayImage(original);
+                    }
+                    catch (e) {
+                        const message = e instanceof UnsupportedImageTypeError ||
+                            e instanceof ImageTooLargeError ||
+                            e instanceof ImageDecodeError
+                            ? e.message
+                            : `${original.name}: kon afbeelding niet voorbereiden.`;
+                        toast.error(`${original.name} — ${message}`);
+                        continue;
+                    }
+                    // 2) Preview + archief in Supabase Storage (best-effort).
+                    const ext = (f.name.includes(".") ? f.name.split(".").pop() : "jpg") || "jpg";
+                    const path = `${user.id}/${crypto.randomUUID()}.${ext}`;
+                    const { error: storageErr } = await supabase.storage
+                        .from("trade-item-photos")
+                        .upload(path, f, {
+                        contentType: f.type || "image/jpeg",
+                        upsert: false,
+                    });
+                    if (storageErr) {
+                        console.warn("[upload] Supabase storage mislukt", f.name, storageErr);
+                    }
+                    // 3) Upload naar Floriday met retries (in de client).
+                    try {
+                        const res = await floriday.uploadImage(activeId, f, f.type || "image/jpeg", f.name);
+                        if (!res.url)
+                            throw new Error("Floriday upload gaf geen URL terug");
+                        const previewUrl = URL.createObjectURL(f);
+                        additions.push({
+                            name: f.name,
+                            url: res.url,
+                            previewUrl,
+                            imageId: res.imageId ?? null,
+                        });
+                    }
+                    catch (e) {
+                        const msg = e instanceof Error && e.message
+                            ? e.message
+                            : "Foto kon niet worden geüpload.";
+                        console.error("[StepFotos] upload mislukt", { filename: f.name, message: msg, error: e });
+                        toast.error(`${f.name} — ${msg}`);
+                    }
+                }
+            };
+            await Promise.all(Array.from({ length: CONCURRENCY }, worker));
+            if (additions.length) {
+                update("images", [...data.images, ...additions]);
+                toast.success(`${additions.length} foto('s) toegevoegd`);
+            }
+        }
+        catch (e) {
+            console.error("[upload] exception", e);
+            toast.error(`Upload mislukt: ${e.message}`);
+        }
+        finally {
+            setUploading(false);
+        }
+    };
+    return (_jsxs("div", { className: "space-y-3", children: [_jsxs("div", { onDragOver: (e) => {
+                    e.preventDefault();
+                    setIsDragging(true);
+                }, onDragLeave: () => setIsDragging(false), onDrop: (e) => {
+                    e.preventDefault();
+                    setIsDragging(false);
+                    onFiles(e.dataTransfer.files);
+                }, className: `flex items-center gap-6 rounded-md border-2 border-dashed px-8 py-10 transition-colors ${isDragging ? "border-primary bg-primary/5" : "border-border bg-background"}`, children: [_jsxs("div", { className: "relative shrink-0", children: [_jsx(UploadCloud, { className: "h-16 w-16 text-muted-foreground/60", strokeWidth: 1.25 }), _jsx("div", { className: "absolute -top-1 -right-1 flex h-5 w-5 items-center justify-center rounded-full border border-muted-foreground/40 bg-background", children: _jsx(Plus, { className: "h-3 w-3 text-muted-foreground" }) })] }), _jsxs("div", { className: "flex-1", children: [_jsx("div", { className: "text-base font-semibold text-foreground", children: uploading ? "Uploaden..." : "Sleep afbeeldingen in dit venster om ze te uploaden" }), _jsxs("div", { className: "mt-1 text-sm text-muted-foreground", children: ["Of kies", " ", _jsx("button", { type: "button", onClick: () => inputRef.current?.click(), className: "text-foreground underline-offset-2 hover:underline", children: "Bestanden selecteren" })] }), _jsx("div", { className: "mt-2 text-xs text-muted-foreground", children: "JPG of PNG \u00B7 min. 640 \u00D7 640 px \u00B7 max. 5 MB per bestand" })] }), _jsx("input", { ref: inputRef, type: "file", multiple: true, accept: "image/png,image/jpeg", className: "hidden", onChange: (e) => {
+                            onFiles(e.target.files);
+                            e.target.value = "";
+                        } })] }), data.images.length > 0 && (_jsx("div", { className: "grid grid-cols-4 gap-2", children: data.images.map((img, idx) => (_jsxs("div", { className: "relative group rounded-md overflow-hidden border", children: [_jsx("img", { src: img.previewUrl || img.url, alt: img.name, className: "h-24 w-full object-cover" }), _jsx("button", { type: "button", onClick: () => update("images", data.images.filter((_, i) => i !== idx)), className: "absolute top-1 right-1 rounded-full bg-background/80 p-1 opacity-0 group-hover:opacity-100", children: _jsx(X, { className: "h-3 w-3" }) })] }, img.url))) }))] }));
+}
+/**
+ * Beladingen — Floriday Suppliers API 2026v1
+ *
+ * UI-flow spiegelt Floriday: overzichtstabel met beladingen, per rij een
+ * "primaire" markering, en een modaal (Dialog) voor toevoegen/bewerken met:
+ *   1. Keuze VBN-fust vs. aangesloten verpakkingsleverancier
+ *   2. Ladingdrager + fust + aantallen
+ *   3. Reguliere of klantspecifieke belading (multi-select organisaties)
+ *   4. Optionele artikelfoto in dit fust (upload via Floriday /media)
+ */
+function StepBeladingen({ data, update, packagingTypes, loadCarriers, floridayCustomers, activeId, }) {
+    const [dialogOpen, setDialogOpen] = useState(false);
+    const [editingId, setEditingId] = useState(null);
+    const openNew = () => {
+        setEditingId(null);
+        setDialogOpen(true);
+    };
+    const openEdit = (id) => {
+        setEditingId(id);
+        setDialogOpen(true);
+    };
+    const remove = (id) => {
+        const next = data.packingConfigurations.filter((p) => p.id !== id);
+        // Zorg dat er altijd één primair is
+        if (next.length && !next.some((p) => p.isPrimary)) {
+            next[0] = { ...next[0], isPrimary: true };
+        }
+        update("packingConfigurations", next);
+    };
+    const setPrimary = (id) => {
+        update("packingConfigurations", data.packingConfigurations.map((p) => ({ ...p, isPrimary: p.id === id })));
+    };
+    const upsert = (item) => {
+        const exists = data.packingConfigurations.some((p) => p.id === item.id);
+        let next;
+        if (exists) {
+            next = data.packingConfigurations.map((p) => (p.id === item.id ? item : p));
+        }
+        else {
+            next = [...data.packingConfigurations, item];
+        }
+        if (item.isPrimary) {
+            next = next.map((p) => ({ ...p, isPrimary: p.id === item.id }));
+        }
+        else if (!next.some((p) => p.isPrimary)) {
+            next[0] = { ...next[0], isPrimary: true };
+        }
+        update("packingConfigurations", next);
+        setDialogOpen(false);
+        setEditingId(null);
+    };
+    const editing = editingId
+        ? data.packingConfigurations.find((p) => p.id === editingId) ?? null
+        : null;
+    return (_jsxs("div", { className: "space-y-4", children: [data.packingConfigurations.length === 0 ? (_jsx("div", { className: "rounded-md border border-dashed p-6 text-center", children: _jsx("p", { className: "text-sm text-muted-foreground", children: "Nog geen beladingsconfiguratie toegevoegd." }) })) : (_jsx("div", { className: "overflow-hidden rounded-md border", children: _jsxs("table", { className: "w-full text-sm", children: [_jsx("thead", { className: "bg-muted/50 text-left text-xs uppercase text-muted-foreground", children: _jsxs("tr", { children: [_jsx("th", { className: "px-3 py-2 font-medium", children: "Primair" }), _jsx("th", { className: "px-3 py-2 font-medium", children: "Fust" }), _jsx("th", { className: "px-3 py-2 font-medium", children: "Ladingdrager" }), _jsx("th", { className: "px-3 py-2 font-medium", children: "Stuks / laag / drager" }), _jsx("th", { className: "px-3 py-2 font-medium", children: "Type" }), _jsx("th", { className: "px-3 py-2" })] }) }), _jsx("tbody", { className: "divide-y", children: data.packingConfigurations.map((p) => {
+                                const pkgLabel = packagingTypes.find((r) => codeOf(r) === p.packagingType);
+                                const lcLabel = loadCarriers.find((r) => codeOf(r) === p.loadCarrier);
+                                return (_jsxs("tr", { className: "hover:bg-muted/30", children: [_jsx("td", { className: "px-3 py-2", children: _jsx("input", { type: "radio", name: "primary-packing", checked: Boolean(p.isPrimary), onChange: () => setPrimary(p.id), "aria-label": "Als primaire belading instellen" }) }), _jsxs("td", { className: "px-3 py-2", children: [_jsx("div", { className: "font-medium", children: pkgLabel ? labelOf(pkgLabel) : p.packagingType || "—" }), p.source === "SUPPLIER" && (_jsx("div", { className: "text-xs text-muted-foreground", children: p.packagingSupplierName ?? p.packagingSupplierId }))] }), _jsx("td", { className: "px-3 py-2", children: lcLabel ? labelOf(lcLabel) : p.loadCarrier || "—" }), _jsxs("td", { className: "px-3 py-2 tabular-nums", children: [p.unitsPerPackage, " / ", p.packagesPerLayer, " /", " ", p.layersPerLoadCarrier] }), _jsx("td", { className: "px-3 py-2", children: p.isCustomerSpecific ? (_jsxs("span", { className: "rounded bg-amber-100 px-2 py-0.5 text-xs text-amber-900", children: ["Klantspecifiek (", p.customerOrganizationIds.length, ")"] })) : (_jsx("span", { className: "text-xs text-muted-foreground", children: "Regulier" })) }), _jsx("td", { className: "px-3 py-2 text-right", children: _jsxs("div", { className: "flex justify-end gap-1", children: [_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => openEdit(p.id), children: "Bewerk" }), _jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => remove(p.id), children: _jsx(Trash2, { className: "h-4 w-4" }) })] }) })] }, p.id));
+                            }) })] }) })), _jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: openNew, children: [_jsx(Plus, { className: "mr-2 h-4 w-4" }), " Belading toevoegen"] }), _jsx(PackingConfigDialog, { open: dialogOpen, onOpenChange: (o) => {
+                    setDialogOpen(o);
+                    if (!o)
+                        setEditingId(null);
+                }, initial: editing, isFirst: data.packingConfigurations.length === 0, packagingTypes: packagingTypes, loadCarriers: loadCarriers, floridayCustomers: floridayCustomers, activeId: activeId, onSave: upsert })] }));
+}
+// ---------------------------------------------------------------
+// Dialog voor toevoegen/bewerken van één beladingsconfiguratie
+// ---------------------------------------------------------------
+function PackingConfigDialog({ open, onOpenChange, initial, isFirst, packagingTypes, loadCarriers, floridayCustomers, activeId, onSave, }) {
+    const emptyItem = () => ({
+        id: crypto.randomUUID(),
+        source: "VBN",
+        loadCarrier: "",
+        packagingType: "",
+        unitsPerPackage: 1,
+        packagesPerLayer: 1,
+        layersPerLoadCarrier: 1,
+        isCustomerSpecific: false,
+        customerOrganizationIds: [],
+        isPrimary: isFirst,
+    });
+    const [draft, setDraft] = useState(emptyItem);
+    const [pkgSearch, setPkgSearch] = useState("");
+    const [uploadingPhoto, setUploadingPhoto] = useState(false);
+    const photoInputRef = useRef(null);
+    useEffect(() => {
+        if (open) {
+            setDraft(initial ? { ...initial } : emptyItem());
+            setPkgSearch("");
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [open, initial]);
+    const patch = (k, v) => setDraft((d) => ({ ...d, [k]: v }));
+    const filteredPkg = useMemo(() => {
+        const q = pkgSearch.trim().toLowerCase();
+        if (!q)
+            return packagingTypes.slice(0, 200);
+        return packagingTypes
+            .filter((r) => labelOf(r).toLowerCase().includes(q) ||
+            codeOf(r).toLowerCase().includes(q))
+            .slice(0, 200);
+    }, [packagingTypes, pkgSearch]);
+    const toggleCustomer = (id) => {
+        const has = draft.customerOrganizationIds.includes(id);
+        patch("customerOrganizationIds", has
+            ? draft.customerOrganizationIds.filter((x) => x !== id)
+            : [...draft.customerOrganizationIds, id]);
+    };
+    const canSave = draft.loadCarrier.length > 0 &&
+        draft.packagingType.length > 0 &&
+        (draft.source === "VBN" || Boolean(draft.packagingSupplierId)) &&
+        (!draft.isCustomerSpecific || draft.customerOrganizationIds.length > 0);
+    const onUploadPhoto = async (file) => {
+        if (!file || !activeId)
+            return;
+        setUploadingPhoto(true);
+        try {
+            const { prepareFloridayImage } = await import("../../lib/image-resize");
+            const prepared = await prepareFloridayImage(file);
+            const res = await floriday.uploadImage(activeId, prepared, prepared.type || "image/jpeg", prepared.name);
+            if (!res.url)
+                throw new Error("Geen URL ontvangen van Floriday");
+            setDraft((d) => ({
+                ...d,
+                photoUrl: res.url,
+                photoImageId: res.imageId ?? undefined,
+                photoPreviewUrl: URL.createObjectURL(prepared),
+            }));
+            toast.success("Foto toegevoegd aan belading");
+        }
+        catch (e) {
+            toast.error(e?.message ?? "Foto kon niet worden geüpload");
+        }
+        finally {
+            setUploadingPhoto(false);
+        }
+    };
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { className: "max-w-2xl", children: [_jsx(DialogHeader, { children: _jsx(DialogTitle, { children: initial ? "Belading bewerken" : "Nieuwe belading" }) }), _jsxs("div", { className: "space-y-5", children: [_jsxs("div", { className: "space-y-2", children: [_jsx(Label, { children: "Fust van" }), _jsxs("div", { className: "flex gap-2", children: [_jsxs("button", { type: "button", onClick: () => setDraft((d) => ({
+                                                ...d,
+                                                source: "VBN",
+                                                packagingSupplierId: undefined,
+                                                packagingSupplierName: undefined,
+                                            })), className: `flex-1 rounded-md border px-3 py-2 text-sm text-left ${draft.source === "VBN"
+                                                ? "border-primary bg-primary/5"
+                                                : "hover:border-primary/40"}`, children: [_jsx("div", { className: "font-medium", children: "VBN fust" }), _jsx("div", { className: "text-xs text-muted-foreground", children: "Standaard veilingfust uit de VBN codelijst." })] }), _jsxs("button", { type: "button", onClick: () => setDraft((d) => ({ ...d, source: "SUPPLIER" })), className: `flex-1 rounded-md border px-3 py-2 text-sm text-left ${draft.source === "SUPPLIER"
+                                                ? "border-primary bg-primary/5"
+                                                : "hover:border-primary/40"}`, children: [_jsx("div", { className: "font-medium", children: "Verpakkingsleverancier" }), _jsx("div", { className: "text-xs text-muted-foreground", children: "Aangesloten leverancier (Modiform, Paardekooper, \u2026)." })] })] })] }), draft.source === "SUPPLIER" && (_jsxs("div", { className: "grid grid-cols-2 gap-3", children: [_jsxs("div", { className: "space-y-2", children: [_jsx(Label, { children: "Verpakkingsleverancier" }), _jsxs(Select, { value: draft.packagingSupplierId || undefined, onValueChange: (v) => {
+                                                const sup = PACKAGING_SUPPLIERS.find((s) => s.id === v);
+                                                setDraft((d) => ({
+                                                    ...d,
+                                                    packagingSupplierId: v,
+                                                    packagingSupplierName: sup?.name,
+                                                }));
+                                            }, children: [_jsx(SelectTrigger, { children: _jsx(SelectValue, { placeholder: "Kies leverancier..." }) }), _jsx(SelectContent, { children: PACKAGING_SUPPLIERS.map((s) => (_jsx(SelectItem, { value: s.id, children: s.name }, s.id))) })] })] }), _jsxs("div", { className: "space-y-2", children: [_jsx(Label, { children: "Materiaal-ID (optioneel)" }), _jsx(Input, { value: draft.packagingMaterialId ?? "", onChange: (e) => patch("packagingMaterialId", e.target.value), placeholder: "Referentie van de leverancier" })] })] })), _jsxs("div", { className: "grid grid-cols-2 gap-3", children: [_jsxs("div", { className: "space-y-2", children: [_jsx(Label, { children: draft.source === "SUPPLIER" ? "Fallback VBN-fust" : "Fusttype" }), _jsxs(Popover, { children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { type: "button", variant: "outline", className: "w-full justify-between", children: [_jsx("span", { className: "truncate", children: draft.packagingType
+                                                                    ? (packagingTypes.find((r) => codeOf(r) === draft.packagingType)
+                                                                        ? `${labelOf(packagingTypes.find((r) => codeOf(r) === draft.packagingType))} (${draft.packagingType})`
+                                                                        : draft.packagingType)
+                                                                    : "Selecteer fust..." }), _jsx(ChevronDown, { className: "ml-2 h-4 w-4 shrink-0 opacity-50" })] }) }), _jsxs(PopoverContent, { className: "w-[380px] p-0", align: "start", children: [_jsx("div", { className: "border-b p-2", children: _jsx(Input, { placeholder: "Zoek op naam of code...", value: pkgSearch, onChange: (e) => setPkgSearch(e.target.value) }) }), _jsx("div", { className: "max-h-64 overflow-y-auto", children: filteredPkg.length === 0 ? (_jsx("div", { className: "px-3 py-4 text-center text-xs text-muted-foreground", children: "Geen resultaten" })) : (filteredPkg.map((r) => (_jsxs("button", { type: "button", onClick: () => patch("packagingType", codeOf(r)), className: `flex w-full items-start gap-2 px-3 py-2 text-left text-sm hover:bg-muted ${draft.packagingType === codeOf(r) ? "bg-muted" : ""}`, children: [_jsx("span", { className: "font-mono text-xs text-muted-foreground w-14 shrink-0", children: codeOf(r) }), _jsx("span", { className: "truncate", children: labelOf(r) })] }, r.record_id)))) })] })] })] }), _jsx(DropdownOrInput, { label: "Ladingdrager", value: draft.loadCarrier, onChange: (v) => patch("loadCarrier", v), records: loadCarriers, render: (r) => `${labelOf(r)} (${codeOf(r)})`, valueGetter: codeOf, emptyHint: "Geen LoadCarrier-records gesynchroniseerd." })] }), _jsxs("div", { className: "grid grid-cols-3 gap-3", children: [_jsxs("div", { className: "space-y-1", children: [_jsx(Label, { className: "text-xs", children: "Stuks per fust" }), _jsx(Input, { type: "number", min: 1, value: draft.unitsPerPackage, onChange: (e) => patch("unitsPerPackage", Number(e.target.value) || 1) })] }), _jsxs("div", { className: "space-y-1", children: [_jsx(Label, { className: "text-xs", children: "Fusten per laag" }), _jsx(Input, { type: "number", min: 1, value: draft.packagesPerLayer, onChange: (e) => patch("packagesPerLayer", Number(e.target.value) || 1) })] }), _jsxs("div", { className: "space-y-1", children: [_jsx(Label, { className: "text-xs", children: "Lagen per drager" }), _jsx(Input, { type: "number", min: 1, value: draft.layersPerLoadCarrier, onChange: (e) => patch("layersPerLoadCarrier", Number(e.target.value) || 1) })] })] }), _jsxs("div", { className: "rounded-md border p-3 space-y-3", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { children: [_jsx("div", { className: "text-sm font-medium", children: "Klantspecifieke belading" }), _jsx("div", { className: "text-xs text-muted-foreground", children: "Alleen zichtbaar voor geselecteerde klantorganisaties." })] }), _jsx(Switch, { checked: draft.isCustomerSpecific, onCheckedChange: (v) => patch("isCustomerSpecific", Boolean(v)) })] }), draft.isCustomerSpecific && (_jsx("div", { className: "max-h-40 overflow-y-auto rounded border divide-y", children: floridayCustomers.length === 0 ? (_jsx("div", { className: "p-3 text-xs text-muted-foreground", children: "Geen klantorganisaties geladen." })) : (floridayCustomers.map((c) => (_jsxs("label", { className: "flex items-center gap-2 px-3 py-2 text-sm hover:bg-muted cursor-pointer", children: [_jsx("input", { type: "checkbox", checked: draft.customerOrganizationIds.includes(c.id), onChange: () => toggleCustomer(c.id) }), _jsx("span", { className: "truncate", children: c.name })] }, c.id)))) }))] }), _jsxs("div", { className: "rounded-md border p-3 space-y-2", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { children: [_jsx("div", { className: "text-sm font-medium", children: "Foto van dit fust (optioneel)" }), _jsx("div", { className: "text-xs text-muted-foreground", children: "JPG of PNG \u00B7 min. 640 \u00D7 640 px \u00B7 max. 5 MB" })] }), _jsx(Button, { type: "button", variant: "outline", size: "sm", disabled: uploadingPhoto || !activeId, onClick: () => photoInputRef.current?.click(), children: uploadingPhoto ? (_jsxs(_Fragment, { children: [_jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }), " Uploaden"] })) : (_jsxs(_Fragment, { children: [_jsx(Upload, { className: "mr-2 h-4 w-4" }), " Foto kiezen"] })) }), _jsx("input", { ref: photoInputRef, type: "file", accept: "image/png,image/jpeg", className: "hidden", onChange: (e) => {
+                                                onUploadPhoto(e.target.files?.[0]);
+                                                e.target.value = "";
+                                            } })] }), (draft.photoPreviewUrl || draft.photoUrl) && (_jsxs("div", { className: "relative inline-block", children: [_jsx("img", { src: draft.photoPreviewUrl || draft.photoUrl, alt: "Belading foto", className: "h-24 rounded-md border object-cover" }), _jsx("button", { type: "button", onClick: () => setDraft((d) => ({
+                                                ...d,
+                                                photoUrl: undefined,
+                                                photoImageId: undefined,
+                                                photoPreviewUrl: undefined,
+                                            })), className: "absolute top-1 right-1 rounded-full bg-background/80 p-1", children: _jsx(X, { className: "h-3 w-3" }) })] }))] }), _jsxs("label", { className: "flex items-center gap-2 text-sm", children: [_jsx("input", { type: "checkbox", checked: Boolean(draft.isPrimary), onChange: (e) => patch("isPrimary", e.target.checked) }), "Als primaire belading gebruiken"] })] }), _jsxs(DialogFooter, { children: [_jsx(Button, { type: "button", variant: "ghost", onClick: () => onOpenChange(false), children: "Annuleren" }), _jsx(Button, { type: "button", disabled: !canSave, onClick: () => onSave(draft), children: "Opslaan" })] })] }) }));
+}
+function StepVerpakking({ data, update }) {
+    const add = () => update("additionalPackaging", [
+        ...data.additionalPackaging,
+        { id: crypto.randomUUID(), code: "", description: "", quantity: 1 },
+    ]);
+    const remove = (id) => update("additionalPackaging", data.additionalPackaging.filter((p) => p.id !== id));
+    const edit = (id, patch) => update("additionalPackaging", data.additionalPackaging.map((p) => (p.id === id ? { ...p, ...patch } : p)));
+    return (_jsxs("div", { className: "space-y-3", children: [data.additionalPackaging.map((p) => (_jsxs("div", { className: "grid grid-cols-[1fr_2fr_100px_auto] gap-2 items-end", children: [_jsxs("div", { className: "space-y-1", children: [_jsx(Label, { className: "text-xs", children: "Code" }), _jsx(Input, { value: p.code, onChange: (e) => edit(p.id, { code: e.target.value }), placeholder: "bv. HOES" })] }), _jsxs("div", { className: "space-y-1", children: [_jsx(Label, { className: "text-xs", children: "Omschrijving" }), _jsx(Input, { value: p.description ?? "", onChange: (e) => edit(p.id, { description: e.target.value }) })] }), _jsxs("div", { className: "space-y-1", children: [_jsx(Label, { className: "text-xs", children: "Aantal" }), _jsx(Input, { type: "number", min: 1, value: p.quantity, onChange: (e) => edit(p.id, { quantity: Number(e.target.value) }) })] }), _jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => remove(p.id), children: _jsx(Trash2, { className: "h-4 w-4" }) })] }, p.id))), _jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: add, children: [_jsx(Plus, { className: "mr-2 h-4 w-4" }), "Verpakkingsmateriaal toevoegen"] })] }));
+}
+function StepBeschikbaarheid({ data, update }) {
+    const weeks = Array.from({ length: 52 }, (_, i) => i + 1);
+    const toggleWeek = (w) => {
+        if (data.weeks.includes(w)) {
+            update("weeks", data.weeks.filter((x) => x !== w));
+        }
+        else {
+            update("weeks", [...data.weeks, w].sort((a, b) => a - b));
+        }
+    };
+    return (_jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "flex gap-2", children: [_jsx("button", { type: "button", onClick: () => update("yearRound", true), className: `rounded-md border px-3 py-1.5 text-sm ${data.yearRound ? "border-primary bg-primary/5" : "hover:border-primary/40"}`, children: "Jaarrond" }), _jsx("button", { type: "button", onClick: () => update("yearRound", false), className: `rounded-md border px-3 py-1.5 text-sm ${!data.yearRound ? "border-primary bg-primary/5" : "hover:border-primary/40"}`, children: "Specifieke periode" })] }), !data.yearRound && (_jsxs("div", { children: [_jsx(Label, { className: "mb-2 block", children: "Selecteer weken" }), _jsx("div", { className: "grid grid-cols-13 gap-1", style: { gridTemplateColumns: "repeat(13, minmax(0, 1fr))" }, children: weeks.map((w) => (_jsx("button", { type: "button", onClick: () => toggleWeek(w), className: `rounded border px-1 py-1 text-xs ${data.weeks.includes(w)
+                                ? "border-primary bg-primary text-primary-foreground"
+                                : "hover:border-primary/40"}`, children: w }, w))) })] }))] }));
+}
+// ============================================================
+// Shared
+// ============================================================
+function DropdownOrInput({ label, value, onChange, records, render, valueGetter, emptyHint, }) {
+    const v = valueGetter ?? render;
+    if (records.length === 0) {
+        return (_jsxs("div", { className: "space-y-2", children: [_jsx(Label, { children: label }), _jsx(Input, { value: value, onChange: (e) => onChange(e.target.value) }), emptyHint && _jsx("p", { className: "text-xs text-muted-foreground", children: emptyHint })] }));
+    }
+    return (_jsxs("div", { className: "space-y-2", children: [_jsx(Label, { children: label }), _jsxs(Select, { value: value || undefined, onValueChange: onChange, children: [_jsx(SelectTrigger, { children: _jsx(SelectValue, { placeholder: "Selecteer..." }) }), _jsx(SelectContent, { children: records.slice(0, 300).map((r) => (_jsx(SelectItem, { value: v(r), children: render(r) }, r.record_id))) })] })] }));
+}