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

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',  count: '8' },
    ], hideForClient: true },
    { label: '02 — Client workspace', items: [
      { id: 'overview', icon: 'home',   name: 'Overview' },
      { id: 'rankings', icon: 'target', name: 'Keyword rankings', count: '142' },
      { id: 'gsc',      icon: 'search', name: 'Search performance' },
      { id: 'ga4',      icon: 'line',   name: 'Traffic & engagement' },
      { id: 'backlinks',icon: 'link',   name: 'Backlinks' },
    ]},
    { label: '03 — Setup', items: [
      { id: 'settings', icon: 'plug',   name: 'Integrations' },
    ]},
  ];

  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">RC</div>
        <div className="meta">
          <div className="name">Renz Cruz</div>
          <div className="role">Strategist · GE PH</div>
        </div>
      </div>
      <div className="sb-bottom" style={{display: viewMode === 'client' ? 'flex' : 'none'}}>
        <div className="sb-avatar">SR</div>
        <div className="meta">
          <div className="name">Sofia Reyes</div>
          <div className="role">Karate Nation</div>
        </div>
      </div>
    </aside>
  );
}

function Topbar({ route, client, onPickClient, range, setRange, compare, setCompare, viewMode, theme, onToggleTheme }) {
  const crumbs = {
    portfolio: ['Agency', 'Portfolio'],
    overview:  [client?.name, 'SEO overview'],
    rankings:  [client?.name, 'Keyword rankings'],
    gsc:       [client?.name, 'Search Console'],
    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" 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>
      )}

      <button className="range-pill">
        <Icon name="calendar" size={12} />
        {range}
        <Icon name="chev" size={11} />
      </button>

      <button className="range-pill" title="Compare to">
        vs {compare}
      </button>

      <button className="icon-btn agency-only" title="Refresh data sources">
        <Icon name="refresh" size={15} />
      </button>
      <button className="icon-btn" title="Notifications">
        <Icon name="bell" size={15} />
      </button>
      <button className="icon-btn" title={theme === 'dark' ? 'Switch to light' : 'Switch to dark'} onClick={onToggleTheme}>
        <Icon name={theme === 'dark' ? 'sun' : 'moon'} size={15} />
      </button>
      <button className="btn btn-secondary">
        <Icon name="download" size={13} />
        Export
      </button>
      {route !== 'portfolio' && (
        <button className="btn btn-primary">
          <Icon name="plus" size={13} />
          Share with client
        </button>
      )}
    </div>
  );
}

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