/* ══════════════════════════════════════════════════════════════════
   ATLAS COCKPIT — APP SHELL + ROUTER
   ══════════════════════════════════════════════════════════════════ */

const NAV = [
  { id: 'today', label: 'Today', icon: 'today' },
  { id: 'projects', label: 'Projects', icon: 'projects' },
  { id: 'finance', label: 'Finance', icon: 'finance' },
  { id: 'risks', label: 'Risks', icon: 'risks' },
  { id: 'ideas', label: 'Ideas', icon: 'ideas' },
  { id: 'calendar', label: 'Calendar', icon: 'calendar' },
  { id: 'briefs', label: 'Briefs', icon: 'doc' }
];
const NAV2 = [
  { id: 'log', label: 'Decision log', icon: 'doc' },
  { id: 'settings', label: 'Settings', icon: 'settings' }
];
const VIEW_TITLES = { today: 'Today', projects: 'Projects', finance: 'Finance', risks: 'Risk', ideas: 'Ideas', calendar: 'Calendar', briefs: 'Briefs', log: 'Decision log', settings: 'Settings' };

function Sidebar({ view, setView, mobileNav, closeMobile }) {
  const s = useStore();
  const D = window.ATLAS_DATA;
  const openActions = getActions().filter(a => { const d = s.decisions.actions[a.id]; return !d || d.decision === 'defer'; }).length;
  const openBlockers = D.blockers.filter(b => !s.blockers[b.id]).length;
  const openRisks = D.risks.filter(r => !s.decisions.risks[r.id]).length;
  const openIdeas = getIdeas().filter(i => !s.decisions.ideas[i.id]).length;
  const badges = { today: openActions, risks: openRisks, ideas: openIdeas, projects: D.projects.filter(p => p.blocker).length };
  const alert = { risks: openRisks > 0 && D.risks.some(r => !s.decisions.risks[r.id] && r.severity === 'high') };
  const dark = effectiveTheme(s.theme) === 'dark';

  const Item = ({ item }) => React.createElement('button', {
    className: cls('sb-item', view === item.id && 'active'), onClick: () => { setView(item.id); closeDrawer(); closeMobile(); }, title: s.sidebarCollapsed ? item.label : null
  },
    React.createElement('span', { className: 'sb-ico' }, React.createElement(Icon, { name: item.icon, size: 18 })),
    React.createElement('span', { className: 'sb-label' }, item.label),
    badges[item.id] > 0 && React.createElement('span', { className: cls('sb-badge', alert[item.id] && 'alert') }, badges[item.id]));

  return React.createElement('nav', { className: cls('sidebar', mobileNav && 'mobile-open') },
    React.createElement('div', { className: 'sb-brand' },
      React.createElement('span', { className: 'sb-mark' }, React.createElement(BrandMark, { size: 28 })),
      React.createElement('span', { className: 'sb-wordmark' }, 'ATLAS'),
      React.createElement('button', { className: 'sb-collapse', onClick: () => setKV({ sidebarCollapsed: !s.sidebarCollapsed }), title: s.sidebarCollapsed ? 'Expand menu' : 'Collapse menu', 'aria-label': s.sidebarCollapsed ? 'Expand menu' : 'Collapse menu' },
        React.createElement(Icon, { name: s.sidebarCollapsed ? 'panelOpen' : 'panelClose', size: 18 }))),
    React.createElement('div', { className: 'sb-nav scroll' },
      NAV.map(item => React.createElement(Item, { key: item.id, item })),
      React.createElement('div', { className: 'sb-section-label' }, 'Workspace'),
      NAV2.map(item => React.createElement(Item, { key: item.id, item }))),
    React.createElement('div', { className: 'sb-foot' },
      React.createElement('div', { className: 'sb-status' },
        (() => { const agg = connectionsAggregate(); return React.createElement('span', { className: cls('dot', 'agg-' + agg.tone) }); })(),
        React.createElement('span', { className: 'sb-label' }, connectionsAggregate().label, ' · ', fmtDate(new Date().toISOString().slice(0, 10)))),
      React.createElement('div', { className: 'sb-foot-row' },
        React.createElement('button', { className: 'sb-foot-btn', onClick: () => setKV({ theme: dark ? 'light' : 'dark' }), title: 'Toggle theme' },
          React.createElement('span', { className: 'sb-ico' }, React.createElement(Icon, { name: dark ? 'sun' : 'moon', size: 17 })),
          React.createElement('span', { className: 'sb-label' }, dark ? 'Light' : 'Dark'))))
  );
}

