/* Desktop shell · macOS-feeling window chrome + sidebar + content
 * Shared by all 5 desktop artboards.
 */

function DesktopShell({ children, active = 'overview', kicker, breadcrumb = [], right }) {
  const nav = [
    { id: 'overview',     label: 'Overview',       icon: 'grid'  },
    { id: 'heatmap',      label: 'Risk Heatmap',   icon: 'map'   },
    { id: 'ledger',       label: 'Yield Ledger',   icon: 'table' },
    { id: 'underwriting', label: 'Underwriting',   icon: 'shield'},
    { id: 'fleet',        label: 'Sensor Fleet',   icon: 'sensor'},
  ];

  return (
    <div style={{
      width: 1280, height: 820, position: 'relative',
      background: 'var(--bg-0)',
      borderRadius: 14, overflow: 'hidden',
      fontFamily: 'var(--f-body)', color: 'var(--ink)',
      boxShadow: '0 30px 80px rgba(0,0,0,0.5)',
      display: 'flex', flexDirection: 'column',
    }}>
      {/* title bar */}
      <div style={{
        height: 36, display: 'flex', alignItems: 'center',
        background: 'var(--bg-1)', borderBottom: '1px solid var(--line-2)',
        padding: '0 14px', gap: 14, flexShrink: 0,
      }}>
        <div style={{ display: 'flex', gap: 8 }}>
          <span style={{ width: 11, height: 11, borderRadius: '50%', background: '#FF5F57' }}/>
          <span style={{ width: 11, height: 11, borderRadius: '50%', background: '#FEBC2E' }}/>
          <span style={{ width: 11, height: 11, borderRadius: '50%', background: '#28C840' }}/>
        </div>
        <div style={{ flex: 1, textAlign: 'center', display: 'flex', justifyContent: 'center',
          alignItems: 'center', gap: 8, fontFamily: 'var(--f-mono)', fontSize: 11, color: 'var(--ink-3)' }}>
          <LiveDot size={5} /> macro · k3.kakheti · geo-agro.ai
        </div>
        <div style={{ fontFamily: 'var(--f-mono)', fontSize: 10.5, color: 'var(--ink-3)' }}>
          ⌘K
        </div>
      </div>

      <div style={{ flex: 1, display: 'flex', minHeight: 0 }}>
        {/* sidebar */}
        <div style={{
          width: 220, background: 'var(--bg-1)',
          borderRight: '1px solid var(--line)',
          display: 'flex', flexDirection: 'column', flexShrink: 0,
        }}>
          <div style={{ padding: '18px 18px 14px', borderBottom: '1px solid var(--line)' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 9, marginBottom: 12 }}>
              <BrandMark size={20} />
              <span className="ga-disp" style={{ fontWeight: 700, fontSize: 13, letterSpacing: '0.02em' }}>
                GEO-AGRO<span style={{ color: 'var(--yellow)' }}>.AI</span>
              </span>
            </div>
            <div style={{
              padding: '8px 10px',
              background: 'var(--bg-2)', borderRadius: 6,
              border: '1px solid var(--line-2)',
              display: 'flex', alignItems: 'center', gap: 8,
            }}>
              <span style={{ width: 22, height: 22, borderRadius: 4, background: '#3A4A2E',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontFamily: 'var(--f-mono)', fontSize: 10, fontWeight: 700, color: '#FFD60A' }}>K3</span>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 12, fontWeight: 500 }}>Saperavi K-3</div>
                <div style={{ fontFamily: 'var(--f-mono)', fontSize: 9.5, color: 'var(--ink-3)' }}>Kvareli · 4.8ha</div>
              </div>
              <svg width="10" height="10" viewBox="0 0 10 10"><path d="M2 4l3 3 3-3M2 6l3 3 3-3" stroke="var(--ink-3)" strokeWidth="1" fill="none"/></svg>
            </div>
          </div>

          <nav style={{ padding: 10, display: 'flex', flexDirection: 'column', gap: 2, flex: 1 }}>
            {nav.map((it) => {
              const isActive = it.id === active;
              return (
                <div key={it.id}
                  onClick={() => { if (window.__GA_NAV) window.__GA_NAV(it.id); }}
                  style={{
                  display: 'flex', alignItems: 'center', gap: 10,
                  padding: '8px 10px', borderRadius: 6,
                  background: isActive ? 'rgba(255,214,10,0.08)' : 'transparent',
                  color: isActive ? 'var(--yellow)' : 'var(--ink-2)',
                  fontFamily: 'var(--f-body)', fontSize: 12.5, fontWeight: 500,
                  cursor: 'pointer',
                  position: 'relative',
                }}>
                  {isActive && <span style={{ position: 'absolute', left: -10, top: 8, bottom: 8, width: 2, background: 'var(--yellow)' }} />}
                  <NavIcon kind={it.icon} active={isActive} />
                  {it.label}
                </div>
              );
            })}

            <div style={{ marginTop: 16, padding: '0 10px',
              fontFamily: 'var(--f-mono)', fontSize: 9.5, fontWeight: 600,
              letterSpacing: '0.12em', color: 'var(--ink-4)', textTransform: 'uppercase' }}>
              Workspaces
            </div>
            {['Kakheti Cluster', 'Imereti Pilot', 'TBC Agri · Demo'].map((w) => (
              <div key={w} style={{ padding: '7px 10px', borderRadius: 6,
                fontSize: 12, color: 'var(--ink-2)', display: 'flex', gap: 8, alignItems: 'center' }}>
                <span style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--ink-4)' }} />
                {w}
              </div>
            ))}
          </nav>

          <div style={{ padding: 14, borderTop: '1px solid var(--line)' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
              <div style={{ width: 28, height: 28, borderRadius: '50%',
                background: 'linear-gradient(135deg, #2F2F35, #4A4A52)',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontFamily: 'var(--f-mono)', fontSize: 11, fontWeight: 600 }}>GM</div>
              <div style={{ minWidth: 0 }}>
                <div style={{ fontSize: 11.5, fontWeight: 500 }}>Giorgi M.</div>
                <div style={{ fontFamily: 'var(--f-mono)', fontSize: 9.5, color: 'var(--ink-3)' }}>cluster mgr · v2.6.0</div>
              </div>
            </div>
          </div>
        </div>

        {/* main */}
        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', minWidth: 0, background: 'var(--bg-1)' }}>
          {/* top bar */}
          <div style={{
            height: 56, display: 'flex', alignItems: 'center', justifyContent: 'space-between',
            padding: '0 24px', borderBottom: '1px solid var(--line)', flexShrink: 0,
          }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
              {kicker && (
                <span className="ga-kicker" style={{ color: 'var(--ink-3)' }}>{kicker}</span>
              )}
              {breadcrumb.map((b, i) => (
                <React.Fragment key={i}>
                  <span style={{ color: 'var(--ink-4)', fontFamily: 'var(--f-mono)' }}>/</span>
                  <span className="ga-kicker" style={{
                    color: i === breadcrumb.length - 1 ? 'var(--ink)' : 'var(--ink-3)' }}>{b}</span>
                </React.Fragment>
              ))}
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
              {right}
              <div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '6px 10px',
                background: 'var(--bg-2)', borderRadius: 6, border: '1px solid var(--line-2)' }}>
                <LiveDot size={6} />
                <span style={{ fontFamily: 'var(--f-mono)', fontSize: 11 }}>16 / 16 online</span>
              </div>
            </div>
          </div>
          {/* content */}
          <div className="ga-scroll" style={{ flex: 1, overflow: 'auto', position: 'relative' }}>
            {children}
          </div>
        </div>
      </div>
    </div>
  );
}

