);
}
function BulkUploadModal({ open, onClose, onSubmit }) {
const [phase, setPhase] = React.useState("select"); // select | parsing | review
const [cards, setCards] = React.useState([]);
const [activeIdx, setActiveIdx] = React.useState(0);
const [capNotice, setCapNotice] = React.useState(null);
const [closeConfirm, setCloseConfirm] = React.useState(false);
const cardsRef = React.useRef([]);
React.useEffect(() => { cardsRef.current = cards; }, [cards]);
React.useEffect(() => {
if (open) return undefined;
const t = setTimeout(() => {
cardsRef.current.forEach((c) => c.thumbUrls.forEach((u) => URL.revokeObjectURL(u)));
setPhase("select"); setCards([]); setActiveIdx(0); setCapNotice(null); setCloseConfirm(false);
}, 200);
return () => clearTimeout(t);
}, [open]);
const handleFiles = (fileList) => {
let files = Array.from(fileList || []);
if (files.length === 0) return;
if (files.length > MAX_BULK_FILES) {
setCapNotice(`Only the first ${MAX_BULK_FILES} were added — upload the rest as a second batch.`);
files = files.slice(0, MAX_BULK_FILES);
} else {
setCapNotice(null);
}
const initial = files.map((file, i) => newCard(`${Date.now()}-${i}`, file));
setCards(initial);
setPhase("parsing");
runPool(files, BULK_CONCURRENCY, async (file, i) => {
const id = initial[i].id;
const result = await parseCardFile(file);
setCards((prev) => {
if (!result.ok) {
return prev.map((c) => c.id === id ? { ...c, status: "error", error: result.error } : c);
}
const form = formFromParsed(result.parsed);
const match = prev.find((c) => c.id !== id && c.status === "ready" && sameTripSlot(c.form, form));
if (match) {
const thisCard = prev.find((c) => c.id === id);
const mergedTravelers = Array.from(new Set([...match.form.travelers, ...form.travelers]));
return prev.map((c) => {
if (c.id === match.id) {
return {
...c,
form: { ...c.form, travelers: mergedTravelers },
thumbUrls: [...c.thumbUrls, ...thisCard.thumbUrls],
mergedCount: c.mergedCount + 1,
};
}
if (c.id === id) return { ...c, status: "merged", mergedInto: match.id };
return c;
});
}
return prev.map((c) => c.id === id ? { ...c, status: "ready", parsed: result.parsed, form } : c);
});
}).then(() => setPhase("review"));
};
const visibleCards = cards.filter((c) => c.status !== "merged");
const active = visibleCards[activeIdx] || null;
const updateActiveForm = (patch) => {
if (!active) return;
const id = active.id;
setCards((prev) => prev.map((c) => c.id === id ? { ...c, form: { ...c.form, ...patch }, saveError: null } : c));
};
const toggleTraveler = (pid) => {
if (!active) return;
const travelers = active.form.travelers.includes(pid)
? active.form.travelers.filter((x) => x !== pid)
: [...active.form.travelers, pid];
updateActiveForm({ travelers });
};
const goTo = (idx) => setActiveIdx(Math.max(0, Math.min(visibleCards.length - 1, idx)));
const acceptActive = () => {
if (!active) return;
const id = active.id;
const f = active.form;
const missing = [];
if (!f.from) missing.push("where from");
if (!f.to) missing.push("where to");
if (!f.date) missing.push("the date");
if (!f.departTime) missing.push("a departure time");
if (!f.travelers.length) missing.push("who's traveling");
if (missing.length) {
setCards((prev) => prev.map((c) => c.id === id ? { ...c, saveError: `Still need: ${missing.join(", ")}.` } : c));
return;
}
setCards((prev) => prev.map((c) => c.id === id ? { ...c, saving: true, saveError: null } : c));
const { departAt, arriveAt } = buildDepartArrive(f.date, f.departTime, f.arriveTime, f.arriveNextDay);
const body = {
flightId: active.savedFlightId || undefined,
mode: "flight",
airline_code: f.airline || null,
flight_number: f.number || null,
from_airport: placeCode(f.from),
to_airport: placeCode(f.to),
depart_at: departAt.toISOString(),
arrive_at: arriveAt.toISOString(),
note: f.note || null,
source: "upload",
travelerIds: f.travelers,
};
withTimeout(window.supabaseClient.functions.invoke("save-flight", { body }), 20000, "Saving")
.then(async ({ data, error }) => {
if (error || !data || !data.ok) {
const message = (data && data.error) || await readFunctionError(error) || "Couldn't save this trip — mind trying again?";
setCards((prev) => prev.map((c) => c.id === id ? { ...c, saving: false, saveError: message } : c));
return;
}
setCards((prev) => prev.map((c) => c.id === id ? { ...c, saving: false, outcome: "accepted", savedFlightId: data.flight.id } : c));
onSubmit();
setActiveIdx((idx) => Math.min(idx + 1, visibleCards.length - 1));
}).catch((err) => {
setCards((prev) => prev.map((c) => c.id === id ? { ...c, saving: false, saveError: String((err && err.message) || err) } : c));
});
};
const discardActive = () => {
if (!active) return;
const id = active.id;
setCards((prev) => prev.map((c) => c.id === id ? { ...c, outcome: "discarded" } : c));
goTo(activeIdx + 1);
};
const acceptedCount = cards.filter((c) => c.outcome === "accepted").length;
const pendingCount = visibleCards.filter((c) => c.outcome === "pending").length;
const readyCount = cards.filter((c) => c.status === "ready" || c.status === "error" || c.status === "merged").length;
const requestClose = () => {
if (phase === "review" && pendingCount > 0) { setCloseConfirm(true); return; }
onClose();
};
return (
))}