// Active Assembly Session — batch-major workflow.
// Worker picks a batch size. Within a batch:
//   for each step → ONE "DONE" tap confirms all units in the batch.
//   For flagged units, the FLAG modal opens a multi-select unit picker.
// After all steps in a batch → next batch. After all batches → completion.
const { useState: useStateAS, useEffect: useEffectAS } = React;

function AssemblySession({ wo, user, sessionId, onExit, onComplete }) {
  const steps = (window.ASSY_STEPS_DB && window.ASSY_STEPS_DB[wo.sku]) || window.ASSY_STEPS;
  const totalUnits = wo.qty;
  const [batchSize, setBatchSize] = useStateAS(null);
  const [batchIdx, setBatchIdx] = useStateAS(0);
  const [stepIdx, setStepIdx] = useStateAS(0);
  // matrix[batchIdx][stepIdx] = array of statuses length=batchSize ("done" | "flagged")
  const [matrix, setMatrix] = useStateAS({});
  const [flagModal, setFlagModal] = useStateAS(false);
  const [flagReason, setFlagReason] = useStateAS("");
  const [flagSelected, setFlagSelected] = useStateAS([]);
  const [pauseModal, setPauseModal] = useStateAS(false);
  const [elapsed, setElapsed] = useStateAS(0);
  const [batchTransition, setBatchTransition] = useStateAS(null);

  useEffectAS(() => {
    if (batchSize === null) return;
    const t = setInterval(() => setElapsed((e) => e + 1), 1000);
    return () => clearInterval(t);
  }, [batchSize]);

  if (batchSize === null) {
    return <BatchPicker wo={wo} totalUnits={totalUnits} onPick={(b) => setBatchSize(b)} onExit={onExit} />;
  }

  const totalBatches = Math.ceil(totalUnits / batchSize);
  const currentBatchSize = batchIdx === totalBatches - 1 ? totalUnits - batchIdx * batchSize : batchSize;
  const step = steps[stepIdx];
  const overallUnitsDone = Object.values(matrix).reduce((sum, batch) => {
    const lastStep = batch[steps.length - 1] || [];
    return sum + lastStep.filter((s) => s).length;
  }, 0);

  function elapsedFmt() {
    const m = Math.floor(elapsed / 60);
    const s = elapsed % 60;
    return `00:${String(m).padStart(2,"0")}:${String(s).padStart(2,"0")}`;
  }

  function recordBatchStep(stepStatuses) {
    setMatrix((m) => {
      const b = m[batchIdx] ? [...m[batchIdx]] : steps.map(() => []);
      b[stepIdx] = stepStatuses;
      return { ...m, [batchIdx]: b };
    });
  }

  function advance() {
    if (stepIdx + 1 < steps.length) {
      setTimeout(() => setStepIdx(stepIdx + 1), 220);
      return;
    }
    if (batchIdx + 1 < totalBatches) {
      setBatchTransition({ done: batchIdx + 1, total: totalBatches });
      setTimeout(() => {
        setBatchIdx(batchIdx + 1); setStepIdx(0); setBatchTransition(null);
      }, 1800);
      return;
    }
    setTimeout(() => onComplete(matrix), 200);
  }

  function markBatchDone() {
    const stepStatuses = Array.from({ length: currentBatchSize }).map(() => "done");
    recordBatchStep(stepStatuses);
    advance();
  }

  function openFlag() { setFlagModal(true); setFlagReason(""); setFlagSelected([]); }
  function toggleFlagUnit(i) {
    setFlagSelected((sel) => sel.includes(i) ? sel.filter((x) => x !== i) : [...sel, i]);
  }
  function submitFlag() {
    const stepStatuses = Array.from({ length: currentBatchSize }).map((_, i) =>
      flagSelected.includes(i) ? "flagged" : "done"
    );
    recordBatchStep(stepStatuses);
    setFlagModal(false);
    const units = flagSelected.map((i) => `#${i + 1}`).join(", ");
    window.gpsToast && window.gpsToast({
      message: `Flagged ${units} on step ${stepIdx + 1} · ${flagReason}`,
      tone: "warn",
    });
    advance();
  }

  function openPause() { setPauseModal(true); }
  async function handlePause(payload) {
    setPauseModal(false);
    if (sessionId) {
      try {
        await fetch(`/api/sessions/${sessionId}`, {
          method: 'PATCH', headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({
            status: 'paused',
            pause_reason: payload?.reason || '',
            pause_note: payload?.note || '',
            state: { stepIndex: stepIdx, batchIndex: batchIdx, matrix },
          }),
        });
      } catch {}
    }
    onExit();
  }
  function handleMaterialResolved() {
    // Worker has enough — return to workflow
    setPauseModal(false);
  }

  const currentStepStatuses = matrix[batchIdx]?.[stepIdx] || [];

  return (
    <div className="min-h-screen bg-zinc-950 text-zinc-100 flex flex-col relative">
      <window.TopStripe />

      {/* Top bar */}
      <header className="border-b border-zinc-800 bg-zinc-900/40 px-6 h-[64px] flex items-center justify-between flex-shrink-0">
        <div className="flex items-center gap-3">
          <button onClick={openPause}
            className="h-10 px-3 rounded-lg bg-amber-500/15 border border-amber-500/40 text-amber-200 text-[13px] font-medium hover:bg-amber-500/25 uppercase tracking-wider flex items-center gap-2">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><rect x="6" y="4" width="4" height="16"/><rect x="14" y="4" width="4" height="16"/></svg>
            Pause
          </button>
          <button onClick={onExit}
            className="h-10 px-3 rounded-lg bg-zinc-800 border border-zinc-700 text-zinc-200 text-[13px] font-medium hover:bg-zinc-700 uppercase tracking-wider">
            ← Queue
          </button>
          <span className="font-mono text-[13px] text-zinc-500">{wo.id}</span>
          <span className="px-2 py-1 rounded text-[11px] font-bold uppercase tracking-wider bg-violet-500/10 text-violet-300 border border-violet-500/30">ASSEMBLY</span>
        </div>
        <div className="flex items-center gap-5 text-[14px]">
          <div className="text-zinc-400">
            Batch <span className="font-display text-[20px] text-zinc-100 tabular-nums">{batchIdx + 1}</span>
            <span className="text-zinc-600"> / </span>
            <span className="font-display text-[20px] text-zinc-400 tabular-nums">{totalBatches}</span>
          </div>
          <div className="text-zinc-400">
            Overall <span className="font-display text-[20px] text-zinc-100 tabular-nums">{overallUnitsDone}</span>
            <span className="text-zinc-600"> / </span>
            <span className="font-display text-[20px] text-zinc-400 tabular-nums">{totalUnits}</span>
          </div>
          <div className="text-zinc-400">Elapsed <span className="font-mono text-zinc-200">{elapsedFmt()}</span></div>
          <div className="text-zinc-300">{user.name}</div>
        </div>
      </header>

      {/* Step + unit progress */}
      <div className="px-6 pt-4 pb-3 border-b border-zinc-800/50 flex-shrink-0 space-y-3">
        <div className="flex items-end justify-between">
          <div>
            <div className="text-[12px] uppercase tracking-[0.22em] text-zinc-500">
              {wo.name} · batch of {currentBatchSize}
            </div>
            <div className="font-mono text-[15px] text-zinc-400 mt-0.5">{wo.sku}</div>
          </div>
          <div className="text-right">
            <div className="text-[12px] uppercase tracking-[0.22em] text-zinc-500">Step</div>
            <div className="font-display text-[42px] tabular-nums leading-none mt-1">
              {stepIdx + 1}<span className="text-zinc-600"> / {steps.length}</span>
            </div>
          </div>
        </div>

        <div>
          <div className="text-[10px] uppercase tracking-[0.22em] text-zinc-600 mb-1.5">Steps</div>
          <div className="flex gap-1 h-2.5 rounded-full overflow-hidden">
            {steps.map((_, i) => {
              const b = matrix[batchIdx] || [];
              const stepDone = (b[i] || []).filter((x) => x === "done").length >= currentBatchSize;
              const stepFlagged = (b[i] || []).some((x) => x === "flagged");
              const bg = stepDone ? "bg-emerald-500" : stepFlagged ? "bg-amber-400" : i === stepIdx ? "bg-zinc-300" : "bg-zinc-800";
              return <div key={i} className={`flex-1 rounded-full transition-colors ${bg}`} />;
            })}
          </div>
        </div>

        <div>
          <div className="text-[10px] uppercase tracking-[0.22em] text-zinc-600 mb-1.5">Units in this batch</div>
          <div className="flex gap-1.5">
            {Array.from({ length: currentBatchSize }).map((_, i) => {
              const s = currentStepStatuses[i];
              const bg = s === "done" ? "bg-emerald-500 border-emerald-500 text-zinc-900" :
                s === "flagged" ? "bg-amber-400 border-amber-400 text-zinc-900" :
                "bg-zinc-900 border-zinc-700 text-zinc-500";
              return (
                <div key={i}
                  className={`h-7 flex-1 max-w-[64px] rounded-md border-2 transition-colors flex items-center justify-center text-[10px] font-mono ${bg}`}>
                  #{i + 1}
                </div>
              );
            })}
          </div>
        </div>
      </div>

      {/* Main step body */}
      <div className="flex-1 px-6 py-6 overflow-y-auto">
        <div className="w-full max-w-[1200px] mx-auto grid grid-cols-[1.05fr_1.4fr] gap-5">
          {/* Left: step visual + tools */}
          <div className="bg-zinc-900 border border-zinc-800 rounded-2xl p-6 flex flex-col gap-4">
            <div className="aspect-square w-full rounded-xl bg-zinc-950 border border-zinc-800 flex items-center justify-center text-zinc-600 relative overflow-hidden">
              {step.image_url
                ? <img src={step.image_url} alt="" className="w-full h-full object-contain" />
                : <StepIcon kind={step.image} />
              }
              {!step.image_url && (
                <div className="absolute top-3 left-3 text-[11px] uppercase tracking-[0.22em] text-zinc-500 font-mono">
                  STEP {stepIdx + 1} VISUAL
                </div>
              )}
            </div>
            <div>
              <div className="text-[12px] uppercase tracking-[0.22em] text-zinc-500 mb-2">Tools</div>
              <div className="flex flex-wrap gap-1.5">
                {step.tools.map((t) => (
                  <span key={t} className="font-mono text-[12px] text-zinc-300 bg-zinc-800/60 border border-zinc-700 rounded px-2 py-1">
                    {t}
                  </span>
                ))}
              </div>
            </div>
          </div>

          {/* Right: instructions, spec, confirm */}
          <div className="bg-zinc-900 border border-zinc-800 rounded-2xl p-7 flex flex-col gap-5">
            <div className="flex items-center gap-3 flex-wrap">
              {step.critical && (
                <div className="px-3 py-1.5 rounded-md text-[11px] font-bold uppercase tracking-wider bg-red-500/15 text-red-300 border border-red-500/40">
                  ● CRITICAL — HOLD TO CONFIRM
                </div>
              )}
              <div className="px-3 py-1.5 rounded-md text-[12px] font-bold uppercase tracking-wider bg-violet-500/15 text-violet-200 border border-violet-500/40">
                BATCH OF {currentBatchSize}
              </div>
            </div>

            <div>
              <div className="text-[12px] uppercase tracking-[0.22em] text-zinc-500">Step {stepIdx + 1}</div>
              <div className="font-display text-[48px] leading-[1.0] tracking-tight mt-1">{step.title}</div>
              <div className="font-display text-[20px] tracking-tight text-violet-300 mt-2">
                Apply to all {currentBatchSize} units in this batch
              </div>
            </div>

            <div className="text-[18px] leading-relaxed text-zinc-200">
              {step.detail}
            </div>

            {(step.torqueSpec || step.spec) && (
              <div className="bg-zinc-950 border-2 border-amber-500/30 rounded-xl p-4 flex items-center gap-4">
                <div className="text-[12px] uppercase tracking-[0.22em] text-amber-300 font-semibold">
                  {step.torqueSpec ? "TORQUE TO" : "TEST SPEC"}
                </div>
                <div className="font-display text-[40px] tabular-nums leading-none text-amber-200 ml-auto">
                  {step.torqueSpec || step.spec}
                </div>
              </div>
            )}

            <div className="grid grid-cols-[1.4fr_1fr] gap-4 mt-auto">
              {step.requiresHold || step.critical ? (
                <window.HoldButton
                  color="emerald" holdMs={750} onComplete={markBatchDone}
                  className="h-[140px] text-[32px]"
                  subText={`confirms all ${currentBatchSize} units · critical — hold to lock in`}>
                  ✓ DONE · ALL {currentBatchSize}
                </window.HoldButton>
              ) : (
                <window.HoldButton
                  color="emerald" holdMs={500} onComplete={markBatchDone}
                  className="h-[140px]"
                  subText={`confirms all ${currentBatchSize} units`}>
                  <div className="font-display text-[36px] tracking-wider">✓ DONE · ALL {currentBatchSize}</div>
                  <div className="text-[13px] font-medium opacity-70 normal-case tracking-normal">
                    {stepIdx + 1 < steps.length
                      ? `next: step ${stepIdx + 2} — ${steps[stepIdx + 1].title.toLowerCase()}`
                      : batchIdx + 1 < totalBatches
                      ? `next: batch ${batchIdx + 2} of ${totalBatches}`
                      : "finish session"}
                  </div>
                </window.HoldButton>
              )}
              <button onClick={openFlag}
                className="h-[140px] rounded-xl bg-red-500/15 border border-red-500/40 hover:bg-red-500/25 text-red-300 active:scale-[0.99] transition flex flex-col items-center justify-center gap-1">
                <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
                  <path d="M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z"/><line x1="4" y1="22" x2="4" y2="15"/>
                </svg>
                <div className="font-display text-[20px] tracking-wider">FLAG UNITS</div>
                <div className="text-[11px] font-medium opacity-80">pick which failed</div>
              </button>
            </div>
          </div>
        </div>
      </div>

      {/* Footer */}
      <div className="px-6 py-3 border-t border-zinc-800/50 flex items-center justify-between flex-shrink-0 text-[13px]">
        <button disabled={stepIdx === 0} onClick={() => setStepIdx(Math.max(0, stepIdx - 1))}
          className="h-10 px-4 rounded-lg bg-zinc-900 border border-zinc-800 text-zinc-400 hover:bg-zinc-800 disabled:opacity-40 uppercase tracking-wider">
          ← Previous step
        </button>
        <div className="text-zinc-500">
          <span className="text-emerald-400">{currentStepStatuses.filter((s)=>s==="done").length} done</span>
          <span className="text-zinc-600"> · </span>
          <span className="text-amber-400">{currentStepStatuses.filter((s)=>s==="flagged").length} flagged</span>
          <span className="text-zinc-600"> in this step</span>
        </div>
        <button onClick={() => setBatchSize(null)}
          className="h-10 px-4 rounded-lg bg-zinc-900 border border-zinc-800 text-zinc-400 hover:bg-zinc-800 uppercase tracking-wider">
          Change batch
        </button>
      </div>

      {/* Batch transition */}
      {batchTransition && (
        <div className="fixed inset-0 z-50 bg-zinc-950/95 backdrop-blur-sm flex items-center justify-center text-zinc-100" style={{ animation: "fadeIn 0.2s" }}>
          <div className="text-center">
            <div className="text-[14px] uppercase tracking-[0.3em]" style={{ color: window.GPS_RED }}>BATCH COMPLETE</div>
            <div className="font-display text-[120px] leading-none tracking-tight mt-3 tabular-nums">
              {batchTransition.done} / {batchTransition.total}
            </div>
            <div className="text-[20px] text-zinc-400 mt-4">Starting next batch…</div>
          </div>
        </div>
      )}

      {/* FLAG MODAL */}
      {flagModal && (
        <div className="fixed inset-0 z-50 bg-zinc-950/85 backdrop-blur-sm flex items-center justify-center p-8 text-zinc-100" style={{ animation: "fadeIn 0.18s" }}>
          <div className="w-full max-w-[760px] bg-zinc-900 border border-zinc-800 rounded-2xl p-8 max-h-[90vh] overflow-y-auto">
            <div className="text-[12px] uppercase tracking-[0.22em] text-red-400">Flag units</div>
            <div className="font-display text-[36px] tracking-tight mt-1">Step {stepIdx + 1} — {step.title}</div>
            <p className="text-[15px] text-zinc-400 mt-3">
              Tap any units that failed this step. Selected ones get flagged — the rest get marked DONE automatically. Step moves on either way.
            </p>

            <div className="mt-5">
              <div className="text-[12px] uppercase tracking-wider text-zinc-400 mb-2">Which units?</div>
              <div className={`grid gap-2`} style={{ gridTemplateColumns: `repeat(${Math.min(currentBatchSize, 5)}, minmax(0, 1fr))` }}>
                {Array.from({ length: currentBatchSize }).map((_, i) => {
                  const selected = flagSelected.includes(i);
                  return (
                    <button key={i} onClick={() => toggleFlagUnit(i)}
                      className={`h-[64px] rounded-lg border-2 font-display text-[24px] tabular-nums transition ${
                        selected
                          ? "bg-amber-400 border-amber-400 text-zinc-950"
                          : "bg-zinc-950 border-zinc-800 text-zinc-300 hover:border-zinc-600"
                      }`}>
                      #{i + 1}
                    </button>
                  );
                })}
              </div>
              <div className="mt-2 flex items-center justify-between text-[12px]">
                <button onClick={() => setFlagSelected(Array.from({ length: currentBatchSize }).map((_, i) => i))}
                  className="text-zinc-400 hover:text-zinc-200 uppercase tracking-wider">Select all</button>
                <button onClick={() => setFlagSelected([])}
                  className="text-zinc-400 hover:text-zinc-200 uppercase tracking-wider">Clear</button>
              </div>
            </div>

            <div className="mt-5">
              <div className="text-[12px] uppercase tracking-wider text-zinc-400 mb-2">Reason</div>
              <div className="flex flex-wrap gap-2">
                {["Out of spec", "Tool unavailable", "Damaged part", "Need supervisor", "Other"].map((r) => (
                  <button key={r} onClick={() => setFlagReason(r)}
                    className={`h-10 px-3 rounded-lg text-[13px] font-display tracking-wider transition ${
                      flagReason === r ? "bg-zinc-100 text-zinc-950" : "bg-zinc-800 border border-zinc-700 text-zinc-300 hover:bg-zinc-700"
                    }`}>{r}</button>
                ))}
              </div>
            </div>

            <textarea placeholder="Add detail (optional)…"
              className="mt-3 w-full h-[80px] bg-zinc-950 border border-zinc-800 rounded-xl p-3 text-[15px] text-zinc-100 outline-none focus:border-zinc-600 resize-none" />

            <div className="grid grid-cols-2 gap-3 mt-6">
              <button onClick={() => setFlagModal(false)}
                className="h-[64px] rounded-xl bg-zinc-800 border border-zinc-700 text-zinc-100 font-display text-[18px] tracking-wider hover:bg-zinc-700">
                CANCEL
              </button>
              <button onClick={submitFlag} disabled={!flagReason || flagSelected.length === 0}
                className="h-[64px] rounded-xl bg-amber-400 text-zinc-950 font-display text-[18px] tracking-wider hover:bg-amber-300 disabled:opacity-40 disabled:cursor-not-allowed">
                FLAG {flagSelected.length} · CONTINUE
              </button>
            </div>
          </div>
        </div>
      )}

      {/* PAUSE MODAL */}
      {pauseModal && (
        <window.PauseModal
          context={`Assembly · Batch ${batchIdx + 1}/${totalBatches} · Step ${stepIdx + 1}/${steps.length} · ${overallUnitsDone}/${totalUnits} units complete`}
          taskContext={{
            totalUnits: totalUnits,
            alreadyFinished: overallUnitsDone,
            perUnit: 1,
          }}
          onCancel={() => setPauseModal(false)}
          onPause={handlePause}
          onMaterialResolved={handleMaterialResolved}
        />
      )}
    </div>
  );
}

