/* global React */
const { useState, useMemo } = React;

// ───────────────────────── Icons (inline SVG) ─────────────────────────
const Icon = ({ name, size = 14, className = "" }) => {
  const paths = {
    dashboard: <><rect x="3" y="3" width="7" height="7" rx="1.5"/><rect x="14" y="3" width="7" height="4" rx="1.5"/><rect x="14" y="11" width="7" height="10" rx="1.5"/><rect x="3" y="14" width="7" height="7" rx="1.5"/></>,
    activity: <path d="M3 12h4l2-7 4 14 2-7h6"/>,
    timeline: <><path d="M3 6h18"/><path d="M3 12h12"/><path d="M3 18h18"/><circle cx="6" cy="6" r="1.5" fill="currentColor"/><circle cx="13" cy="12" r="1.5" fill="currentColor"/><circle cx="17" cy="18" r="1.5" fill="currentColor"/></>,
    board: <><rect x="3" y="4" width="5" height="16" rx="1"/><rect x="9.5" y="4" width="5" height="11" rx="1"/><rect x="16" y="4" width="5" height="14" rx="1"/></>,
    plan: <><path d="M5 3h10l4 4v14H5z"/><path d="M15 3v4h4"/><path d="M9 12h7M9 16h7M9 8h3"/></>,
    hook: <><path d="M12 3v8"/><path d="M12 11a4 4 0 1 1-4 4"/><circle cx="12" cy="3" r="1.5" fill="currentColor"/></>,
    agent: <><circle cx="12" cy="8" r="4"/><path d="M5 21c0-3.5 3-6 7-6s7 2.5 7 6"/></>,
    skill: <><path d="M12 3l2.5 5 5.5.8-4 3.9.9 5.5L12 15.7 7.1 18.2 8 12.7 4 8.8l5.5-.8z"/></>,
    mcp: <><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 9h18"/><circle cx="6" cy="7" r=".5" fill="currentColor"/><circle cx="8" cy="7" r=".5" fill="currentColor"/></>,
    settings: <><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1.1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1A1.7 1.7 0 0 0 4.6 9a1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1A1.7 1.7 0 0 0 9 4.7a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8V9a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1z"/></>,
    chart: <><path d="M3 3v18h18"/><path d="M7 14l4-4 3 3 5-7"/></>,
    server: <><rect x="3" y="4" width="18" height="7" rx="1.5"/><rect x="3" y="13" width="18" height="7" rx="1.5"/><circle cx="7" cy="7.5" r=".8" fill="currentColor"/><circle cx="7" cy="16.5" r=".8" fill="currentColor"/></>,
    play: <path d="M7 4l13 8-13 8z" fill="currentColor"/>,
    pause: <><rect x="6" y="4" width="4" height="16"/><rect x="14" y="4" width="4" height="16"/></>,
    plus: <><path d="M12 5v14M5 12h14"/></>,
    search: <><circle cx="11" cy="11" r="7"/><path d="M21 21l-4-4"/></>,
    chev: <path d="M9 6l6 6-6 6"/>,
    chevd: <path d="M6 9l6 6 6-6"/>,
    dot: <circle cx="12" cy="12" r="3" fill="currentColor"/>,
    refresh: <><path d="M4 12a8 8 0 0 1 14-5.3L20 9"/><path d="M20 4v5h-5"/><path d="M20 12a8 8 0 0 1-14 5.3L4 15"/><path d="M4 20v-5h5"/></>,
    filter: <path d="M3 5h18l-7 9v6l-4-2v-4z"/>,
    download: <><path d="M12 4v12"/><path d="M7 11l5 5 5-5"/><path d="M5 20h14"/></>,
    edit: <><path d="M14 4l6 6L10 20H4v-6z"/></>,
    trash: <><path d="M4 7h16"/><path d="M9 7V4h6v3"/><path d="M6 7l1 13h10l1-13"/></>,
    copy: <><rect x="8" y="8" width="12" height="12" rx="1.5"/><path d="M16 8V4H4v12h4"/></>,
    bolt: <path d="M13 3L4 14h6l-1 7 9-11h-6z"/>,
    db: <><ellipse cx="12" cy="5" rx="8" ry="3"/><path d="M4 5v6c0 1.7 3.6 3 8 3s8-1.3 8-3V5"/><path d="M4 11v6c0 1.7 3.6 3 8 3s8-1.3 8-3v-6"/></>,
    folder: <path d="M3 6a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>,
    terminal: <><rect x="3" y="4" width="18" height="16" rx="1.5"/><path d="M7 9l3 3-3 3M13 15h4"/></>,
    branch: <><circle cx="6" cy="5" r="2"/><circle cx="18" cy="5" r="2"/><circle cx="6" cy="19" r="2"/><path d="M6 7v10"/><path d="M18 7v3a4 4 0 0 1-4 4H6"/></>,
    warn: <><path d="M12 3l10 18H2z"/><path d="M12 10v5M12 18v.5"/></>,
    check: <path d="M5 12l5 5L20 7"/>,
    x: <path d="M6 6l12 12M18 6L6 18"/>,
    ext: <><path d="M14 4h6v6"/><path d="M20 4l-9 9"/><path d="M19 13v6H5V5h6"/></>,
    eye: <><path d="M2 12s4-7 10-7 10 7 10 7-4 7-10 7S2 12 2 12z"/><circle cx="12" cy="12" r="3"/></>,
    pin: <><path d="M12 2v6l3 3v3H9v-3l3-3V2z"/><path d="M12 14v8"/></>,
    tag: <><path d="M3 12V4h8l10 10-8 8z"/><circle cx="7.5" cy="7.5" r="1.5"/></>,
    book: <><path d="M4 5a2 2 0 0 1 2-2h13v18H6a2 2 0 0 1-2-2z"/><path d="M4 17a2 2 0 0 1 2-2h13"/></>,
    globe: <><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18"/></>,
    shield: <path d="M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6z"/>,
    spark: <><path d="M12 3v4M12 17v4M3 12h4M17 12h4M5.6 5.6l2.8 2.8M15.6 15.6l2.8 2.8M5.6 18.4l2.8-2.8M15.6 8.4l2.8-2.8"/></>,
    clock: <><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></>,
    git: <><circle cx="6" cy="5" r="2"/><circle cx="18" cy="5" r="2"/><circle cx="6" cy="19" r="2"/><path d="M6 7v10"/><path d="M18 7v3a4 4 0 0 1-4 4H6"/></>,
    puzzle: <><path d="M14 4a2 2 0 1 0-4 0v3H7a2 2 0 0 0-2 2v3a2 2 0 1 0 0 4v3a2 2 0 0 0 2 2h3a2 2 0 1 1 4 0h3a2 2 0 0 0 2-2v-3a2 2 0 1 0 0-4V9a2 2 0 0 0-2-2h-3z"/></>,
    statusline: <><rect x="3" y="14" width="18" height="5" rx="1"/><path d="M5 4h14M5 8h10M5 12h14"/></>,
    bookmark: <path d="M6 3h12v18l-6-4-6 4z"/>,
  };
  return (
    <svg viewBox="0 0 24 24" width={size} height={size} fill="none"
      stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"
      className={className} style={{ flex: "none" }}>
      {paths[name] || <circle cx="12" cy="12" r="6"/>}
    </svg>
  );
};

