// 시안 3 — 데이터-비주얼 컨트롤룸 (다크 · 링 게이지 · 결제 KPI) ----------------
function Ring({ ch, label, ended }) {
  const enroll = label === '수강신청';
  const size = 60, sw = 6, r = (size - sw) / 2, c = 2 * Math.PI * r;
  const pct = ch.unlimited ? 8 : ch.pct;
  let col = enroll ? '#22D3EE' : '#8B7BFF';
  if (ch.pct >= 90) col = '#FBBF24';
  if (ended) col = '#4A5066';
  return (
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6 }}>
      <div style={{ position: 'relative', width: size, height: size }}>
        <svg width={size} height={size} style={{ transform: 'rotate(-90deg)' }}>
          <circle cx={size / 2} cy={size / 2} r={r} fill="none" stroke="#262C3D" strokeWidth={sw} />
          <circle cx={size / 2} cy={size / 2} r={r} fill="none" stroke={col} strokeWidth={sw} strokeLinecap="round"
            strokeDasharray={c} strokeDashoffset={c * (1 - pct / 100)}
            style={{ filter: ch.pct >= 90 && !ended ? `drop-shadow(0 0 5px ${col})` : 'none' }} />
        </svg>
        <div style={{ position: 'absolute', inset: 0, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}>
          <span className="tnum" style={{ fontSize: 13, fontWeight: 800, color: ended ? '#5A6072' : '#EEF0F8' }}>{ch.unlimited ? '∞' : ch.pct + '%'}</span>
        </div>
      </div>
      <div style={{ textAlign: 'center' }}>
        <div style={{ fontSize: 10.5, color: '#8A91A6', fontWeight: 600 }}>{label}</div>
        <div className="tnum" style={{ fontSize: 11, fontWeight: 700, color: ended ? '#5A6072' : '#C7CCDB' }}>{ch.used}{ch.unit}<span style={{ color: '#646B80' }}> / {ch.total}</span></div>
      </div>
    </div>
  );
}

function V3Btn({ act, ended }) {
  const base = { height: 32, padding: '0 13px', borderRadius: 8, fontSize: 12.5, fontWeight: 700, border: '1px solid transparent', whiteSpace: 'nowrap' };
  const map = {
    ghost:  { background: 'transparent', borderColor: '#333A4D', color: '#C7CCDB' },
    dark:   { background: '#EEF0F8', color: '#11141F' },
    accent: { background: 'rgba(139,123,255,.16)', color: '#B7AEFF', borderColor: 'rgba(139,123,255,.4)' },
    danger: { background: '#E2304A', color: '#fff' },
  };
  const muted = ended ? { background: 'transparent', borderColor: '#2A3145', color: '#5A6072' } : null;
  return <button style={{ ...base, ...(map[act.kind] || map.ghost), ...(muted || {}) }}>{act.label}</button>;
}

function V3Row({ s }) {
  const ended = s.status.type === 'ended';
  const pay = needsPay(s.status.type);
  const stColor = s.status.type === 'active' ? '#34D399' : pay ? '#F87171' : '#5A6072';
  return (
    <div style={{
      display: 'grid', gridTemplateColumns: '4px 1fr', borderRadius: 14, overflow: 'hidden',
      background: pay ? 'rgba(226,48,74,.07)' : '#171C29',
      border: pay ? '1px solid rgba(248,113,113,.45)' : '1px solid #232938',
      boxShadow: pay ? '0 0 0 1px rgba(248,113,113,.12), 0 8px 26px rgba(226,48,74,.10)' : 'none',
      opacity: ended ? .6 : 1,
    }}>
      <div style={{ background: stColor, boxShadow: `0 0 12px ${stColor}` }} />
      <div>
        <div style={{ display: 'grid', gridTemplateColumns: '264px 1fr 168px auto', alignItems: 'center', padding: '15px 22px', gap: 16 }}>
          {/* 사이트 */}
          <div style={{ minWidth: 0 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 7, marginBottom: 6 }}>
              <span className="tnum" style={{ display: 'inline-flex', alignItems: 'center', height: 18, padding: '0 7px', borderRadius: 5, fontSize: 11, fontWeight: 800, letterSpacing: .4,
                color: ended ? '#7A8197' : '#fff',
                background: ended ? '#2A3145' : (s.plan === 'FREE' ? '#10A36A' : '#5A4DF2') }}>{s.plan}</span>
              {s.billing && <span style={{ fontSize: 11, color: '#717892', fontWeight: 600 }}>{s.billing}</span>}
            </div>
            <div style={{ fontSize: 17, fontWeight: 800, letterSpacing: -.3, color: ended ? '#7A8197' : '#F2F4FA' }}>{s.name}</div>
            <div style={{ fontSize: 12, color: '#646B80', marginTop: 1, marginBottom: 8 }}>{s.domain}</div>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, fontSize: 12.5, fontWeight: 700, color: stColor }}>
              <span style={{ width: 7, height: 7, borderRadius: 4, background: stColor, boxShadow: `0 0 7px ${stColor}` }} />
              {s.status.label}
            </span>
          </div>

          {/* 결제 정보 */}
          <div style={{ borderLeft: '1px solid #262C3D', paddingLeft: 22 }}>
            <div style={{ fontSize: 11, color: '#717892', fontWeight: 600, marginBottom: 4 }}>요금</div>
            <V3Price price={s.price} />
            <div style={{ fontSize: 11, color: '#717892', fontWeight: 600, marginTop: 9 }}>다음 결제일</div>
            <div className="tnum" style={{ fontSize: 13, fontWeight: 800, color: s.nextUrgent ? '#F87171' : '#C7CCDB' }}>{s.next}</div>
            <div className="tnum" style={{ fontSize: 11, color: '#646B80', marginTop: 5 }}>
              {s.period ? (s.period.unlimited ? `${s.period.start} · 무제한` : `${s.period.start} ~ ${s.period.end}`) : '—'}
            </div>
          </div>

          {/* 링 게이지 (사용량 강조) */}
          <div style={{ display: 'flex', gap: 16, justifyContent: 'center' }}>
            <Ring ch={s.usage.video} label="영상 용량" ended={ended} />
            <Ring ch={s.usage.enroll} label="수강신청" ended={ended} />
          </div>

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

        {s.warning && (
          <div style={{
            display: 'flex', alignItems: 'center', gap: 8, padding: '9px 22px',
            background: s.warning.tone === 'danger' ? 'rgba(226,48,74,.12)' : 'rgba(224,138,0,.12)',
            color: s.warning.tone === 'danger' ? '#FCA5A5' : '#FCD34D',
            fontSize: 12.5, fontWeight: 700, borderTop: '1px solid rgba(255,255,255,.05)',
          }}>{s.warning.text}</div>
        )}
      </div>
    </div>
  );
}

