// app.jsx — main App with Tweaks + page routing

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "density": "regular",
  "doctorDisplay": "both",
  "accent": "#d97a3c",
  "monthHeader": "light",
  "showWeekTplFloater": true
}/*EDITMODE-END*/;

const ACCENT_OPTIONS = ['#d97a3c', '#3b6fbf', '#3f8a45', '#7a5ad9'];

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [state, setState] = React.useState(makeInitialState);
  const update = (fn) => setState(s => typeof fn === 'function' ? fn(s) : fn);

  const [topTab, setTopTab] = React.useState('schedule');
  const [subTab, setSubTab] = React.useState('month');

  const tabs = [
    { id: 'admin',  label: '管理者' },
    { id: 'person', label: '個人帳號' },
    { id: 'price',  label: '批價項目' },
    { id: 'drug',   label: '藥品項目' },
    { id: 'vacc',   label: '疫苗項目' },
    { id: 'clinic', label: '臨床處置項目' },
    { id: 'schedule', label: '排班', isNew: true },
  ];

  const subTabs = [
    { id: 'shifts',   label: '① 班別與假日' },
    { id: 'month',    label: '② 月份排班' },
  ];

  return (
    <div style={{ display:'flex', minHeight:'100vh', background:'#f7f3ec',
      fontFamily:'ui-sans-serif, system-ui, -apple-system, "Noto Sans TC", sans-serif',
      color:'#29261b' }}>
      <Sidebar accent={t.accent} />
      <main style={{ flex: 1, display:'flex', flexDirection:'column', minWidth: 0 }}>
        <HeaderTabs tabs={tabs} active={topTab} onChange={(id)=>{
          setTopTab(id);
          if (id === 'schedule') setSubTab('month');
        }} accent={t.accent} />

        {topTab !== 'schedule' ? (
          <div style={{
            flex: 1, display:'grid', placeItems:'center', color:'#a09887',
            fontSize: 14, padding: 40,
          }}>
            <div style={{ textAlign:'center', maxWidth: 320 }}>
              <div style={{ fontSize: 32, marginBottom: 10, opacity: .3 }}>⚙</div>
              <div>「{tabs.find(x=>x.id===topTab).label}」沿用既有設定頁</div>
              <div style={{ fontSize: 12, marginTop: 8 }}>切到「排班」tab 看新功能 →</div>
            </div>
          </div>
        ) : (
          <SchedulePage state={state} update={update}
            subTab={subTab} setSubTab={setSubTab} subTabs={subTabs}
            accent={t.accent}
            density={t.density}
            doctorDisplay={t.doctorDisplay}
            monthHeader={t.monthHeader}
          />
        )}
      </main>

      {/* Tweaks panel */}
      <TweaksPanel title="Tweaks">
        <TweakSection label="顯示" />
        <TweakRadio label="月曆密度" value={t.density}
          options={['compact','regular']}
          onChange={(v)=>setTweak('density', v)} />
        <TweakSelect label="醫師標示" value={t.doctorDisplay}
          options={[
            { value: 'both',  label: '色塊 + 文字' },
            { value: 'color', label: '色塊（首字）' },
            { value: 'text',  label: '純文字標籤' },
          ]}
          onChange={(v)=>setTweak('doctorDisplay', v)} />
        <TweakRadio label="月份標頭" value={t.monthHeader}
          options={['light','warm']}
          onChange={(v)=>setTweak('monthHeader', v)} />
        <TweakSection label="主題" />
        <TweakColor label="主色" value={t.accent}
          options={ACCENT_OPTIONS}
          onChange={(v)=>setTweak('accent', v)} />
      </TweaksPanel>
    </div>
  );
}

function SchedulePage({ state, update, subTab, setSubTab, subTabs, accent, density, doctorDisplay, monthHeader }) {
  const headerBg = monthHeader === 'warm' ? '#faf0e0' : '#fff';
  const headerBorder = monthHeader === 'warm' ? '#f1e2c8' : '#ebe4d8';

  return (
    <div style={{ flex: 1, display:'flex', flexDirection:'column', minHeight: 0 }}
      data-screen-label={`排班/${subTab}`}>
      {/* sub-tab bar */}
      <div style={{
        background: headerBg, borderBottom: `1px solid ${headerBorder}`,
        padding:'0 28px', display:'flex', alignItems:'center', gap: 4,
        height: 52, flexShrink: 0,
      }}>
        {subTabs.map(st => {
          const on = subTab === st.id;
          return (
            <button key={st.id} onClick={()=>setSubTab(st.id)} style={{
              appearance:'none', border: 0, background:'transparent',
              padding: '0 14px', height: '100%',
              fontSize: 13, fontWeight: on ? 600 : 500,
              color: on ? accent : '#86827a',
              cursor:'pointer', position:'relative', letterSpacing:'.02em',
            }}>
              {st.label}
              {on && <span style={{
                position:'absolute', left: 12, right: 12, bottom: 0, height: 3,
                background: accent, borderRadius:'2px 2px 0 0',
              }} />}
            </button>
          );
        })}
      </div>

      {/* page content */}
      <div style={{ flex: 1, padding: 28, overflow:'auto', minHeight: 0 }}>
        {subTab === 'shifts'   && <ShiftDefsPage   state={state} update={update} accent={accent} />}
        {subTab === 'month'    && <MonthSchedulePage state={state} update={update} accent={accent} density={density} doctorDisplay={doctorDisplay} />}
      </div>
    </div>
  );
}

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