// テーマ0 プラットフォーム管理（管理者）— ユーザー/権限/AWS環境/コスト
const ThemeAdmin = ({ onBack }) => (
  <div className="cx-main">
    <PageHeader crumb="ポータル / プラットフォーム管理" title="プラットフォーム管理" onBack={onBack}
      actions={<Btn icon="plus">ユーザー招待</Btn>}/>
    <div className="cx-stats" style={{marginBottom:18}}>
      <Stat lab="登録ユーザー" icon="user" val="312" unit="名" delta="+8" up/>
      <Stat lab="有効テーマ" icon="grid" val="4" unit="/7"/>
      <Stat lab="今月のAWSコスト" icon="db" val="¥486" unit="千" delta="-4%" up/>
      <Stat lab="稼働率(SLA)" icon="shield" val="99.98" unit="%" delta="正常" up/>
    </div>
    <div className="cx-grid2" style={{alignItems:'start'}}>
      <div className="cx-card" style={{overflow:'hidden'}}>
        <div className="cx-card-h"><h3>ユーザーと権限</h3><span className="hint">Entra ID 連携</span></div>
        <table className="cx-tbl">
          <thead><tr><th>氏名</th><th>部署</th><th>ロール</th><th>状態</th></tr></thead>
          <tbody>
            {[['佐藤 健一','東京支店 施工管理部','一般','有効'],['鈴木 美咲','技術部','査定者','有効'],
              ['大塚 慎一','役員','承認者','有効'],['渡辺 涼','仙台支店','一般','招待中']].map((r,i)=>(
              <tr key={i}><td className="strong">{r[0]}</td><td className="mut">{r[1]}</td>
                <td><Chip tone={r[2]==='承認者'?'accent':r[2]==='査定者'?'primary':'muted'}>{r[2]}</Chip></td>
                <td>{r[3]==='有効'?<Chip tone="ok" dot>有効</Chip>:<Chip tone="warn" dot>招待中</Chip>}</td></tr>
            ))}
          </tbody>
        </table>
      </div>
      <div className="cx-card pad">
        <div style={{display:'flex',alignItems:'center',gap:8,marginBottom:16}}>
          <CXIcon name="db" size={17} color="#0b57c4"/><h3 style={{fontSize:15,fontWeight:700}}>顧客専用AWS環境</h3>
        </div>
        <dl className="cx-kv" style={{rowGap:14}}>
          <dt>リージョン</dt><dd className="strong">ap-northeast-1（東京）</dd>
          <dt>VPC</dt><dd>vpc-chemico-prod / 10.20.0.0/16</dd>
          <dt>認証基盤</dt><dd>Cognito + Entra ID(SAML)</dd>
          <dt>ストレージ</dt><dd>S3（PDF原本・OCR JSON）/ pgvector</dd>
          <dt>コスト監視</dt><dd><Chip tone="ok" dot>予算内（68%）</Chip></dd>
        </dl>
        <div className="cx-bar ok" style={{marginTop:14}}><i style={{width:'68%'}}/></div>
      </div>
    </div>
  </div>
);
window.ThemeAdmin = ThemeAdmin;

// ============================================================
// Root App + router + Tweaks
// ============================================================
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "ケミコブルー",
  "portalLayout": "カード",
  "loginLayout": "スプリット",
  "menuImg": "イラスト（施工図）"
}/*EDITMODE-END*/;

const ACCENT_MAP = { 'ケミコブルー':'', 'ネイビー':'navy', 'グリーン':'green', 'ティール':'teal', 'スカイブルー':'sky' };

// 表示パターン（Tweaks）のユーザーごと保存（モック: localStorage）
const TWEAK_STORE_KEY = 'cx-tweaks:ON-10482';
const loadSavedTweaks = () => {
  try { return JSON.parse(localStorage.getItem(TWEAK_STORE_KEY) || 'null') || {}; }
  catch (e) { return {}; }
};
const THEME_TITLE = { search:'AI検索基盤', ict:'ICT地盤改良工ツール', estimate:'見積業務効率化', drawing:'図面数量照査', admin:'プラットフォーム管理', masterdb:'マスターデータ管理' };

function App() {
  const [t, setTweakRaw] = useTweaks({ ...TWEAK_DEFAULTS, ...loadSavedTweaks() });
  const setTweak = (k, v) => {
    setTweakRaw(k, v);
    try { localStorage.setItem(TWEAK_STORE_KEY, JSON.stringify({ ...t, [k]: v })); } catch (e) {}
  };
  const [route, setRoute] = useState('login');   // login | portal | <themeId>
  const accent = ACCENT_MAP[t.accent] || '';

  const go = (r) => { document.querySelector('.cx-main, .cx-portal')?.scrollTo?.(0,0); setRoute(r); };

  const back = () => go('portal');
  let screen;
  if (route === 'login') {
    screen = <LoginScreen layout={t.loginLayout==='センター'?'center':'split'} onLogin={()=>go('portal')}/>;
  } else if (route === 'portal') {
    screen = (
      <div className="cx-shell">
        <AppHeader onHome={()=>go('portal')} onLogout={()=>go('login')} onOpenSearch={()=>go('search')}/>
        <main className="cx-main"><PortalScreen layout={t.portalLayout==='リスト'?'list':'cards'} menuStyle={t.menuImg==='フォト風'?'photo':'art'} onOpenTheme={go}/></main>
      </div>
    );
  } else {
    const inner =
        route==='search'   ? <ThemeSearch onBack={back}/>
      : route==='ict'      ? <ThemeICT onBack={back}/>
      : route==='drawing'  ? <ThemeDrawing onBack={back}/>
      : route==='estimate' ? <ThemeEstimate onBack={back}/>
      : route==='masterdb' ? <ThemeMasterDB onBack={back}/>
      : route==='admin'    ? <ThemeAdmin onBack={back}/>
      : <main className="cx-main"><PortalScreen layout="cards" menuStyle={t.menuImg==='フォト風'?'photo':'art'} onOpenTheme={go}/></main>;
    screen = (
      <div className="cx-shell">
        <AppHeader theme={THEME_TITLE[route]} onHome={()=>go('portal')} onLogout={()=>go('login')} onOpenSearch={()=>go('search')}/>
        {inner}
      </div>
    );
  }

  return (
    <div className={`cx cx-app`} data-accent={accent}>
      {screen}
      <TweaksPanel title="Tweaks">
        <TweakSection label="ブランド配色" />
        <TweakSelect label="アクセント" value={t.accent}
          options={['ケミコブルー','ネイビー','グリーン','ティール','スカイブルー']}
          onChange={v=>setTweak('accent', v)} />
        <TweakSection label="レイアウト案" />
        <TweakRadio label="メニュー画像" value={t.menuImg} options={['イラスト（施工図）','フォト風']} onChange={v=>setTweak('menuImg', v)} />
        <TweakRadio label="ポータル" value={t.portalLayout} options={['カード','リスト']} onChange={v=>setTweak('portalLayout', v)} />
        <TweakRadio label="ログイン" value={t.loginLayout} options={['スプリット','センター']} onChange={v=>setTweak('loginLayout', v)} />
      </TweaksPanel>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App/>);