// App 外壳 —— ②/③ 模式切换 + 四视图导航
function App() {
  const [mode, setMode] = useState('river');   // 'cal' = ②日历放大, 'river' = ③缩放河
  const [tab, setTab] = useState('today');     // today | week | month
  const [weekDay, setWeekDay] = useState(null); // 本周 tab 下钻到的某天
  const curWeek = window.WEEK_OF[window.TODAY];

  const TABS = [
    { id: 'today', name: '今天' },
    { id: 'week', name: '本周' },
    { id: 'month', name: '本月' },
    { id: 'wish', name: '愿望', off: true },
  ];

  return (
    <div style={aStyles.shell}>
      {/* 顶栏：品牌 + 模式切换 */}
      <div style={aStyles.topbar}>
        <div style={aStyles.brand}>
          <span style={aStyles.luna}>Luna</span>
          <span style={aStyles.bramSub}>导航对比</span>
        </div>
        <div style={aStyles.seg}>
          <button onClick={() => setMode('cal')}
            style={{ ...aStyles.segBtn, ...(mode === 'cal' ? aStyles.segOn : {}) }}>② 日历</button>
          <button onClick={() => setMode('river')}
            style={{ ...aStyles.segBtn, ...(mode === 'river' ? aStyles.segOn : {}) }}>③ 河流</button>
        </div>
      </div>

      {/* 内容区 */}
      <div style={aStyles.content}>
        {tab === 'today' && <TodayView dayNum={window.TODAY} />}

        {tab === 'week' && (
          <React.Fragment>
            <WeekView weekIndex={curWeek}
              onPickDay={(d) => setWeekDay(d)}
              onPickToday={() => setWeekDay(window.TODAY)} />
            {weekDay && (
              <div style={aStyles.cover}>
                <button style={aStyles.coverBack} onClick={() => setWeekDay(null)}>‹ 本周</button>
                <TodayView dayNum={weekDay} />
              </div>
            )}
          </React.Fragment>
        )}

        {tab === 'month' && (mode === 'cal'
          ? <MonthCalendar key="cal" />
          : <RiverZoom key="river" />)}
      </div>

      {/* 当处于本月时，提示当前用哪套导航 */}
      {tab === 'month' && (
        <div style={aStyles.modeNote}>
          正在体验 · {mode === 'cal' ? '② 日历月，点某天放大' : '③ 缩放同一条河'}
        </div>
      )}

      {/* 底部 tab */}
      <div style={aStyles.tabbar}>
        {TABS.map(t => (
          <button key={t.id} disabled={t.off}
            onClick={() => { if (!t.off) { setTab(t.id); setWeekDay(null); } }}
            style={{ ...aStyles.tabBtn, ...(tab === t.id ? aStyles.tabOn : {}), ...(t.off ? aStyles.tabOff : {}) }}>
            <span style={{ ...aStyles.tabDot, ...(tab === t.id ? aStyles.tabDotOn : {}) }} />
            {t.name}
            {t.off && <span style={aStyles.soon}>待补</span>}
          </button>
        ))}
      </div>
    </div>
  );
}

const aStyles = {
  shell: { flex: 1, minHeight: 0, display: 'flex', flexDirection: 'column' },
  topbar: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '12px 16px 8px', flexShrink: 0 },
  brand: { display: 'flex', flexDirection: 'column', lineHeight: 1 },
  luna: { fontSize: 19, fontWeight: 800, color: 'var(--ink)', letterSpacing: '0.5px' },
  bramSub: { fontSize: 10, color: 'var(--ink-faint)', fontWeight: 600, marginTop: 2 },
  seg: { display: 'flex', background: 'rgba(255,255,255,0.45)', borderRadius: 999, padding: 3, gap: 2, border: '1px solid rgba(255,255,255,0.6)' },
  segBtn: { border: 'none', background: 'transparent', color: 'var(--ink-soft)', fontSize: 12, fontWeight: 600, padding: '6px 10px', borderRadius: 999, cursor: 'pointer', fontFamily: 'var(--font)', transition: 'all .2s', whiteSpace: 'nowrap' },
  segOn: { background: '#fff', color: 'var(--ink)', boxShadow: '0 4px 12px -5px rgba(54,84,99,.4)' },

  content: { flex: 1, minHeight: 0, position: 'relative', display: 'flex', flexDirection: 'column' },
  cover: { position: 'absolute', inset: 0, zIndex: 20, background: 'linear-gradient(165deg,#EAF6F1 0%,#DEEDFF 52%,#F3E8F5 100%)', display: 'flex', flexDirection: 'column' },
  coverBack: { alignSelf: 'flex-start', margin: '14px 0 0 16px', border: 'none', background: 'rgba(255,255,255,0.7)', color: 'var(--ink)', fontSize: 14, fontWeight: 600, padding: '7px 14px', borderRadius: 999, cursor: 'pointer', fontFamily: 'var(--font)', boxShadow: '0 6px 16px -8px rgba(54,84,99,.4)', flexShrink: 0 },

  modeNote: { textAlign: 'center', fontSize: 11, color: 'var(--ink-faint)', fontWeight: 600, padding: '2px 0 0', flexShrink: 0 },

  tabbar: { display: 'flex', padding: '8px 12px max(10px, env(safe-area-inset-bottom)) 12px', gap: 4, flexShrink: 0, background: 'rgba(255,255,255,0.4)', borderTop: '1px solid rgba(255,255,255,0.55)' },
  tabBtn: { flex: 1, border: 'none', background: 'transparent', color: 'var(--ink-soft)', fontSize: 12.5, fontWeight: 600, padding: '8px 0 6px', borderRadius: 14, cursor: 'pointer', fontFamily: 'var(--font)', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 5, position: 'relative' },
  tabOn: { color: 'var(--ink)', background: 'rgba(255,255,255,0.6)' },
  tabOff: { opacity: .4, cursor: 'not-allowed' },
  tabDot: { width: 6, height: 6, borderRadius: 999, background: 'var(--ink-faint)', transition: 'all .2s' },
  tabDotOn: { background: 'linear-gradient(135deg,#6FCBB2,#6FB4FF)', width: 8, height: 8 },
  soon: { position: 'absolute', top: 2, right: '50%', marginRight: -22, fontSize: 8, fontWeight: 700, color: 'var(--ink-faint)' },
};

// 全局淡入
const styleEl = document.createElement('style');
styleEl.textContent = '@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }';
document.head.appendChild(styleEl);

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