// Sidebar navigation + top header chrome
const { useState: useState_S } = React;

function Sidebar({ active, onNav, collapsed, onToggle }) {
  const items = [
    { id: "dashboard", icon: <IconHome/>, label: "대시보드" },
    { id: "history",   icon: <IconClock/>, label: "분석 이력", badge: "1.2k" },
    { id: "control",   icon: <IconPower/>, label: "제어" },
    { id: "queue",     icon: <IconQueue/>, label: "큐", badge: "4" },
    { id: "scrape",    icon: <IconBox/>, label: "1688 갤러리" },
    { id: "logs",      icon: <IconTerm/>, label: "로그", live: true },
    { id: "patterns",  icon: <IconBrain/>, label: "패턴 학습" },
    { id: "prompts",   icon: <IconWrench/>, label: "프롬프트" },
    { id: "settings",  icon: <IconCog/>, label: "설정" },
  ];
  return (
    <aside className={"sb " + (collapsed ? "collapsed" : "")}>
      <div className="sb-brand">
        <div className="sb-logo">
          <svg width="22" height="22" viewBox="0 0 24 24" fill="none">
            <path d="M4 4 L12 20 L20 4 L16 4 L12 14 L8 4 Z" fill="currentColor"/>
          </svg>
        </div>
        {!collapsed && (
          <div className="sb-title">
            <div className="sb-name">Autosourcing</div>
            <div className="sb-sub">v4.5.7 · prod</div>
          </div>
        )}
        <button className="sb-toggle" onClick={onToggle} title={collapsed ? "펼치기" : "접기"}>
          {collapsed ? "›" : "‹"}
        </button>
      </div>

      <div className="sb-section">
        {!collapsed && <div className="sb-label">Workspace</div>}
        <nav className="sb-nav">
          {items.map(it => (
            <button
              key={it.id}
              className={"sb-item " + (active === it.id ? "active" : "")}
              onClick={() => onNav(it.id)}
              title={collapsed ? it.label : ""}
            >
              <span className="sb-ico">{it.icon}</span>
              {!collapsed && <span className="sb-lbl">{it.label}</span>}
              {!collapsed && it.badge && <span className="sb-badge">{it.badge}</span>}
              {!collapsed && it.live && <span className="sb-live"><span className="pulse"></span>live</span>}
            </button>
          ))}
        </nav>
      </div>

      {!collapsed && (
        <div className="sb-foot">
          <div className="sb-status-card">
            <div className="sb-status-row">
              <span className="sb-status-dot"></span>
              <span className="sb-status-label">시스템</span>
              <span className="sb-status-val">정상</span>
            </div>
            <div className="sb-status-meta">
              <span>uptime 6d 14h</span>
              <span>· 1.2 GB</span>
            </div>
          </div>
        </div>
      )}
    </aside>
  );
}

// ─── Topbar ────────────────────────────────────────────────────
function Topbar({ active, onSearch, running, onStart, onStop, onMobileNav }) {
  const titles = {
    dashboard: "대시보드",
    history: "분석 이력",
    control: "제어",
    queue: "큐",
    logs: "로그",
    patterns: "패턴 학습",
    prompts: "프롬프트",
    settings: "설정",
  };
  return (
    <header className="tb">
      <button className="tb-burger" onClick={onMobileNav} aria-label="메뉴">
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
          <line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/>
        </svg>
      </button>
      <div className="tb-crumb">
        <span className="tb-crumb-root">Autosourcing</span>
        <span className="tb-crumb-sep">/</span>
        <span className="tb-crumb-leaf">{titles[active] || active}</span>
      </div>
      <div className="tb-search">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
          <circle cx="11" cy="11" r="7"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>
        </svg>
        <input placeholder="키워드, 배치 ID, 로그 검색…" onChange={e => onSearch && onSearch(e.target.value)} />
        <Kbd>⌘K</Kbd>
      </div>
      <div className="tb-actions">
        <ConnDot ok={true} />
        <span className="tb-clock"><LiveClock/></span>
        <div className="tb-run">
          <span className={"run-state " + (running ? "on" : "off")}>
            <span className="run-dot"></span>
            {running ? "실행 중" : "대기"}
          </span>
          {running ? (
            <button className="btn btn-danger sm" onClick={onStop}>중단</button>
          ) : (
            <button className="btn btn-primary sm" onClick={onStart}>배치 시작</button>
          )}
        </div>
      </div>
    </header>
  );
}

// ─── Icons (line, 1.5px) ───────────────────────────────────────
function _SvgWrap({ children }) {
  return <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">{children}</svg>;
}
function IconHome() { return <_SvgWrap><path d="M3 12 L12 4 L21 12"/><path d="M5 10 L5 20 L19 20 L19 10"/></_SvgWrap>; }
function IconClock() { return <_SvgWrap><circle cx="12" cy="12" r="9"/><path d="M12 7 L12 12 L15 14"/></_SvgWrap>; }
function IconPower() { return <_SvgWrap><path d="M12 4 L12 12"/><path d="M6 8 a8 8 0 1 0 12 0"/></_SvgWrap>; }
function IconQueue() { return <_SvgWrap><rect x="3" y="6" width="18" height="3"/><rect x="3" y="12" width="18" height="3"/><rect x="3" y="18" width="12" height="3"/></_SvgWrap>; }
function IconTerm() { return <_SvgWrap><rect x="3" y="4" width="18" height="16" rx="2"/><path d="M7 9 L10 12 L7 15"/><line x1="13" y1="15" x2="17" y2="15"/></_SvgWrap>; }
function IconBrain() { return <_SvgWrap><path d="M9 4 a3 3 0 0 0 -3 3 a3 3 0 0 0 -2 5 a3 3 0 0 0 2 5 a3 3 0 0 0 3 3 v-16"/><path d="M15 4 a3 3 0 0 1 3 3 a3 3 0 0 1 2 5 a3 3 0 0 1 -2 5 a3 3 0 0 1 -3 3 v-16"/></_SvgWrap>; }
function IconWrench() { return <_SvgWrap><path d="M14 4 a4 4 0 0 1 5 5 l-9 9 l-4 1 l1 -4 z"/></_SvgWrap>; }
function IconBox() { return <_SvgWrap><path d="M3 7 L12 3 L21 7 L21 17 L12 21 L3 17 Z"/><path d="M3 7 L12 11 L21 7"/><path d="M12 11 L12 21"/></_SvgWrap>; }
function IconCog() { return <_SvgWrap><circle cx="12" cy="12" r="3"/><path d="M19 12 a7 7 0 0 0 -.2 -1.6 l2 -1.5 l-2 -3.4 l-2.4 .8 a7 7 0 0 0 -2.8 -1.6 l-.4 -2.5 h-4 l-.4 2.5 a7 7 0 0 0 -2.8 1.6 l-2.4 -.8 l-2 3.4 l2 1.5 a7 7 0 0 0 0 3.2 l-2 1.5 l2 3.4 l2.4 -.8 a7 7 0 0 0 2.8 1.6 l.4 2.5 h4 l.4 -2.5 a7 7 0 0 0 2.8 -1.6 l2.4 .8 l2 -3.4 l-2 -1.5 z"/></_SvgWrap>; }

Object.assign(window, { Sidebar, Topbar, IconHome, IconClock, IconPower, IconQueue, IconTerm, IconBrain, IconWrench, IconCog, IconBox });