// ───────────────────────── Shell ─────────────────────────
const NAV = [
  { section: "Workspace" },
  { id: "dashboard", label: "Dashboard", icon: "dashboard", screen: "S01" },
  { id: "sessions", label: "Sessions", icon: "activity", badge: "3", live: true, screen: "S01" },
  { id: "tasks", label: "Tasks", icon: "board", badge: "12", screen: "S04" },
  { id: "plans", label: "Plans", icon: "plan", screen: "S05" },
  { id: "analytics", label: "Analytics", icon: "chart", screen: "S11" },
  { section: "Manager" },
  { id: "hooks", label: "Hooks", icon: "hook", screen: "S06" },
  { id: "agents", label: "Agents", icon: "agent", screen: "S07" },
  { id: "skills", label: "Skills", icon: "skill", screen: "S08" },
  { id: "mcp", label: "MCP Servers", icon: "mcp", screen: "S09" },
  { id: "ccsettings", label: "Claude Settings", icon: "settings", screen: "S10" },
  { id: "providers", label: "Providers", icon: "globe", screen: "S19" },
  { id: "plugins", label: "Plugins", icon: "puzzle", screen: "S17" },
  { id: "statusline", label: "Status line", icon: "statusline", screen: "S18" },
  { section: "System" },
  { id: "ccm", label: "CCM Config", icon: "server", screen: "S12" },
];

function Shell({ active = "dashboard", title, crumbs, children, statusRight, search = "session: implement-auth" }) {
  return (
    <div className="ccm app">
      <div className="titlebar">
        <div className="tb-dots"><span className="tb-dot r"/><span className="tb-dot y"/><span className="tb-dot g"/></div>
        <div className="tb-title"><b>CCM</b> · Claude Code Manager · {title}</div>
        <div className="tb-spacer"/>
        <div className="tb-search">
          <Icon name="search" size={11}/>
          <span>{search}</span>
          <span className="kbd">⌘K</span>
        </div>
      </div>
      <div className="nav">
        {NAV.map((n, i) => n.section
          ? <div key={i} className="nav-section">{n.section}</div>
          : (
            <div key={n.id} className={`nav-item ${active === n.id ? "active" : ""}`}>
              <Icon name={n.icon} size={14} className="ico"/>
              <span>{n.label}</span>
              {n.live ? <span className="dot" title="live"/> : n.badge ? <span className="badge">{n.badge}</span> : null}
            </div>
          )
        )}
      </div>
      <div className="main">{children}</div>
      <div className="statusbar">
        <span className="seg live">server <b>:7421</b></span>
        <span className="seg"><Icon name="db" size={10}/> sqlite <b>1.2 MB</b></span>
        <span className="seg"><Icon name="folder" size={10}/> ~/projects/ccm-web</span>
        <span className="seg"><Icon name="branch" size={10}/> main</span>
        <span className="spacer"/>
        {statusRight || (
          <>
            <span className="seg">3 active sessions</span>
            <span className="seg">tokens today <b>148.2k</b></span>
            <span className="seg">v0.4.2</span>
          </>
        )}
      </div>
    </div>
  );
}

window.Icon = Icon;
window.Shell = Shell;
window.NAV = NAV;