// icons.jsx — 极简内联图标（线形，1.5px 描边，currentColor）
// 仅覆盖本批页面所需；不引入图标库依赖
function svg(d, opts = {}) {
  const { size = 20, fill = "none", sw = 1.6 } = opts;
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill={fill}
      stroke="currentColor" strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round"
      dangerouslySetInnerHTML={{ __html: d }} />
  );
}
const Icon = {
  Gift: (p) => svg('<rect x="3" y="8" width="18" height="13" rx="2"/><path d="M12 8v13M3 12h18M12 8S9 3 6.5 4.5 9 8 12 8zM12 8s3-5 5.5-3.5S15 8 12 8z"/>', p),
  Robot: (p) => svg('<rect x="4" y="8" width="16" height="12" rx="2"/><circle cx="9" cy="13" r="1.2" fill="currentColor" stroke="none"/><circle cx="15" cy="13" r="1.2" fill="currentColor" stroke="none"/><path d="M12 8V4M8 20v2M16 20v2"/>', p),
  Desktop: (p) => svg('<rect x="2" y="3" width="20" height="14" rx="2"/><path d="M8 21h8M12 17v4"/>', p),
  Shop: (p) => svg('<path d="M3 9l1.5-5h15L21 9M3 9v11a1 1 0 001 1h16a1 1 0 001-1V9M3 9h18"/>', p),
  Cart: (p) => svg('<circle cx="9" cy="21" r="1.2" fill="currentColor" stroke="none"/><circle cx="18" cy="21" r="1.2" fill="currentColor" stroke="none"/><path d="M2 3h2.5l2 12.5a1 1 0 001 .8h10.5a1 1 0 001-.8L21 7H6"/>', p),
  Settings: (p) => svg('<circle cx="12" cy="12" r="3"/><path d="M19 12a7 7 0 00-.1-1.2l2-1.5-2-3.4-2.3.9a7 7 0 00-2-1.2L14 3h-4l-.6 2.6a7 7 0 00-2 1.2l-2.3-.9-2 3.4 2 1.5A7 7 0 005 12a7 7 0 00.1 1.2l-2 1.5 2 3.4 2.3-.9a7 7 0 002 1.2L10 21h4l.6-2.6a7 7 0 002-1.2l2.3.9 2-3.4-2-1.5c.06-.4.1-.79.1-1.2z"/>', p),
  Search: (p) => svg('<circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/>', p),
  File: (p) => svg('<path d="M14 3v5h5"/><path d="M14 3H6a2 2 0 00-2 2v14a2 2 0 002 2h12a2 2 0 002-2V8z"/>', p),
  Bell: (p) => svg('<path d="M18 8a6 6 0 10-12 0c0 7-3 9-3 9h18s-3-2-3-9M13.7 21a2 2 0 01-3.4 0"/>', p),
  Globe: (p) => svg('<circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3c2.5 2.5 4 5.5 4 9s-1.5 6.5-4 9c-2.5-2.5-4-5.5-4-9s1.5-6.5 4-9z"/>', p),
  Check: (p) => svg('<path d="M5 12l5 5L20 7"/>', p),
  Close: (p) => svg('<path d="M6 6l12 12M18 6L6 18"/>', p),
  ChevronRight: (p) => svg('<path d="M9 6l6 6-6 6"/>', p),
  ChevronDown: (p) => svg('<path d="M6 9l6 6 6-6"/>', p),
  ArrowLeft: (p) => svg('<path d="M19 12H5M12 19l-7-7 7-7"/>', p),
  ArrowRight: (p) => svg('<path d="M5 12h14M12 5l7 7-7 7"/>', p),
  Sparkles: (p) => svg('<path d="M12 3l1.8 5.2L19 10l-5.2 1.8L12 17l-1.8-5.2L5 10l5.2-1.8L12 3zM19 15l.9 2.1L22 18l-2.1.9L19 21l-.9-2.1L16 18l2.1-.9L19 15z"/>', p),
  Cpu: (p) => svg('<rect x="6" y="6" width="12" height="12" rx="2"/><rect x="9" y="9" width="6" height="6" rx="1"/><path d="M9 2v3M15 2v3M9 19v3M15 19v3M2 9h3M2 15h3M19 9h3M19 15h3"/>', p),
  Cloud: (p) => svg('<path d="M17.5 19a4.5 4.5 0 100-9 6 6 0 00-11.6 2A4 4 0 006 19h11.5z"/>', p),
  Key: (p) => svg('<circle cx="8" cy="15" r="4"/><path d="M10.8 12.2L21 2M16 7l3 3M19 4l2 2"/>', p),
  Copy: (p) => svg('<rect x="9" y="9" width="11" height="11" rx="2"/><path d="M5 15V5a2 2 0 012-2h10"/>', p),
  Upload: (p) => svg('<path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M12 3v13M7 8l5-5 5 5"/>', p),
  Trash: (p) => svg('<path d="M3 6h18M8 6V4a1 1 0 011-1h6a1 1 0 011 1v2M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6"/>', p),
  Phone: (p) => svg('<path d="M22 16.9v3a2 2 0 01-2.2 2 19.8 19.8 0 01-8.6-3.1 19.5 19.5 0 01-6-6 19.8 19.8 0 01-3.1-8.7A2 2 0 014.1 2h3a2 2 0 012 1.7c.1.9.4 1.8.7 2.7a2 2 0 01-.5 2.1L8.1 9.9a16 16 0 006 6l1.4-1.2a2 2 0 012.1-.5c.9.3 1.8.6 2.7.7a2 2 0 011.7 2z"/>', p),
  Mail: (p) => svg('<rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 7l9 6 9-6"/>', p),
  Building: (p) => svg('<rect x="4" y="3" width="16" height="18" rx="1"/><path d="M9 7h2M13 7h2M9 11h2M13 11h2M9 15h2M13 15h2M10 21v-3h4v3"/>', p),
  Calendar: (p) => svg('<rect x="3" y="4" width="18" height="18" rx="2"/><path d="M3 9h18M8 2v4M16 2v4"/>', p),
  Info: (p) => svg('<circle cx="12" cy="12" r="9"/><path d="M12 11v5M12 7.5v.5"/>', p),
  PartyPopper: (p) => svg('<path d="M5 19l8-14M5 19l14-8M5 19a4 4 0 01-2-3M9 5l1.5 1.5M14 7l1.5-1.5M11 3l.5 2M19 13l2 .5M17 9l1.5.5"/>', p),
  TrendingUp: (p) => svg('<path d="M3 17l6-6 4 4 8-8M21 7v5M21 7h-5"/>', p),
  Wallet: (p) => svg('<rect x="3" y="6" width="18" height="14" rx="2"/><path d="M3 10h18M16 15h2"/>', p),
  Clock: (p) => svg('<circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/>', p),
  External: (p) => svg('<path d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6M15 3h6v6M10 14L21 3"/>', p),
  Headset: (p) => svg('<path d="M4 14v-2a8 8 0 0116 0v2M4 14a2 2 0 002 2h1v-6H6a2 2 0 00-2 2zM20 14a2 2 0 00-2 2h-1v-6h1a2 2 0 012 2zM18 16v1a4 4 0 01-4 4h-2"/>', p),
};

