/* =====================================================================
 * Afflix Subscriber SaaS — v2 보강 (디팀 v2.0 · 2026-05-08)
 * ---------------------------------------------------------------------
 * 정본 기준: 감사_구독자SaaS_2차보강_디팀전달안_20260508.md
 * 변경:
 *   · Shell — 어드민형 독립 스크롤 구조 (.saas-shell height:100vh)
 *   · Shell — 로고 하단 구분선 제거 (검색바 라인과 미세 어긋남 시정)
 *   · 관리 4화면 모두 활성화 (sub/pay/use/set) — 2차 뱃지 → 활성
 *   · 2차 이후 후보 4개(prog/blog/ref/help) — 곧 출시 비활성 항목으로 노출
 *   · Dashboard — 구독 스트립 + 최근 결과 + 오늘 할 일 카드 추가
 *   · NEW: SaasSubscription (구독 상태 대시보드)
 *   · NEW: SaasBilling (FREE/BASIC/PRO 비교 + 청구 이력 6건)
 *   · NEW: SaasQuota (이번 달 발행/한도 + 30일 sparkline + 미니 카드 3종)
 *   · NEW: SaasSettings (발행 알림·시간대·기본값·계정)
 * 의존: v12/thumb-t01a.jsx, v12/saas-screens.jsx (v1 base 위 override)
 * ===================================================================== */

const { useState: u2, useMemo: m2 } = React;

// 2026-05-25 F10-⑤ P0 (CFO 결재 ⑤ 정합): 가상 사용자 demo data 명시 라벨
//   본 객체는 실 사용자 가입 전 SaaS UI 미리보기·시연용 데모 데이터.
//   F2 (회원 가입 ID/PW) LIVE 후 실 사용자 분기로 교체될 예정.
//   화면 상단에 "🧪 운영 예시 모드" 배지 노출 의무 (감사 결재 5/25).
const SAAS_USER2 = {
  name:'운영 예시', plan:'Basic · 1개월 무료', plan_kind:'basic_trial',
  trial_end:'2026-06-07', days_left:30,
  month_publish:142, quota:300,
  recent_revenue:'₩2,840,000', publish_today:1, publish_yesterday:1,
  card_registered:false, next_billing:null,
  email:'demo@afflix.com',
  is_demo:true,                              // F10-⑤ 가상 사용자 명시 (감사 결재)
  demo_label:'🧪 운영 예시 모드',             // 화면 배지 표시 데이터
  demo_disclaimer:'본 화면은 운영 예시 데모 데이터입니다. 실제 발행·결제·수치 아님.',
};
// 2026-05-26 2기 개발팀장 정정 (CFO 결재 ⑤ P0 마감 라운드):
//   - name '정태우' → '운영 예시' (감사 결재 5/25 의무 적용)
//   - email 'taewoo@afflix.com' → 'demo@afflix.com'
//   - 잔여: 화면 상단 배지 노출 (Shell render) 별건 점검 후 진행
// LIVE wrapper 정합 (saas-data-runtime.js가 mutation) · 디팀 v3.10 정본 시 디팀 직접 추가 권고
window.SAAS_USER2 = SAAS_USER2;

