/* Icons + small UI primitives — pure JSX, all monochrome (currentColor) */

function Ico({ name, size = 22 }) {
  const s = { width: size, height: size, display: 'block' };
  switch (name) {
    case 'home':
      return (
        <svg viewBox="0 0 24 24" style={s} fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
          <path d="M3 11.5 12 4l9 7.5V20a1 1 0 0 1-1 1h-5v-6h-6v6H4a1 1 0 0 1-1-1v-8.5Z" />
        </svg>
      );
    case 'chat':
      return (
        <svg viewBox="0 0 24 24" style={s} fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
          <path d="M21 12a8.5 8.5 0 0 1-12.4 7.6L3 21l1.4-5.6A8.5 8.5 0 1 1 21 12Z" />
        </svg>
      );
    case 'inbox':
      return (
        <svg viewBox="0 0 24 24" style={s} fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
          <path d="M3 13h5l1 2h6l1-2h5" />
          <path d="M5 13l2-7h10l2 7v6a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1v-6Z" />
        </svg>
      );
    case 'inject':
      return (
        <svg viewBox="0 0 24 24" style={s} fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
          <path d="M14 3v5h5" />
          <path d="M19 8v11a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h7l5 5Z" />
          <path d="M12 18v-5m0 0-2 2m2-2 2 2" />
        </svg>
      );
    case 'status':
      return (
        <svg viewBox="0 0 24 24" style={s} fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
          <path d="M3 12h3l2-6 4 12 2-6 2 3h5" />
        </svg>
      );
    case 'settings':
      return (
        <svg viewBox="0 0 24 24" style={s} fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
          <circle cx="12" cy="12" r="2.6" />
          <path d="M19.4 14.6a1.7 1.7 0 0 0 .3 1.9l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.9-.3 1.7 1.7 0 0 0-1 1.6V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1.1-1.6 1.7 1.7 0 0 0-1.9.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.9 1.7 1.7 0 0 0-1.6-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.6-1.1 1.7 1.7 0 0 0-.3-1.9l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.9.3H9a1.7 1.7 0 0 0 1-1.6V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.6 1.7 1.7 0 0 0 1.9-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.9V9a1.7 1.7 0 0 0 1.6 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.6 1Z" />
        </svg>
      );
    case 'check':
      return <svg viewBox="0 0 24 24" style={s} fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12.5l5 5 9-11" /></svg>;
    case 'x':
      return <svg viewBox="0 0 24 24" style={s} fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><path d="M6 6l12 12M18 6 6 18" /></svg>;
    case 'edit':
      return <svg viewBox="0 0 24 24" style={s} fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M14 4l6 6L9 21H3v-6L14 4Z" /><path d="M13 5l6 6" /></svg>;
    case 'send':
      return <svg viewBox="0 0 24 24" style={s} fill="currentColor"><path d="M3.4 20.6 21 12 3.4 3.4l.1 6.7L15 12l-11.5 1.9-.1 6.7Z" /></svg>;
    case 'plus':
      return <svg viewBox="0 0 24 24" style={s} fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="M12 5v14M5 12h14" /></svg>;
    case 'attach':
      return <svg viewBox="0 0 24 24" style={s} fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M21 11l-9 9a5.5 5.5 0 1 1-7.8-7.8l9-9a3.7 3.7 0 0 1 5.2 5.2l-9 9a1.8 1.8 0 0 1-2.6-2.6l8.4-8.4" /></svg>;
    case 'doc':
      return <svg viewBox="0 0 24 24" style={s} fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M14 3v5h5" /><path d="M19 8v11a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h7l5 5Z" /></svg>;
    case 'pen':
      return <svg viewBox="0 0 24 24" style={s} fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M4 20l4-1 11-11-3-3L5 16l-1 4Z" /></svg>;
    case 'bolt':
      return <svg viewBox="0 0 24 24" style={s} fill="currentColor"><path d="M13 2 3 14h7l-1 8 10-12h-7l1-8Z" /></svg>;
    case 'pause':
      return <svg viewBox="0 0 24 24" style={s} fill="currentColor"><rect x="6" y="4" width="4" height="16" rx="1" /><rect x="14" y="4" width="4" height="16" rx="1" /></svg>;
    case 'play':
      return <svg viewBox="0 0 24 24" style={s} fill="currentColor"><path d="M7 4v16l13-8L7 4Z" /></svg>;
    case 'back':
      return <svg viewBox="0 0 24 24" style={s} fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M15 6l-6 6 6 6" /></svg>;
    case 'chev':
      return <svg viewBox="0 0 24 24" style={s} fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M9 6l6 6-6 6" /></svg>;
    case 'search':
      return <svg viewBox="0 0 24 24" style={s} fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"><circle cx="11" cy="11" r="7" /><path d="M21 21l-4.5-4.5" /></svg>;
    case 'plug':
      return <svg viewBox="0 0 24 24" style={s} fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M9 2v4M15 2v4M7 6h10v5a5 5 0 0 1-10 0V6Z" /><path d="M12 16v6" /></svg>;
    case 'cpu':
      return <svg viewBox="0 0 24 24" style={s} fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><rect x="6" y="6" width="12" height="12" rx="2" /><rect x="9" y="9" width="6" height="6" rx="1" /><path d="M3 9h3M3 15h3M18 9h3M18 15h3M9 3v3M15 3v3M9 18v3M15 18v3" /></svg>;
    case 'database':
      return <svg viewBox="0 0 24 24" style={s} fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"><ellipse cx="12" cy="5" rx="8" ry="2.5" /><path d="M4 5v14a8 2.5 0 0 0 16 0V5" /><path d="M4 12a8 2.5 0 0 0 16 0" /></svg>;
    case 'spark':
      return <svg viewBox="0 0 24 24" style={s} fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M12 3l2 5 5 2-5 2-2 5-2-5-5-2 5-2 2-5Z" /></svg>;
  }
  return null;
}

function Header({ title, sub, meta, onHome }) {
  return (
    <div className="app-header">
      <div className="h-row">
        {onHome && (
          <button className="home-btn" onClick={onHome} aria-label="Home">
            <Ico name="home" size={16} />
          </button>
        )}
        <div className="h-title">
          {title}
          {sub && <span className="h-sub">{sub}</span>}
        </div>
        {meta && <div className="h-meta">{meta}</div>}
      </div>
    </div>
  );
}

function BottomNav({ mode, setMode, inboxCount, onTabReset }) {
  const items = [
    { id: 'home',     label: 'Home',     icon: 'home' },
    { id: 'chat',     label: 'Chat',     icon: 'chat' },
    { id: 'inbox',    label: 'Inbox',    icon: 'inbox' },
    { id: 'inject',   label: 'Inject',   icon: 'inject' },
    { id: 'status',   label: 'Status',   icon: 'status' },
    { id: 'settings', label: 'Settings', icon: 'settings' },
  ];
  return (
    <div className="nav">
      {items.map(it => (
        <button
          key={it.id}
          className={`nav-btn${mode === it.id ? ' active' : ''}`}
          onClick={() => {
            if (mode === it.id && onTabReset) onTabReset(it.id);
            else setMode(it.id);
          }}
        >
          <div className="ico">
            <Ico name={it.icon} size={18} />
            {it.id === 'inbox' && inboxCount > 0 && (
              <span className="badge">{inboxCount > 99 ? '99+' : inboxCount}</span>
            )}
          </div>
          <div>{it.label}</div>
        </button>
      ))}
    </div>
  );
}

Object.assign(window, { Ico, Header, BottomNav });