/* App shell — sidebar + topbar */
const { useState } = React;

// Generate the calendar-month options the topbar picker offers: current month
// first, then back month-by-month, hard-floored at January 2026 (the earliest
// month GE PH has dashboard-relevant data for). Keep this list in sync with
// parseDateRange's `month:YYYY-MM` form on the backend.
const FLOOR_YEAR = 2026;
const FLOOR_MONTH = 1; // January
function monthOptions() {
  const names = ['January','February','March','April','May','June','July','August','September','October','November','December'];
  const today = new Date();
  const out = [];
  for (let i = 0; i < 60; i++) {
    const d = new Date(today.getFullYear(), today.getMonth() - i, 1);
    const y = d.getFullYear();
    const m = d.getMonth() + 1;
    if (y < FLOOR_YEAR || (y === FLOOR_YEAR && m < FLOOR_MONTH)) break;
    out.push({
      value: `month:${y}-${String(m).padStart(2, '0')}`,
      label: `${names[m - 1]} ${y}`
    });
  }
  return out;
}

function Wordmark({ size = 18 }) {
  return (
    <span style={{
      fontFamily: 'var(--font-display)', fontWeight: 900, fontSize: size,
      letterSpacing: '-0.01em', color: 'var(--text)',
      display: 'inline-flex', alignItems: 'baseline'
    }}>
      Growth Engine
      <sup style={{
        fontFamily: 'var(--font-mono)', fontSize: Math.round(size * 0.45),
        color: 'var(--gold)', letterSpacing: '0.1em', marginLeft: 4,
        textTransform: 'uppercase', verticalAlign: 'super', fontWeight: 500,
      }}>PH</sup>
    </span>
  );
}

function Sidebar({ route, onRoute, channel, onChannel, viewMode }) {
  const navSections = [
    { label: '01 — Agency', items: [
      { id: 'portfolio', icon: 'grid', name: 'Portfolio' },
    ], hideForClient: true },
    { label: '02 — Client workspace', items: [
      { id: 'roadmap', icon: 'flag', name: 'Roadmap' },
      { id: 'tickets', icon: 'layers', name: 'Requests' },
      { id: 'overview', icon: 'home',   name: 'Overview' },
      { id: 'rankings', icon: 'target', name: 'Keyword rankings' },
      { id: 'gsc',      icon: 'search', name: 'Search performance' },
      { id: 'ai-visibility', icon: 'spark', name: 'AI Visibility' },
      { id: 'ga4',      icon: 'line',   name: 'Traffic & engagement' },
      { id: 'backlinks',icon: 'link',   name: 'Backlinks' },
    ]},
    { label: '03 — Setup', items: [
      { id: 'settings', icon: 'plug',   name: 'Integrations' },
    ], hideForClient: true},
  ];

  return (
    <aside className="sidebar">
      <div className="sb-mark">
        <Wordmark size={17} />
        <span className="product">Reporting</span>
      </div>

      <div className="sb-channels agency-only">
        <span className="label">Channel</span>
        <div className={`channel ${channel === 'seo' ? 'active' : ''}`} onClick={() => onChannel('seo')}>
          <span className="channel-dot" />
          SEO
        </div>
        <div className="channel disabled">
          <span className="channel-dot" />
          PPC
          <span className="soon">SOON</span>
        </div>
        <div className="channel disabled">
          <span className="channel-dot" />
          Paid Social
          <span className="soon">SOON</span>
        </div>
      </div>

      {navSections.map((sec, i) => {
        if (sec.hideForClient && viewMode === 'client') return null;
        return (
          <div className="sb-section" key={i}>
            <div className="label">{sec.label}</div>
            <div className="sb-nav">
              {sec.items.map(it => (
                <div key={it.id}
                     className={`sb-link ${route === it.id ? 'active' : ''}`}
                     onClick={() => onRoute(it.id)}>
                  <span className="sb-link-mark" />
                  <Icon name={it.icon} size={15} />
                  <span>{it.name}</span>
                  {it.count && <span className="count">{it.count}</span>}
                </div>
              ))}
            </div>
          </div>
        );
      })}

      <div className="sb-bottom agency-only">
        <div className="sb-avatar">MB</div>
        <div className="meta">
          <div className="name">Mark Buraga</div>
          <div className="role">Founder · GE PH</div>
        </div>
      </div>
    </aside>
  );
}

function Topbar({ route, client, onPickClient, range, setRange, compare, setCompare, viewMode, theme, onToggleTheme, onRoute, onOpenTicket }) {
  const crumbs = {
    portfolio: ['Agency', 'Portfolio'],
    roadmap:   [client?.name, 'Strategy roadmap'],
    tickets:   [client?.name, 'Requests & tasks'],
    overview:  [client?.name, 'SEO overview'],
    rankings:  [client?.name, 'Keyword rankings'],
    gsc:       [client?.name, 'Search Console'],
    'ai-visibility': [client?.name, 'AI Visibility'],
    ga4:       [client?.name, 'Traffic & engagement'],
    backlinks: [client?.name, 'Backlinks'],
    settings:  [client?.name || 'Workspace', 'Integrations'],
  }[route] || ['Dashboard'];

  return (
    <div className="topbar">
      <div className="crumbs">
        {crumbs.map((c, i) => (
          <React.Fragment key={i}>
            {i > 0 && <span className="sep">/</span>}
            <span className={i === crumbs.length - 1 ? 'current' : ''}>{c}</span>
          </React.Fragment>
        ))}
      </div>

      <div className="spacer" />

      {route !== 'portfolio' && client && (
        <button className="client-picker agency-only" onClick={onPickClient} title="Switch client">
          <span className="swatch">{client.initials}</span>
          <span className="meta">
            <span className="name">{client.name}</span>
            <span className="url">{client.url}</span>
          </span>
          <Icon name="chev" size={14} />
        </button>
      )}

      {/* Calendar-month picker (Gurulytics-style). Shows the current month plus
          the last 12 fully-elapsed months. Every KPI in the views compares this
          window against the previous calendar month AND the same month a year
          ago, so the dedicated "vs" selector is no longer needed. */}
      <label className="range-pill" style={{cursor: 'pointer', display:'inline-flex', alignItems:'center', gap: 6}}>
        <Icon name="calendar" size={12} />
        <select value={range} onChange={e => setRange && setRange(e.target.value)}
                style={{background:'transparent', border: 0, color:'inherit', font:'inherit', outline:'none', cursor:'pointer'}}>
          {monthOptions().map(o => (
            <option key={o.value} value={o.value}>{o.label}</option>
          ))}
        </select>
      </label>

      <button className="icon-btn" title={theme === 'dark' ? 'Switch to light' : 'Switch to dark'} onClick={onToggleTheme}>
        <Icon name={theme === 'dark' ? 'sun' : 'moon'} size={15} />
      </button>

      {window.NotificationBell && (
        <window.NotificationBell
          clientId={client ? client.id : null}
          onOpenTicket={(tid, cid) => {
            if (cid && onPickClient) onPickClient(cid);
            if (onRoute) onRoute('tickets');
            window.__GE_OPEN_TICKET__ = tid;
            if (onOpenTicket) onOpenTicket(tid);
          }}
        />
      )}

      {window.AccountWidget ? <window.AccountWidget /> : null}
    </div>
  );
}

window.Sidebar = Sidebar;
window.Topbar = Topbar;
window.Wordmark = Wordmark;