/* Top bar + Sidebar shell with live overlays. */
const { useState: useStateShell, useEffect: useEffectShell, useRef: useRefShell } = React;

function ServerClock() {
  const [now, setNow] = useStateShell(new Date());
  useEffectShell(() => { const id = setInterval(() => setNow(new Date()), 1000); return () => clearInterval(id); }, []);
  const t = new Date(now.getTime() + 3 * 3600000);
  const hh = String(t.getUTCHours()).padStart(2, '0');
  const mm = String(t.getUTCMinutes()).padStart(2, '0');
  const ss = String(t.getUTCSeconds()).padStart(2, '0');
  return <span className="mn-topbar-meta" title="Server time (Trading)">{hh}:{mm}:{ss} UTC+3</span>;
}

function GlobalSearch({ role, onOpenRecord }) {
  const D = window.MonolitData;
  const RB = window.MonolitRBAC;
  const [q, setQ] = useStateShell('');
  const inputRef = useRefShell(null);
  useEffectShell(() => {
    function onKey(e) {
      if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'k') { e.preventDefault(); inputRef.current && inputRef.current.focus(); }
    }
    document.addEventListener('keydown', onKey);
    return () => document.removeEventListener('keydown', onKey);
  }, []);

  const ql = q.trim().toLowerCase();
  const show = ql.length >= 2;
  const pid = (id) => window.MonolitData.publicId(id).toLowerCase();
  const leads = show ? RB.scopeClients(role, D.leads).filter(l => (l.id + l.name + l.email + l.company + (l.phone || '') + pid(l.id)).toLowerCase().includes(ql)).slice(0, 4) : [];
  const clients = show ? RB.scopeClients(role, D.clients).filter(c => (c.id + c.name + (c.email || '') + (c.account || '') + pid(c.id)).toLowerCase().includes(ql)).slice(0, 4) : [];
  const deals = show ? scopeDeals(role, D.deals).filter(d => (d.id + d.name + pid(d.id)).toLowerCase().includes(ql)).slice(0, 4) : [];
  const tasks = show ? (D.tasks || []).filter(t => (t.id + (t.title || '') + (t.entity ? t.entity.label : '')).toLowerCase().includes(ql)).slice(0, 4) : [];
  const empty = show && !leads.length && !clients.length && !deals.length && !tasks.length;

  return (
    <Dropdown align="left" width={460} trigger={({ toggle, close }) => (
      <div className="mn-topbar-search" onClick={() => { if (inputRef.current) inputRef.current.focus(); }}>
        <Icon name="search" size="sm" color="text-3" />
        <input ref={inputRef} value={q} placeholder="Search leads, clients, deals, tasks…"
               onFocus={toggle} onChange={(e) => setQ(e.target.value)} />
        <kbd className="mn-kbd">⌘K</kbd>
      </div>
    )}>
      {({ close }) => (
        <div className="mn-dd-list">
          {!show ? <div style={{ padding: 16, color: 'var(--text-3)', font: 'var(--font-weight-medium) 12px/16px var(--font-sans)' }}>Type at least 2 characters. Results are scoped to your role.</div> : null}
          {empty ? <div style={{ padding: 16, color: 'var(--text-3)', font: 'var(--font-weight-medium) 12px/16px var(--font-sans)' }}>Nothing found. Check spelling or broaden the query.</div> : null}
          {leads.length ? <div className="mn-dd-h" style={{ borderTop: 0 }}>Leads</div> : null}
          {leads.map(l => (
            <button key={l.id} className="mn-dd-item" onClick={() => { close(); onOpenRecord({ kind: 'lead', id: l.id }); }}>
              <span className="mn-dd-item-ico"><Icon name="user" size="sm" /></span>
              <span style={{ flex: 1 }}><span className="mn-dd-item-tt">{l.name}</span><span className="mn-dd-item-sub">{l.company} · {window.MonolitData.publicId(l.id)}</span></span>
              <StatusBadge status={l.status} />
            </button>
          ))}
          {clients.length ? <div className="mn-dd-h">Clients</div> : null}
          {clients.map(c => (
            <button key={c.id} className="mn-dd-item" onClick={() => { close(); onOpenRecord({ kind: 'client', id: c.id }); }}>
              <span className="mn-dd-item-ico"><Icon name="building-2" size="sm" /></span>
              <span style={{ flex: 1 }}><span className="mn-dd-item-tt">{c.name}</span><span className="mn-dd-item-sub">{c.account || '—'} · {window.MonolitData.publicId(c.id)}</span></span>
            </button>
          ))}
          {deals.length ? <div className="mn-dd-h">Deals</div> : null}
          {deals.map(d => (
            <button key={d.id} className="mn-dd-item" onClick={() => { close(); onOpenRecord({ kind: 'deal', id: d.id }); }}>
              <span className="mn-dd-item-ico"><Icon name="briefcase" size="sm" /></span>
              <span style={{ flex: 1 }}><span className="mn-dd-item-tt">{d.name}</span><span className="mn-dd-item-sub">{d.parentLabel} · {window.MonolitData.publicId(d.id)}</span></span>
            </button>
          ))}
          {tasks.length ? <div className="mn-dd-h">Tasks</div> : null}
          {tasks.map(t => (
            <button key={t.id} className="mn-dd-item" onClick={() => { close(); onOpenRecord(t.link || { kind: 'task', id: t.id }); }}>
              <span className="mn-dd-item-ico"><Icon name="check-square" size="sm" /></span>
              <span style={{ flex: 1 }}><span className="mn-dd-item-tt">{t.title}</span><span className="mn-dd-item-sub">{t.entity ? t.entity.label : 'Task'}</span></span>
            </button>
          ))}
        </div>
      )}
    </Dropdown>
  );
}

