/* Upload wizard — documentuitvraag + verwerking (Stap 4–5 / FR-06/07/08, Gate G3).
 * window.UploadWizard. Three phases: Upload → Classificatie & extractie → Gekoppeld.
 */

function fmtSize(bytes) {
  if (!bytes && bytes !== 0) return "—";
  if (bytes < 1024 * 1024) return Math.max(1, Math.round(bytes / 1024)) + " KB";
  return (bytes / (1024 * 1024)).toLocaleString("nl-NL", { maximumFractionDigits: 1 }) + " MB";
}

function firstMatch(text, patterns, fallback) {
  for (const p of patterns) {
    const m = text.match(p);
    if (m && m[1]) return m[1].trim();
  }
  return fallback;
}

function hasPattern(text, patterns) {
  return patterns.some((pattern) => pattern.test(text));
}

function fileExt(fileName) {
  const parts = fileName.toLowerCase().split(".");
  return parts.length > 1 ? parts.pop() : "";
}

async function readPdfText(file) {
  if (!window.pdfjsLib) throw new Error("PDF parser unavailable");
  window.pdfjsLib.GlobalWorkerOptions.workerSrc = "https://cdn.jsdelivr.net/npm/pdfjs-dist@3.11.174/build/pdf.worker.min.js";
  const data = new Uint8Array(await file.arrayBuffer());
  const pdf = await window.pdfjsLib.getDocument({ data }).promise;
  const chunks = [];
  for (let i = 1; i <= pdf.numPages; i++) {
    const page = await pdf.getPage(i);
    const content = await page.getTextContent();
    const lines = new Map();
    content.items.forEach((item) => {
      const y = Math.round((item.transform && item.transform[5] ? item.transform[5] : 0) / 3) * 3;
      const x = item.transform && item.transform[4] ? item.transform[4] : 0;
      if (!lines.has(y)) lines.set(y, []);
      lines.get(y).push({ x, str: item.str });
    });
    chunks.push(Array.from(lines.entries())
      .sort((a, b) => b[0] - a[0])
      .map(([, parts]) => parts.sort((a, b) => a.x - b.x).map((part) => part.str).join(" ").trim())
      .filter(Boolean)
      .join("\n"));
  }
  return chunks.join("\n");
}

async function readSpreadsheetDocument(file) {
  if (!window.XLSX) throw new Error("XLSX parser unavailable");
  const buffer = await file.arrayBuffer();
  const head = Array.from(new Uint8Array(buffer.slice(0, 4))).map((b) => b.toString(16).padStart(2, "0")).join("");
  const ext = fileExt(file.name);
  const looksXlsx = head.startsWith("504b");
  const looksXls = head.startsWith("d0cf11e0");
  if ((ext === "xlsx" && !looksXlsx) || (ext === "xls" && !looksXls && !looksXlsx)) {
    throw new Error("Ongeldige spreadsheet-signature");
  }
  const workbook = window.XLSX.read(buffer, { type: "array" });
  const previewSheets = [];
  const text = workbook.SheetNames.map((name) => {
    const rows = window.XLSX.utils.sheet_to_json(workbook.Sheets[name], { header: 1, defval: "" });
    previewSheets.push({
      name,
      rows: rows.slice(0, 12).map((row) => row.slice(0, 8).map((cell) => String(cell || ""))),
    });
    return rows.map((row) => row.join(" ")).join("\n");
  }).join("\n");
  return { text, previewSheets };
}

async function readUploadedText(file) {
  const ext = fileExt(file.name);
  if (["jpg", "jpeg", "png", "zip"].includes(ext)) {
    return {
      text: "",
      parser: "geen tekstextractie voor " + ext.toUpperCase(),
      preview: { kind: "text", text: "Geen tekstpreview beschikbaar. Dit bestand vraagt handmatige review of OCR/uitpakken in een latere backendstap." },
    };
  }
  if (ext === "pdf") {
    const text = await readPdfText(file);
    return {
      text,
      parser: "PDF.js tekstextractie",
      preview: { kind: "pdf", url: URL.createObjectURL(file), mime: file.type || "application/pdf" },
    };
  }
  if (ext === "xlsx" || ext === "xls") {
    const { text, previewSheets } = await readSpreadsheetDocument(file);
    return {
      text,
      parser: "SheetJS cel-extractie",
      preview: { kind: "sheet", sheets: previewSheets },
    };
  }
  if (ext === "csv" || ext === "txt") {
    const text = await file.text();
    return { text, parser: "browser text reader", preview: { kind: "text", text: text.slice(0, 6000) } };
  }
  const text = await file.text();
  return { text, parser: "browser fallback", preview: { kind: "text", text: text.slice(0, 6000) } };
}

