// app.jsx — root App: sidebar nav + screen routing + Tweaks panel

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "sidebarMode": "full",
  "heroLayout": "row",
  "kpiChart": "line"
}/*EDITMODE-END*/;

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [screen, setScreen] = React.useState('dashboard'); // dashboard | student | mobile | kpi
  const [school, setSchool] = React.useState('all');

  // Breadcrumb per screen
  const breadcrumb = ({
    dashboard: null,
    student: '生徒カルテ › 佐藤 ハナ',
    mobile: 'スマホビュー · カリキュラム入力',
    kpi: 'KPI レポート',
  })[screen];

  return (
    <div className="flex h-screen overflow-hidden font-jp" style={{ background:'#EFE7DF' }}>
      <Sidebar current={screen} onNav={setScreen} mode={t.sidebarMode} />
      <div className="flex-1 flex flex-col min-w-0">
        <TopBar
          school={school}
          onSchool={setSchool}
          breadcrumb={breadcrumb}
          searchPlaceholder={screen==='mobile' ? '講師・生徒で検索' : '生徒名・LINE名・電話で検索'}
        />
        <div className="flex-1 min-h-0" style={{ background:'#F4EEE8' }}>
          {screen === 'dashboard' && <Dashboard heroLayout={t.heroLayout} />}
          {screen === 'student'   && <StudentCard />}
          {screen === 'mobile'    && <MobileScreen />}
          {screen === 'kpi'       && <KPI chartKind={t.kpiChart} />}
        </div>
      </div>

      <TweaksPanel>
        <TweakSection label="ナビゲーション" />
        <TweakRadio
          label="サイドバー"
          value={t.sidebarMode}
          options={[{value:'full', label:'アイコン+ラベル'}, {value:'icons', label:'アイコンのみ'}]}
          onChange={(v) => setTweak('sidebarMode', v)}
        />

        <TweakSection label="ダッシュボード" />
        <TweakRadio
          label="ヒーロー数値カード"
          value={t.heroLayout}
          options={[{value:'row', label:'横並び'}, {value:'grid', label:'グリッド'}, {value:'stream', label:'ストリーム'}]}
          onChange={(v) => setTweak('heroLayout', v)}
        />

        <TweakSection label="KPI" />
        <TweakRadio
          label="売上推移グラフ"
          value={t.kpiChart}
          options={[{value:'line', label:'折れ線'}, {value:'bar', label:'棒'}, {value:'area', label:'エリア'}]}
          onChange={(v) => setTweak('kpiChart', v)}
        />

        <TweakSection label="画面遷移" />
        <TweakButton onClick={() => setScreen('dashboard')}>ダッシュボード</TweakButton>
        <TweakButton onClick={() => setScreen('student')}>生徒カルテ詳細</TweakButton>
        <TweakButton onClick={() => setScreen('mobile')}>スマホ画面</TweakButton>
        <TweakButton onClick={() => setScreen('kpi')}>KPI レポート</TweakButton>
      </TweaksPanel>
    </div>
  );
}

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