/* Shared layout primitives: AppShell, Sidebar, Topbar */
const { useState, useEffect, useRef } = React;

const MikakaMark = ({ size = 28 }) => (
  <svg viewBox="0 0 64 64" width={size} height={size} aria-hidden>
    <path fill="#F27621" d="M18 11c-1.3 0-2.5.8-3 2L8 29c-.5 1.3 0 2.8 1.2 3.4l5 2.6c1.4.7 3.1.2 3.9-1.2l2-3.4 6.4 8.6c1.2 1.6 3.7 1.6 4.9 0L42 25l-4-6c-.9-1.3-2.7-1.7-4-.9l-4 2.5-6.2-8.2C23 11.5 22 11 21 11Z"/>
    <path fill="#F27621" d="M30 34 23 47.5c-.7 1.4 0 3.1 1.4 3.7l3.6 1.5c1.4.6 3-.1 3.6-1.4L41 32Z"/>
  </svg>
);

const Wordmark = () => (
  <span className="wordmark">mikaka<span className="v">voice</span></span>
);

const Sidebar = ({ userType, current, onGo, onLogout, mobileOpen, onCloseMobile }) => {
  const [menuOpen, setMenuOpen] = useState(false);
  useEffect(() => {
    if (!menuOpen) return;
    const close = () => setMenuOpen(false);
    window.addEventListener("click", close);
    return () => window.removeEventListener("click", close);
  }, [menuOpen]);
  const adminNav = [
    { g: "Overview", items: [
      { id: "dashboard", icon: "home", label: "Dashboard" },
      { id: "tenants", icon: "users", label: "Tenants", count: 24 },
      { id: "calls-global", icon: "phone", label: "All calls" },
      { id: "tenant-insights", icon: "chart", label: "Insights" },
    ]},
    { g: "Operations", items: [
      { id: "at-setup", icon: "inbox", label: "AT setup queue", count: 3 },
      { id: "number-pool", icon: "hash", label: "Number pool" },
      { id: "routing", icon: "layers", label: "Routing & LCR" },
      { id: "fraud", icon: "shield", label: "Fraud & limits" },
    ]},
    { g: "System", items: [
      { id: "billing-plans", icon: "card", label: "Billing plans" },
      { id: "audit", icon: "log", label: "Audit trail" },
      { id: "admin-settings", icon: "settings", label: "Platform settings" },
    ]},
  ];
  const tenantNav = [
    { g: "Workspace", items: [
      { id: "tenant-dashboard", icon: "home", label: "Home" },
      { id: "ai-receptionist", icon: "bot", label: "AI receptionist" },
      { id: "tenant-calls", icon: "phone", label: "Calls" },
      { id: "tenant-insights", icon: "chart", label: "Insights" },
    ]},
    { g: "Manage", items: [
      { id: "tenant-numbers", icon: "hash", label: "Numbers" },
      { id: "tenant-team", icon: "users", label: "Team" },
      { id: "connections", icon: "link", label: "Connections" },
      { id: "tenant-billing", icon: "card", label: "Billing" },
    ]},
    { g: "Account", items: [
      { id: "tenant-settings", icon: "settings", label: "Settings" },
      { id: "support", icon: "book", label: "Help & support" },
    ]},
  ];
  const groups = userType === "admin" ? adminNav : tenantNav;

  const handleGo = (id) => { onGo(id); onCloseMobile && onCloseMobile(); };

  return (
    <aside className={"sidebar " + (mobileOpen ? "mobile-open" : "")}>
      <div className="brand">
        <MikakaMark size={26} />
        <Wordmark />
        <button className="btn btn-ghost btn-icon btn-sm mobile-close" onClick={onCloseMobile} aria-label="Close" style={{ marginLeft: "auto" }}>
          <Icon name="x"/>
        </button>
      </div>
      <nav>
        {groups.map((grp, gi) => (
          <div className="nav-group" key={gi}>
            <div className="label">{grp.g}</div>
            {grp.items.map(it => (
              <div key={it.id} className={`nav-item ${current === it.id ? "active" : ""}`} onClick={() => handleGo(it.id)}>
                <Icon name={it.icon} className="icon" />
                <span className="lbl">{it.label}</span>
                {it.count ? <span className="count">{it.count}</span> : null}
              </div>
            ))}
          </div>
        ))}
      </nav>
      <div className="foot" style={{ position: "relative", cursor: "pointer" }} onClick={(e) => { e.stopPropagation(); setMenuOpen(m => !m); }}>
        <div className="avatar">{userType === "admin" ? "OP" : "AN"}</div>
        <div className="who stack" style={{ lineHeight: 1.2, flex: 1, minWidth: 0 }}>
          <span style={{ fontSize: 13, fontWeight: 500 }}>{userType === "admin" ? "Ops Team" : "Acme Nairobi"}</span>
          <span style={{ fontSize: 11.5, color: "var(--fg-muted)" }}>{userType === "admin" ? "super-admin" : "owner"}</span>
        </div>
        <Icon name="chevron-down" size={14} style={{ color: "var(--fg-faint)", transform: menuOpen ? "rotate(180deg)" : "none", transition: "transform .2s" }}/>
        {menuOpen && (
          <div className="menu" onClick={(e) => e.stopPropagation()} style={{ position: "absolute", bottom: "calc(100% + 6px)", left: 12, right: 12, background: "var(--bg-elev)", border: "1px solid var(--border)", borderRadius: "var(--r-md)", boxShadow: "var(--sh-lg)", padding: 4, zIndex: 50 }}>
            <div className="menu-item" onClick={() => { setMenuOpen(false); handleGo(userType === "admin" ? "admin-settings" : "tenant-settings"); }}>
              <Icon name="settings" size={14}/> <span>Account settings</span>
            </div>
            <div className="menu-item" onClick={() => { setMenuOpen(false); handleGo("support"); }}>
              <Icon name="book" size={14}/> <span>Help & support</span>
            </div>
            <div className="menu-sep"/>
            <div className="menu-item danger" onClick={() => { setMenuOpen(false); onLogout && onLogout(); }}>
              <Icon name="log-out" size={14}/> <span>Log out</span>
            </div>
          </div>
        )}
      </div>
    </aside>
  );
};

