// Shared components for Voice Intelligence
const { useState, useEffect, useRef, useMemo } = React;

// ===== Icons (simple line icons) =====
const Icon = ({ name, className = 'i' }) => {
  const paths = {
    library:   <><rect x="3" y="4" width="4" height="16" rx="1"/><rect x="9" y="4" width="4" height="16" rx="1"/><path d="M16 6l4 14"/></>,
    waveform:  <><path d="M3 12h2M7 8v8M11 5v14M15 9v6M19 11v2M21 12h-2"/></>,
    chart:     <><path d="M3 3v18h18"/><path d="M7 15l4-4 4 3 5-7"/></>,
    agents:    <><circle cx="9" cy="8" r="3"/><path d="M3 20c1-3 3-5 6-5s5 2 6 5"/><circle cx="17" cy="7" r="2"/><path d="M15 13c3 0 5 2 6 5"/></>,
    flag:      <><path d="M5 3v18"/><path d="M5 4h10l-2 4 2 4H5"/></>,
    star:      <><path d="M12 3l2.6 5.3 5.9.9-4.3 4.1 1 5.8L12 16.8 6.8 19.1l1-5.8L3.5 9.2l5.9-.9z"/></>,
    search:    <><circle cx="11" cy="11" r="7"/><path d="M20 20l-3.5-3.5"/></>,
    filter:    <><path d="M3 5h18"/><path d="M6 12h12"/><path d="M10 19h4"/></>,
    download:  <><path d="M12 3v12"/><path d="M7 10l5 5 5-5"/><path d="M5 20h14"/></>,
    play:      <><polygon points="6,4 20,12 6,20" fill="currentColor" stroke="none"/></>,
    pause:     <><rect x="6" y="4" width="4" height="16" fill="currentColor" stroke="none"/><rect x="14" y="4" width="4" height="16" fill="currentColor" stroke="none"/></>,
    back15:    <><path d="M12 5V2L7 6l5 4V7a6 6 0 11-6 6"/><text x="9" y="16" fontSize="6" fill="currentColor" stroke="none" fontFamily="JetBrains Mono">15</text></>,
    fwd15:     <><path d="M12 5V2l5 4-5 4V7a6 6 0 106 6"/><text x="9" y="16" fontSize="6" fill="currentColor" stroke="none" fontFamily="JetBrains Mono">15</text></>,
    share:     <><circle cx="6" cy="12" r="2.5"/><circle cx="18" cy="6" r="2.5"/><circle cx="18" cy="18" r="2.5"/><path d="M8 11l8-4M8 13l8 4"/></>,
    plus:      <><path d="M12 5v14M5 12h14"/></>,
    chevdown:  <><path d="M6 9l6 6 6-6"/></>,
    chevright: <><path d="M9 6l6 6-6 6"/></>,
    check:     <><path d="M5 12l5 5 9-11"/></>,
    ext:       <><path d="M14 4h6v6"/><path d="M20 4l-9 9"/><path d="M18 14v5a1 1 0 01-1 1H5a1 1 0 01-1-1V7a1 1 0 011-1h5"/></>,
    sun:       <><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4 12H2M22 12h-2M5 5l1.5 1.5M17.5 17.5L19 19M5 19l1.5-1.5M17.5 6.5L19 5"/></>,
    moon:      <><path d="M20 14.5A8 8 0 119.5 4a7 7 0 0010.5 10.5z"/></>,
    settings:  <><circle cx="12" cy="12" r="3"/><path d="M19 12a7 7 0 00-.1-1.3l2-1.5-2-3.4-2.3 1a7 7 0 00-2.3-1.3L13.7 3h-3.4l-.6 2.5a7 7 0 00-2.3 1.3l-2.3-1-2 3.4 2 1.5A7 7 0 005 12c0 .4 0 .9.1 1.3l-2 1.5 2 3.4 2.3-1a7 7 0 002.3 1.3l.6 2.5h3.4l.6-2.5a7 7 0 002.3-1.3l2.3 1 2-3.4-2-1.5c.1-.4.1-.9.1-1.3z"/></>,
    export:    <><path d="M12 15V3"/><path d="M7 8l5-5 5 5"/><path d="M5 15v4a1 1 0 001 1h12a1 1 0 001-1v-4"/></>,
    user:      <><circle cx="12" cy="8" r="4"/><path d="M4 20c0-4 4-6 8-6s8 2 8 6"/></>,
    tag:       <><path d="M4 4h8l8 8-8 8-8-8z"/><circle cx="8" cy="8" r="1" fill="currentColor"/></>,
  };
  return (
    <svg className={className} viewBox="0 0 24 24" aria-hidden="true">
      {paths[name]}
    </svg>
  );
};

