/* ============================================================
   roles.jsx — 「支撑每一种角色」多角色铺开屏
   紧接引擎收口屏：同一台引擎，服务世界上几乎每一种职业。
   产品/引擎居中（圆角卡片，与全篇 hub 设计语言一致），角色径向环绕，
   连线复用全篇的 wire-base / wire-lit 描边 + 彗星流光；投资人节点高亮标记
   （= 刚刚投资人亲手跑过的那个角色）。
   进屏即自动播放，无需再点：① 引擎入场 ② 投资人亮起 → 全角色扇出连线 ③ 收口落定。
   ============================================================ */
window.AP_SCREENS = window.AP_SCREENS || [];

/* 角色清单 —— 投资人(me)固定排在 12 点方向、单独高亮；其余按职业铺一圈。
   icon 为 Lucide PascalCase 名，统一走 Icon 组件渲染。 */
const ROLE_LIST = [
  { id: "investor", icon: "TrendingUp",    label: "投资人", me: true },
  { id: "pm",       icon: "ClipboardList", label: "产品经理" },
  { id: "eng",      icon: "Code",          label: "工程师" },
  { id: "design",   icon: "PenTool",       label: "设计师" },
  { id: "analyst",  icon: "ChartColumn",   label: "分析师" },
  { id: "account",  icon: "Calculator",    label: "会计" },
  { id: "audit",    icon: "FileSearch",    label: "审计" },
  { id: "law",      icon: "Scale",         label: "律师" },
  { id: "consult",  icon: "Lightbulb",     label: "咨询顾问" },
  { id: "sales",    icon: "Handshake",     label: "销售" },
  { id: "market",   icon: "Megaphone",     label: "市场运营" },
  { id: "hr",       icon: "Users",         label: "HR" },
  { id: "ops",      icon: "Settings",      label: "运营" },
  { id: "research", icon: "Microscope",    label: "研究员" },
  { id: "doctor",   icon: "Stethoscope",   label: "医生" },
  { id: "teacher",  icon: "GraduationCap", label: "教师" },
  { id: "writer",   icon: "Newspaper",     label: "记者 / 编辑" },
  { id: "founder",  icon: "Briefcase",     label: "创始人" },
];
const NODE_R = 24;   // 角色图标瓦片半径（px），用于把连线收到瓦片边缘

function Roles({ active, bus }) {
  const [ref, { w, h }] = useSize();
  const [lit, setLit] = useState(false);       // 投资人节点 + 连线先亮
  const [spread, setSpread] = useState(false); // 其余角色扇出、连线点亮
  const [done, setDone] = useState(false);     // 收口落定

  const scrub = useScrub({
    bus,
    autoplay: true,   // 进屏即自动播放，无需手动点 / 按键
    duration: 2700,
    reset: () => { setLit(false); setSpread(false); setDone(false); bus.setReady(false); bus.setHint(null); },
    frames: [
      { t: 300,  apply: () => { setLit(true); } },
      { t: 1150, apply: () => { setLit(true); setSpread(true); } },
      { t: 2300, apply: () => { setLit(true); setSpread(true); setDone(true);
          bus.setReady(true); bus.setHint("同一台引擎 —— 它服务每一种职业"); } },
    ],
  });

  /* 几何：引擎居中，角色按等角铺在半径 R 的环上；连线端点收到瓦片边缘。 */
  const cx = w / 2, cy = h / 2;
  const R = Math.min(w, h) * 0.36;
  const nodes = ROLE_LIST.map((r, i) => {
    const ang = ((-90 + i * (360 / ROLE_LIST.length)) * Math.PI) / 180;
    const nx = cx + R * Math.cos(ang), ny = cy + R * Math.sin(ang);
    const dx = cx - nx, dy = cy - ny, L = Math.hypot(dx, dy) || 1;
    /* 连线朝内收到瓦片边缘；标签/徽标沿半径朝外摆（ux,uy = 朝外单位向量），与连线分离 */
    return { ...r, i, nx, ny, ax: nx + (dx / L) * NODE_R, ay: ny + (dy / L) * NODE_R,
             ux: -dx / L, uy: -dy / L };
  });

  return (
    <div className="roles">
      <Scrubber ctl={scrub} label="多角色 · 支撑每一种角色" />
      <div className="roles-head fade-up">
        <h2 className="h-title">一台引擎，支撑世界上每一种角色</h2>
        <p className="roles-sub">把任务交付给对的 Agent —— 它能服务的，几乎是<b>每一种职业</b>。</p>
      </div>

      <div ref={ref} className={"roles-ring" + (lit ? " lit" : "") + (spread ? " spread" : "")}>
        {/* 连线层：引擎 → 每个角色，沿用全篇 wire-base / wire-lit + 彗星流光 */}
        <svg className="roles-wires" width={w} height={h} viewBox={`0 0 ${w} ${h}`}>
          {w > 0 && nodes.map((n) => {
            const d = wirePath(cx, cy, n.ax, n.ay);
            const on = n.me ? lit : spread;
            return (
              <g key={n.id} className={"roles-wire" + (n.me ? " me" : "")} style={{ "--i": n.i }}>
                <path className="wire-base" d={d} />
                <path className={"wire-lit" + (on ? " on" : "")} d={d} pathLength="1" />
              </g>
            );
          })}
        </svg>

        {/* 角色节点 —— 锚点在图标中心，标签浮在下方、徽标浮在上方（不压连线） */}
        {w > 0 && nodes.map((n) => (
          <div key={n.id} className={"role-node" + (n.me ? " me" : "")}
               style={{ left: n.nx, top: n.ny, "--i": n.i, "--ux": n.ux, "--uy": n.uy }}>
            {n.me && <span className="role-badge">刚才的你</span>}
            <span className="role-ic"><Icon name={n.icon} size={n.me ? 21 : 18} /></span>
            <span className="role-label">{n.label}</span>
          </div>
        ))}

        {/* 中心：产品 / 引擎 —— 圆角卡片，与全篇 hub 一致 */}
        <div className={"roles-core" + (lit ? " on" : "")}>
          <span className="rc-halo" />
          <BrandTile brand="localagent" size={30} radius={9} soft={false} />
          <div className="rc-text">
            <span className="rc-name">AgentPilot</span>
            <span className="rc-sub">智能路由引擎</span>
          </div>
        </div>
      </div>

      <div className="roles-foot">
        <p className={"roles-line" + (done ? " fade-up" : "")} style={{ visibility: done ? "visible" : "hidden" }}>
          刚才你以投资人的身份跑了三件事。换成产品经理、工程师、律师、医生……
          还是<b>同一台引擎、同一种交付</b> —— 这才是我们真正要解决的盘子。
        </p>
      </div>
    </div>
  );
}

window.AP_SCREENS.push(
  { id: "roles", chapter: "定位", Comp: Roles },
);