// Mini-calendar with month navigation (global-navigation §2.5). Today highlighted;
// days with a lead Next Step or task due get a dot. Driven by real mock dates.
function MiniCalendar() {
  const D = window.MonolitData;
  const NOW = D.NOW;
  const [ym, setYm] = useStateShell({ y: NOW.getUTCFullYear(), m: NOW.getUTCMonth() });
  const first = new Date(Date.UTC(ym.y, ym.m, 1));
  const startDow = (first.getUTCDay() + 6) % 7; // Monday-first
  const daysInMonth = new Date(Date.UTC(ym.y, ym.m + 1, 0)).getUTCDate();
  const monthLabel = first.toLocaleDateString('en-GB', { month: 'long', year: 'numeric', timeZone: 'UTC' });
  const dueDays = (() => {
    const set = new Set();
    const inMonth = (d) => { const x = new Date(d); return x.getUTCFullYear() === ym.y && x.getUTCMonth() === ym.m; };
    (D.leads || []).forEach(l => { if (l.nextStep && inMonth(l.nextStep.due)) set.add(new Date(l.nextStep.due).getUTCDate()); });
    (D.tasks || []).forEach(t => { if (t.due && inMonth(t.due)) set.add(new Date(t.due).getUTCDate()); });
    return set;
  })();
  const isToday = (day) => NOW.getUTCFullYear() === ym.y && NOW.getUTCMonth() === ym.m && NOW.getUTCDate() === day;
  const step = (delta) => setYm(s => { let m = s.m + delta, y = s.y; if (m < 0) { m = 11; y--; } if (m > 11) { m = 0; y++; } return { y, m }; });
  const cells = []; for (let i = 0; i < startDow; i++) cells.push(null); for (let d = 1; d <= daysInMonth; d++) cells.push(d);
  return (
    <div style={{ padding: '10px 14px 8px', borderBottom: '1px solid var(--border-1)' }}>
      <div className="mn-row" style={{ justifyContent: 'space-between', marginBottom: 8 }}>
        <IconButton icon="chevron-left" size="sm" title="Previous month" onClick={() => step(-1)} />
        <span style={{ font: 'var(--font-weight-strong) 13px/18px var(--font-sans)', color: 'var(--text-1)' }}>{monthLabel}</span>
        <IconButton icon="chevron-right" size="sm" title="Next month" onClick={() => step(1)} />
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7,1fr)', gap: 2 }}>
        {['M', 'T', 'W', 'T', 'F', 'S', 'S'].map((w, i) => <div key={i} style={{ textAlign: 'center', color: 'var(--text-3)', font: 'var(--font-weight-medium) 10px/16px var(--font-sans)' }}>{w}</div>)}
        {cells.map((d, i) => d == null ? <div key={'b' + i} /> : (
          <div key={d} style={{ position: 'relative', height: 26, display: 'flex', alignItems: 'center', justifyContent: 'center', borderRadius: 'var(--radi-sm)', font: 'var(--font-weight-medium) 12px/1 var(--font-sans)', color: 'var(--text-1)', background: isToday(d) ? 'var(--primary-low)' : 'transparent', border: isToday(d) ? '1px solid var(--primary-main)' : '1px solid transparent' }}>
            {d}
            {dueDays.has(d) ? <span style={{ position: 'absolute', bottom: 3, width: 4, height: 4, borderRadius: '50%', background: 'var(--primary-main)' }} /> : null}
          </div>
        ))}
      </div>
    </div>
  );
}

