// Screen 4: Pre-Session Briefing
function Briefing({ wo, user, onBack, onReady }) {
  const steps = window.KIT_STEPS;
  const shortages = window.FLAGGED_SHORTAGES.filter((s) => steps.some((k) => k.sku === s.sku));

  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-8 py-4 flex items-center justify-between">
        <button onClick={onBack}
          className="h-12 px-4 rounded-lg bg-zinc-800 border border-zinc-700 text-zinc-200 text-[14px] 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-[14px] text-zinc-400">{wo.id}</span>
          <span className="px-2.5 py-1 rounded-md text-[12px] font-bold uppercase tracking-wider bg-sky-500/10 text-sky-300 border border-sky-500/30">KITTING</span>
          {wo.priority === "URGENT" && (
            <span className="px-2.5 py-1 rounded-md text-[12px] font-bold uppercase tracking-wider bg-red-500 text-white">● URGENT</span>
          )}
        </div>
        <div className="text-[13px] text-zinc-400">{user.name}</div>
      </header>

      <div className="flex-1 px-8 py-8 flex items-start justify-center overflow-y-auto">
        <div className="w-full max-w-[900px] flex flex-col gap-6">
          {/* Hero image */}
          <div className="h-[300px] rounded-2xl bg-zinc-900 border border-zinc-800 flex items-center justify-center text-zinc-600">
            <svg width="84" height="84" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.2">
              <path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/>
            </svg>
          </div>

          {/* Title */}
          <div>
            <div className="text-[12px] uppercase tracking-[0.22em] text-zinc-500">You're building</div>
            <div className="font-display text-[64px] leading-[0.95] tracking-tight mt-1">{wo.name}</div>
            <div className="font-display text-[44px] mt-3 tracking-tight" style={{ color: window.GPS_RED }}>
              {wo.qty} UNITS · {wo.qty * steps.reduce((s, k) => s + k.qty, 0) / wo.qty}+ components per unit
            </div>
            <div className="font-mono text-[16px] text-zinc-400 mt-2">{wo.sku} · due {wo.due} · {wo.location}</div>
          </div>

          {/* Shortages banner */}
          {shortages.length > 0 && (
            <div className="rounded-xl bg-amber-500/10 border border-amber-500/40 p-5 flex items-start gap-4">
              <div className="text-amber-300 text-[24px]">⚠</div>
              <div>
                <div className="font-display text-[20px] tracking-wider text-amber-200">FLAGGED SHORTAGES</div>
                {shortages.map((s) => (
                  <div key={s.sku} className="text-[15px] text-amber-100 mt-1">
                    <span className="font-mono">{s.sku}</span> flagged short by {s.flaggedBy} · {s.at}
                  </div>
                ))}
              </div>
            </div>
          )}

          {/* Component locations */}
          <div>
            <div className="text-[12px] uppercase tracking-[0.22em] text-zinc-500 mb-3">Component locations · {steps.length} steps</div>
            <div className="bg-zinc-900 border border-zinc-800 rounded-xl divide-y divide-zinc-800">
              {steps.map((s, i) => (
                <div key={s.sku} className="flex items-center gap-4 px-5 py-3">
                  <div className="font-mono text-[13px] text-zinc-500 w-6">{i+1}</div>
                  <div className="flex-1">
                    <div className="text-[16px]">{s.part}</div>
                    <div className="font-mono text-[12px] text-zinc-500">{s.sku}</div>
                  </div>
                  <div className="font-display text-[20px] tabular-nums text-zinc-300 w-14 text-right">×{s.qty}</div>
                  <div className="font-mono text-[14px] bg-zinc-800 border border-zinc-700 text-zinc-200 rounded px-3 py-1.5 min-w-[80px] text-center">
                    {s.bin}
                  </div>
                </div>
              ))}
            </div>
          </div>

          {/* Estimated time */}
          <div className="text-[14px] text-zinc-500 text-center">
            Estimated <span className="text-zinc-200 font-medium">~14 min</span> based on 8 previous sessions
          </div>

          {/* CTA */}
          <window.HoldButton color="emerald" holdMs={500} onComplete={onReady}
            className="h-[100px] text-[28px]"
            subText="press and hold to confirm you're staged">
            I'M AT THE LOCATION · READY TO START →
          </window.HoldButton>
        </div>
      </div>
    </div>
  );
}

window.Briefing = Briefing;