async function classifyUploadedFile(file) {
  let text = "";
  let parser = "niet gelezen";
  let preview = null;
  const ext = fileExt(file.name);
  try {
    const extracted = await readUploadedText(file);
    text = extracted.text || "";
    parser = extracted.parser;
    preview = extracted.preview;
  } catch (e) {
    try {
      if (ext === "xlsx" || ext === "xls") throw e;
      text = await file.text();
      parser = "fallback text reader";
      preview = { kind: "text", text: text.slice(0, 6000) };
    } catch (fallbackError) {
      text = "";
      parser = (ext === "xlsx" || ext === "xls") ? "SheetJS extractie mislukt" : "extractie mislukt";
      preview = { kind: "text", text: "Bestand kon niet automatisch worden gelezen. Handmatige review of opnieuw uploaden nodig." };
    }
  }
  const base = {
    file: file.name,
    size: fmtSize(file.size),
    source: "uploaded",
    rawChars: text.length,
    parser,
    mime: file.type || "",
    ext,
    preview,
    textPreview: text.slice(0, 3000),
    originalFile: file,
  };

  const name = file.name.toLowerCase();
  const named = (...terms) => terms.some((term) => name.includes(term));
  const hasProjectBudget = named("projectbegroting", "begroting")
    || hasPattern(text, [/projectkosten\s*[:;-]/i, /leenbehoefte\s*[:;-]/i, /subsidie[-\s]?inschatting\s*[:;-]/i, /totaal\s+invest/i]);
  const hasAnnualAccount = named("jaarrekening")
    || hasPattern(text, [/jaarrekening/i, /boekjaar\s*[:;-]\s*20\d{2}/i, /reservefonds\s*[:;-]/i]);
  const hasEnergyAdvice = named("energieadvies", "maatwerk")
    || hasPattern(text, [/energieadvies/i, /maatwerk/i, /adviesdatum\s*[:;-]/i, /maatregelen\s*[:;-]/i]);
  const hasAlvDecision = named("alv", "besluit")
    || hasPattern(text, [/\balv\b/i, /stemuitslag\s*[:;-]/i, /besluit\s*[:;-]\s*(aangenomen|goedgekeurd|akkoord)/i, /leenbedrag\s*[:;-]/i]);
  const hasMandate = named("machtiging")
    || hasPattern(text, [/machtiging/i, /gemachtigde\s*[:;-]/i]);
  const hasSplitDeed = named("splitsingsakte", "akte")
    || hasPattern(text, [/splitsingsakte/i, /appartementsrechten\s*[:;-]/i, /stemrechten\s*[:;-]/i, /quorumregeling\s*[:;-]/i]);
  const hasPaymentBehavior = named("betaalgedrag")
    || hasPattern(text, [/verklaring\s+betaalgedrag/i, /\bbetaalgedrag\b/i]);
  const hasMaintenancePlan = named("mjop")
    || hasPattern(text, [/\bmjop\b/i, /meerjarenonderhoudsplan/i]);
  const hasUbo = named("ubo")
    || hasPattern(text, [/\bubo\b/i, /ultimate beneficial owner/i]);

  if (ext === "pdf" && parser.includes("PDF.js") && text.trim().length < 20) {
    return {
      ...base, type: "Onleesbare of gescande PDF", target: "Handmatige review · OCR nodig", conf: 0.12, status: "unknown",
      fields: [["Extractie", "geen tekst gevonden; OCR of handmatige controle nodig", 0.2]],
    };
  }

  if ((ext === "xlsx" || ext === "xls") && parser.includes("mislukt")) {
    return {
      ...base, type: "Malformed spreadsheet", target: "Handmatige review · opnieuw uploaden", conf: 0.1, status: "unknown",
      fields: [["Extractie", "spreadsheet kon niet worden gelezen", 0.2]],
    };
  }

  if (["jpg", "jpeg", "png", "zip"].includes(ext)) {
    return {
      ...base, type: ext === "zip" ? "ZIP met bronbestanden" : "Afbeelding / scan",
      target: "Handmatige review · OCR/uitpakken nodig",
      conf: 0.16,
      status: "unknown",
      fields: [["Extractie", "geen tekstextractie beschikbaar in browserdemo", 0.2]],
    };
  }

  if (hasProjectBudget) {
    return {
      ...base, type: "Projectbegroting verduurzaming", target: "Warmtefonds · scenario", conf: 0.78, status: "review",
      fields: [
        ["Projectkosten", firstMatch(text, [/projectkosten\s*[:;-]\s*((?:€|EUR)?\s*[0-9.,]+)/i, /totaal\s*(?:investering|project)?\s*[:;-]\s*((?:€|EUR)?\s*[0-9.,]+)/i], "niet gevonden"), 0.78],
        ["Subsidie-inschatting", firstMatch(text, [/subsidie[-\s]?inschatting\s*[:;-]\s*((?:€|EUR)?\s*[0-9.,]+)/i], "niet gevonden"), 0.63],
        ["Leenbehoefte", firstMatch(text, [/leenbehoefte\s*[:;-]\s*((?:€|EUR)?\s*[0-9.,]+)/i], "niet gevonden"), 0.8],
      ],
    };
  }

  if (hasAnnualAccount) {
    return {
      ...base, type: "Jaarrekening 2025", target: "Warmtefonds · financieel", conf: 0.92, status: "ok",
      fields: [
        ["Reservefonds", firstMatch(text, [/reservefonds\s*[:;-]\s*((?:€|EUR)?\s*[0-9.,]+)/i], "niet gevonden"), 0.82],
        ["Boekjaar", firstMatch(text, [/boekjaar\s*[:;-]\s*(20\d{2})/i, /jaarrekening\s+(20\d{2})/i], "niet gevonden"), 0.96],
        ["Achterstanden leden", firstMatch(text, [/achterstanden leden\s*[:;-]\s*([^\n\r]+)/i], "controle nodig"), 0.74],
      ],
    };
  }

  if (hasEnergyAdvice) {
    return {
      ...base, type: "Maatwerk VvE Energieadvies", target: "Warmtefonds · project", conf: 0.93, status: "ok",
      fields: [
        ["Maatregelen", firstMatch(text, [/maatregelen\s*[:;-]\s*([^\n\r]+)/i], "niet gevonden"), 0.9],
        ["Adviesdatum", firstMatch(text, [/adviesdatum\s*[:;-]\s*([^\n\r]+)/i, /datum\s*[:;-]\s*([^\n\r]+)/i], "niet gevonden"), 0.94],
      ],
    };
  }

  if (hasAlvDecision) {
    const approved = /stemuitslag\s*[:;-]\s*(aangenomen|goedgekeurd)|besluit\s*[:;-]\s*(aangenomen|goedgekeurd)/i.test(text);
    return {
      ...base, type: "ALV-besluit lening en servicekosten", target: "Warmtefonds · besluitvorming", conf: approved ? 0.9 : 0.72, status: approved ? "ok" : "review",
      fields: [
        ["Besluit", firstMatch(text, [/besluit\s*[:;-]\s*([^\n\r]+)/i], approved ? "aangenomen" : "controle nodig"), 0.9],
        ["Stemuitslag", firstMatch(text, [/stemuitslag\s*[:;-]\s*([^\n\r]+)/i], "niet gevonden"), 0.86],
        ["Aanwezigheid", firstMatch(text, [/aanwezigheid\s*[:;-]\s*([^\n\r]+)/i, /opkomst\s*[:;-]\s*([^\n\r]+)/i, /quorum\s*[:;-]\s*([^\n\r]+)/i], "niet gevonden"), 0.78],
        ["Leenbedrag", firstMatch(text, [/leenbedrag\s*[:;-]\s*((?:€|EUR)?\s*[0-9.,]+)/i], "niet gevonden"), 0.82],
      ],
    };
  }

  if (hasSplitDeed) {
    return {
      ...base, type: "Splitsingsakte en aanvullingen", target: "Warmtefonds · juridisch", conf: 0.82, status: "review",
      fields: [
        ["Appartementsrechten", firstMatch(text, [/appartementsrechten\s*[:;-]\s*(\d+)/i, /stemrechten\s*[:;-]\s*(\d+)/i], "niet gevonden"), 0.82],
        ["Quorumregeling", firstMatch(text, [/quorumregeling\s*[:;-]\s*([^\n\r]+)/i, /quorum\s*[:;-]\s*([^\n\r]+)/i], "controle splitsingsakte"), 0.72],
      ],
    };
  }

  if (hasMandate) {
    const signed = /ondertekening\s*[:;-]\s*(aanwezig|ondertekend)/i.test(text);
    return {
      ...base, type: "Machtiging begeleiding aanvraag", target: "Warmtefonds · formulieren", conf: signed ? 0.84 : 0.62, status: signed ? "ok" : "review",
      fields: [
        ["Ondertekening", firstMatch(text, [/ondertekening\s*[:;-]\s*([^\n\r]+)/i], signed ? "aanwezig" : "ontbreekt"), 0.9],
        ["Gemachtigde", firstMatch(text, [/gemachtigde\s*[:;-]\s*([^\n\r]+)/i], "niet gevonden"), 0.78],
      ],
    };
  }

  if (hasPaymentBehavior) {
    return {
      ...base, type: "Verklaring betaalgedrag", target: "Warmtefonds · financieel", conf: 0.86, status: "ok",
      fields: [["Achterstanden leden", firstMatch(text, [/achterstanden leden\s*[:;-]\s*([^\n\r]+)/i], "controle nodig"), 0.84]],
    };
  }

  if (hasMaintenancePlan) {
    return {
      ...base, type: "MJOP 2026–2046", target: "Warmtefonds · financieel", conf: 0.83, status: "ok",
      fields: [
        ["MJOP-datum", firstMatch(text, [/mjop[-\s]?datum\s*[:;-]\s*([^\n\r]+)/i, /datum\s*[:;-]\s*([^\n\r]+)/i], "niet gevonden"), 0.82],
        ["Looptijd", firstMatch(text, [/looptijd\s*[:;-]\s*([^\n\r]+)/i], "niet gevonden"), 0.8],
      ],
    };
  }

  if (hasUbo) {
    const signed = /ondertekening\s*[:;-]\s*(aanwezig|ondertekend)/i.test(text);
    return {
      ...base, type: signed ? "UBO-verklaring VvE" : "UBO-verklaring concept", target: "Warmtefonds · formulieren", conf: signed ? 0.82 : 0.69, status: signed ? "ok" : "review",
      fields: [["Ondertekening", firstMatch(text, [/ondertekening\s*[:;-]\s*([^\n\r]+)/i], signed ? "aanwezig" : "ontbreekt"), 0.95]],
    };
  }

  return {
    ...base, type: "Onbekend documenttype", target: "—", conf: 0.18, status: "unknown",
    fields: text ? [["Inhoud gelezen", text.slice(0, 80).replace(/\s+/g, " ") + (text.length > 80 ? "…" : ""), 0.35]] : [],
  };
}