const Topbar = ({ title, onThemeToggle, theme, right, onLogout, userType, onOpenNotif, onOpenCmd, notifUnread, canGoBack, onBack, onOpenMobileNav }) => {
  const [open, setOpen] = useState(false);
  useEffect(() => {
    if (!open) return;
    const close = () => setOpen(false);
    window.addEventListener("click", close);
    return () => window.removeEventListener("click", close);
  }, [open]);
  return (
    <div className="topbar">
      <button className="btn btn-ghost btn-icon mobile-nav-btn" onClick={onOpenMobileNav} aria-label="Menu">
        <Icon name="menu"/>
      </button>
      {canGoBack && (
        <button className="btn btn-ghost btn-sm topbar-back" onClick={onBack} title="Go back">
          <Icon name="arrow-left" size={14}/> <span className="hide-sm">Back</span>
        </button>
      )}
      <div className="topbar-title">{title}</div>
      <button className="search hide-sm" onClick={onOpenCmd} style={{ textAlign: "left", cursor: "pointer" }}>
        <Icon name="search" className="icon" size={15} />
        <span style={{ color: "var(--fg-faint)", flex: 1 }}>Search tenants, numbers, calls…</span>
        <span className="kbd">⌘K</span>
      </button>
      <div style={{ flex: 1 }}/>
      {right}
      <button className="btn btn-ghost btn-icon mobile-search-btn" onClick={onOpenCmd} aria-label="Search">
        <Icon name="search"/>
      </button>
      <button className="btn btn-ghost btn-icon" onClick={onThemeToggle} title="Toggle theme">
        <Icon name={theme === "dark" ? "sun" : "moon"} />
      </button>
      <button className="btn btn-ghost btn-icon" title="Notifications" onClick={onOpenNotif} style={{ position: "relative" }}>
        <Icon name="bell" />
        {notifUnread > 0 && <span className="notif-dot" style={{ position: "absolute", top: 6, right: 6 }}>{notifUnread > 9 ? "9+" : notifUnread}</span>}
      </button>
      <div style={{ position: "relative" }} onClick={(e) => e.stopPropagation()}>
        <button className="avatar hide-sm" style={{ width: 32, height: 32, border: 0, cursor: "pointer" }} onClick={() => setOpen(o => !o)}>
          {userType === "admin" ? "OP" : "AN"}
        </button>
        {open && (
          <div className="menu" style={{ position: "absolute", top: "calc(100% + 8px)", right: 0, minWidth: 200, background: "var(--bg-elev)", border: "1px solid var(--border)", borderRadius: "var(--r-md)", boxShadow: "var(--sh-lg)", padding: 4, zIndex: 50 }}>
            <div style={{ padding: "10px 12px", borderBottom: "1px solid var(--border)", marginBottom: 4 }}>
              <div style={{ fontSize: 13, fontWeight: 500 }}>{userType === "admin" ? "Ops Team" : "Ayo Mwangi"}</div>
              <div style={{ fontSize: 12, color: "var(--fg-muted)" }}>{userType === "admin" ? "ops@mikaka.io" : "ayo@acme.ke"}</div>
            </div>
            <div className="menu-item"><Icon name="settings" size={14}/> <span>Account settings</span></div>
            <div className="menu-sep"/>
            <div className="menu-item danger" onClick={() => { setOpen(false); onLogout && onLogout(); }}>
              <Icon name="log-out" size={14}/> <span>Log out</span>
            </div>
          </div>
        )}
      </div>
    </div>
  );
};