/* ===== 공통 셸 v2 ===== */
window.SaasShell = function({ route, setRoute, children, theme, setTheme, onLogout }){
  const menu = [
    { id:'home',  label:'대시보드',     sub:'오늘 할 일 · 최근 결과',          emoji:'🏠' },
    { id:'setup', label:'발행 설정',     sub:'AI 자동 · 키워드 · 시간대',       emoji:'🚀' },
    { id:'grid',  label:'템플릿 패키지', sub:'카테고리별 템플릿 모음',          emoji:'📦' },
    { id:'perf',  label:'성과 참고',     sub:'발행량 · 반응 · 인기 글',         emoji:'📈' },
  ];
  const mgmt = [
    { id:'sub', label:'내 구독',     sub:'플랜 · 남은 기간 · 현재 상태',     emoji:'💎' },
    { id:'pay', label:'결제·플랜',   sub:'결제수단 · 결제내역 · 플랜 변경',  emoji:'💳' },
    { id:'use', label:'사용량',       sub:'이번 달 발행량 · 남은 한도',         emoji:'📊' },
    { id:'set', label:'설정',         sub:'알림 · 외부 연동 · 보안',             emoji:'⚙️' },
  ];
  // 2차 이후 후보(진행현황/내 블로그/레퍼럴/1:1문의) — 정본 §5 — 좌측 메뉴에 미리 노출 X

  return (
    <div className="saas-shell">
      <aside className="saas-side">
        <div className="saas-logo">AFFLIX<span>SaaS</span></div>
        <nav className="saas-nav">
          <div className="saas-mgmt-section">
            {menu.map(m => (
              <button key={m.id}
                className={'saas-mgmt-row' + (route===m.id?' is-active':'')}
                onClick={()=>setRoute(m.id)}>
                <span className="saas-mgmt-emoji">{m.emoji}</span>
                <span className="saas-mgmt-body">
                  <span className="saas-mgmt-label">{m.label}</span>
                  <span className="saas-mgmt-sub">{m.sub}</span>
                </span>
              </button>
            ))}
          </div>

          <div className="saas-mgmt">
            <div className="saas-mgmt-head">
              <span className="saas-mgmt-title">관리</span>
            </div>
            <div className="saas-mgmt-section">
              {mgmt.map(m => (
                <button key={m.id}
                  className={'saas-mgmt-row' + (route===m.id?' is-active':'')}
                  onClick={()=>setRoute(m.id)}>
                  <span className="saas-mgmt-emoji">{m.emoji}</span>
                  <span className="saas-mgmt-body">
                    <span className="saas-mgmt-label">{m.label}</span>
                    <span className="saas-mgmt-sub">{m.sub}</span>
                  </span>
                </button>
              ))}
            </div>
          </div>

        </nav>
        <div className="saas-side-foot">
          <div className="saas-plan-chip">{SAAS_USER2.plan}</div>
          <div className="saas-plan-meta">이번 달 {SAAS_USER2.month_publish} / {SAAS_USER2.quota}</div>
        </div>
      </aside>
      <div className="saas-main">
        {SAAS_USER2.is_demo && (
          <div className="saas-demo-strip" style={{background:'#FFF4E5',border:'1px solid #F0B97C',color:'#7A4A12',padding:'8px 16px',fontSize:13,fontWeight:600,display:'flex',alignItems:'center',gap:8}}>
            <span>{SAAS_USER2.demo_label}</span>
            <span style={{fontWeight:400,opacity:.85}}>· {SAAS_USER2.demo_disclaimer}</span>
          </div>
        )}
        {/* F5-⑤ 사용량 progress bar (CFO 결재 2C · 3 위치 통일 — 대시보드 양식) */}
        <div className="saas-quota-bar" style={{background:'#F0F4FF',border:'1px solid #C5D2F0',padding:'10px 16px',fontSize:13,display:'flex',alignItems:'center',gap:12}}>
          <span style={{fontWeight:700,color:'#1E3A8A'}}>📊 이번 달 사용량</span>
          <div style={{flex:1,background:'#E5E7EB',borderRadius:6,height:8,overflow:'hidden'}}>
            <div style={{width:`${Math.min(100,Math.round((SAAS_USER2.month_publish/SAAS_USER2.quota)*100))}%`,height:'100%',background:(SAAS_USER2.month_publish/SAAS_USER2.quota)>=0.9?'#EF4444':(SAAS_USER2.month_publish/SAAS_USER2.quota)>=0.7?'#F59E0B':'#10B981',transition:'width 300ms'}}/>
          </div>
          <span style={{fontWeight:700,color:'#111827',minWidth:90,textAlign:'right'}}>{SAAS_USER2.month_publish} / {SAAS_USER2.quota}</span>
          <span style={{color:'#6B7280',fontSize:12}}>({SAAS_USER2.plan_kind === 'basic_trial' ? '무료 체험' : SAAS_USER2.plan})</span>
        </div>
        <header className="saas-top">
          <div className="saas-top-search">
            <input placeholder="템플릿·카테고리·키워드 검색"/>
          </div>
          <div className="saas-top-actions">
            <div className="saas-theme-toggle" role="group" aria-label="테마">
              <button className={theme==='light'?'is-on':''} onClick={()=>setTheme('light')} title="라이트">☀</button>
              <button className={theme==='dark'?'is-on':''} onClick={()=>setTheme('dark')} title="다크">☾</button>
            </div>
            <button className="saas-icon-btn" title="알림">◔</button>
            <button className="saas-icon-btn" title="로그아웃" onClick={onLogout}>↪</button>
            <div className="saas-profile"><div className="saas-avatar">정</div></div>
          </div>
        </header>
        <main className="saas-canvas">{children}</main>
      </div>
    </div>
  );
};

