// Scan flow screens and Box/Item detail

function ScanScreen({ dark = true, moving = false, state = 'scanning' }) {
  const t = theme(dark, moving);
  const ringColor = state === 'unknown' ? t.amber : t.accent;
  const glowColor = state === 'unknown' ? `${t.amber}66` : `${t.accent}66`;
  const copy = {
    scanning: { title: 'Hold phone near tag', sub: 'Or point camera at a QR code' },
    success:  { title: 'Box found', sub: 'Opening Kitchen Essentials…' },
    unknown:  { title: 'New tag detected', sub: 'Register it to a box?' },
  }[state];

  return (
    <Screen dark moving={moving} bg="#000">
      {/* Fake camera feed */}
      <div style={{
        position: 'absolute', inset: 0,
        background: `radial-gradient(ellipse at 30% 20%, #3a3630 0%, #1a1815 50%, #0a0907 100%)`,
      }}>
        {/* suggestive scene */}
        <div style={{ position: 'absolute', top: '14%', left: '20%', width: 180, height: 160, borderRadius: 8, background: 'linear-gradient(135deg, #5a4530 0%, #3a2f22 100%)', transform: 'perspective(600px) rotateY(-8deg)', opacity: 0.8 }} />
        <div style={{ position: 'absolute', top: '30%', right: '10%', width: 140, height: 110, borderRadius: 6, background: 'linear-gradient(135deg, #4a3b28 0%, #2a2218 100%)', transform: 'perspective(600px) rotateY(10deg)', opacity: 0.7 }} />
      </div>
      <div style={{ position: 'absolute', inset: 0, background: 'rgba(0,0,0,0.55)' }} />

      {/* Close */}
      <div style={{ position: 'absolute', top: 56, left: 20, zIndex: 20 }}>
        <Icons.X size={24} color="#fff" strokeWidth={2.2}/>
      </div>

      <div style={{ flex: 1 }} />

      {/* Bottom drawer */}
      <div style={{
        position: 'relative', zIndex: 10,
        background: dark ? '#1C1F26' : '#fff', borderTopLeftRadius: 28, borderTopRightRadius: 28,
        padding: '28px 24px 44px', textAlign: 'center',
      }}>
        {/* Rings */}
        <div style={{ position: 'relative', width: 200, height: 200, margin: '0 auto 20px', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          {state !== 'success' ? (
            <>
              <div style={{ position: 'absolute', width: 200, height: 200, borderRadius: 100, border: `2px solid ${ringColor}`, opacity: 0.15 }}/>
              <div style={{ position: 'absolute', width: 150, height: 150, borderRadius: 75, border: `2px solid ${ringColor}`, opacity: 0.30 }}/>
              <div style={{ position: 'absolute', width: 100, height: 100, borderRadius: 50, border: `2px solid ${ringColor}`, opacity: 0.60, boxShadow: `0 0 40px ${glowColor}` }}/>
              <div style={{ width: 60, height: 60, borderRadius: 30, background: `${ringColor}20`, display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: `0 0 24px ${glowColor}` }}>
                <Icons.Radio size={30} color={ringColor} strokeWidth={2}/>
              </div>
            </>
          ) : (
            <div style={{ width: 80, height: 80, borderRadius: 40, background: t.accent, display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: `0 0 40px ${t.accent}99` }}>
              <Icons.Check size={48} color="#fff" strokeWidth={3}/>
            </div>
          )}
        </div>
        <div style={{ ...TYPE.h1, color: dark ? '#fff' : t.textPrimary, marginBottom: 6 }}>{copy.title}</div>
        <div style={{ ...TYPE.body, color: dark ? 'rgba(255,255,255,0.6)' : t.textSecondary, marginBottom: 20 }}>{copy.sub}</div>
        {state === 'unknown' && <PrimaryButton dark={dark} moving={moving}>Register this tag</PrimaryButton>}
        {state === 'scanning' && <SecondaryButton dark={dark} style={{ color: '#fff', borderColor: 'rgba(255,255,255,0.2)' }}>Enter code manually</SecondaryButton>}
      </div>
    </Screen>
  );
}

function RegisterTagScreen({ dark = false, moving = false }) {
  const t = theme(dark, moving);
  return (
    <Screen dark={dark} moving={moving}>
      <div style={{ padding: '56px 20px 0', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <Icons.X size={24} color={t.textPrimary}/>
        <div style={{ ...TYPE.h2, color: t.textPrimary }}>Register Tag</div>
        <div style={{ width: 24 }}/>
      </div>
      <div style={{ padding: '16px 20px 8px', ...TYPE.bodySm, color: t.textSecondary, textAlign: 'center' }}>Select a box for this tag.</div>
      <div style={{ padding: '8px 16px 16px' }}><SearchBar dark={dark} placeholder="Search boxes…" /></div>
      <div style={{ flex: 1, overflow: 'auto', padding: '0 16px 24px', display: 'flex', flexDirection: 'column', gap: 10 }}>
        {BOXES.slice(0, 5).map((b, i) => (
          <div key={b.id} style={{ display: 'flex', alignItems: 'center' }}>
            <BoxCard dark={dark} moving={moving} name={b.name} meta={b.meta} color={b.color}
              thumbIcon={React.createElement(Icons[b.icon], { size: 22, color: b.color })}
              style={{ flex: 1 }}/>
            {i === 0 && <div style={{ marginLeft: -40, zIndex: 2, width: 24, height: 24, borderRadius: 12, background: t.accent, display: 'flex', alignItems: 'center', justifyContent: 'center' }}><Icons.Check size={14} color={t.onAccent} strokeWidth={3}/></div>}
          </div>
        ))}
      </div>
      <div style={{ padding: '0 16px 24px' }}><PrimaryButton dark={dark} moving={moving}>Link tag</PrimaryButton></div>
    </Screen>
  );
}

function BoxDetailScreen({ dark = false, moving = false, collapsed = false }) {
  const t = theme(dark, moving);
  const box = BOXES[0];
  return (
    <Screen dark={dark} moving={moving}>
      {/* Parallax header: colored block */}
      {!collapsed && (
        <div style={{ height: 220, background: `linear-gradient(135deg, ${box.color}, ${box.color}cc)`, padding: '56px 20px 16px', position: 'relative' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between' }}>
            <div style={{ width: 36, height: 36, borderRadius: 18, background: 'rgba(0,0,0,0.3)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              <Icons.ChevronL size={20} color="#fff"/>
            </div>
            <div style={{ display: 'flex', gap: 8 }}>
              <div style={{ width: 36, height: 36, borderRadius: 18, background: 'rgba(0,0,0,0.3)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <Icons.Share size={18} color="#fff"/>
              </div>
              <div style={{ width: 36, height: 36, borderRadius: 18, background: 'rgba(0,0,0,0.3)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <Icons.MoreH size={18} color="#fff"/>
              </div>
            </div>
          </div>
          <div style={{ position: 'absolute', bottom: 16, left: 20, right: 20 }}>
            <div style={{ ...TYPE.display, color: '#fff' }}>{box.name}</div>
            <div style={{ ...TYPE.label, color: 'rgba(255,255,255,0.85)', marginTop: 4 }}>{box.meta}</div>
          </div>
        </div>
      )}
      {collapsed && (
        <div style={{ height: 56, paddingTop: 56, background: t.bg, borderBottom: `1px solid ${t.sep}`, display: 'flex', alignItems: 'center', padding: '56px 20px 0', gap: 12 }}>
          <Icons.ChevronL size={22} color={t.textPrimary}/>
          <div style={{ ...TYPE.h2, color: t.textPrimary, flex: 1 }}>{box.name}</div>
        </div>
      )}

      <div style={{ flex: 1, overflow: 'auto', padding: '16px 16px 120px' }}>
        {/* Badges row — N items, tags, QR, AI Tips, Ask AI — matches real app */}
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, marginBottom: 16 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 4, background: t.accentLight, color: t.accent, padding: '5px 10px', borderRadius: 9999, fontSize: 12, fontWeight: 500 }}>24 items</div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 4, background: t.surfaceTertiary, color: t.textSecondary, padding: '5px 10px', borderRadius: 9999, fontSize: 12, fontWeight: 500 }}>
            <Icons.Tag size={11} color={t.textSecondary}/> cookware
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 4, background: t.surfaceTertiary, color: t.textSecondary, padding: '5px 10px', borderRadius: 9999, fontSize: 12, fontWeight: 500 }}>
            <Icons.Tag size={11} color={t.textSecondary}/> daily-use
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 4, background: t.accentLight, color: t.accent, padding: '5px 10px', borderRadius: 9999, fontSize: 12, fontWeight: 600 }}>
            <Icons.QrCode size={12} color={t.accent}/> QR Code
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 4, background: t.aiPurpleLight, color: t.aiPurple, padding: '5px 10px', borderRadius: 9999, fontSize: 12, fontWeight: 600 }}>
            <Icons.Sparkles size={12} color={t.aiPurple}/> AI Tips
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 4, background: t.aiPurpleLight, color: t.aiPurple, padding: '5px 10px', borderRadius: 9999, fontSize: 12, fontWeight: 600 }}>
            <Icons.Sparkles size={12} color={t.aiPurple}/> Ask AI
          </div>
        </div>

        {/* Item list — each row is a full card with icon-circle / thumbnail, name + tags + chevron */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
          {ITEMS.map((it, i) => (
            <BoxDetailItemRow key={i} dark={dark} moving={moving} {...it} />
          ))}
        </div>
      </div>

      {/* Bottom-right FAB stack: Mic, Barcode, Camera stacked ABOVE a teal + FAB — matches real app */}
      <div style={{ position: 'absolute', right: 16, bottom: 28, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 10, zIndex: 30 }}>
        {[
          { icon: 'Mic', label: 'Voice' },
          { icon: 'Barcode', label: 'Barcode' },
          { icon: 'Camera', label: 'Photo' },
        ].map(({ icon, label }) => (
          <div key={icon} aria-label={label} style={{
            width: 44, height: 44, borderRadius: 22,
            background: t.surface, border: `1px solid ${t.sep}`,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            boxShadow: t.shadowSm,
          }}>
            {React.createElement(Icons[icon], { size: 20, color: t.accent })}
          </div>
        ))}
        <div style={{
          width: 56, height: 56, borderRadius: 28,
          background: t.accent, display: 'flex', alignItems: 'center', justifyContent: 'center',
          boxShadow: t.shadowMd,
        }}>
          <Icons.Plus size={28} color={t.onAccent} strokeWidth={2.4}/>
        </div>
      </div>
    </Screen>
  );
}

// Item row as used inside Box Detail — matches src/components/ItemRow layout.
function BoxDetailItemRow({ dark, moving, name, tags, quantity, loan, imageUri }) {
  const t = theme(dark, moving);
  const isOverdue = loan && loan.overdue;
  const lentBg = isOverdue ? t.destructiveLight : t.accentLight;
  const lentFg = isOverdue ? t.destructive : t.accent;
  const lentBorder = isOverdue ? t.destructive : t.accent;
  return (
    <div style={{ background: t.surface, borderRadius: 12, padding: 12, display: 'flex', alignItems: 'center', gap: 12, boxShadow: t.shadowSm, opacity: loan ? 0.78 : 1 }}>
      {/* Left: icon circle (or thumb) */}
      <div style={{ width: 44, height: 44, borderRadius: 12, background: t.surfaceTertiary, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
        <Icons.Package size={20} color={t.textSecondary}/>
      </div>
      {/* Center: name, tags, optional lent badge */}
      <div style={{ flex: 1, minWidth: 0, display: 'flex', flexDirection: 'column', gap: 4 }}>
        <div style={{ ...TYPE.body, color: t.textPrimary, fontWeight: 500 }}>{name}</div>
        {tags && tags.length > 0 && (
          <div style={{ display: 'flex', gap: 4, flexWrap: 'wrap' }}>
            {tags.slice(0, 3).map(tag => (
              <div key={tag} style={{ fontSize: 10, color: t.textSecondary, background: t.surfaceTertiary, padding: '2px 7px', borderRadius: 6 }}>{tag}</div>
            ))}
          </div>
        )}
        {loan && (
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 4, padding: '2px 8px', borderRadius: 8, border: `1px solid ${lentBorder}`, background: lentBg, alignSelf: 'flex-start', marginTop: 2 }}>
            {isOverdue && <Icons.Clock size={11} color={lentFg}/>}
            <span style={{ fontSize: 11, color: lentFg }}>{loan.text}</span>
          </div>
        )}
      </div>
      {/* Right: quantity badge + chevron */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, flexShrink: 0 }}>
        {quantity > 1 && (
          <div style={{ background: t.surfaceTertiary, borderRadius: 10, padding: '2px 8px', minWidth: 28, textAlign: 'center' }}>
            <span style={{ ...TYPE.label, color: t.textPrimary, fontWeight: 600 }}>×{quantity}</span>
          </div>
        )}
        <Icons.ChevronR size={18} color={t.sep}/>
      </div>
    </div>
  );
}