function NavIcon({ kind, active }) {
  const c = active ? 'var(--yellow)' : 'var(--ink-3)';
  const s = { width: 15, height: 15, fill: 'none', stroke: c, strokeWidth: 1.4 };
  switch (kind) {
    case 'grid':   return <svg viewBox="0 0 15 15" style={s}><rect x="2" y="2" width="4.5" height="4.5"/><rect x="8.5" y="2" width="4.5" height="4.5"/><rect x="2" y="8.5" width="4.5" height="4.5"/><rect x="8.5" y="8.5" width="4.5" height="4.5"/></svg>;
    case 'map':    return <svg viewBox="0 0 15 15" style={s}><path d="M1 4l4-2 5 2 4-2v9l-4 2-5-2-4 2z"/></svg>;
    case 'table':  return <svg viewBox="0 0 15 15" style={s}><rect x="2" y="3" width="11" height="9"/><path d="M2 7h11M5 3v9M9 3v9"/></svg>;
    case 'shield': return <svg viewBox="0 0 15 15" style={s}><path d="M7.5 1.5L13 4v4c0 3.2-2.4 5.4-5.5 6.5C4.4 13.4 2 11.2 2 8V4z"/></svg>;
    case 'sensor': return <svg viewBox="0 0 15 15" style={s}><circle cx="7.5" cy="7.5" r="1.8"/><path d="M4 4a5 5 0 0 0 0 7M11 4a5 5 0 0 1 0 7M2 2a8 8 0 0 0 0 11M13 2a8 8 0 0 1 0 11"/></svg>;
    default: return null;
  }
}

// Desktop panel — bordered card with optional title strip
function DPanel({ title, subtitle, kicker, right, children, style = {}, padBody = 18 }) {
  return (
    <div style={{
      background: 'var(--bg-2)',
      border: '1px solid var(--line-2)',
      borderRadius: 10,
      display: 'flex', flexDirection: 'column',
      minHeight: 0, overflow: 'hidden',
      ...style,
    }}>
      {(title || kicker || right) && (
        <div style={{
          padding: '14px 18px',
          borderBottom: '1px solid var(--line)',
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          flexShrink: 0,
        }}>
          <div>
            {kicker && <div className="ga-kicker" style={{ marginBottom: 4 }}>{kicker}</div>}
            <div className="ga-disp" style={{ fontSize: 14, fontWeight: 600 }}>{title}</div>
            {subtitle && <div style={{ fontSize: 11.5, color: 'var(--ink-3)', marginTop: 3 }}>{subtitle}</div>}
          </div>
          {right}
        </div>
      )}
      <div style={{ padding: padBody, flex: 1, minHeight: 0, overflow: 'auto' }} className="ga-scroll">
        {children}
      </div>
    </div>
  );
}

Object.assign(window, { DesktopShell, DPanel, NavIcon });