// Komonichi — main app shell. Tabs + auth gate + profile.
const { useKomonichi } = window.KomonichiState;
const { LoginGate } = window.KomonichiAuth;
const { ProfileButton, ProfileModal } = window.KomonichiProfile;
const { MuteButton } = window.KomonichiMute;

const TABS = [
  { key: 'today',      label: 'today',      idx: '一' },
  { key: 'tasks',      label: 'tasks',      idx: '二' },
  { key: 'objectives', label: 'objectives', idx: '三' },
  { key: 'dashboard',  label: 'dashboard',  idx: '四' },
  { key: 'journal',    label: 'journal',    idx: '五' },
  { key: 'learn',      label: 'learn',      idx: '六' },
];

function Topbar({ onOpenProfile, menuOpen, onToggleMenu }) {
  const [now, setNow] = React.useState(new Date());
  React.useEffect(() => {
    const id = setInterval(() => setNow(new Date()), 1000);
    return () => clearInterval(id);
  }, []);
  const seconds = now.getSeconds().toString().padStart(2, '0');
  return (
    <div className="topbar">
      <div className="brand">
        <div className="mark"></div>
        <div>
          <div className="name">Komonichi</div>
          <div className="tag">a quiet practice</div>
        </div>
      </div>
      <div className="topbar-right">
        <MuteButton />
        <ProfileButton onOpen={onOpenProfile} />
        <div className="clock">
          <div className="date">{now.toLocaleString('en', { weekday: 'long', month: 'long', day: 'numeric' })}</div>
          <div className="time">
            {now.toLocaleString('en', { hour: 'numeric', minute: '2-digit' }).toLowerCase()}
            <span style={{ color: 'var(--ink-ghost)', marginLeft: 4 }}>:{seconds}</span>
          </div>
        </div>
        <button
          className={'hamburger' + (menuOpen ? ' open' : '')}
          aria-label={menuOpen ? 'close menu' : 'open menu'}
          aria-expanded={menuOpen}
          onClick={onToggleMenu}>
          <span></span><span></span><span></span>
        </button>
      </div>
    </div>
  );
}

// Hash-param: #tasks?area=<id> deep-links straight to the filtered tasks page.
function readTabFromHash() {
  const h = (location.hash || '').replace(/^#/, '').split('?')[0];
  return TABS.some(t => t.key === h) ? h : 'today';
}

function AppInner() {
  const [tab, setTab] = React.useState(readTabFromHash());
  const [profileOpen, setProfileOpen] = React.useState(false);
  const [menuOpen, setMenuOpen] = React.useState(false);
  React.useEffect(() => {
    const f = () => { setTab(readTabFromHash()); setMenuOpen(false); };
    window.addEventListener('hashchange', f);
    return () => window.removeEventListener('hashchange', f);
  }, []);
  // close the drawer when the viewport grows past mobile (avoids stuck state)
  React.useEffect(() => {
    const mq = window.matchMedia('(min-width: 881px)');
    const f = () => mq.matches && setMenuOpen(false);
    mq.addEventListener?.('change', f);
    return () => mq.removeEventListener?.('change', f);
  }, []);

  const TodayPage = window.TodayPage;
  const TasksPage = window.TasksPage;
  const ObjectivesPage = window.ObjectivesPage;
  const DashboardPage = window.DashboardPage;
  const JournalPage = window.JournalPage;
  const LearnPage = window.LearnPage;
  return (
    <div className="shell">
      <Topbar
        onOpenProfile={() => setProfileOpen(true)}
        menuOpen={menuOpen}
        onToggleMenu={() => setMenuOpen(o => !o)} />

      <nav className={'tabs' + (menuOpen ? ' open' : '')} aria-label="primary">
        {TABS.map(t => (
          <button key={t.key} className={'tab' + (tab === t.key ? ' active' : '')}
            onClick={() => { location.hash = '#' + t.key; setTab(t.key); setMenuOpen(false); }}
            data-screen-label={t.label}>
            <span className="idx">{t.idx}</span>{t.label}
          </button>
        ))}
      </nav>

      <main>
        <section className={'page' + (tab === 'today' ? ' active' : '')}>
          {tab === 'today' && <TodayPage />}
        </section>
        <section className={'page' + (tab === 'tasks' ? ' active' : '')}>
          {tab === 'tasks' && <TasksPage />}
        </section>
        <section className={'page' + (tab === 'objectives' ? ' active' : '')}>
          {tab === 'objectives' && <ObjectivesPage />}
        </section>
        <section className={'page' + (tab === 'dashboard' ? ' active' : '')}>
          {tab === 'dashboard' && <DashboardPage />}
        </section>
        <section className={'page' + (tab === 'journal' ? ' active' : '')}>
          {tab === 'journal' && <JournalPage />}
        </section>
        <section className={'page' + (tab === 'learn' ? ' active' : '')}>
          {tab === 'learn' && <LearnPage />}
        </section>
      </main>

      <footer style={{ marginTop: 60, paddingTop: 18, borderTop: '1px solid var(--paper-line)', display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 12 }}>
        <div className="label">Komonichi · the art of the next small thing</div>
        <div className="haiku" style={{ fontSize: 12, textAlign: 'right' }}>
          <span className="line">侘 · 寂 — what is incomplete is alive.</span>
        </div>
      </footer>

      <ProfileModal open={profileOpen} onClose={() => setProfileOpen(false)} />
    </div>
  );
}

function App() {
  return <LoginGate><AppInner /></LoginGate>;
}

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