const StatCard = ({ k, v, delta, up = true, spark }) => (
  <div className="card stat">
    <div className="k">{k}</div>
    <div className="v">{v}</div>
    <div className="d">
      {delta && <span className={up ? "up" : "dn"}>{up ? "▲" : "▼"} {delta}</span>}
      {spark}
    </div>
  </div>
);

const Spark = ({ data = [4,7,6,8,11,9,13,10,14,12,16,18,15,19], color }) => {
  const w = 80, h = 28;
  const max = Math.max(...data), min = Math.min(...data);
  const pts = data.map((d, i) => [i * (w / (data.length - 1)), h - ((d - min) / (max - min || 1)) * h]);
  const path = pts.map((p, i) => (i === 0 ? "M" : "L") + p[0].toFixed(1) + " " + p[1].toFixed(1)).join(" ");
  const fill = `${path} L ${w} ${h} L 0 ${h} Z`;
  return (
    <svg className="spark" width={w} height={h} style={{ marginLeft: "auto" }}>
      <path className="fill" d={fill} style={color ? { fill: color } : undefined}/>
      <path d={path} style={color ? { stroke: color } : undefined}/>
    </svg>
  );
};

const Chip = ({ kind, children, dot }) => (
  <span className={`chip ${dot ? "dot" : ""} chip-${kind || "neutral"}`}>{children}</span>
);

const Section = ({ title, action, children, sub }) => (
  <section style={{ marginBottom: 28 }}>
    <div className="row between" style={{ marginBottom: 12, flexWrap: "wrap", gap: 12 }}>
      <div>
        <h3 style={{ margin: 0, fontSize: 16, fontWeight: 500, letterSpacing: "-0.01em" }}>{title}</h3>
        {sub && <div style={{ fontSize: 12.5, color: "var(--fg-muted)", marginTop: 2 }}>{sub}</div>}
      </div>
      {action}
    </div>
    {children}
  </section>
);

/* Multi-select filter dropdown — used across tables */
const FilterMenu = ({ label, options, selected, onChange }) => {
  const [open, setOpen] = useState(false);
  useEffect(() => {
    if (!open) return;
    const h = () => setOpen(false);
    window.addEventListener("click", h);
    return () => window.removeEventListener("click", h);
  }, [open]);
  const isAll = !selected || selected.length === 0;
  const displayText = isAll ? "any" : selected.length === 1 ? selected[0] : selected.length + " selected";
  const toggle = (v) => {
    if (isAll) { onChange([v]); return; }
    if (selected.includes(v)) {
      const next = selected.filter(x => x !== v);
      onChange(next.length === 0 ? [] : next);
    } else onChange([...selected, v]);
  };
  return (
    <div style={{ position: "relative" }} onClick={e => e.stopPropagation()}>
      <button className="chip chip-btn" onClick={() => setOpen(o => !o)}>
        <span>{label}: <b style={{ color: "var(--fg)", fontWeight: 500 }}>{displayText}</b></span>
        <Icon name="chevron-down" size={12}/>
      </button>
      {open && (
        <div className="filter-menu">
          <div className="filter-head">
            <span style={{ fontSize: 11, textTransform: "uppercase", letterSpacing: ".1em", color: "var(--fg-faint)", fontWeight: 600 }}>{label}</span>
            {!isAll && <button className="link-u" onClick={() => onChange([])} style={{ fontSize: 12 }}>Clear</button>}
          </div>
          {options.map(o => {
            const on = !isAll && selected.includes(o);
            return (
              <div key={o} className="filter-item" onClick={() => toggle(o)}>
                <div className={"checkbox " + (on ? "on" : "")}>{on && <Icon name="check" size={10}/>}</div>
                <span style={{ textTransform: "capitalize" }}>{o}</span>
              </div>
            );
          })}
        </div>
      )}
    </div>
  );
};

Object.assign(window, { MikakaMark, Wordmark, Sidebar, Topbar, StatCard, Spark, Chip, Section, FilterMenu });