function Shell({ children, currentNav, onNav, currentUser, onLogout, counts, role, onQuickCreate, onOpenRecord, onOpenSettings, dark, onToggleDark }) {
  const D = window.MonolitData;
  const RB = window.MonolitRBAC;
  const [collapsed, setCollapsed] = useStateShell(() => { try { return localStorage.getItem('mn_sidebar_collapsed') === '1'; } catch (e) { return false; } });
  useEffectShell(() => { try { localStorage.setItem('mn_sidebar_collapsed', collapsed ? '1' : '0'); } catch (e) {} }, [collapsed]);
  const [readIds, setReadIds] = useStateShell(() => new Set());
  const [calOpen, setCalOpen] = useStateShell(false);
  const [notifOpen, setNotifOpen] = useStateShell(false);
  const navItems = [
    { id: 'dashboard',  icon: 'layout-dashboard', label: 'Dashboard' },
    { id: 'leads',      icon: 'users',            label: 'Leads',      count: counts.leads },
    { id: 'clients',    icon: 'building-2',       label: 'Clients',    count: counts.clients },
    { id: 'deals',      icon: 'briefcase',        label: 'Deals',      count: counts.deals },
    { id: 'tasks',      icon: 'activity',         label: 'Activities', count: counts.tasks },
    { id: 'reports',    icon: 'bar-chart-3',      label: 'Reports' },
  ];
  // Tenant admin nav, RBAC-gated (roles-and-rbac-mvp §2): Users view = Admin/Ops/Manager;
  // Hooks & Keys = Admin only; Settings (personal) = everyone.
  const adminItems = [
    { id: 'admin-users', icon: 'shield',   label: 'Users',    perm: 'users.read' },
    { id: 'webhooks',    icon: 'webhook',  label: 'Hooks',    perm: 'webhooks.manage' },
    { id: 'api-keys',    icon: 'key-round',label: 'Keys',     perm: 'api_keys.manage' },
    { id: 'settings',    icon: 'settings', label: 'Settings' },
  ].filter(it => !it.perm || RB.can(role, it.perm));
  const unread = D.notifications.filter(n => n.unread && !readIds.has(n.id)).length;
  const markRead = (id) => setReadIds(s => { const next = new Set(s); next.add(id); return next; });
  const markAllRead = () => setReadIds(new Set(D.notifications.map(n => n.id)));
  const canCreate = ['Admin', 'Ops Admin', 'Manager', 'Sales Rep'].includes(role);

  return (
    <div className={'mn-shell' + (collapsed ? ' mn-shell--collapsed' : '')}>
      <header className="mn-topbar">
        <Logo wordmark={!collapsed} />
        <IconButton icon={collapsed ? 'panel-left-open' : 'panel-left-close'} title="Toggle sidebar" onClick={() => setCollapsed(c => !c)} />
        <GlobalSearch role={role} onOpenRecord={onOpenRecord} />
        <div className="mn-topbar-right">
          <ServerClock />

          {canCreate ? (
            <Dropdown align="right" width={300} trigger={({ toggle }) => <IconButton icon="plus" title="Quick create" onClick={toggle} />}>
              {({ close }) => <QuickCreateHub role={role} onPick={(type) => { close(); onQuickCreate(type); }} />}
            </Dropdown>
          ) : null}

          <IconButton icon={dark ? 'sun' : 'moon'} title="Theme" onClick={() => onToggleDark && onToggleDark(!dark)} />

          <span className="mn-bell-wrap"><IconButton icon="calendar" title="Calendar" onClick={() => setCalOpen(true)} /></span>

          <span className="mn-bell-wrap">
            <IconButton icon="bell" title="Notifications" onClick={() => setNotifOpen(true)} />
            {unread ? <span className="mn-bell-badge">{unread > 99 ? '99+' : unread}</span> : null}
          </span>
        </div>
      </header>
      <div className="mn-body">
        <nav className="mn-sidebar">
          <div className="mn-sidebar-scroll">
          <div className="mn-nav-section">CRM</div>
          {navItems.map((it) => (
            <button key={it.id} type="button" title={it.label}
                    className={'mn-nav-item' + (currentNav === it.id ? ' mn-nav-item--active' : '')}
                    onClick={() => onNav(it.id)}>
              <Icon name={it.icon} size="sm" />
              <span>{it.label}</span>
              {typeof it.count === 'number' ? <span className="mn-nav-count">{it.count}</span> : null}
            </button>
          ))}
          <div className="mn-nav-section">Tenant</div>
          {adminItems.map((it) => (
            <button key={it.id} type="button" title={it.label}
                    className={'mn-nav-item' + (currentNav === it.id ? ' mn-nav-item--active' : '')}
                    onClick={() => onNav(it.id)}>
              <Icon name={it.icon} size="sm" />
              <span>{it.label}</span>
            </button>
          ))}
          </div>
          <div className="mn-sidebar-acct">
            <Dropdown align="left" width={232} panelClass="mn-dd-panel--up" trigger={({ toggle }) => (
              <button className="mn-sidebar-user" type="button" onClick={toggle} title="Account · acme.monolit.app">
                <Avatar user={currentUser} size={28} />
                <span className="mn-sidebar-user-meta">
                  <span className="mn-sidebar-user-name">{currentUser.name}</span>
                  <span className="mn-sidebar-user-sub">{role} · Acme</span>
                </span>
                <span className="mn-acct-chev"><Icon name="chevron-up" size="xs" color="text-3" /></span>
              </button>
            )}>
              {({ close }) => (
                <React.Fragment>
                  <div className="mn-dd-h" style={{ flexDirection: 'column', alignItems: 'flex-start', gap: 2 }}>
                    <span>{currentUser.name}</span>
                    <span className="mn-mono mn-muted" style={{ fontSize: 11, fontWeight: 400 }}>ID: 00001 · {role}</span>
                  </div>
                  <div className="mn-dd-tenant"><Icon name="globe" size="sm" /><span>acme.monolit.app</span></div>
                  <div className="mn-dd-list">
                    <button className="mn-dd-item" onClick={() => { close(); onOpenSettings(); }}><span className="mn-dd-item-ico"><Icon name="settings" size="sm" /></span><span className="mn-dd-item-tt" style={{ alignSelf: 'center' }}>Settings</span></button>
                    <button className="mn-dd-item" onClick={() => { close(); onLogout(); }}><span className="mn-dd-item-ico"><Icon name="log-out" size="sm" /></span><span className="mn-dd-item-tt" style={{ alignSelf: 'center' }}>Sign out</span></button>
                  </div>
                </React.Fragment>
              )}
            </Dropdown>
          </div>
        </nav>
        <main className="mn-main">{children}</main>
      </div>

      {calOpen ? (
        <Drawer open onClose={() => setCalOpen(false)} width={380} eyebrow="Top bar" title="Calendar"
                footer={<Button variant="ghost" size="md" icon="check-square" onClick={() => { setCalOpen(false); onNav('tasks'); }}>Open Tasks</Button>}>
          <MiniCalendar />
          <div className="mn-dd-h" style={{ borderTop: 0 }}>Reminders<span className="mn-mono mn-muted" style={{ fontSize: 11 }}>next 7 days</span></div>
          <div className="mn-dd-list">
            {D.calendarEvents.map(e => (
              <button key={e.id} className="mn-dd-item" onClick={() => { setCalOpen(false); onOpenRecord(e.link); }}>
                <span className={'mn-dd-item-ico' + (e.overdue ? ' mn-dd-item-ico--unread' : '')}><Icon name={e.kind === 'meeting' ? 'calendar' : e.kind === 'call' ? 'phone' : 'check-square'} size="sm" /></span>
                <span style={{ flex: 1 }}><span className="mn-dd-item-tt">{e.title}</span><span className="mn-dd-item-sub" style={e.overdue ? { color: 'var(--error-main)' } : null}>{e.when}</span></span>
              </button>
            ))}
          </div>
        </Drawer>
      ) : null}

      {notifOpen ? (
        <Drawer open onClose={() => setNotifOpen(false)} width={400} eyebrow="Top bar" title="Notifications" subtitle={unread ? unread + ' unread' : 'All caught up'}
                footer={<div style={{ display: 'flex', width: '100%', justifyContent: 'space-between' }}><Button variant="ghost" size="md" disabled={!unread} onClick={() => markAllRead()}>Mark all as read</Button><Button variant="ghost" size="md" onClick={() => setNotifOpen(false)}>Close</Button></div>}>
          <div className="mn-dd-list">
            {D.notifications.map(n => {
              const isUnread = n.unread && !readIds.has(n.id);
              return (
                <button key={n.id} className="mn-dd-item" onClick={() => { markRead(n.id); setNotifOpen(false); onOpenRecord(n.link); }} style={isUnread ? { background: 'color-mix(in srgb, var(--primary-low) 40%, transparent)' } : null}>
                  <span className={'mn-dd-item-ico' + (isUnread ? ' mn-dd-item-ico--unread' : '')}><Icon name={n.icon} size="sm" /></span>
                  <span style={{ flex: 1 }}><span className="mn-dd-item-tt">{n.title}</span><span className="mn-dd-item-sub">{n.body}</span></span>
                  <span className="mn-dd-item-at">{n.at}</span>
                </button>
              );
            })}
          </div>
        </Drawer>
      ) : null}
    </div>
  );
}

Object.assign(window, { Shell, GlobalSearch, ServerClock });