// 公共导航与品牌数据
const BRAND = "AImCloud";
const CAMPAIGN = "2026大模型拉新促销";

// 用户状态枚举与展示元数据
const USER_STATES = [
  { key: "GUEST", label: "访客（未登录）", dot: "#86909C", tag: null },
  { key: "REGISTERED", label: "REGISTERED 已注册", dot: "#0085D0", tag: { text: "体验用户", tone: "info" } },
  { key: "LEAD_APPLIED", label: "LEAD_APPLIED 留资审核中", dot: "#F49800", tag: { text: "资料审核中", tone: "info" } },
  { key: "LEAD_APPROVED", label: "LEAD_APPROVED DICT通过$20", dot: "#8EC31E", tag: { text: "试用中", tone: "info" } },
  { key: "EB_APPROVED", label: "EB_APPROVED 累计$200", dot: "#0098AD", tag: { text: "试用中", tone: "info" } },
  { key: "VERIFIED", label: "VERIFIED 待订购", dot: "#F49800", tag: { text: "待订购", tone: "warning" } },
  { key: "SUBSCRIBED", label: "SUBSCRIBED 已订购", dot: "#8EC31E", tag: { text: "已订购", tone: "success" } },
  { key: "ELIGIBLE", label: "ELIGIBLE 存量有资格", dot: "#8EC31E", tag: { text: "有资格", tone: "success" } },
  { key: "INELIGIBLE", label: "INELIGIBLE 存量没资格", dot: "#86909C", tag: { text: "无资格", tone: "neutral" } },
];

