// Main app shell

function SyncPanel() {
  const { sync, signInToSync, signOutOfSync, refreshFromCloud } = useStore();
  const [email, setEmail] = React.useState('');
  const [open, setOpen] = React.useState(false);

  async function submit(e) {
    e.preventDefault();
    if (!email.trim()) return;
    await signInToSync(email.trim());
  }

  function formatLastSynced(iso) {
    if (!iso) return '';
    const diff = Math.max(0, Date.now() - Date.parse(iso));
    const s = Math.round(diff / 1000);
    if (s < 60) return `${s}s ago`;
    const m = Math.round(s / 60);
    if (m < 60) return `${m}m ago`;
    const h = Math.round(m / 60);
    return `${h}h ago`;
  }

  if (!sync.configured) {
    return (
      <div className="sync-panel">
        <div className="mono muted sync-status">SYNC NOT CONFIGURED</div>
      </div>
    );
  }

  return (
    <div className="sync-panel">
      <button className="sync-toggle" onClick={() => setOpen(v => !v)}>
        <span className={`sync-dot ${sync.signedIn ? 'on' : ''}`}></span>
        <span>{sync.signedIn ? sync.status : 'Sign in to sync'}</span>
      </button>

      {open && (
        <div className="sync-popover">
          {sync.signedIn ? (
            <div style={{display:'grid', gap:'8px'}}>
              <div className="mono muted sync-email">{sync.email}</div>
              <div className="mono muted sync-help">
                {sync.status}
                {sync.lastSyncedAt ? ` · last sync ${formatLastSynced(sync.lastSyncedAt)}` : ''}
              </div>
              {sync.error && <div className="sync-error">{sync.error}</div>}
              <div style={{display:'flex', gap:'6px', flexWrap:'wrap'}}>
                <button className="btn" onClick={refreshFromCloud}>Refresh</button>
                <button className="btn" onClick={signOutOfSync}>Sign out</button>
              </div>
            </div>
          ) : (
            <form onSubmit={submit} className="sync-form">
              <input
                className="input"
                type="email"
                placeholder="your email"
                value={email}
                onChange={e => setEmail(e.target.value)}
              />
              <button className="btn primary" disabled={sync.pendingEmail}>
                {sync.pendingEmail ? 'Sending...' : 'Send link'}
              </button>
              {sync.error && <div className="sync-error">{sync.error}</div>}
              <div className="mono muted sync-help">Use an allowed email from Supabase.</div>
            </form>
          )}
        </div>
      )}
    </div>
  );
}

function App() {
  const { state, update } = useStore();
  const [menuOpen, setMenuOpen] = React.useState(false);

  const VIEWS = [
    { id: 'today', label: 'Today', pip: '01' },
    { id: 'calendar', label: 'Calendar', pip: '02' },
    { id: 'phases', label: 'Phases & Principles', pip: '03' },
    { id: 'dsa', label: 'DSA', pip: '04' },
    { id: 'patterns', label: 'Pattern Catalog', pip: '05' },
    { id: 'revisit', label: 'Revisit Queue', pip: '06' },
    { id: 'lld', label: 'LLD', pip: '07' },
    { id: 'hld', label: 'HLD', pip: '08' },
    { id: 'apps', label: 'Applications', pip: '09' },
    { id: 'pipeline', label: 'Pipeline', pip: '10' },
    { id: 'mocks', label: 'Mocks', pip: '11' },
    { id: 'stories', label: 'STAR Stories', pip: '12' },
  ];

  const requestedView = new URLSearchParams(window.location.search).get('view');
  const view = VIEWS.some(v => v.id === requestedView) ? requestedView : (state.view || 'today');
  const activeView = VIEWS.find(v => v.id === view) || VIEWS[0];
  const selectView = (id) => {
    if (window.location.search.includes('view=')) {
      window.history.replaceState(null, '', window.location.pathname + window.location.hash);
    }
    update({ view: id });
    setMenuOpen(false);
  };

  return (
    <div className="app">
      <aside className={`sidebar ${menuOpen ? 'menu-open' : ''}`}>
        <div className="brand-wrap">
          <div className="brand">MLE <i>→</i><br/>SDE</div>
          <div className="brand-sub">14-Week Sprint · 2026</div>
        </div>

        <div className="mobile-current">
          <span className="mobile-current-kicker">Current</span>
          <span className="mobile-current-label">{activeView.label}</span>
        </div>

        <button
          className="mobile-menu-btn"
          onClick={() => setMenuOpen(v => !v)}
          aria-expanded={menuOpen}
          aria-controls="main-navigation"
        >
          <span>{menuOpen ? 'Close' : 'Menu'}</span>
          <span className="mobile-menu-icon" aria-hidden="true">
            <span></span><span></span><span></span>
          </span>
        </button>

        <nav className="nav" id="main-navigation">
          {VIEWS.map(v => (
            <button
              key={v.id}
              className={`nav-item ${view === v.id ? 'active' : ''}`}
              onClick={() => selectView(v.id)}
            >
              <span>{v.label}</span>
              <span className="pip">{v.pip}</span>
            </button>
          ))}
        </nav>

        <div className="sidebar-foot">
          JUN 01 → AUG 23<br/>
          INTERVIEWS · AUG 29<br/>
          <br/>
          AUTOSAVED LOCALLY
        </div>
        <SyncPanel />
      </aside>

      <main className="main">
        {view === 'today' && <TodayView />}
        {view === 'calendar' && <CalendarView />}
        {view === 'phases' && <PrinciplesView />}
        {view === 'dsa' && <DSAView />}
        {view === 'patterns' && <PatternsView />}
        {view === 'revisit' && <RevisitView />}
        {view === 'lld' && <LLDView />}
        {view === 'hld' && <HLDView />}
        {view === 'apps' && <AppsView />}
        {view === 'pipeline' && <PipelineView />}
        {view === 'mocks' && <MocksView />}
        {view === 'stories' && <StoriesView />}
      </main>
    </div>
  );
}

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