/* ===== Dashboard v2 — 구독 스트립 + 최근 결과 + 오늘 할 일 ===== */
const _DashV1 = window.SaasDashboard;
window.SaasDashboard = function(props){
  const u = SAAS_USER2;
  return (
    <div className="saas-page">
      {/* 구독 상태 스트립 */}
      <div className="saas-sub-strip" style={{
        display:'flex',alignItems:'center',gap:18,padding:'14px 22px',
        background:'var(--saas-accent-softer)',border:'1px solid var(--saas-border)',
        borderRadius:12,marginBottom:24,flexWrap:'wrap'
      }}>
        <span className="saas-plan-chip">{u.plan}</span>
        <span style={{fontSize:14,color:'var(--saas-t1)',fontWeight:700}}>
          {u.trial_end}까지 · 남은 <b style={{color:'var(--saas-accent)'}}>{u.days_left}일</b>
        </span>
        {/* F4-B-1 (2026-05-27 · CFO 결재 1-A·B 직렬 정합): 현재 phase + 다음 진입일 */}
        {u.phase && (
          <span style={{fontSize:13,color:'var(--saas-t2)',fontWeight:600,padding:'4px 10px',background:'rgba(74,144,255,.08)',borderRadius:8}}>
            현재: <b style={{color:'var(--saas-accent)'}}>{
              u.phase === 'trial' ? '무료 체험' :
              u.phase === 'setup' ? '셋업 (30% 할인)' :
              u.phase === 'normal' ? '정상가' :
              u.phase === 'contract' ? '약정 (25% 할인)' : u.phase
            }</b>
            {u.phase_days_from_start != null && <span style={{marginLeft:6,color:'var(--saas-t3)'}}>· D+{u.phase_days_from_start}</span>}
            {u.next_phase_at && <span style={{marginLeft:6,color:'var(--saas-t3)'}}>· 다음: {u.next_phase_at.slice(0,10)}</span>}
          </span>
        )}
        <span style={{fontSize:13,color:'var(--saas-t3)'}}>
          이번 달 발행 {u.month_publish} / {u.quota} · 어제 자동 발행 {u.publish_yesterday}건
        </span>
        <span style={{flex:1}}/>
        <button className="saas-btn saas-btn-primary" style={{fontSize:13,padding:'8px 14px'}}
          onClick={()=>props.go('pay')}>업그레이드</button>
      </div>

      <_DashV1 {...props}/>

      {/* 오늘 할 일 + 최근 결과 */}
      <section className="saas-section" style={{marginTop:32}}>
        <div className="saas-section-head"><h3 className="saas-h3">오늘 할 일</h3></div>
        <div className="saas-status-list">
          <div className="saas-status-row">
            <span className="saas-status-dot is-warn"/>
            <div className="saas-status-body">
              <span className="saas-status-label">결제 수단을 등록하면 1개월 이후에도 끊김 없이 발행돼요</span>
              <span className="saas-status-sub">남은 13일 — 등록은 1분이면 끝</span>
            </div>
            <button className="saas-status-action" onClick={()=>props.go('pay')}>등록하기 →</button>
          </div>
          <div className="saas-status-row">
            <span className="saas-status-dot is-ok"/>
            <div className="saas-status-body">
              <span className="saas-status-label">어제 발행 1건이 인기 글에 진입했어요 · CTR 6.4%</span>
              <span className="saas-status-sub">T01_A · 전자 · 가성비 · 반응 +218</span>
            </div>
            <button className="saas-status-action" onClick={()=>props.go('perf')}>성과 보기 →</button>
          </div>
          <div className="saas-status-row">
            <span className="saas-status-dot"/>
            <div className="saas-status-body">
              <span className="saas-status-label">발행 시간을 1개 더 추가하면 한 달 +30건이 가능해요</span>
              <span className="saas-status-sub">현재 09:00 1회 → 09:00·15:00 2회 권장</span>
            </div>
            <button className="saas-status-action" onClick={()=>props.go('set')}>설정하기 →</button>
          </div>
        </div>
      </section>
    </div>
  );
};