// 顶部原型导航
function ProtoNav({ active }) {
  const links = [
    { href: "marketing-home.html", id: "home", label: "营销首页" },
    { href: "campaign-landing.html", id: "campaign", label: "活动落地页" },
    { href: "benefits.html", id: "benefits", label: "我的权益" },
    { href: "modal-lead-form.html", id: "lead", label: "留资弹窗" },
    { href: "balance-modals.html", id: "balance", label: "到账弹窗×3" },
    { href: "admin-campaign-2026.html", id: "admin-campaign", label: "管理-营销活动" },
    { href: "marketing-config.html", id: "admin-config", label: "管理-费用配置" },
    { href: "user-query.html", id: "admin-user", label: "管理-用户查询" },
  ];
  return (
    <nav className="proto-nav">
      <span className="proto-nav-brand">CMI 营销活动平台 · 高保真</span>
      <div className="proto-nav-links">
        {links.map(l => (
          <a key={l.id} href={l.href} className={"proto-nav-link" + (active === l.id ? " proto-nav-link--active" : "")}>{l.label}</a>
        ))}
      </div>
      <span className="proto-nav-hint">桌面端 1440 · 遵循绑定 Token</span>
    </nav>
  );
}

// Logo 组件
function Logo({ variant = "full", context = "floating", style }) {
  const cls = "logo logo--" + context;
  return (
    <div className={cls} style={style}>
      <span className="logo-mark">A</span>
      {variant === "full" && <span className="logo-wordmark">{BRAND}</span>}
    </div>
  );
}

// 状态切换器：支持右侧浮动（默认）或顶部可折叠（variant="top-collapsible"）
function StateSwitcher({ states, active, onChange, title = "用户状态", variant = "floating" }) {
  const [collapsed, setCollapsed] = useState(false);
  if (variant === "top-collapsible") {
    return (
      <div className={"proto-state-bar" + (collapsed ? " proto-state-bar--collapsed" : "")}>
        <button className="proto-state-bar-toggle" onClick={() => setCollapsed(c => !c)}>
          <span>{title}</span>
          <Icon.ChevronDown size={14} style={{ transform: collapsed ? "rotate(-90deg)" : "rotate(0deg)", transition: "transform 0.2s ease" }} />
        </button>
        {!collapsed && (
          <div className="proto-state-bar-list">
            {states.map(s => (
              <button key={s.key}
                className={"proto-state-bar-btn" + (active === s.key ? " proto-state-bar-btn--active" : "")}
                onClick={() => onChange(s.key)}>
                <span className="proto-state-bar-dot" style={{ background: s.dot }} />
                {s.label}
              </button>
            ))}
          </div>
        )}
      </div>
    );
  }
  return (
    <div className="state-switcher">
      <div className="state-switcher-title">
        <span>{title}</span>
        <Icon.Sparkles size={14} />
      </div>
      <div className="state-switcher-list">
        {states.map(s => (
          <button key={s.key}
            className={"state-switcher-item" + (active === s.key ? " state-switcher-item--active" : "")}
            onClick={() => onChange(s.key)}>
            <span className="state-switcher-item-dot" style={{ background: s.dot }} />
            {s.label}
          </button>
        ))}
      </div>
    </div>
  );
}

// 顶栏（Layout B，已登录页用）
function Topbar({ crumbs, state, balance }) {
  const current = USER_STATES.find(s => s.key === state);
  return (
    <header className="topbar">
      <nav className="topbar-crumbs">
        {crumbs.map((c, i) => (
          <span key={i} style={{ display: "inline-flex", alignItems: "center", gap: 8 }}>
            {c.href ? <a href={c.href}>{c.label}</a> : <span style={{ color: "var(--color-text-primary)", fontWeight: 500 }}>{c.label}</span>}
            {i < crumbs.length - 1 && <span className="topbar-crumbs-sep">/</span>}
          </span>
        ))}
      </nav>
      <div className="topbar-spacer" />
      <div className="topbar-actions">
        {balance != null && (
          <span className="pill pill--balance" title="营销金余额">
            <Icon.Wallet size={14} />
            <span className="pill-balance-num">${balance}</span>
          </span>
        )}
        {current && current.tag && <span className={"tag tag--" + current.tag.tone}>{current.tag.text}</span>}
        <button className="pill pill--lang"><Icon.Globe size={14} />中 / EN</button>
        <button className="pill" style={{ padding: 0, width: 32, height: 32, borderRadius: "50%", justifyContent: "center" }}>
          <Icon.Bell size={16} />
        </button>
        <span className="avatar">林</span>
      </div>
    </header>
  );
}

