/* CRM Shell — topbar, sidebar, statusbar, contour decoration */
const { useState: useSh, useEffect: useEh } = React;

/* ---------- Glyph icons (line / schematic) ---------- */
function Glyph({ name, size = 18, color = "currentColor" }) {
  const props = { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: 1.2, strokeLinecap: "round", strokeLinejoin: "round" };
  switch (name) {
    case "hub": return (
      <svg {...props}>
        <circle cx="12" cy="12" r="2.5" />
        <circle cx="4" cy="6" r="1.5" />
        <circle cx="20" cy="6" r="1.5" />
        <circle cx="4" cy="18" r="1.5" />
        <circle cx="20" cy="18" r="1.5" />
        <path d="M5.2 6.7L9.8 10.5M18.8 6.7L14.2 10.5M5.2 17.3L9.8 13.5M18.8 17.3L14.2 13.5" />
      </svg>
    );
    case "dash": return (
      <svg {...props}>
        <path d="M3 13a9 9 0 0118 0" />
        <path d="M12 13l4-4" />
        <circle cx="12" cy="13" r="1" fill={color} />
        <path d="M3 19h18" />
      </svg>
    );
    case "people": return (
      <svg {...props}>
        <circle cx="9" cy="9" r="3" />
        <path d="M3 19c0-3 3-5 6-5s6 2 6 5" />
        <circle cx="17" cy="8" r="2" />
        <path d="M15 19c0-2 2-3.5 4-3.5" />
      </svg>
    );
    case "deals": return (
      <svg {...props}>
        <rect x="3" y="6" width="18" height="13" />
        <path d="M3 10h18" />
        <path d="M9 6V4h6v2" />
      </svg>
    );
    case "tasks": return (
      <svg {...props}>
        <rect x="4" y="4" width="16" height="16" />
        <path d="M8 9l2 2 4-4" />
        <path d="M8 15h8" />
      </svg>
    );
    case "pipeline": return (
      <svg {...props}>
        <rect x="3" y="5" width="4" height="14" />
        <rect x="10" y="9" width="4" height="10" />
        <rect x="17" y="3" width="4" height="16" />
      </svg>
    );
    case "inbox": return (
      <svg {...props}>
        <path d="M3 13l3-8h12l3 8v6H3z" />
        <path d="M3 13h5l1 2h6l1-2h5" />
      </svg>
    );
    case "settings": return (
      <svg {...props}>
        <circle cx="12" cy="12" r="3" />
        <path d="M12 3v3M12 18v3M3 12h3M18 12h3M5.6 5.6l2 2M16.4 16.4l2 2M5.6 18.4l2-2M16.4 7.6l2-2" />
      </svg>
    );
    case "procurement": return (
      <svg {...props}>
        <path d="M4 7h16l-2 11H6z" />
        <path d="M9 7V4h6v3" />
        <circle cx="9" cy="14" r="1" fill={color} />
        <circle cx="15" cy="14" r="1" fill={color} />
      </svg>
    );
    case "finance": return (
      <svg {...props}>
        <circle cx="12" cy="12" r="8" />
        <path d="M12 6v12M9 9h4.5a1.5 1.5 0 010 3H9a1.5 1.5 0 000 3H15" />
      </svg>
    );
    case "production": return (
      <svg {...props}>
        <rect x="3" y="11" width="6" height="9" />
        <rect x="9" y="6" width="6" height="14" />
        <rect x="15" y="3" width="6" height="17" />
        <path d="M3 20h18" />
      </svg>
    );
    case "client": return (
      <svg {...props}>
        <circle cx="12" cy="8" r="3.5" />
        <path d="M5 20c0-4 3-6 7-6s7 2 7 6" />
        <path d="M16 4l2 2-2 2" />
      </svg>
    );
    case "users": return (
      <svg {...props}>
        <circle cx="8"  cy="8"  r="2.5" />
        <circle cx="16" cy="8"  r="2.5" />
        <path d="M3 19c0-3 2.5-4.5 5-4.5s5 1.5 5 4.5" />
        <path d="M13 19c0-3 2.5-4.5 5-4.5" />
        <path d="M19 12v4M21 14h-4" />
      </svg>
    );
    default: return null;
  }
}

/* ---------- Topbar ---------- */
function TopBar({ tweaksOn, onToggleTweaks }) {
  const now = new Date();
  const time = now.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit", hour12: false });
  return (
    <header className="topbar">
      <div className="topbar-brand">
        <span className="topbar-brand-mark"><LogoMark size={20} /></span>
        <span className="topbar-brand-text">
          Aris
          <small>OPS CONSOLE · v1.04</small>
        </span>
      </div>
      <div className="topbar-search">
        <input type="text" placeholder="Search customers, deals, agents…" />
      </div>
      <div className="topbar-right">
        <span className="topbar-coord">49.7016°N · 123.1558°W</span>
        <span className="topbar-coord">{time} PT</span>
        <span style={{
          fontFamily: "var(--font-mono)", fontSize: 9, letterSpacing: "0.14em",
          textTransform: "uppercase", padding: "2px 7px",
          border: "1px solid var(--rule)",
          borderRadius: 1, color: "var(--fog)",
        }}>
          {(window.ArisAuth.getRole() || "viewer").toUpperCase()}
        </span>
        <span className="topbar-avatar">
          {(window.ArisAuth.getUsername() || "U").slice(0, 2).toUpperCase()}
        </span>
      </div>
    </header>
  );
}