/* ===== NEW · 내 구독 (구독 상태 대시보드) ===== */
window.SaasSubscription = function({ go }){
  const u = SAAS_USER2;
  const used_pct = u.month_publish / u.quota * 100;
  return (
    <div className="saas-page">
      <div className="saas-mg-head">
        <div className="saas-greeting" style={{margin:0}}>
          <div className="saas-kicker">관리</div>
          <h1 className="saas-h1">내 구독</h1>
          <p className="saas-lead">지금 발행 가능한 상태인지, 며칠 남았는지 한 화면에서 확인하세요.</p>
        </div>
        <div className="saas-mg-head-meta">
          <span>가입일 <b>2026-05-07</b></span>
          <span>다음 결제 <b>{u.card_registered? '2026-06-07' : '미예정'}</b></span>
        </div>
      </div>

      <div className="saas-sub-hero">
        <div className="saas-sub-hero-top">
          <span className="saas-sub-hero-plan">{u.plan}</span>
          <span className="saas-sub-hero-status">● 정상 발행 중</span>
        </div>
        <div className="saas-sub-hero-h">
          {u.trial_end}까지 — <em>{u.days_left}일</em> 남았어요
        </div>
        <div className="saas-sub-hero-stat-row">
          <div>
            <div className="saas-sub-hero-stat-num">{u.month_publish}<span style={{fontSize:14,color:'var(--saas-t3)',fontWeight:700}}> / {u.quota}</span></div>
            <div className="saas-sub-hero-stat-lbl">이번 달 발행</div>
          </div>
          <div>
            <div className="saas-sub-hero-stat-num">{u.publish_yesterday}<span style={{fontSize:14,color:'var(--saas-t3)',fontWeight:700}}>건</span></div>
            <div className="saas-sub-hero-stat-lbl">어제 자동 발행</div>
          </div>
          <div>
            <div className="saas-sub-hero-stat-num">{u.recent_revenue}</div>
            <div className="saas-sub-hero-stat-lbl">최근 30일 수익</div>
          </div>
        </div>
        <div className="saas-sub-hero-cta">
          <button className="saas-btn saas-btn-primary" onClick={()=>go('pay')}>Standard로 업그레이드</button>
          <button className="saas-btn saas-btn-ghost" onClick={()=>go('pay')}>결제 수단 등록</button>
        </div>
      </div>

      <div className="saas-mg-grid" style={{marginTop:32}}>
        <section className="saas-section" style={{margin:0}}>
          <div className="saas-section-head"><h3 className="saas-h3">발행 상태</h3></div>
          <table className="saas-em-table">
            <tbody>
              <tr>
                <td className="saas-em-ico">📝</td>
                <td className="saas-em-body">
                  <div className="saas-em-label">자동 발행 활성</div>
                  <div className="saas-em-sub">매일 09:00 · 카테고리 전자 · 템플릿 T01_A</div>
                </td>
                <td className="saas-em-state"><span className="saas-em-pill is-ok">정상</span></td>
                <td className="saas-em-act"><button className="saas-status-action" onClick={()=>go('setup')}>변경 →</button></td>
              </tr>
              <tr>
                <td className="saas-em-ico">🔗</td>
                <td className="saas-em-body">
                  <div className="saas-em-label">티스토리 연동</div>
                  <div className="saas-em-sub">taewoo.tistory.com · 토큰 만료 2026-08-12</div>
                </td>
                <td className="saas-em-state"><span className="saas-em-pill is-ok">정상</span></td>
                <td className="saas-em-act"><button className="saas-status-action" onClick={()=>go('set')}>관리 →</button></td>
              </tr>
              <tr>
                <td className="saas-em-ico">💳</td>
                <td className="saas-em-body">
                  <div className="saas-em-label">{u.card_registered?'결제 수단 등록 완료':'결제 수단 미등록'}</div>
                  <div className="saas-em-sub">{u.card_registered?'마스터카드 ****-1234':'1개월 후 발행이 일시 정지될 수 있어요'}</div>
                </td>
                <td className="saas-em-state"><span className={'saas-em-pill ' + (u.card_registered?'is-ok':'is-warn')}>{u.card_registered?'정상':'주의'}</span></td>
                <td className="saas-em-act"><button className="saas-status-action" onClick={()=>go('pay')}>{u.card_registered?'변경':'등록'} →</button></td>
              </tr>
              <tr>
                <td className="saas-em-ico">🔔</td>
                <td className="saas-em-body">
                  <div className="saas-em-label">알림 이메일 미설정</div>
                  <div className="saas-em-sub">발행 결과를 매일 아침 받아볼 수 있어요</div>
                </td>
                <td className="saas-em-state"><span className="saas-em-pill">미설정</span></td>
                <td className="saas-em-act"><button className="saas-status-action" onClick={()=>go('set')}>설정 →</button></td>
              </tr>
            </tbody>
          </table>
        </section>

        <section className="saas-section" style={{margin:0}}>
          <div className="saas-section-head"><h3 className="saas-h3">최근 발행 5건</h3></div>
          <ul className="saas-rec5">
            {[
              { d:'05-07', t:'09:00', name:'T01_A', cat:'전자', ctr:6.4, react:218, top:true },
              { d:'05-06', t:'09:00', name:'T01_A', cat:'전자', ctr:5.8, react:184 },
              { d:'05-05', t:'09:00', name:'T03_A', cat:'전자', ctr:5.2, react:142 },
              { d:'05-04', t:'09:00', name:'T01_A', cat:'생활', ctr:4.9, react:128 },
              { d:'05-03', t:'09:00', name:'T02_A', cat:'뷰티', ctr:4.4, react:96 },
            ].map((r,i)=>(
              <li key={i} className={'saas-rec5-row' + (r.top?' is-top':'')}>
                <div className="saas-rec5-date">
                  <b>{r.d}</b>
                  <span>{r.t}</span>
                </div>
                <div className="saas-rec5-meta">
                  <div className="saas-rec5-name">{r.name}</div>
                  <div className="saas-rec5-cat">{r.cat}</div>
                </div>
                <div className="saas-rec5-ctr">
                  <div className="saas-rec5-ctr-num">{r.ctr}<span>%</span></div>
                  <div className="saas-rec5-bar"><div style={{width:(r.ctr/7*100)+'%'}}/></div>
                </div>
                <div className="saas-rec5-react">
                  <b>{r.react}</b>
                  <span>반응</span>
                </div>
              </li>
            ))}
          </ul>
        </section>
      </div>
    </div>
  );
};