// ===== Topbar =====
function Topbar({ onThemeToggle, theme }) {
  return (
    <header className="topbar">
      <div className="brand">
        <div className="mark">Q</div>
        <div>
          <div className="co">Quality Service Co.</div>
          <div className="app-name">Voice Intelligence</div>
        </div>
      </div>
      <div className="search">
        <Icon name="search" className="i" />
        <input placeholder='Search calls, agents, transcripts — try "missed appointment last week"' />
        <div className="kbd">⌘ K</div>
      </div>
      <div className="util">
        <div className="env">prod · us-east</div>
        <button className="btn ghost" onClick={onThemeToggle} title="Toggle theme">
          <Icon name={theme === 'dark' ? 'sun' : 'moon'} />
        </button>
        <div className="avatar">TS</div>
      </div>
    </header>
  );
}

// ===== Sidebar =====
function Sidebar({ page, setPage }) {
  const items = [
    { id: 'library',   label: 'Call Library',   icon: 'library',  badge: '3,281' },
    { id: 'detail',    label: 'Active Call',    icon: 'waveform', badge: 'QSC-248193' },
    { id: 'analytics', label: 'Analytics',      icon: 'chart' },
  ];
  const secondary = [
    { label: 'Agents',     icon: 'agents' },
    { label: 'Flags & QA', icon: 'flag' },
    { label: 'Exports',    icon: 'export' },
    { label: 'Settings',   icon: 'settings' },
  ];
  const saved = [
    { label: 'Negative sentiment · 7d',   cls: 'r' },
    { label: 'Billing disputes',          cls: 'y' },
    { label: 'Install support · top 10%', cls: 'g' },
    { label: 'New customers · Q2',        cls: '' },
  ];
  return (
    <aside className="sidebar">
      <div>
        <div className="group-label">Workspace</div>
        {items.map(it => (
          <div key={it.id}
               className={'nav-item ' + (page === it.id ? 'active' : '')}
               onClick={() => setPage(it.id)}>
            <Icon name={it.icon} className="i ico" />
            <span>{it.label}</span>
            {it.badge && <span className="badge">{it.badge}</span>}
          </div>
        ))}
      </div>
      <div>
        <div className="group-label">Explore</div>
        {secondary.map(it => (
          <div key={it.label} className="nav-item">
            <Icon name={it.icon} className="i ico" />
            <span>{it.label}</span>
          </div>
        ))}
      </div>
      <div className="saved">
        <div className="group-label">Saved Views</div>
        {saved.map(s => (
          <div key={s.label} className="item">
            <span className={'dot ' + s.cls}></span>
            <span>{s.label}</span>
          </div>
        ))}
      </div>
    </aside>
  );
}

// ===== Tweaks =====
function Tweaks({ theme, setTheme, visible }) {
  if (!visible) return null;
  return (
    <div className="tweaks">
      <h5>Tweaks</h5>
      <div style={{ fontSize: 11, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--muted)', marginBottom: 8 }}>Theme</div>
      <div className="seg">
        <button className={theme === 'light' ? 'on' : ''} onClick={() => setTheme('light')}>
          <Icon name="sun" className="i" style={{ width: 12, height: 12, marginRight: 6, verticalAlign: 'middle' }} /> Light
        </button>
        <button className={theme === 'dark' ? 'on' : ''} onClick={() => setTheme('dark')}>
          <Icon name="moon" className="i" style={{ width: 12, height: 12, marginRight: 6, verticalAlign: 'middle' }} /> Dark
        </button>
      </div>
      <div style={{ fontSize: 11, color: 'var(--muted)', marginTop: 12, lineHeight: 1.5 }}>
        Theme persists. Toggle the Tweaks button in the toolbar to hide this panel.
      </div>
    </div>
  );
}

Object.assign(window, { Icon, Topbar, Sidebar, Tweaks });