function BatchPicker({ wo, totalUnits, onPick, onExit }) {
  const opts = [...new Set([1, 5, 10, totalUnits])].filter((n) => n <= totalUnits).sort((a, b) => a - b);

  return (
    <div className="min-h-screen bg-zinc-950 text-zinc-100 flex flex-col relative">
      <window.TopStripe />
      <header className="border-b border-zinc-800 bg-zinc-900/40 px-6 py-4 flex items-center justify-between">
        <button onClick={onExit}
          className="h-10 px-3 rounded-lg bg-zinc-800 border border-zinc-700 text-zinc-200 text-[13px] font-medium hover:bg-zinc-700 uppercase tracking-wider">
          ← Back to queue
        </button>
        <div className="flex items-center gap-3">
          <span className="font-mono text-[13px] text-zinc-500">{wo.id}</span>
          <span className="px-2 py-1 rounded text-[11px] font-bold uppercase tracking-wider bg-violet-500/10 text-violet-300 border border-violet-500/30">ASSEMBLY</span>
        </div>
        <div className="w-[100px]" />
      </header>

      <div className="flex-1 flex items-center justify-center px-6 py-10 overflow-y-auto">
        <div className="w-full max-w-[1000px]">
          <div className="text-center mb-10">
            <div className="text-[13px] uppercase tracking-[0.22em] text-zinc-500">You're assembling</div>
            <div className="font-display text-[64px] leading-[0.95] tracking-tight mt-2">{wo.name}</div>
            <div className="font-display text-[44px] tracking-tight mt-3" style={{ color: window.GPS_RED }}>
              {totalUnits} units total
            </div>
            <div className="text-[16px] text-zinc-400 mt-2 max-w-[700px] mx-auto">
              Pick your batch size — how many units you want to take through each step at one station before moving on.
            </div>
          </div>

          <div className="grid gap-3" style={{ gridTemplateColumns: `repeat(${opts.length}, minmax(0, 1fr))` }}>
            {opts.map((n) => {
              const batches = Math.ceil(totalUnits / n);
              const isTotal = n === totalUnits;
              return (
                <button key={n} onClick={() => onPick(n)}
                  className="bg-zinc-900 border-2 border-zinc-800 rounded-2xl p-7 hover:border-zinc-600 hover:bg-zinc-800/40 transition active:scale-[0.99] text-left flex flex-col gap-3">
                  <div className="text-[12px] uppercase tracking-[0.22em] text-zinc-500">
                    {n === 1 ? "ONE AT A TIME" : isTotal ? "ALL AT ONCE" : "BATCH OF"}
                  </div>
                  <div className="font-display text-[88px] leading-none tabular-nums tracking-tight">{n}</div>
                  <div className="text-[14px] text-zinc-400 leading-tight">
                    <span className="font-display text-zinc-200 text-[18px]">{batches}</span>{" "}
                    {batches === 1 ? "batch" : "batches"} of {n}
                  </div>
                  <div className="text-[12px] text-zinc-500 leading-snug mt-1">
                    {n === 1
                      ? "Finish each unit completely before the next. Best for first-of-a-run or critical parts."
                      : isTotal
                      ? `Do step 1 for all ${totalUnits}, then step 2 for all ${totalUnits}… one tool setup per step. Best for repetitive parts.`
                      : n === 5
                      ? "Five at each station — comfortable rhythm, low working-area clutter."
                      : "Ten at a station — fast cycles, watch your fixture capacity."}
                  </div>
                </button>
              );
            })}
          </div>

          <div className="mt-6 text-center text-[13px] text-zinc-500">
            You can change batch size at any time from inside the session.
          </div>
        </div>
      </div>
    </div>
  );
}

