// Shell components: Sidebar, TopBar, Toast host, generic primitives.

const { useState, useEffect, useRef, useMemo, useCallback } = React;

// ---------- Toast host ----------
const ToastHost = () => {
  const [toasts, setToasts] = useState([]);
  useEffect(() => {
    window.toast = (msg, kind = '') => {
      const id = Math.random().toString(36).slice(2);
      setToasts(t => [...t, { id, msg, kind }]);
      setTimeout(() => setToasts(t => t.filter(x => x.id !== id)), 2800);
    };
  }, []);
  return (
    <div className="toast-host">
      {toasts.map(t => (
        <div key={t.id} className={`toast ${t.kind}`}>
          <span className="ic">
            {t.kind === 'success' ? <window.IconCheck size={14} /> :
             t.kind === 'error' ? <window.IconAlert size={14} /> :
             <window.IconActivity size={14} />}
          </span>
          {t.msg}
        </div>
      ))}
    </div>
  );
};

window.ToastHost = ToastHost;

// ---------- Toggle ----------
window.Toggle = ({ on, onChange, lg }) => (
  <div className={`toggle ${on ? 'on' : ''} ${lg ? 'lg' : ''}`} onClick={() => onChange(!on)} role="switch" aria-checked={on}></div>
);

// ---------- Status pill ----------
window.StatusPill = ({ status, enabled }) => {
  // Derive visible status: enabled=live, else use status
  const s = enabled ? 'live' : (status || 'draft');
  const label = s === 'live' ? 'LIVE' : s.toUpperCase();
  return <span className={`pill ${s}`}><span className="dot"></span>{label}</span>;
};

// ---------- Sidebar ----------
window.Sidebar = ({ route, onRoute, apps, onLogout }) => {
  const appList = Object.values(apps);
  appList.sort((a, b) => (b.updatedAt || 0) - (a.updatedAt || 0));

  const Nav = ({ icon: Ic, label, route: r, badge }) => (
    <div className={`nav-item ${route.page === r ? 'active' : ''}`} onClick={() => onRoute({ page: r })}>
      <span className="icon"><Ic size={15} /></span>
      <span className="label">{label}</span>
      {badge != null && <span className="badge">{badge}</span>}
    </div>
  );

  return (
    <aside className="sidebar">
      <div className="brand">
        <div className="brand-mark">CC</div>
        <div>
          <div className="brand-name">Command Center</div>
          <div className="brand-sub">app-config · prod</div>
        </div>
      </div>

      <nav className="nav">
        <Nav icon={window.IconDashboard} label="Dashboard" route="dashboard" />
        <Nav icon={window.IconActivity} label="Audit log" route="audit" badge="14" />

        <div className="nav-section-label">
          <span>My apps</span>
          <span className="action" onClick={() => onRoute({ page: 'create' })}>
            + New
          </span>
        </div>
        {appList.map(a => (
          <div key={a.id}
               className={`app-row ${route.page === 'app' && route.appId === a.id ? 'active' : ''}`}
               onClick={() => onRoute({ page: 'app', appId: a.id })}>
            <div className="ico">{a.icon}</div>
            <div className="meta">
              <div className="name">{a.name}</div>
              <div className="sub">{a.type} · {a.brand}</div>
            </div>
            <div className={`status-dot ${a.enabled ? 'live' : a.status}`}></div>
          </div>
        ))}
        {appList.length === 0 && (
          <div style={{ padding: '8px 14px', color: 'var(--muted-2)', fontSize: 11.5 }}>
            No apps yet.
          </div>
        )}

        <div className="nav-section-label"><span>Tools</span></div>
        <Nav icon={window.IconLink} label="URL builder" route="urlbuilder" />
        <Nav icon={window.IconFacebook} label="Ads playbook" route="adsbook" />
        <Nav icon={window.IconLayers} label="Brands" route="brands" />

        <div className="nav-section-label"><span>Workspace</span></div>
        <Nav icon={window.IconBook} label="Docs & setup" route="docs" />
        <Nav icon={window.IconSettings} label="Settings" route="settings" />
      </nav>

      <div className="sidebar-foot">
        <div className="avatar">NZ</div>
        <div className="who">
          <div className="n">Nitzan O.</div>
          <div className="e">owner</div>
        </div>
        <div className="gear" onClick={onLogout} title="Sign out"><window.IconSettings size={14} /></div>
      </div>
    </aside>
  );
};

// ---------- TopBar ----------
window.TopBar = ({ crumbs }) => (
  <div className="topbar">
    <div className="breadcrumb">
      {crumbs.map((c, i) => (
        <React.Fragment key={i}>
          {i > 0 && <span className="sep"><window.IconChevronRight size={12} /></span>}
          <span className={`crumb ${c.onClick ? 'link' : ''} ${i === crumbs.length - 1 ? 'current' : ''}`} onClick={c.onClick}>
            {c.label}
          </span>
        </React.Fragment>
      ))}
    </div>
    <div className="spacer"></div>
    <div className="endpoint">
      <span className="ok">●</span>
      <span>{(window.SESSION?.workerUrl || '').replace(/^https?:\/\//, '').replace(/\/$/, '') || 'worker not configured'}</span>
    </div>
    <span className="pill-env">PROD</span>
  </div>
);

// ---------- Copyable URL pill ----------
window.CopyableUrl = ({ value, accent }) => {
  const [copied, setCopied] = useState(false);
  return (
    <div style={{
      display: 'flex', alignItems: 'center', gap: 8,
      padding: '10px 12px',
      background: 'var(--bg-0)',
      border: `1px solid ${accent ? 'var(--accent-line)' : 'var(--line)'}`,
      borderRadius: 7,
      fontFamily: 'JetBrains Mono, monospace', fontSize: 12,
      color: accent ? 'var(--accent)' : 'var(--text-dim)',
    }}>
      <span style={{ flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{value}</span>
      <button className="btn small ghost" onClick={() => {
        navigator.clipboard.writeText(value);
        setCopied(true);
        setTimeout(() => setCopied(false), 1200);
      }}>
        {copied ? <window.IconCheck size={12} /> : <window.IconCopy size={12} />}
      </button>
    </div>
  );
};

// ---------- Section header used inside step pages ----------
window.SectionTitle = ({ kicker, title, desc }) => (
  <div style={{ marginBottom: 22 }}>
    {kicker && <div style={{
      fontSize: 11, color: 'var(--accent)', fontWeight: 600,
      textTransform: 'uppercase', letterSpacing: '0.1em', marginBottom: 8,
      fontFamily: 'JetBrains Mono, monospace',
    }}>{kicker}</div>}
    <h1 style={{ fontSize: 26, fontWeight: 600, letterSpacing: '-0.02em', lineHeight: 1.15, marginBottom: 6 }}>{title}</h1>
    {desc && <p style={{ fontSize: 14, color: 'var(--muted)', maxWidth: 640 }}>{desc}</p>}
  </div>
);

// ---------- Reusable choice card (used in Step 1, Step 3) ----------
window.ChoiceCard = ({ active, onClick, children, accent = 'var(--accent)' }) => (
  <div
    onClick={onClick}
    style={{
      background: active ? 'rgba(0,208,132,0.04)' : 'var(--bg-1)',
      border: `1px solid ${active ? accent : 'var(--line)'}`,
      borderRadius: 12,
      padding: 22,
      cursor: 'pointer',
      transition: 'all 0.15s',
      position: 'relative',
      boxShadow: active ? `0 0 0 3px ${accent}20` : 'none',
    }}>
    {children}
  </div>
);