function NewItemScreen({ dark = false, moving = false }) {
  const t = theme(dark, moving);
  return (
    <Screen dark={dark} moving={moving}>
      <div style={{ padding: '56px 20px 0', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <Icons.ChevronL size={24} color={t.textPrimary}/>
        <div style={{ ...TYPE.h2, color: t.textPrimary }}>New Item</div>
        <div style={{ ...TYPE.btn, color: t.accent, fontSize: 16 }}>Save</div>
      </div>
      <div style={{ flex: 1, overflow: 'auto', padding: '20px 20px 120px', display: 'flex', flexDirection: 'column', gap: 16 }}>
        <PhotoPlaceholder dark={dark} size="100%" radius={16} style={{ height: 180, width: '100%' }} label="ITEM PHOTO"/>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 10 }}>
          <div style={{ background: t.surface, borderRadius: 12, padding: 10, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4, boxShadow: t.shadowSm }}>
            <Icons.Camera size={22} color={t.accent}/>
            <div style={{ ...TYPE.caption, color: t.textPrimary }}>Camera</div>
          </div>
          <div style={{ background: t.surface, borderRadius: 12, padding: 10, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4, boxShadow: t.shadowSm }}>
            <Icons.Mic size={22} color={t.aiPurple}/>
            <div style={{ ...TYPE.caption, color: t.textPrimary }}>Voice</div>
          </div>
          <div style={{ background: t.surface, borderRadius: 12, padding: 10, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4, boxShadow: t.shadowSm }}>
            <Icons.Barcode size={22} color={t.amber}/>
            <div style={{ ...TYPE.caption, color: t.textPrimary }}>Barcode</div>
          </div>
        </div>
        <FormField dark={dark} label="Name (required)" value="Cast-iron skillet (12&quot;)"/>
        <FormField dark={dark} label="Quantity" value="1"/>
        <FormField dark={dark} label="Description" value="Lodge 12-inch, seasoned. Handle wrap included." multiline/>
        <div>
          <div style={{ ...TYPE.label, color: t.textSecondary, marginBottom: 6 }}>Tags</div>
          <div style={{ background: t.surfaceTertiary, borderRadius: 12, padding: 10, display: 'flex', gap: 6, flexWrap: 'wrap', minHeight: 48 }}>
            <TagChip dark={dark} dismissible>#kitchen</TagChip>
            <TagChip dark={dark} dismissible>#cookware</TagChip>
            <TagChip dark={dark} variant="ai">AI: #cast-iron</TagChip>
          </div>
        </div>
        <FormField dark={dark} label="Barcode" placeholder="Tap to scan" leftIcon={<Icons.Barcode size={18} color={t.textTertiary}/>}/>
        <TipCard dark={dark} moving={moving} cachedAt="just now" footer={false}>Tip: bulk-add similar items by holding the shutter — Camera will split into a review list.</TipCard>
        <div style={{ background: t.surface, borderRadius: 12, padding: 14, display: 'flex', alignItems: 'center', gap: 10, boxShadow: t.shadowSm }}>
          <div style={{ width: 32, height: 32, borderRadius: 8, background: '#0D7377', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <Icons.Archive size={18} color="#fff"/>
          </div>
          <div style={{ flex: 1 }}>
            <div style={{ ...TYPE.caption, color: t.textSecondary }}>Save to</div>
            <div style={{ ...TYPE.h3, color: t.textPrimary }}>Kitchen Essentials · Pantry</div>
          </div>
          <Icons.ChevronR size={18} color={t.textTertiary}/>
        </div>
      </div>
    </Screen>
  );
}

function ReviewItemsScreen({ dark = false, moving = false }) {
  const t = theme(dark, moving);
  const items = [
    { name: 'Cast-iron skillet 12"',  qty: '1',  conf: 0.96 },
    { name: 'Cast-iron lid',          qty: '1',  conf: 0.88 },
    { name: 'Silicone handle wrap',   qty: '2',  conf: 0.72 },
    { name: 'Chainmail scrubber',     qty: '1',  conf: 0.64 },
  ];
  return (
    <Screen dark={dark} moving={moving}>
      <div style={{ padding: '56px 20px 16px', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <Icons.ChevronL size={24} color={t.textPrimary}/>
        <div style={{ ...TYPE.h2, color: t.textPrimary }}>Review 4 items</div>
        <div style={{ width: 24 }}/>
      </div>
      <div style={{ padding: '0 20px 8px', ...TYPE.bodySm, color: t.textSecondary }}>From 1 photo · edit or remove before saving.</div>
      <div style={{ flex: 1, overflow: 'auto', padding: '16px 16px 180px', display: 'flex', flexDirection: 'column', gap: 10 }}>
        {items.map((it, i) => (
          <div key={i} style={{ background: t.surface, borderRadius: 12, padding: 14, boxShadow: t.shadowSm }}>
            <div style={{ display: 'flex', gap: 12, alignItems: 'flex-start' }}>
              <PhotoPlaceholder size={52} dark={dark} label=""/>
              <div style={{ flex: 1 }}>
                <div style={{ ...TYPE.h3, color: t.textPrimary }}>{it.name}</div>
                <div style={{ display: 'flex', gap: 6, marginTop: 6 }}>
                  <TagChip dark={dark}>Qty {it.qty}</TagChip>
                  <TagChip dark={dark} variant="ai">{Math.round(it.conf*100)}%</TagChip>
                </div>
              </div>
              <Icons.Edit size={18} color={t.textTertiary}/>
            </div>
          </div>
        ))}
      </div>
      <div style={{ position: 'absolute', left: 16, right: 16, bottom: 24, display: 'flex', gap: 10 }}>
        <SecondaryButton dark={dark} style={{ flex: 1 }}>Cancel</SecondaryButton>
        <PrimaryButton dark={dark} moving={moving} style={{ flex: 2 }}>Save all</PrimaryButton>
      </div>
    </Screen>
  );
}

function BoxPickerSheet({ dark = false, moving = false }) {
  const t = theme(dark, moving);
  return (
    <Screen dark={dark} moving={moving}>
      <div style={{ position: 'absolute', inset: 0, background: 'rgba(0,0,0,0.5)' }}/>
      <div style={{ position: 'absolute', left: 0, right: 0, bottom: 0, top: 80, background: t.surface, borderTopLeftRadius: 24, borderTopRightRadius: 24, boxShadow: t.shadowLg, padding: '8px 0 28px', display: 'flex', flexDirection: 'column' }}>
        <div style={{ width: 36, height: 4, borderRadius: 2, background: t.sepLight, margin: '4px auto 16px' }}/>
        <div style={{ padding: '0 20px 12px', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
          <div style={{ ...TYPE.h2, color: t.textPrimary }}>Move to box</div>
          <Icons.X size={22} color={t.textSecondary}/>
        </div>
        <div style={{ padding: '0 16px 12px' }}><SearchBar dark={dark} placeholder="Search boxes…"/></div>
        <div style={{ flex: 1, overflow: 'auto', padding: '4px 16px 16px', display: 'flex', flexDirection: 'column', gap: 8 }}>
          {BOXES.map((b, i) => (
            <div key={b.id} style={{ display: 'flex', alignItems: 'center' }}>
              <BoxCard dark={dark} moving={moving} name={b.name} meta={b.meta} color={b.color}
                thumbIcon={React.createElement(Icons[b.icon], { size: 22, color: b.color })}
                style={{ flex: 1, opacity: i === 2 ? 1 : 0.94 }}/>
              {i === 2 && <div style={{ marginLeft: -40, zIndex: 2, width: 24, height: 24, borderRadius: 12, background: t.accent, display: 'flex', alignItems: 'center', justifyContent: 'center' }}><Icons.Check size={14} color={t.onAccent} strokeWidth={3}/></div>}
            </div>
          ))}
        </div>
      </div>
    </Screen>
  );
}

Object.assign(window, { ScanScreen, RegisterTagScreen, BoxDetailScreen, NewItemScreen, ReviewItemsScreen, BoxPickerSheet });