// 左侧导航（Layout B）
function Sidebar({ active, showAdmin = false }) {
  const userMenu = [
    { id: "models-market", name: "算力模型广场", icon: Icon.Desktop },
    { id: "models", name: "模型体验", icon: Icon.Robot },
    { id: "app-market", name: "AI应用市场", icon: Icon.Shop },
    { id: "benefits", name: "我的权益", icon: Icon.Gift },
    { id: "orders", name: "我订购的服务", icon: Icon.Cart },
  ];
  const adminMenu = [
    { id: "marketing-config", name: "营销费用配置", icon: Icon.Settings },
    { id: "campaign-2026", name: "2026大模型拉新", icon: Icon.File },
    { id: "user-query", name: "用户查询", icon: Icon.Search },
  ];
  const Item = ({ m }) => (
    <a className={"sidebar-item" + (active === m.id ? " sidebar-item--active" : "")}>
      <span className="sidebar-item-icon"><m.icon size={20} /></span>
      {m.name}
    </a>
  );
  return (
    <aside className="sidebar">
      <div className="sidebar-logo">
        <Logo variant="full" context="sidebar" />
      </div>
      <nav className="sidebar-nav">
        <div className="sidebar-group-label">产品</div>
        {userMenu.map(m => <Item key={m.id} m={m} />)}
        {showAdmin && <>
          <div className="sidebar-divider" />
          <div className="sidebar-group-label">运营管理</div>
          {adminMenu.map(m => <Item key={m.id} m={m} />)}
        </>}
      </nav>
      <div className="sidebar-footer">
        <div className="sidebar-support">
          <Icon.Headset size={16} />
          <div>
            <div style={{ fontWeight: 600, color: "#fff" }}>客服支持</div>
            <div style={{ fontSize: 11, opacity: 0.7 }}>support@aimcloud.com</div>
          </div>
        </div>
      </div>
    </aside>
  );
}

// 页脚
function Footer({ variant = "standard" }) {
  return (
    <footer className={"footer footer--" + variant}>
      <div className="footer-inner">
        <span>© 2026 中国移动国际有限公司 · AImCloud</span>
        <div className="footer-links">
          <a>产品</a><a>帮助中心</a><a>关于我们</a><a>联系我们</a><a>隐私政策</a>
        </div>
      </div>
    </footer>
  );
}

// 把所有共享件挂到 window，供各页面 HTML 引用
Object.assign(window, {
  Icon, BRAND, CAMPAIGN, USER_STATES,
  ProtoNav, Logo, StateSwitcher, Topbar, Sidebar, Footer,
  // 共享 Toast 提示工具
  showToast: (message, type = "warning") => {
    const toast = document.createElement("div");
    toast.className = "toast toast--" + type;
    const icon = type === "warning"
      ? '<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="7" stroke="currentColor" stroke-width="1.5"/><line x1="8" y1="4.5" x2="8" y2="9" stroke="currentColor" stroke-width="1.5"/><circle cx="8" cy="11.5" r="0.75" fill="currentColor"/></svg>'
      : type === "success"
        ? '<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="7" stroke="currentColor" stroke-width="1.5"/><polyline points="5,8 7.5,10.5 11,6" stroke="currentColor" stroke-width="1.5" fill="none"/></svg>'
        : '';
    toast.innerHTML = '<span style="display:flex;align-items:center;gap:8px">' + icon + message + '</span>';
    document.body.appendChild(toast);
    setTimeout(() => { toast.style.opacity = "0"; toast.style.transform = "translateY(16px)"; }, 2500);
    setTimeout(() => document.body.removeChild(toast), 3000);
  },
});