/* ===== NEW · 결제·플랜 (FREE/BASIC/PRO 비교 + 청구 이력 6건) ===== */
window.SaasBilling = function({ go }){
  // 정본 §4 — Basic / Standard / Premium · 1개월 무료 통일 · 보수적 표현
  const plans = [
    { kind:'basic', name:'Basic', price:'₩99,000', cycle:'/ 월',
      tagline:'개인 운영자 1인 1블로그 시작 단계.',
      feats:[
        ['월 발행량 — 베이스라인 누적 후 확정', true],
        ['카테고리 1개 운영', true],
        ['검증 템플릿 10종', true],
        ['이메일 알림', true],
        ['우선 기술 지원', false],
      ], cta:'현재 사용 중 (1개월 무료)', current:true },
    { kind:'standard', name:'Standard', price:'₩199,000', cycle:'/ 월',
      tagline:'안정 운영 단계 · 다중 카테고리.', popular:true,
      feats:[
        ['월 발행량 — 추정 Basic ×1.5~2', true],
        ['카테고리 2~3개 운영', true],
        ['검증 템플릿 10종 사용', true],
        ['이메일 + 슬랙 알림', true],
        ['우선 기술 지원', false],
      ], cta:'Standard로 전환' },
    { kind:'premium', name:'Premium', price:'₩399,000', cycle:'/ 월',
      tagline:'전업 운영 · 우선 기술 지원 포함.',
      feats:[
        ['월 발행량 — 추정 Standard ×2 이상', true],
        ['카테고리 무제한 운영', true],
        ['검증 템플릿 10종 + 베타', true],
        ['이메일 + 슬랙 + 카카오톡', true],
        ['우선 기술 지원 (영업일 24h)', true],
      ], cta:'Premium으로 전환' },
  ];

  const bills = [
    { date:'2026-05-07', plan:'Basic',    amt:'₩0',       method:'—',          st:'paid', label:'1개월 무료 체험 시작' },
    { date:'2026-04-07', plan:'Standard', amt:'₩199,000', method:'**** 1234', st:'paid', label:'정기 결제' },
    { date:'2026-03-07', plan:'Standard', amt:'₩199,000', method:'**** 1234', st:'paid', label:'정기 결제' },
    { date:'2026-02-07', plan:'Basic',    amt:'₩99,000',  method:'**** 1234', st:'paid', label:'정기 결제' },
    { date:'2026-01-07', plan:'Basic',    amt:'₩99,000',  method:'**** 1234', st:'paid', label:'정기 결제' },
    { date:'2025-12-07', plan:'Basic',    amt:'₩99,000',  method:'**** 1234', st:'failed', label:'결제 실패' },
  ];

  return (
    <div className="saas-page">
      <div className="saas-mg-head">
        <div className="saas-greeting" style={{margin:0}}>
          <div className="saas-kicker">관리</div>
          <h1 className="saas-h1">결제·플랜</h1>
          <p className="saas-lead">지금 내 상황에 무엇이 더 맞는지 — 사용량 기준으로 골라보세요.</p>
        </div>
        <div className="saas-mg-head-meta">
          <span>현재 플랜 <b>{SAAS_USER2.plan}</b></span>
          <span>다음 결제 <b>미예정</b></span>
        </div>
      </div>

      <section className="saas-section" style={{marginTop:0}}>
        <div className="saas-section-head"><h3 className="saas-h3">플랜 비교</h3></div>
        <div className="saas-plan-grid">
          {plans.map(p => (
            <div key={p.kind} className={'saas-plan-card'+(p.current?' is-current':'')+(p.popular?' is-popular':'')}>
              <div className="saas-plan-name">{p.name}</div>
              <div className="saas-plan-price">
                <span className="saas-plan-price-num">{p.price}</span>
                <span className="saas-plan-price-cycle">{p.cycle}</span>
              </div>
              <div className="saas-plan-tagline">{p.tagline}</div>
              <ul className="saas-plan-feats">
                {p.feats.map(([t,on],i)=> <li key={i} className={on?'':'is-off'}>{t}</li>)}
              </ul>
              <div className="saas-plan-cta">
                {p.current
                  ? <button className="saas-btn saas-btn-ghost saas-btn-block" disabled>{p.cta}</button>
                  : <button className={'saas-btn saas-btn-block '+(p.popular?'saas-btn-primary':'saas-btn-ghost')}>{p.cta}</button>}
              </div>
            </div>
          ))}
        </div>
      </section>

      <section className="saas-section">
        <div className="saas-section-head"><h3 className="saas-h3">결제 수단</h3></div>
        <div className="saas-status-row" style={{display:'grid'}}>
          <span className="saas-status-dot is-warn"/>
          <div className="saas-status-body">
            <span className="saas-status-label">등록된 결제 수단이 없습니다</span>
            <span className="saas-status-sub">1개월 무료 종료 전에 카드를 등록해야 발행이 끊기지 않아요. 색인·SEO 누적 3개월 = 첫 안정 수익 구간 진입.</span>
          </div>
          <button className="saas-btn saas-btn-primary" style={{fontSize:13,padding:'8px 14px'}}>+ 카드 등록</button>
        </div>
      </section>

      <section className="saas-section">
        <div className="saas-section-head">
          <h3 className="saas-h3">청구 이력</h3>
          <span className="saas-section-meta">최근 6건 · <button className="saas-status-action" style={{padding:'4px 8px'}}>전체 다운로드 ↓</button></span>
        </div>
        <div className="saas-card" style={{padding:0,overflow:'hidden'}}>
          <table className="saas-bill-table">
            <thead><tr>
              <th>일자</th><th>플랜</th><th>금액</th><th>수단</th><th>상태</th><th>영수증</th>
            </tr></thead>
            <tbody>
              {bills.map((b,i)=>(
                <tr key={i}>
                  <td>{b.date}</td>
                  <td>{b.plan}</td>
                  <td className="is-amt">{b.amt}</td>
                  <td>{b.method}</td>
                  <td><span className={'saas-bill-status is-'+b.st}>{b.label}</span></td>
                  <td><button className="saas-status-action" style={{padding:'4px 6px'}}>↓ PDF</button></td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </section>
    </div>
  );
};

/* ===== NEW · 사용량·쿼터 ===== */
window.SaasQuota = function({ go }){
  const u = SAAS_USER2;
  const pct = Math.round(u.month_publish/u.quota*100);
  // 30일 sparkline (mock)
  const days = [3,4,3,5,4,3,6,5,4,5,6,5,4,3,5,6,7,5,4,5,6,5,4,5,6,7,6,5,4,1];
  const max = Math.max(...days);
  return (
    <div className="saas-page">
      <div className="saas-mg-head">
        <div className="saas-greeting" style={{margin:0}}>
          <div className="saas-kicker">관리</div>
          <h1 className="saas-h1">사용량·쿼터</h1>
          <p className="saas-lead">이번 달 얼마나 썼는지, 언제 한도에 닿을지 — 숫자로 가볍게.</p>
        </div>
        <div className="saas-mg-head-meta">
          <span>리셋 <b>2026-06-01</b></span>
          <span>플랜 한도 <b>{u.quota}건</b></span>
        </div>
      </div>

      <div className="saas-quota-hero">
        <div className="saas-quota-big">
          <div className="saas-quota-big-label">이번 달 발행</div>
          <div className="saas-quota-big-num">
            <b>{u.month_publish}</b><span>/ {u.quota}건 · {pct}%</span>
          </div>
          <div className="saas-quota-big-bar"><div style={{width:pct+'%'}}/></div>
          <div className="saas-quota-big-meta">
            <span>5월 1일</span>
            <span>오늘 (5월 8일)</span>
            <span>5월 31일</span>
          </div>
          {pct >= 40 && (
            <div className="saas-quota-warn">
              <span style={{fontSize:16}}>⚠</span>
              <div>
                <b>예상 소진 5월 24일경</b> — 현재 페이스로는 한도 도달 전 1주일이 빠듯합니다.
                <br/>발행 시간을 1회로 줄이거나 PRO 플랜(무제한)을 검토해보세요.
              </div>
            </div>
          )}
        </div>

        <div className="saas-card" style={{margin:0}}>
          <h3 className="saas-h3">최근 30일 발행 추세</h3>
          <div className="saas-spark">
            {days.map((d,i)=>(
              <div key={i} style={{height:(d/max*100)+'%',
                opacity: i===days.length-1 ? 1 : 0.55+i/days.length*0.4}}
                title={`-${days.length-1-i}일 · ${d}건`}/>
            ))}
          </div>
          <div className="saas-spark-row">
            <span>30일 전</span><span>15일 전</span><span>오늘</span>
          </div>
          <div style={{marginTop:14,fontSize:13,color:'var(--saas-t2)',lineHeight:1.6}}>
            평균 <b>4.7건/일</b> · 최고 <b>{max}건</b> · 최저 <b>{Math.min(...days)}건</b>
          </div>
        </div>
      </div>

      <div className="saas-quota-mini-row">
        <div className="saas-quota-mini">
          <div className="saas-quota-mini-label">자동 발행 성공률</div>
          <div className="saas-quota-mini-val">98.2%</div>
          <div className="saas-quota-mini-bar"><div style={{width:'98%'}}/></div>
          <div style={{fontSize:11,color:'var(--saas-t3)',marginTop:6}}>최근 30일 · 실패 2건</div>
        </div>
        <div className="saas-quota-mini">
          <div className="saas-quota-mini-label">남은 발행</div>
          <div className="saas-quota-mini-val">{u.quota - u.month_publish}건</div>
          <div className="saas-quota-mini-bar"><div style={{width:(100-pct)+'%',background:'#1F8A5B'}}/></div>
          <div style={{fontSize:11,color:'var(--saas-t3)',marginTop:6}}>오늘 페이스로 약 33일치</div>
        </div>
        <div className="saas-quota-mini">
          <div className="saas-quota-mini-label">초과 위험도</div>
          <div className="saas-quota-mini-val" style={{color:'#E07B00'}}>중간</div>
          <div className="saas-quota-mini-bar"><div style={{width:'55%',background:'#E07B00'}}/></div>
          <div style={{fontSize:11,color:'var(--saas-t3)',marginTop:6}}>현재 페이스 기준</div>
        </div>
      </div>

      <section className="saas-section" style={{marginTop:24}}>
        <div className="saas-section-head"><h3 className="saas-h3">사용량 줄이기 / 늘리기</h3></div>
        <div className="saas-status-list">
          <div className="saas-status-row">
            <span className="saas-status-dot is-warn"/>
            <div className="saas-status-body">
              <span className="saas-status-label">발행 시간을 2회 → 1회로 줄이기</span>
              <span className="saas-status-sub">예상 절감 -30건/월 · 한도 안에서 안정 운영</span>
            </div>
            <button className="saas-status-action" onClick={()=>go('set')}>설정</button>
          </div>
          <div className="saas-status-row">
            <span className="saas-status-dot"/>
            <div className="saas-status-body">
              <span className="saas-status-label">PRO 플랜으로 업그레이드 (한도 제거)</span>
              <span className="saas-status-sub">현재 142건 → PRO에서는 한도 없음 · 월 ₩29,000</span>
            </div>
            <button className="saas-status-action" onClick={()=>go('pay')}>플랜 비교 →</button>
          </div>
        </div>
      </section>
    </div>
  );
};

/* ===== NEW · 환경설정 ===== */
function ToggleRow({ label, sub, on, onChange, right }){
  return (
    <div className="saas-set-row">
      <div className="saas-set-row-body">
        <span className="saas-set-row-label">{label}</span>
        <span className="saas-set-row-sub">{sub}</span>
      </div>
      {right || <button className={'saas-toggle'+(on?' is-on':'')} onClick={onChange} aria-label={label}/>}
    </div>
  );
}

window.SaasSettings = function({ go }){
  const [pubAlert, setPubAlert] = u2(true);
  const [emailAlert, setEmailAlert] = u2(false);
  const [slackAlert, setSlackAlert] = u2(false);
  const [weekly, setWeekly] = u2(true);
  const [time, setTime] = u2('09:00');
  const [tz, setTz] = u2('Asia/Seoul (KST · UTC+9)');
  const [defCat, setDefCat] = u2('전자');
  const [defTone, setDefTone] = u2('가성비');
  const [defTmpl, setDefTmpl] = u2('T01_A');
  const [defChar, setDefChar] = u2('C07');

  return (
    <div className="saas-page">
      <div className="saas-mg-head">
        <div className="saas-greeting" style={{margin:0}}>
          <div className="saas-kicker">관리</div>
          <h1 className="saas-h1">환경설정</h1>
          <p className="saas-lead">발행 습관·알림·기본값을 조정합니다. 계정·보안은 하단에서.</p>
        </div>
        <div className="saas-mg-head-meta">
          <span>이메일 <b>{SAAS_USER2.email}</b></span>
        </div>
      </div>

      {/* 알림 */}
      <div className="saas-set-section">
        <div className="saas-set-section-h">알림</div>
        <div className="saas-set-section-sub">발행 결과·실패·쿼터 임박 등 어떤 이벤트를 받을지 골라주세요.</div>
        <ToggleRow label="발행 알림 (앱 내)" sub="발행 성공/실패 시 알림 벨로 표시"
          on={pubAlert} onChange={()=>setPubAlert(!pubAlert)}/>
        <ToggleRow label="이메일 알림" sub={`매일 발행 결과 요약을 ${SAAS_USER2.email}로 발송`}
          on={emailAlert} onChange={()=>setEmailAlert(!emailAlert)}/>
        <ToggleRow label="슬랙 연동 (PRO)" sub="슬랙 채널로 발행 결과를 실시간 푸시"
          on={slackAlert} onChange={()=>setSlackAlert(!slackAlert)}/>
        <ToggleRow label="주간 리포트" sub="매주 월요일 아침 — 지난 7일 요약"
          on={weekly} onChange={()=>setWeekly(!weekly)}/>
      </div>

      {/* 발행 시간대 */}
      <div className="saas-set-section">
        <div className="saas-set-section-h">발행 시간대</div>
        <div className="saas-set-section-sub">자동 발행이 시작되는 시각과 기준 타임존입니다.</div>
        <ToggleRow label="기본 발행 시각" sub="매일 1회 — 이 시각 기준으로 자동 발행"
          right={<select className="saas-select" value={time} onChange={e=>setTime(e.target.value)}>
            <option>06:00</option><option>09:00</option><option>12:00</option><option>15:00</option><option>18:00</option><option>21:00</option>
          </select>}/>
        <ToggleRow label="타임존" sub="발행 시각의 기준이 되는 표준시"
          right={<select className="saas-select" value={tz} onChange={e=>setTz(e.target.value)} style={{minWidth:200}}>
            <option>Asia/Seoul (KST · UTC+9)</option><option>Asia/Tokyo (JST · UTC+9)</option><option>UTC</option>
          </select>}/>
      </div>

      {/* 기본값 */}
      <div className="saas-set-section">
        <div className="saas-set-section-h">발행 기본값</div>
        <div className="saas-set-section-sub">발행 설정에서 따로 바꾸지 않으면 이 값으로 발행됩니다.</div>
        <ToggleRow label="기본 카테고리" sub="가전·뷰티·식품 등"
          right={<select className="saas-select" value={defCat} onChange={e=>setDefCat(e.target.value)}>
            {['전자','생활','뷰티','패션','건강','금융'].map(c=><option key={c}>{c}</option>)}
          </select>}/>
        <ToggleRow label="기본 테마" sub="콘텐츠 분위기"
          right={<select className="saas-select" value={defTone} onChange={e=>setDefTone(e.target.value)}>
            {['가성비','프리미엄','입문자','전문가','트렌드'].map(c=><option key={c}>{c}</option>)}
          </select>}/>
        <ToggleRow label="기본 템플릿" sub="구조 + 시각 패키지"
          right={<select className="saas-select" value={defTmpl} onChange={e=>setDefTmpl(e.target.value)}>
            {['T01_A','T02_A','T03_A','T04_A','T05_A','T06_A'].map(c=><option key={c}>{c}</option>)}
          </select>}/>
        <ToggleRow label="기본 캐릭터" sub="작성자 페르소나"
          right={<select className="saas-select" value={defChar} onChange={e=>setDefChar(e.target.value)}>
            {['C07','C12','C03','C09','C15','C18'].map(c=><option key={c}>{c}</option>)}
          </select>}/>
      </div>

      {/* 계정·보안 */}
      <div className="saas-set-section">
        <div className="saas-set-section-h">계정·보안</div>
        <div className="saas-set-section-sub">비밀번호·로그인 세션·연결된 외부 계정.</div>
        <ToggleRow label="비밀번호 변경" sub="마지막 변경 30일 전"
          right={<button className="saas-btn saas-btn-ghost" style={{fontSize:13,padding:'8px 14px'}}>변경하기</button>}/>
        <ToggleRow label="로그인 세션" sub="현재 1개 기기에서 활성"
          right={<button className="saas-btn saas-btn-ghost" style={{fontSize:13,padding:'8px 14px'}}>세션 보기</button>}/>
        <ToggleRow label="연결된 블로그" sub="taewoo.tistory.com · 토큰 만료 2026-08-12"
          right={<button className="saas-btn saas-btn-ghost" style={{fontSize:13,padding:'8px 14px'}}>관리</button>}/>
        <ToggleRow label="구독 해지" sub="해지 후에도 1개월 무료는 종료일까지 유지"
          right={<button className="saas-btn saas-btn-ghost" style={{fontSize:13,padding:'8px 14px',color:'var(--saas-accent)'}}>해지 신청</button>}/>
      </div>
    </div>
  );
};