function UploadWizard({ onClose, onLinked }) {
  const [phase, setPhase] = React.useState("upload"); // upload | processing | review | done
  const [hot, setHot] = React.useState(false);
  const [accepted, setAccepted] = React.useState({});
  const [incoming, setIncoming] = React.useState([]);
  const fileInput = React.useRef(null);

  const handleFiles = async (files) => {
    const selected = Array.from(files || []);
    if (!selected.length) return;
    setAccepted({});
    setIncoming(selected.map((f) => ({
      file: f.name, size: fmtSize(f.size), type: "Nog te classificeren", target: "Warmtefonds dataroom",
      conf: null, status: "review", fields: [], source: "uploaded",
    })));
    setPhase("processing");
    const classified = await Promise.all(selected.map(classifyUploadedFile));
    setIncoming(classified);
    setTimeout(() => setPhase("review"), 700);
  };

  const docs = incoming;
  const okCount = docs.filter((f) => f.status === "ok").length;
  const reviewCount = docs.filter((f) => f.status !== "ok").length;
  const acceptedCount = Object.values(accepted).filter(Boolean).length;
  const processedCount = acceptedCount + okCount;
  const fieldCount = docs.reduce((s, f) => s + f.fields.length, 0);
  const canLink = docs.length > 0 && processedCount >= docs.length;

  return (
    <div className="scrim" onMouseDown={(e) => e.target === e.currentTarget && onClose()}>
      <div className="modal wide">
        <div className="mhead">
          <div>
            <div className="mh-eyebrow">Documentverwerking</div>
            <h2>{phase === "upload" ? "Documenten uploaden" : phase === "done" ? "Gekoppeld aan dossier" : "Controleer classificatie & extractie"}</h2>
          </div>
          <button className="mclose" onClick={onClose}><Icon name="xCircle" size={18} /></button>
        </div>

        <div className="mbody">
          {phase === "upload" && (
            <div>
              <input ref={fileInput} type="file" multiple className="hidden-file"
                     accept=".pdf,.xlsx,.xls,.csv,.txt,.jpg,.jpeg,.png,.zip"
                     aria-label="Warmtefonds bestanden uploaden"
                     onChange={(e) => handleFiles(e.target.files)} />
              <div className={"dropzone" + (hot ? " hot" : "")}
                   onDragOver={(e) => { e.preventDefault(); setHot(true); }}
                   onDragLeave={() => setHot(false)} onDrop={(e) => { e.preventDefault(); setHot(false); handleFiles(e.dataTransfer.files); }}>
                <div className="dz-ic"><Icon name="upload" size={24} /></div>
                <h4>Sleep echte dossierbestanden hierheen</h4>
                <p>PDF, XLSX, CSV, TXT, JPG of ZIP. De demo leest de geselecteerde bestanden en classificeert ze voor de Warmtefonds checklist.</p>
              </div>
              <div className="row gap8" style={{ marginTop: 16, justifyContent: "center" }}>
                <button className="btn outline sm" onClick={() => fileInput.current && fileInput.current.click()}><Icon name="folder" size={15} />Bestanden kiezen</button>
              </div>
              <p className="tiny muted" style={{ textAlign: "center", marginTop: 18 }}>Upload echte PDF/XLSX/CSV/TXT-bestanden. De inhoud wordt lokaal gelezen; metadata en extracties synchroniseren met de backend, bronbestanden blijven lokaal tot R2-bestandopslag is gekoppeld.</p>
            </div>
          )}

          {phase === "processing" && (
            <div style={{ padding: "20px 0" }}>
              {docs.map((f, i) => (
                <div className="pfile" key={f.file}>
                  <div className="pf-ic" style={{ background: "var(--canvas)", color: "var(--fg2)" }}><Icon name="fileText" size={17} /></div>
                  <div className="pf-main">
                    <div className="pf-name"><span className="fn">{f.file}</span></div>
                    <div className="pf-meta"><span className="spin"></span>Classificeren & velden extraheren…</div>
                  </div>
                </div>
              ))}
            </div>
          )}

          {phase === "review" && (
            <div>
              <div className="banner info" style={{ marginBottom: 16 }}>
                <Icon name="shield" size={17} style={{ flex: "0 0 auto", marginTop: 1 }} />
                <div><div className="bt">{okCount} herkend · {reviewCount} vragen jouw bevestiging (Gate G3)</div>
                  <div className="bd">De demo heeft {docs.length} echte bestand(en) gelezen. Bevestig of corrigeer; geaccepteerde extracties worden canonieke velden met bron documentextractie.</div></div>
              </div>

              {docs.map((f, i) => {
                const tone = f.status === "ok" ? "ok" : f.status === "unknown" ? "err" : "warn";
                const isAcc = accepted[i] || f.status === "ok";
                return (
                  <div className="card" key={f.file} style={{ marginBottom: 12 }}>
                  <div className="pfile" style={{ border: 0, margin: 0, borderBottom: f.fields.length ? "1px solid var(--border)" : 0, borderRadius: 0 }}>
                      <div className={"pf-ic sdisc " + tone}><Icon name={f.status === "ok" ? "fileCheck" : f.status === "unknown" ? "alert" : "fileText"} size={17} /></div>
                      <div className="pf-main">
                        <div className="pf-name"><span className="fn">{f.file}</span><span className="tiny muted" style={{ fontFamily: "var(--font-body)" }}>{f.size}</span></div>
                        <div className="pf-meta">
                          <span className="pf-type">{f.type}</span>
                          {f.target !== "—" && <><Icon name="arrowRight" size={12} className="pf-arrow" /><span>{f.target}</span></>}
                          <Conf value={f.conf} />
                          {f.source === "uploaded" && <Badge tone="info" sm>bestand gelezen</Badge>}
                          {f.parser && <Badge tone="neutral" sm>{f.parser}</Badge>}
                        </div>
                      </div>
                      <div className="lr-side">
                        {f.status === "ok" && <Badge tone="ok" sm dot>Herkend</Badge>}
                        {f.status === "review" && (isAcc ? <Badge tone="ok" sm dot>Bevestigd</Badge>
                          : <button className="btn primary sm" onClick={() => setAccepted({ ...accepted, [i]: 1 })}>Bevestig type</button>)}
                        {f.status === "unknown" && (isAcc ? <Badge tone="neutral" sm>Handmatig getypeerd</Badge>
                          : <div className="fselect" style={{ minWidth: 0, padding: "5px 9px" }}>
                              <select defaultValue="" onChange={() => setAccepted({ ...accepted, [i]: 1 })} style={{ border: 0, background: "none", font: "inherit", fontSize: 12.5 }}>
                                <option value="" disabled>Kies type…</option>
                                <option>Foto / bewijsstuk</option><option>Splitsingsakte</option><option>Niet relevant</option>
                              </select>
                            </div>)}
                      </div>
                    </div>
                    {f.fields.length > 0 && (
                      <div className="card-body" style={{ paddingTop: 12, paddingBottom: 12 }}>
                        <div className="tiny muted" style={{ marginBottom: 6, fontWeight: 600, letterSpacing: "0.04em", textTransform: "uppercase" }}>Geëxtraheerde velden</div>
                        {f.fields.map(([k, v, c]) => (
                          <div className="exrow" key={k}>
                            <span className="ex-k">{k}</span>
                            <span className="ex-v" style={{ color: v === "onbekend" ? "var(--st-warn-fg)" : "var(--fg1)" }}>{v}<Conf value={c} /></span>
                          </div>
                        ))}
                      </div>
                    )}
                  </div>
                );
              })}
            </div>
          )}

          {phase === "done" && (
            <div>
              <div className="banner ink" style={{ marginBottom: 18 }}>
                <Icon name="checkCircle" size={19} style={{ flex: "0 0 auto", marginTop: 1, color: "var(--tge-emerald)" }} />
                <div><div className="bt">{docs.length} documenten gekoppeld · {fieldCount} velden bijgewerkt</div>
                  <div className="bd">Canonieke velden zijn aangevuld met bron documentextractie. Lage-confidence-waarden staan klaar in het review center.</div></div>
              </div>
              <div className="initlist">
                {docs.map((f) => {
                  const first = f.fields[0];
                  const ic = f.status === "ok" ? "fileCheck" : f.status === "unknown" ? "alert" : "flag";
                  const t = first ? `${first[0]} → ${first[1]}` : f.type;
                  const s = `uit ${f.file} · ${Math.round((f.conf || 0.18) * 100)}% · ${f.target === "—" ? "handmatige review" : f.target}`;
                  return (
                  <div className="initrow" key={f.file}>
                    <div className="ir-ic" style={ic === "flag" || ic === "alert" ? { background: "var(--st-warn-bg)", color: "var(--st-warn-fg)" } : {}}><Icon name={ic} size={16} /></div>
                    <div><div className="ir-t">{t}</div><div className="ir-s">{s}</div></div>
                  </div>
                );})}
              </div>
            </div>
          )}
        </div>

        <div className="mfoot">
          {phase === "review"
            ? <span className="tiny muted">{processedCount}/{docs.length} verwerkt</span>
            : <span className="tiny muted">{phase === "done" ? "Bijgewerkt in dataroom & kerngegevens" : "Niets wordt automatisch ingediend"}</span>}
          {phase === "upload" && <button className="btn outline" onClick={onClose}>Annuleren</button>}
          {phase === "processing" && <button className="btn primary" disabled><span className="spin"></span>Verwerken…</button>}
          {phase === "review" && <button className="btn primary" disabled={!canLink} onClick={() => { onLinked && onLinked(docs); setPhase("done"); }}>Koppel aan dossier<Icon name="arrowRight" size={15} /></button>}
          {phase === "done" && <button className="btn primary" onClick={onClose}>Naar dataroom<Icon name="arrowRight" size={15} /></button>}
        </div>
      </div>
    </div>
  );
}

window.UploadWizard = UploadWizard;