function StepIcon({ kind }) {
  const map = {
    inspect: <svg width="120" height="120" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>,
    oring: <svg width="120" height="120" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.2"><circle cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="6"/></svg>,
    press: <svg width="120" height="120" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.2"><line x1="12" y1="3" x2="12" y2="12"/><polyline points="6 9 12 15 18 9"/><rect x="4" y="18" width="16" height="3"/></svg>,
    pressure: <svg width="120" height="120" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.2"><circle cx="12" cy="12" r="9"/><polyline points="12 7 12 12 15 14"/></svg>,
    bracket: <svg width="120" height="120" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.2"><rect x="3" y="6" width="18" height="12" rx="2"/><line x1="7" y1="6" x2="7" y2="18"/><line x1="17" y1="6" x2="17" y2="18"/></svg>,
    stamp: <svg width="120" height="120" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.2"><path d="M4 21h16M5 17h14l-1-7H6z"/><path d="M9 10V6a3 3 0 1 1 6 0v4"/></svg>,
    box: <svg width="120" height="120" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.2"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/><polyline points="3.27 6.96 12 12.01 20.73 6.96"/><line x1="12" y1="22.08" x2="12" y2="12"/></svg>,
  };
  return map[kind] || map.inspect;
}

window.AssemblySession = AssemblySession;