// screen-review.jsx — 2-phase content review (text → image → schedule)
// Supports single-product and multi-product (carousel / composite lookbook) posts.
const { useState: useStateR, useEffect: useEffectR } = React;

const PRESETS = [
  { label: 'Trong 1h', val: '1h' },
  { label: 'Tối nay 20h', val: '20h' },
  { label: 'Mai 9h', val: 'mai9' },
  { label: 'Tuần sau', val: 'next' },
];

// status → current phase number (1=text, 2=image, 3=schedule, 4=done)
function phaseOf(status) {
  if (['text_pending', 'draft'].includes(status)) return 1;
  if (status === 'image_pending') return 2;
  if (status === 'approved') return 3;
  if (['scheduled', 'posted'].includes(status)) return 4;
  return 1;
}

function ReviewScreen({ postId }) {
  const app = useApp();
  const post = POSTS.find(p => p.id === postId)
            || POSTS.find(p => p.status === 'text_pending')
            || POSTS.find(p => p.status === 'image_pending')
            || POSTS[0];
  const productIds = post.productIds || [post.productId];
  const products = productIds.map(id => app.products.find(p => p.id === id)).filter(Boolean);
  const primary = products[0];
  const b = brandOf(primary.brand);
  const isMulti = products.length > 1;
  const format = post.format || 'single';
  const camp = post.campaignId ? campaignOf(post.campaignId) : null;

  const [caption, setCaption] = useStateR(post.caption);
  const [editing, setEditing] = useStateR(false);
  const [saved, setSaved] = useStateR(true);
  const [tab, setTab] = useStateR(format === 'carousel' ? 'carousel' : 'compare');
  const [schedMode, setSchedMode] = useStateR('now');
  const [preset, setPreset] = useStateR(null);
  const [regen, setRegen] = useStateR(false);
  const [status, setStatus] = useStateR(post.status);
  const [carouselIdx, setCarouselIdx] = useStateR(0);
  const phase = phaseOf(status);

  useEffectR(() => {
    const h = (e) => {
      if ((e.metaKey || e.ctrlKey) && e.key === 's') { e.preventDefault(); doSave(); }
      else if ((e.metaKey || e.ctrlKey) && e.key === 'Enter') { e.preventDefault(); doPhaseAction(); }
      else if (e.key === 'Escape' && !editing) app.go('products');
    };
    window.addEventListener('keydown', h);
    return () => window.removeEventListener('keydown', h);
  }, [editing, caption, schedMode, phase]);

  const doSave = () => { setSaved(true); setEditing(false); app.toast('Đã lưu caption', 'check'); };

  // phase-aware primary action
  const doPhaseAction = () => {
    if (phase === 1) {
      setStatus('image_pending');
      app.toast('Đã duyệt text · đang chờ tạo ảnh', 'check', 'var(--blue)');
    } else if (phase === 2) {
      setStatus('approved');
      app.toast('Đã duyệt ảnh · chuyển sang khâu lên lịch', 'image', 'var(--green)');
    } else if (phase === 3) {
      setStatus(schedMode === 'now' ? 'posted' : 'scheduled');
      app.toast(schedMode === 'now' ? 'Đã đăng lên kênh ngay' : 'Đã đặt lịch, vào hàng chờ đăng', 'checkCircle', 'var(--green)');
    }
  };

  const doReject = () => {
    setStatus('failed');
    app.toast(phase === 1 ? 'Đã từ chối text · tạo lại ở Pool' : 'Đã từ chối · không đăng', 'xCircle', 'var(--text-3)');
  };

  const doRegen = () => {
    setRegen(true);
    const msg = phase === 1 ? 'Tạo lại caption bằng LLM…' : 'Tạo lại ảnh bằng Banana Pro…';
    app.toast(msg, 'sparkle', 'var(--accent)');
    setTimeout(() => { setRegen(false); app.toast(phase === 1 ? 'Đã tạo lại caption' : 'Đã tạo lại ảnh', 'sparkle', 'var(--blue)'); }, 2600);
  };

  const titleLine = caption.split('\n')[0];
  const fbLimit = 80;

  const phaseLabels = {
    1: { primary: 'Duyệt text → tạo ảnh', icon: 'check', sub: 'Stage 2A · Kiểm tra caption + hashtag' },
    2: { primary: format === 'composite' ? 'Duyệt lookbook → đặt lịch' : format === 'carousel' ? 'Duyệt carousel → đặt lịch' : 'Duyệt ảnh → đặt lịch', icon: 'image', sub: 'Stage 2B · Kiểm tra ảnh AI' },
    3: { primary: schedMode === 'now' ? 'Đăng ngay qua API-Hub' : 'Đặt lịch đăng', icon: 'upload', sub: 'Stage 3 · Chốt giờ đăng' },
    4: { primary: 'Đã hoàn thành', icon: 'checkCheck', sub: 'Đã đăng / đã đặt lịch' },
  };
  const pl = phaseLabels[phase];

  return (
    <div className="page-pad" style={{ maxWidth: 1240 }}>
      {/* breadcrumb */}
      <div className="row gap-sm t-sm dimmer" style={{ marginBottom: 10 }}>
        <a onClick={() => app.go('products')} style={{ cursor: 'pointer' }}>Sản phẩm</a>
        <Icon name="chevronR" size={13} />
        {isMulti ? (
          <span style={{ color: 'var(--text-2)' }}>{products.length} sản phẩm · {format}</span>
        ) : (
          <span className="clip-1" style={{ maxWidth: 280, color: 'var(--text-2)' }}>{primary.titleVn}</span>
        )}
        <Icon name="chevronR" size={13} />
        <span style={{ color: 'var(--text)' }}>Review</span>
        {camp && (
          <>
            <Icon name="chevronR" size={13} />
            <span className="badge badge-accent" style={{ height: 20 }}>
              <Icon name="megaphone" size={11} />{camp.bannerLabel}
            </span>
          </>
        )}
      </div>

      {/* phase stepper */}
      <PhaseStepper phase={phase} format={format} />

      {/* toolbar */}
      <div className="between" style={{ marginBottom: 16, flexWrap: 'wrap', gap: 10 }}>
        <div className="row gap-sm">
          <StatusPill status={status} />
          <span className="badge badge-neutral"><Icon name="check" size={12} />{saved ? 'Đã lưu tự động' : 'Có thay đổi chưa lưu'}</span>
          {isMulti && <Badge variant="brand" icon={format === 'composite' ? 'sparkle' : 'gallery'}>{products.length} sản phẩm · {format}</Badge>}
        </div>
        <div className="row gap-sm" style={{ flexWrap: 'wrap' }}>
          <Button variant="ghost" size="sm" icon="refresh" onClick={doRegen}>
            Tạo lại {phase === 1 ? 'caption' : 'ảnh'} <span className="kbd desktop-only" style={{ marginLeft: 4 }}>R</span>
          </Button>
          {phase < 4 && (
            <>
              <Button variant="default" size="sm" icon="skip" onClick={doReject}>Từ chối</Button>
              <Button variant="primary" size="sm" icon={pl.icon} onClick={doPhaseAction}>
                {pl.primary}
                <span className="kbd desktop-only" style={{ marginLeft: 4, background: 'rgba(255,255,255,.2)', color: '#fff', borderColor: 'transparent' }}>⌘↵</span>
              </Button>
            </>
          )}
        </div>
      </div>

      {phase === 4 && (
        <div className="banner banner-warn" style={{ marginBottom: 16, background: 'var(--green-soft)', borderColor: 'color-mix(in oklab, var(--green) 40%, transparent)' }}>
          <Icon name="checkCircle" size={18} style={{ color: 'var(--green)' }} />
          <div style={{ flex: 1 }}><span className="strong">Đã hoàn thành.</span> <span className="dim">{status === 'posted' ? 'Đã đăng lên kênh.' : 'Đã vào hàng chờ, hệ thống sẽ đăng đúng giờ đã đặt.'}</span></div>
          <Button variant="ghost" size="sm" iconR="arrowR" onClick={() => app.go('products')}>Review draft tiếp theo</Button>
        </div>
      )}

      {/* multi-product strip */}
      {isMulti && (
        <div className="card card-pad" style={{ marginBottom: 14 }}>
          <div className="row gap-sm" style={{ marginBottom: 10 }}>
            <Icon name="layers" size={14} style={{ color: 'var(--accent)' }} />
            <span className="t-2xs strong dimmer">SẢN PHẨM TRONG BÀI ({products.length})</span>
            <div className="topbar-spacer"></div>
            <span className="t-2xs dimmer">Tổng: {fmtVND(products.reduce((s, p) => s + p.vnd, 0))}</span>
          </div>
          <div className="row" style={{ gap: 8, overflowX: 'auto', paddingBottom: 4 }}>
            {products.map((p, i) => {
              const pb = brandOf(p.brand);
              return (
                <div key={p.id}
                     onClick={() => format === 'carousel' && setCarouselIdx(i)}
                     style={{
                       minWidth: 160, cursor: format === 'carousel' ? 'pointer' : 'default',
                       background: 'var(--bg-2)', borderRadius: 'var(--r-md)', padding: 8,
                       border: '1px solid ' + (format === 'carousel' && carouselIdx === i ? 'var(--accent)' : 'transparent'),
                     }}>
                  <div className="row gap-sm" style={{ marginBottom: 6 }}>
                    <Placeholder label="" brand={pb} ratio="1" style={{ width: 32, height: 32 }} />
                    <div style={{ minWidth: 0, flex: 1 }}>
                      <div className="t-2xs strong clip-1">{p.titleVn}</div>
                      <div className="t-2xs dimmer mono">{fmtVND(p.vnd)}</div>
                    </div>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      )}

      <div className="grid-2" style={{ gridTemplateColumns: '1.35fr 1fr', alignItems: 'start' }}>
        {/* LEFT: caption + schedule */}
        <div className="col" style={{ gap: 16 }}>
          {/* CAPTION (Phase 1) */}
          <div className="card card-pad" style={{ opacity: phase === 1 ? 1 : 0.92 }}>
            <div className="between" style={{ marginBottom: 12 }}>
              <div className="row gap-sm">
                <span className={'badge ' + (phase >= 1 ? 'badge-accent' : 'badge-neutral')} style={{ height: 22 }}>
                  <Icon name={phase > 1 ? 'check' : 'edit'} size={12} />Phase 1 · Text
                </span>
                <div className="t-h2">Caption</div>
              </div>
              {!editing
                ? <Button variant="ghost" size="sm" icon="edit" onClick={() => setEditing(true)} disabled={phase > 1}>{phase > 1 ? 'Đã duyệt' : 'Sửa caption'}</Button>
                : <div className="row gap-sm"><Button variant="ghost" size="sm" onClick={() => { setCaption(post.caption); setEditing(false); }}>Hủy</Button><Button variant="primary" size="sm" icon="check" onClick={doSave}>Lưu <span className="kbd desktop-only" style={{ marginLeft: 3, background: 'rgba(255,255,255,.2)', color: '#fff', borderColor: 'transparent' }}>⌘S</span></Button></div>}
            </div>

            {/* title line w/ char count */}
            <div className="between" style={{ marginBottom: 6 }}>
              <span className="t-2xs strong dimmer">DÒNG TIÊU ĐỀ (FB ~{fbLimit} ký tự)</span>
              <span className={'t-2xs mono ' + (titleLine.length > fbLimit ? 'badge-red' : '')} style={{ color: titleLine.length > fbLimit ? 'var(--red)' : 'var(--text-3)' }}>{titleLine.length}/{fbLimit}</span>
            </div>

            {editing ? (
              <textarea className="textarea mono" style={{ minHeight: 200, fontSize: 13 }} value={caption}
                        onChange={e => { setCaption(e.target.value); setSaved(false); }} autoFocus />
            ) : (
              <div className="panel" style={{ padding: 14, whiteSpace: 'pre-wrap', fontSize: 13.5, lineHeight: 1.65 }}>{caption}</div>
            )}

            {/* brand-safe check */}
            <div className="row gap-sm" style={{ marginTop: 10, padding: '8px 10px', background: 'var(--yellow-soft)', borderRadius: 'var(--r-sm)' }}>
              <Icon name="scan" size={15} style={{ color: 'var(--yellow)' }} />
              <span className="t-xs"><span className="strong">Kiểm tra brand-safe:</span> tự động thay <span className="mono">"{b.name}"</span> → <span className="mono strong">"{b.safe}"</span> để né kiểm duyệt FB.</span>
            </div>

            <div className="t-2xs strong dimmer" style={{ marginTop: 14, marginBottom: 6 }}>HASHTAG GỢI Ý</div>
            <div className="row-wrap gap-sm">
              {['#thoitrangNhat', '#muahoNhatBan', '#order' + b.name.replace(/\s/g, ''), '#sale', '#hangNhatnoidia'].map(h => (
                <button key={h} className="badge badge-brand" style={{ cursor: 'pointer', height: 26 }} onClick={() => { setCaption(c => c + ' ' + h); setSaved(false); }} disabled={phase > 1}>
                  <Icon name="plus" size={11} />{h}
                </button>
              ))}
            </div>
          </div>

          {/* SCHEDULE (Phase 3) */}
          <div className="card card-pad" style={{ opacity: phase >= 3 ? 1 : 0.6 }}>
            <div className="row gap-sm" style={{ marginBottom: 12 }}>
              <span className={'badge ' + (phase >= 3 ? 'badge-accent' : 'badge-neutral')} style={{ height: 22 }}>
                <Icon name={phase > 3 ? 'check' : 'calendar'} size={12} />Phase 3 · Lịch
              </span>
              <div className="t-h2">Lên lịch đăng</div>
            </div>
            {phase < 3 ? (
              <div className="t-xs dim" style={{ padding: 10, background: 'var(--bg-2)', borderRadius: 'var(--r-sm)' }}>
                <Icon name="lock" size={13} style={{ verticalAlign: 'middle', marginRight: 6 }} />
                Hoàn thành duyệt text + ảnh trước khi đặt lịch.
              </div>
            ) : (
              <>
                <div className="row gap-sm" style={{ marginBottom: 12 }}>
                  <Seg value={schedMode} options={[{ value: 'now', label: 'Đăng ngay' }, { value: 'later', label: 'Đặt lịch' }]} onChange={setSchedMode} />
                  <span className="t-xs dimmer">Múi giờ Asia/Ho_Chi_Minh</span>
                </div>
                {schedMode === 'later' && (
                  <>
                    <div className="grid-2" style={{ marginBottom: 12 }}>
                      <Field label="Ngày"><input className="input sm" type="date" defaultValue="2026-05-30" /></Field>
                      <Field label="Giờ"><input className="input sm" type="time" defaultValue="20:00" /></Field>
                    </div>
                    <div className="row-wrap gap-sm">
                      {PRESETS.map(p => (
                        <button key={p.val} className={'badge ' + (preset === p.val ? 'badge-accent' : 'badge-brand')} style={{ cursor: 'pointer', height: 28 }} onClick={() => setPreset(p.val)}>
                          <Icon name="clock" size={12} />{p.label}
                        </button>
                      ))}
                    </div>
                  </>
                )}
              </>
            )}
          </div>
        </div>

        {/* RIGHT: image hero + product ref */}
        <div className="col" style={{ gap: 16 }}>
          {/* IMAGE (Phase 2) */}
          <div className="card" style={{ overflow: 'hidden', opacity: phase >= 2 ? 1 : 0.6 }}>
            <div style={{ padding: '12px 14px 0' }}>
              <div className="between" style={{ marginBottom: 8 }}>
                <span className={'badge ' + (phase >= 2 ? 'badge-accent' : 'badge-neutral')} style={{ height: 22 }}>
                  <Icon name={phase > 2 ? 'check' : 'image'} size={12} />Phase 2 · {format === 'composite' ? 'Lookbook AI' : format === 'carousel' ? 'Carousel' : 'Ảnh'}
                </span>
              </div>
              {phase < 2 ? (
                <div className="ph" style={{ aspectRatio: '4/5', display: 'grid', placeItems: 'center', marginBottom: 14 }}>
                  <div className="col" style={{ alignItems: 'center', gap: 10 }}>
                    <Icon name="lock" size={28} style={{ color: 'var(--text-3)' }} />
                    <span className="t-sm dim">Chờ duyệt text xong sẽ tạo ảnh</span>
                  </div>
                </div>
              ) : (
                <>
                  {format !== 'composite' && (
                    <Tabs active={tab} onChange={setTab} tabs={
                      format === 'carousel'
                        ? [{ value: 'carousel', label: 'Carousel' }, { value: 'compare', label: 'So sánh' }, { value: 'product', label: 'Ảnh gốc' }]
                        : [{ value: 'compare', label: 'So sánh' }, { value: 'product', label: 'Ảnh gốc' }, { value: 'model', label: 'Ảnh AI' }, { value: 'final', label: 'Final' }]
                    } />
                  )}
                </>
              )}
            </div>
            {phase >= 2 && (
              <div style={{ padding: 14 }}>
                {regen ? (
                  <div className="ph" style={{ aspectRatio: '4/5', display: 'grid', placeItems: 'center' }}>
                    <div className="col" style={{ alignItems: 'center', gap: 10 }}>
                      <Icon name="loader" size={28} className="spin" style={{ color: 'var(--accent)' }} />
                      <span className="t-sm dim">Banana Pro đang tạo… ~30s</span>
                    </div>
                  </div>
                ) : format === 'composite' ? (
                  <div style={{ position: 'relative' }}>
                    <Placeholder label={'Lookbook composite · ' + products.length + ' items'} tag={<Badge variant="accent" icon="sparkle">AI lookbook</Badge>} ratio="4/5" big />
                    <Button variant="default" size="sm" icon="maximize" style={{ position: 'absolute', bottom: 10, right: 10 }}>Phóng to</Button>
                  </div>
                ) : format === 'carousel' && tab === 'carousel' ? (
                  <div>
                    <div style={{ position: 'relative', marginBottom: 10 }}>
                      <Placeholder label={products[carouselIdx].label + ' · slide ' + (carouselIdx + 1) + '/' + products.length} brand={brandOf(products[carouselIdx].brand)} ratio="1" big />
                      <Button variant="default" size="sm" icon="chevronL" style={{ position: 'absolute', left: 10, top: '50%', transform: 'translateY(-50%)' }} onClick={() => setCarouselIdx(i => Math.max(0, i - 1))} disabled={carouselIdx === 0} />
                      <Button variant="default" size="sm" icon="chevronR" style={{ position: 'absolute', right: 10, top: '50%', transform: 'translateY(-50%)' }} onClick={() => setCarouselIdx(i => Math.min(products.length - 1, i + 1))} disabled={carouselIdx === products.length - 1} />
                    </div>
                    <div className="row gap-sm" style={{ justifyContent: 'center' }}>
                      {products.map((_, i) => (
                        <span key={i} style={{ width: 8, height: 8, borderRadius: 99, background: i === carouselIdx ? 'var(--accent)' : 'var(--border-2)' }}></span>
                      ))}
                    </div>
                  </div>
                ) : tab === 'compare' ? (
                  <div className="grid-2" style={{ gap: 10 }}>
                    <div>
                      <div className="t-2xs strong dimmer" style={{ marginBottom: 6 }}>ẢNH GỐC (scraper)</div>
                      <Placeholder label={primary.label} brand={b} ratio="4/5" big />
                    </div>
                    <div>
                      <div className="t-2xs strong" style={{ marginBottom: 6, color: 'var(--accent)' }}>ẢNH AI MODEL (Banana)</div>
                      <Placeholder label="AI model mặc sản phẩm" tag={<Badge variant="accent" icon="sparkle">AI</Badge>} ratio="4/5" big />
                    </div>
                  </div>
                ) : (
                  <div style={{ position: 'relative' }}>
                    <Placeholder
                      label={tab === 'product' ? primary.label : tab === 'model' ? 'AI model mặc sản phẩm' : 'Final: AI + logo overlay'}
                      brand={tab === 'product' ? b : null}
                      tag={tab !== 'product' ? <Badge variant="accent" icon="sparkle">AI</Badge> : null}
                      ratio="4/5" big />
                    <Button variant="default" size="sm" icon="maximize" style={{ position: 'absolute', bottom: 10, right: 10 }}>Phóng to</Button>
                  </div>
                )}
              </div>
            )}
            {phase >= 2 && (
              <div className="row gap-sm" style={{ padding: '0 14px 14px' }}>
                <Button variant="default" size="sm" icon="refresh" className="btn-block" onClick={doRegen}>Tạo lại {format === 'composite' ? 'lookbook' : 'ảnh'}</Button>
                <Button variant="ghost" size="sm" icon="upload">Tải ảnh khác</Button>
              </div>
            )}
          </div>

          {/* FB preview */}
          <div className="card" style={{ overflow: 'hidden' }}>
            <div className="t-2xs strong dimmer" style={{ padding: '12px 14px 0' }}>XEM TRƯỚC TRÊN FACEBOOK</div>
            <div style={{ padding: 14 }}>
              <div className="panel" style={{ overflow: 'hidden', borderRadius: 'var(--r-md)' }}>
                <div className="row gap-sm" style={{ padding: 12 }}>
                  <div className="sb-logo" style={{ width: 36, height: 36, borderRadius: 99 }}>Z</div>
                  <div><div className="t-sm strong">Zei JP</div><div className="t-2xs dimmer">Vừa xong · 🌏</div></div>
                </div>
                <div className="clip-2 t-sm" style={{ padding: '0 12px 10px', whiteSpace: 'pre-wrap' }}>{caption.slice(0, 140)}…</div>
                {format === 'carousel' ? (
                  <div style={{ display: 'grid', gridTemplateColumns: products.length >= 3 ? '2fr 1fr' : '1fr 1fr', gap: 2, borderTop: '1px solid var(--border)' }}>
                    <Placeholder label="Slide 1" ratio={products.length >= 3 ? '4/5' : '1'} style={{ borderRadius: 0, border: 'none' }} />
                    <div className="col" style={{ gap: 2 }}>
                      {products.slice(1, 3).map((_, i) => (
                        <Placeholder key={i} label={'Slide ' + (i + 2)} ratio={products.length >= 3 ? '2/1' : '1'} style={{ borderRadius: 0, border: 'none' }} />
                      ))}
                      {products.length > 3 && (
                        <div style={{ position: 'absolute', bottom: 8, right: 8, background: 'rgba(0,0,0,.7)', color: '#fff', padding: '4px 8px', borderRadius: 4, fontSize: 12, fontWeight: 700 }}>+{products.length - 3}</div>
                      )}
                    </div>
                  </div>
                ) : (
                  <Placeholder label={format === 'composite' ? 'Lookbook composite' : 'Final image'} ratio="1/1" style={{ borderRadius: 0, borderLeft: 'none', borderRight: 'none' }} />
                )}
              </div>
            </div>
          </div>

          {/* product ref */}
          <div className="card card-pad">
            <div className="between" style={{ marginBottom: 10 }}>
              <div className="t-h2">{isMulti ? 'Tham chiếu chính' : 'Sản phẩm tham chiếu'}</div>
              <div className="row gap-sm">
                {primary.kind === 'manual' && <Badge variant="neutral" icon="edit">Nhập tay</Badge>}
                <BrandLogo brand={b} size={24} />
              </div>
            </div>
            <InfoRowR label="Giá JPY → VND" value={`${fmtJPY(primary.jpy)} → ${fmtVND(primary.vnd)}`} mono />
            <InfoRowR label="URL gốc" value={<a className="row gap-sm" style={{ color: 'var(--accent)' }} href={'https://' + primary.url} target="_blank">{primary.url}<Icon name="external" size={13} /></a>} />
            <InfoRowR label="Size · màu" value={`${primary.sizes.join('/')} · ${primary.colors} màu`} />
            {camp && <InfoRowR label="Campaign" value={<span className="row gap-sm"><Icon name="megaphone" size={13} style={{ color: 'var(--accent)' }} />{camp.bannerLabel}</span>} />}
          </div>
        </div>
      </div>

      {/* audit log */}
      <div className="row gap-sm t-2xs dimmer" style={{ marginTop: 18, padding: '10px 14px', background: 'var(--bg-2)', borderRadius: 'var(--r-md)', flexWrap: 'wrap' }}>
        <Icon name="sparkle" size={13} />
        <span>Tạo bởi <span className="strong">{post.genBy}</span> lúc {post.genAt} · Sửa bởi admin@zei.com · Tạo lại {phase === 1 ? 'caption' : 'ảnh'} {post.regen} lần</span>
      </div>
    </div>
  );
}

function PhaseStepper({ phase, format }) {
  const steps = [
    { n: 1, label: 'Duyệt text',     icon: 'edit' },
    { n: 2, label: format === 'composite' ? 'Duyệt lookbook' : format === 'carousel' ? 'Duyệt carousel' : 'Duyệt ảnh', icon: 'image' },
    { n: 3, label: 'Đặt lịch',       icon: 'calendar' },
    { n: 4, label: 'Hoàn thành',     icon: 'checkCheck' },
  ];
  return (
    <div className="card" style={{ padding: 12, marginBottom: 14 }}>
      <div className="row" style={{ gap: 0, alignItems: 'center' }}>
        {steps.map((s, i) => {
          const done = phase > s.n;
          const active = phase === s.n;
          return (
            <React.Fragment key={s.n}>
              <div className="row gap-sm" style={{ minWidth: 0, flexShrink: 0 }}>
                <div style={{
                  width: 28, height: 28, borderRadius: 99,
                  background: done ? 'var(--green)' : active ? 'var(--accent)' : 'var(--surface-2)',
                  color: done || active ? '#fff' : 'var(--text-3)',
                  display: 'grid', placeItems: 'center', fontSize: 12, fontWeight: 700,
                }}>
                  {done ? <Icon name="check" size={14} /> : s.n}
                </div>
                <div className="col" style={{ minWidth: 0 }}>
                  <span className={'t-xs ' + (active ? 'strong' : '')} style={{ color: active ? 'var(--text)' : done ? 'var(--text-2)' : 'var(--text-3)' }}>{s.label}</span>
                </div>
              </div>
              {i < steps.length - 1 && (
                <div style={{ flex: 1, height: 2, background: phase > s.n ? 'var(--green)' : 'var(--border)', margin: '0 12px', borderRadius: 99 }}></div>
              )}
            </React.Fragment>
          );
        })}
      </div>
    </div>
  );
}

function InfoRowR({ label, value, mono }) {
  return (
    <div className="between" style={{ padding: '8px 0', borderBottom: '1px solid var(--border)', gap: 16, alignItems: 'flex-start' }}>
      <span className="t-sm dimmer" style={{ minWidth: 120 }}>{label}</span>
      <span className={'t-sm strong ' + (mono ? 'mono' : '')} style={{ textAlign: 'right', wordBreak: 'break-word' }}>{value}</span>
    </div>
  );
}

Object.assign(window, { ReviewScreen });