const V8ShellIcon = window.PrototypeIcon;

const V8JourneySteps = [
  { id: "dispatch", label: "发起确认", detail: "创建 Run" },
  { id: "execute", label: "AI 执行", detail: "可靠续做" },
  { id: "accept", label: "交付验收", detail: "记录事实" },
  { id: "sync", label: "异步同步", detail: "对齐 Meegle" }
];

function V8GlobalHeader({ surface, stage, onSurfaceChange, onReset }) {
  return <header className="global-header">
    <div className="global-brand"><span className="global-mark">HW</span><div><strong>HyperWork</strong><small>V1 PRODUCT + CONTROL · V9</small></div></div>
    <SurfaceSwitcher surface={surface} onChange={onSurfaceChange}></SurfaceSwitcher>
    <div className="global-state"><span className="live-dot"></span><div><strong>{surface === "admin" ? "控制平面" : "Story 24233867"}</strong><small>{surface === "admin" ? "自有产品界面" : `${stage.label} · 第三方客户端模拟`}</small></div><PrototypeButton size="sm" icon="reset" ariaLabel="重置演示" onClick={onReset}>重置</PrototypeButton></div>
  </header>;
}

function getJourneyIndex(stage) {
  if (["detected", "plan"].includes(stage)) return 0;
  if (stage === "running") return 1;
  if (stage === "review") return 2;
  return 3;
}

function V8ExperienceBoundaryBar({ surface, stage }) {
  const external = surface !== "admin";
  const product = surface === "meegle" ? "Meegle" : "飞书";
  const current = getJourneyIndex(stage);
  return <div className={`experience-boundary v8-boundary ${external ? "external" : "owned"}`} data-screen-label={external ? `${product} 第三方客户端模拟说明` : "HyperWork 自有控制台说明"}>
    <div className="boundary-identity"><span className="boundary-mark"><V8ShellIcon name={external ? surface : "admin"}></V8ShellIcon></span><div><strong>{external ? `${product} 客户端模拟` : "HyperWork 控制台"}</strong><small>{external ? "黄色区域是第三方界面模拟；蓝色能力由 HyperWork 提供" : "员工、执行、策略、同步与审计由平台管理"}</small></div></div>
    <ol className="v8-journey" aria-label="完整工作流程">
      {V8JourneySteps.map((step, index) => <li key={step.id} className={index < current || stage === "accepted" ? "done" : index === current ? "current" : "future"}>
        <span>{index < current || stage === "accepted" ? <V8ShellIcon name="check"></V8ShellIcon> : index + 1}</span>
        <div><strong>{step.label}</strong><small>{step.detail}</small></div>
      </li>)}
    </ol>
  </div>;
}

Object.assign(window, {
  GlobalHeader: V8GlobalHeader,
  ExperienceBoundaryBar: V8ExperienceBoundaryBar
});