function Topbar({ view, onMenu }) {
  const s = useStore();
  const dark = effectiveTheme(s.theme) === 'dark';
  return React.createElement('header', { className: 'topbar' },
    React.createElement('button', { className: 'icon-btn topbar-menu', onClick: onMenu, 'aria-label': 'Open menu' }, React.createElement(Icon, { name: 'list', size: 18 })),
    React.createElement('div', null,
      React.createElement('div', { className: 'tb-title' }, VIEW_TITLES[view] || ''),
    ),
    React.createElement('div', { className: 'tb-spacer' }),
    React.createElement('button', { className: 'tb-search', onClick: openPalette },
      React.createElement(Icon, { name: 'search', size: 15 }),
      React.createElement('span', null, 'Search ATLAS'),
      React.createElement('span', { className: 'kbd' }, '⌘K')),
    React.createElement('button', { className: 'btn sm', onClick: openEod, title: 'Wrap the day' },
      React.createElement(Icon, { name: 'moon2', size: 14, className: 'bico' }), 'End day'),
    React.createElement('button', { className: cls('icon-btn', s.focusMode && 'on'), onClick: () => setKV({ focusMode: !s.focusMode }), title: s.focusMode ? 'Exit focus mode' : 'Focus mode', 'aria-label': 'Focus mode' },
      React.createElement(Icon, { name: 'focus', size: 17 })),
    React.createElement('button', { className: 'icon-btn', onClick: () => setKV({ theme: dark ? 'light' : 'dark' }), title: 'Toggle theme', 'aria-label': 'Toggle theme' },
      React.createElement(Icon, { name: dark ? 'sun' : 'moon', size: 17 }))
  );
}