function V3Price({ price }) {
  if (price.free) return <span className="tnum" style={{ fontSize: 18, fontWeight: 800, color: '#F2F4FA' }}>0 <span style={{ fontSize: 13 }}>원</span></span>;
  return (
    <span style={{ display: 'inline-flex', alignItems: 'baseline', gap: 5, flexWrap: 'wrap' }}>
      {price.original && <span className="tnum" style={{ fontSize: 11.5, color: '#5A6072', textDecoration: 'line-through' }}>{won(price.original)}</span>}
      <span className="tnum" style={{ fontSize: 18, fontWeight: 800, color: '#F2F4FA' }}>{won(price.amount)} <span style={{ fontSize: 13 }}>원</span></span>
      {price.discountPct && <span className="tnum" style={{ fontSize: 11, fontWeight: 800, color: '#FCA5A5' }}>{price.discountPct}%↓</span>}
    </span>
  );
}

function VariantThree() {
  const D = window.SOLSOL_DATA;
  return (
    <div className="solsol" style={{ width: 1080, background: '#0F131D', padding: '34px 34px 42px' }}>
      <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', marginBottom: 22 }}>
        <div>
          <h1 style={{ fontSize: 26, fontWeight: 800, letterSpacing: -.6, color: '#F4F6FC' }}>내 사이트 관리하기</h1>
          <p style={{ fontSize: 13.5, color: '#8A91A6', marginTop: 5 }}>내 사이트를 만들고 손쉽게 관리할 수 있어요</p>
        </div>
        <SortBar active="usage" accentVar="#0F131D" />
      </div>

      {/* KPI 스트립 */}
      <div style={{ display: 'flex', gap: 14, marginBottom: 20, padding: '18px 22px', background: '#151A26', border: '1px solid #232938', borderRadius: 16 }}>
        {[
          { l: '운영 사이트', v: '7', u: '개', c: '#EEF0F8' },
          { l: '이번 달 결제 예정', v: '1,040,000', u: '원', c: '#B7AEFF' },
          { l: '결제 필요', v: '2', u: '건', c: '#FCA5A5', glow: true },
          { l: '사용량 90%+', v: '1', u: '건', c: '#FCD34D', glow: true },
        ].map((k, i) => (
          <div key={i} style={{ flex: 1, borderLeft: i ? '1px solid #262C3D' : 'none', paddingLeft: i ? 22 : 0 }}>
            <div style={{ fontSize: 11.5, color: '#717892', fontWeight: 700, marginBottom: 7 }}>{k.l}</div>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 5 }}>
              <span className="tnum" style={{ fontSize: 26, fontWeight: 800, letterSpacing: -.6, color: k.c, textShadow: k.glow ? `0 0 16px ${k.c}66` : 'none' }}>{k.v}</span>
              <span style={{ fontSize: 12.5, fontWeight: 700, color: '#646B80' }}>{k.u}</span>
            </div>
          </div>
        ))}
        <button style={{ alignSelf: 'center', height: 42, padding: '0 20px', borderRadius: 10, border: 'none', background: '#5A4DF2', color: '#fff', fontSize: 13.5, fontWeight: 700 }}>{D.empty.cta}</button>
      </div>

      <div style={{ display: 'grid', gap: 12 }}>
        {D.sites.map((s) => <V3Row key={s.id} s={s} />)}
      </div>
    </div>
  );
}

Object.assign(window, { VariantThree });