/* ---------- Sidebar ---------- */
function Sidebar({ active, onChange }) {
  const isAdmin = window.ArisAuth.isAdmin();

  const ops = [
    { id: "agents",    icon: "hub",      label: "Agents Hub",  count: 4 },
    { id: "dashboard", icon: "dash",     label: "Dashboard",   count: null },
  ];
  const work = [
    { id: "leads",     icon: "inbox",    label: "Leads",       count: null },
    { id: "deals",     icon: "deals",    label: "Deals",       count: null },
    { id: "pipeline",  icon: "pipeline", label: "Pipeline",    count: null },
    { id: "people",    icon: "people",   label: "Customers",   count: null },
    { id: "tasks",     icon: "tasks",    label: "Tasks",       count: null },
  ];
  const sys = [
    ...(isAdmin ? [{ id: "users", icon: "users", label: "Users", count: null }] : []),
    { id: "settings", icon: "settings", label: "Settings", count: null },
  ];

  const renderItem = (item, idx, prefix) => (
    <li key={item.id}>
      <button
        className={active === item.id ? "active" : ""}
        onClick={() => onChange(item.id)}
      >
        <span className="num">{prefix}.{String(idx+1).padStart(2,"0")}</span>
        <Glyph name={item.icon} size={15} />
        <span className="label">{item.label}</span>
        {item.count !== null && <span className="count">{item.count}</span>}
      </button>
    </li>
  );

  return (
    <aside className="sidebar">
      <div className="sidebar-section">
        <div className="sidebar-section-head">
          <span className="sidebar-eyebrow">§ 01 / Ops</span>
          <span className="sidebar-coord">A</span>
        </div>
        <ul className="sidebar-nav">
          {ops.map((it, i) => renderItem(it, i, "01"))}
        </ul>
      </div>

      <div className="sidebar-section">
        <div className="sidebar-section-head">
          <span className="sidebar-eyebrow">§ 02 / Work</span>
          <span className="sidebar-coord">B</span>
        </div>
        <ul className="sidebar-nav">
          {work.map((it, i) => renderItem(it, i, "02"))}
        </ul>
      </div>

      <div className="sidebar-section">
        <div className="sidebar-section-head">
          <span className="sidebar-eyebrow">§ 03 / Sys</span>
          <span className="sidebar-coord">C</span>
        </div>
        <ul className="sidebar-nav">
          {sys.map((it, i) => renderItem(it, i, "03"))}
        </ul>
      </div>

      {/* small schematic decoration */}
      <div style={{padding: "0 24px", marginTop: 32, opacity: 0.7}}>
        <svg viewBox="0 0 180 60" width="100%" height="60" fill="none" stroke="var(--rule-soft)" strokeWidth="1">
          <path d="M0 50 L40 50 L60 30 L100 30 L120 10 L180 10" />
          <path d="M0 50 L40 50 L60 30 L100 30 L120 10 L180 10" stroke="var(--accent)" strokeOpacity="0.4" strokeDasharray="2 3" />
          <circle cx="40" cy="50" r="2" fill="var(--accent)" />
          <circle cx="60" cy="30" r="2" fill="var(--accent)" />
          <circle cx="120" cy="10" r="2" fill="var(--accent)" />
        </svg>
        <div style={{fontFamily:"var(--font-mono)", fontSize:9, letterSpacing:"0.14em", color:"var(--fog)", textTransform:"uppercase", marginTop:8}}>
          Net status · Online
        </div>
      </div>
    </aside>
  );
}

/* ---------- Status bar ---------- */
function StatusBar({ view }) {
  return (
    <footer className="statusbar">
      <div>
        <span className="live">SYS · ONLINE</span>
        <span>FILE://CRM/{view.toUpperCase()}</span>
        <span>BUILD 2026.05</span>
      </div>
      <div>
        <span>4 AGENTS · 2 ACTIVE</span>
        <span>QUEUE 03</span>
        <span>UPTIME 99.97%</span>
      </div>
    </footer>
  );
}

/* ---------- Topographic page background decoration ---------- */
function ContourDeco() {
  return (
    <svg className="contour-bg" viewBox="0 0 1200 800" preserveAspectRatio="none">
      <g fill="none" stroke="var(--ink)" strokeWidth="0.6">
        <path d="M0 600 Q300 580 600 560 T1200 540" />
        <path d="M0 640 Q300 620 600 600 T1200 580" />
        <path d="M0 680 Q300 660 600 640 T1200 620" />
        <path d="M0 720 Q300 700 600 680 T1200 660" />
        <path d="M-40 200 Q200 240 500 220 T1240 280" opacity="0.6" />
        <path d="M-40 240 Q200 280 500 260 T1240 320" opacity="0.6" />
      </g>
    </svg>
  );
}

Object.assign(window, { Glyph, TopBar, Sidebar, StatusBar, ContourDeco });