function App() {
  const s = useStore();
  const view = s.view || s.landingView || 'today';
  const setView = (v) => setKV({ view: v });
  const [mobileNav, setMobileNav] = useState(false);

  useEffect(() => {
    const mq = window.matchMedia('(prefers-color-scheme: dark)');
    const apply = () => {
      const eff = effectiveTheme(s.theme);
      document.documentElement.setAttribute('data-theme', eff);
      const meta = document.querySelector('meta[name="theme-color"]');
      if (meta) meta.setAttribute('content', eff === 'dark' ? '#0D0E10' : '#FAFAF8');
    };
    apply();
    if (s.theme === 'system' && mq.addEventListener) { mq.addEventListener('change', apply); return () => mq.removeEventListener('change', apply); }
  }, [s.theme]);

  useEffect(() => {
    const root = document.documentElement;
    root.style.setProperty('--accent', s.accent);
    root.style.setProperty('--accent-weak', `color-mix(in srgb, ${s.accent} 11%, transparent)`);
    root.style.setProperty('--accent-mid', `color-mix(in srgb, ${s.accent} 20%, transparent)`);
    root.setAttribute('data-density', s.density);
    root.setAttribute('data-radius', s.radius);
  }, [s.accent, s.density, s.radius]);

  /* Pass 2 · hash router. Paste `#/projects/:id` (or /ideas, /actions, /risks)
     and the corresponding drawer opens. `#/decisions/:id` jumps to the log
     view and flashes the row. */
  useEffect(() => {
    const KIND_MAP = { projects: 'project', ideas: 'idea', actions: 'action', risks: 'risk' };
    function parse() {
      const h = (window.location.hash || '').replace(/^#\/?/, '');
      if (!h) return null;
      const [kind, id] = h.split('/');
      if (!kind || !id) return null;
      if (KIND_MAP[kind]) return { type: KIND_MAP[kind], id };
      if (kind === 'decisions') return { type: 'decision', id };
      return null;
    }
    function apply() {
      const r = parse();
      if (!r) return;
      if (r.type === 'decision') {
        setKV({ view: 'log' });
        setTimeout(() => {
          const el = document.querySelector(`[data-log-id="${r.id}"]`);
          if (el) {
            el.scrollIntoView({ behavior: 'smooth', block: 'center' });
            el.classList.add('flash');
            setTimeout(() => el.classList.remove('flash'), 1500);
          }
        }, 120);
        return;
      }
      if (typeof openDrawer === 'function') openDrawer(r.type, r.id);
    }
    window.addEventListener('hashchange', apply);
    /* Initial load — wait a tick for entity stores to be hydrated. */
    setTimeout(apply, 80);
    return () => window.removeEventListener('hashchange', apply);
  }, []);

  const renderView = () => {
    switch (view) {
      case 'today': return React.createElement(TodayView, { onNavigate: setView });
      case 'projects': return React.createElement(ProjectsView);
      case 'finance': return React.createElement(FinanceView);
      case 'risks': return React.createElement(RisksView);
      case 'ideas': return React.createElement(IdeasView);
      case 'calendar': return React.createElement(CalendarView);
      case 'briefs': return React.createElement(BriefsView);
      case 'log': return React.createElement(LogView);
      case 'settings': return React.createElement(SettingsView);
      default: return React.createElement(TodayView, { onNavigate: setView });
    }
  };

  return React.createElement('div', { className: cls('app', s.sidebarCollapsed && 'collapsed', s.focusMode && 'focus-mode') },
    React.createElement(Sidebar, { view, setView, mobileNav, closeMobile: () => setMobileNav(false) }),
    React.createElement('div', { className: cls('mobile-scrim', mobileNav && 'show'), onClick: () => setMobileNav(false) }),
    React.createElement('div', { className: 'main' },
      React.createElement(Topbar, { view, onMenu: () => setMobileNav(true) }),
      React.createElement('div', { className: 'content scroll' },
        React.createElement('div', { className: 'content-inner' },
          view === 'today' && React.createElement('div', { style: { height: 4 } }),
          renderView()))),
    React.createElement(DetailDrawer),
    React.createElement(CommandPalette, { onNavigate: setView }),
    React.createElement(EodModalHost),
    React.createElement(AddActionHost),
    React.createElement(ToastHost),
    React.createElement(TweaksPanel, { title: 'Tweaks' },
      React.createElement(TweakSection, { label: 'Appearance' }),
      React.createElement(TweakColor, { label: 'Accent', value: s.accent,
        options: ['#016AFF', '#3B5BDB', '#1F8A5B', '#7A5AE0'],
        onChange: v => setKV({ accent: v }) }),
      React.createElement(TweakRadio, { label: 'Corner radius', value: s.radius,
        options: [{ value: 'sharp', label: 'Sharp' }, { value: 'default', label: 'Default' }, { value: 'rounded', label: 'Round' }],
        onChange: v => setKV({ radius: v }) }),
      React.createElement(TweakRadio, { label: 'Density', value: s.density,
        options: [{ value: 'comfortable', label: 'Comfortable' }, { value: 'compact', label: 'Compact' }],
        onChange: v => setKV({ density: v }) }),
      React.createElement(TweakSection, { label: 'Workspace' }),
      React.createElement(TweakSelect, { label: 'Landing view', value: s.landingView,
        options: [{ value: 'today', label: 'Today' }, { value: 'projects', label: 'Projects' }, { value: 'finance', label: 'Finance' }, { value: 'risks', label: 'Risks' }, { value: 'ideas', label: 'Ideas' }, { value: 'calendar', label: 'Calendar' }],
        onChange: v => setKV({ landingView: v, view: v }) })
    )
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(React.createElement(App));