// 시안 2 — 상태 우선 대시보드 (요약 통계 · 조치 필요 강조 · 카드 리스트) ------
function V2Bar({ ch, label, ended }) {
  const enroll = label === '수강신청';
  const fill = fillColor(ch.pct, enroll ? 'enroll' : 'video', ended);
  const danger = ch.pct >= 90;
  return (
    <div style={{ minWidth: 0 }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 5 }}>
        <span style={{ fontSize: 11.5, color: 'var(--muted)', fontWeight: 600 }}>{label}</span>
        <span className="tnum" style={{ fontSize: 12, fontWeight: 800, color: ended ? 'var(--faint)' : (danger ? 'var(--warn-ink)' : (enroll ? 'var(--accent)' : 'var(--brand)')) }}>
          {ch.used}{ch.unit}{!ch.unlimited && <span style={{ color: 'var(--faint)', fontWeight: 700 }}> / {ch.total}</span>}{ch.unlimited && <span style={{ color: 'var(--faint)', fontWeight: 700 }}> / {ch.total}</span>}
        </span>
      </div>
      <div style={{ position: 'relative', height: 9, borderRadius: 5, background: 'var(--track)', overflow: 'hidden' }}>
        <div style={{ position: 'absolute', inset: 0, width: Math.max(ch.unlimited ? 4 : ch.pct, 3) + '%', borderRadius: 5, background: fill }} />
      </div>
      <div className="tnum" style={{ fontSize: 10.5, color: 'var(--faint)', fontWeight: 700, marginTop: 3 }}>{ch.unlimited ? '무제한' : ch.pct + '% 사용'}</div>
    </div>
  );
}

function V2Card({ s }) {
  const st = STATUS[s.status.type];
  const ended = s.status.type === 'ended';
  const pay = needsPay(s.status.type);
  const warn = s.usageWarn;
  return (
    <div style={{
      display: 'grid', gridTemplateColumns: '6px 1fr', borderRadius: 'var(--r-lg)', overflow: 'hidden',
      background: '#fff', opacity: ended ? .66 : 1,
      border: pay ? '1.5px solid var(--bad)' : (warn ? '1.5px solid var(--warn)' : '1px solid var(--line)'),
      boxShadow: pay ? '0 6px 22px rgba(226,48,74,.14)' : 'var(--sh-sm)',
    }}>
      <div style={{ background: st.color }} />
      <div>
        {/* 본문 */}
        <div style={{ display: 'grid', gridTemplateColumns: '252px 1fr 200px 150px', alignItems: 'center', padding: '16px 20px' }}>
          {/* 사이트 + 상태 */}
          <div style={{ minWidth: 0 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 6 }}>
              <PlanBadge plan={s.plan} ended={ended} />
              {s.billing && <span style={{ fontSize: 11, color: 'var(--faint)', fontWeight: 600 }}>{s.billing}</span>}
            </div>
            <div style={{ fontSize: 17, fontWeight: 800, letterSpacing: -.3, color: ended ? 'var(--muted)' : 'var(--ink)' }}>{s.name}</div>
            <div style={{ fontSize: 12, color: 'var(--faint)', marginTop: 1, marginBottom: 9 }}>{s.domain}</div>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, padding: '4px 11px 4px 9px', borderRadius: 20, background: st.soft, color: st.ink, fontSize: 12.5, fontWeight: 800 }}>
              <span style={{ width: 7, height: 7, borderRadius: 4, background: st.color }} />
              {s.status.label}
            </span>
          </div>

          {/* 사용량 강조 */}
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 22, padding: '0 26px' }}>
            <V2Bar ch={s.usage.video} label="영상 용량" ended={ended} />
            <V2Bar ch={s.usage.enroll} label="수강신청" ended={ended} />
          </div>

          {/* 결제 */}
          <div style={{ borderLeft: '1px solid var(--line-2)', paddingLeft: 20 }}>
            <div style={{ fontSize: 11, color: 'var(--faint)', fontWeight: 600, marginBottom: 3 }}>요금</div>
            <PriceLine price={s.price} size={19} color={ended ? 'var(--muted)' : 'var(--ink)'} />
            <div style={{ fontSize: 11, color: 'var(--faint)', fontWeight: 600, marginTop: 8 }}>다음 결제일</div>
            <div className="tnum" style={{ fontSize: 13, fontWeight: 800, color: s.nextUrgent ? 'var(--bad)' : 'var(--ink-2)' }}>{s.next}</div>
            <div className="tnum" style={{ fontSize: 11.5, color: 'var(--faint)', marginTop: 6 }}>
              {s.period ? (s.period.unlimited ? `${s.period.start} · 무제한` : `${s.period.start} ~ ${s.period.end}`) : '구독 기간 —'}
            </div>
          </div>

          {/* 액션 */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8, alignItems: 'stretch', paddingLeft: 18 }}>
            {s.actions.slice().reverse().map((a, i) => <ActionBtn key={i} act={a} ended={ended} />)}
          </div>
        </div>

        {/* 경고 스트립 */}
        {s.warning && (
          <div style={{
            display: 'flex', alignItems: 'center', gap: 8, padding: '10px 20px',
            background: s.warning.tone === 'danger' ? 'var(--bad-soft)' : 'var(--warn-soft)',
            color: s.warning.tone === 'danger' ? 'var(--bad-ink)' : 'var(--warn-ink)',
            fontSize: 12.5, fontWeight: 700, borderTop: '1px solid rgba(0,0,0,.04)',
          }}>{s.warning.text}</div>
        )}
      </div>
    </div>
  );
}

function V2Stat({ label, value, sub, color, soft, emphasize }) {
  return (
    <div style={{
      flex: 1, background: emphasize ? soft : '#fff', borderRadius: 'var(--r)', padding: '16px 18px',
      border: emphasize ? `1.5px solid ${color}` : '1px solid var(--line)', boxShadow: 'var(--sh-sm)',
    }}>
      <div style={{ fontSize: 12, color: 'var(--muted)', fontWeight: 700, marginBottom: 8 }}>{label}</div>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 6 }}>
        <span className="tnum" style={{ fontSize: 30, fontWeight: 800, letterSpacing: -1, color: emphasize ? color : 'var(--ink)' }}>{value}</span>
        <span style={{ fontSize: 13, fontWeight: 700, color: 'var(--faint)' }}>{sub}</span>
      </div>
    </div>
  );
}

function VariantTwo() {
  const D = window.SOLSOL_DATA;
  return (
    <div className="solsol" style={{ width: 1080, background: 'var(--surface)', padding: '34px 34px 40px' }}>
      <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', marginBottom: 20 }}>
        <div>
          <h1 style={{ fontSize: 26, fontWeight: 800, letterSpacing: -.6 }}>내 사이트 관리하기</h1>
          <p style={{ fontSize: 13.5, color: 'var(--muted)', marginTop: 5 }}>내 사이트를 만들고 손쉽게 관리할 수 있어요</p>
        </div>
        <button style={{ height: 42, padding: '0 20px', borderRadius: 10, border: 'none', background: 'var(--ink)', color: '#fff', fontSize: 14, fontWeight: 700 }}>{D.empty.cta}</button>
      </div>

      {/* 요약 통계 */}
      <div style={{ display: 'flex', gap: 12, marginBottom: 14 }}>
        <V2Stat label="총 사이트" value="7" sub="개" />
        <V2Stat label="사용 중" value="4" sub="개" color="var(--ok)" soft="var(--ok-soft)" />
        <V2Stat label="결제 필요" value="2" sub="개" color="var(--bad)" soft="var(--bad-soft)" emphasize />
        <V2Stat label="사용량 90%+" value="1" sub="개" color="var(--warn)" soft="var(--warn-soft)" emphasize />
      </div>

      {/* 조치 필요 안내 + 정렬 */}
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', margin: '18px 2px 12px' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 9 }}>
          <span style={{ width: 8, height: 8, borderRadius: 5, background: 'var(--bad)' }} />
          <h2 style={{ fontSize: 15, fontWeight: 800, color: 'var(--ink)' }}>조치가 필요한 사이트</h2>
          <span className="tnum" style={{ fontSize: 12, fontWeight: 800, color: 'var(--bad)', background: 'var(--bad-soft)', padding: '2px 8px', borderRadius: 20 }}>3</span>
        </div>
        <SortBar active="pay" />
      </div>
      <div style={{ display: 'grid', gap: 12 }}>
        {D.sites.filter((s) => needsPay(s.status.type) || s.usageWarn).map((s) => <V2Card key={s.id} s={s} />)}
      </div>

      {/* 정상 운영 중 */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 9, margin: '24px 2px 12px' }}>
        <span style={{ width: 8, height: 8, borderRadius: 5, background: 'var(--ok)' }} />
        <h2 style={{ fontSize: 15, fontWeight: 800, color: 'var(--ink)' }}>정상 운영 중</h2>
        <span className="tnum" style={{ fontSize: 12, fontWeight: 800, color: 'var(--ok-ink)', background: 'var(--ok-soft)', padding: '2px 8px', borderRadius: 20 }}>3</span>
      </div>
      <div style={{ display: 'grid', gap: 12 }}>
        {D.sites.filter((s) => !needsPay(s.status.type) && !s.usageWarn && s.status.type !== 'ended').map((s) => <V2Card key={s.id} s={s} />)}
      </div>

      {/* 종료됨 */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 9, margin: '24px 2px 12px' }}>
        <span style={{ width: 8, height: 8, borderRadius: 5, background: 'var(--faint)' }} />
        <h2 style={{ fontSize: 15, fontWeight: 800, color: 'var(--muted)' }}>종료됨</h2>
      </div>
      <div style={{ display: 'grid', gap: 12 }}>
        {D.sites.filter((s) => s.status.type === 'ended').map((s) => <V2Card key={s.id} s={s} />)}
      </div>
    </div>
  );
}

Object.assign(window, { VariantTwo });