const MIcon = window.PrototypeIcon;

function MeegleWorkspace({ stage, currentStage, comments, auditEvents, runPaused, incident, feedback, deliverableVersion, acceptanceRound, onStart, onOpenRun, onAdvance, onFeedback, onPause, onTriggerIncident, onComment, onGoLark }) {
  const [tab, setTab] = React.useState("overview");
  const [commentText, setCommentText] = React.useState("");
  const submitComment = () => {
    if (!commentText.trim()) return;
    onComment(commentText.trim());
    setCommentText("");
  };
  const hasRun = ["running", "review", "completed_sync", "accepted"].includes(stage);
  const primaryAction = () => {
    if (stage === "detected") return <PrototypeButton tone="primary" icon="message" onClick={onStart}>在飞书查看派工提案</PrototypeButton>;
    if (stage === "plan") return <PrototypeButton tone="primary" icon="eye" onClick={() => onGoLark("chat")}>去飞书确认发起</PrototypeButton>;
    if (stage === "running") return <PrototypeButton tone="primary" icon="arrow" disabled={incident === "blocked" || incident === "recovering"} onClick={onAdvance}>{incident === "blocked" ? "等待故障恢复" : incident === "recovering" ? "正在恢复" : "模拟完成执行"}</PrototypeButton>;
    if (stage === "review") return <PrototypeButton tone="primary" icon="check" onClick={() => onGoLark("chat")}>去飞书验收 v{deliverableVersion}</PrototypeButton>;
    if (stage === "completed_sync") return <PrototypeButton tone="warning" icon="refresh" onClick={() => onGoLark("chat")}>查看待同步状态</PrototypeButton>;
    return <><PrototypeButton tone="success" icon="check" disabled>已同步闭环</PrototypeButton><PrototypeButton icon="spark" onClick={onFeedback}>{feedback ? "查看评价" : "评价 AI 交付"}</PrototypeButton></>;
  };

  return <div className="product-shell meegle-shell" data-screen-label="Meegle · WorkItem 业务事实源">
    <aside className="product-sidebar meegle-sidebar">
      <div className="product-logo"><span className="logo-cube meegle">M</span><strong>Meegle</strong></div>
      <nav><button aria-label="工作项" className="active"><MIcon name="work"></MIcon><span>工作项</span></button><button aria-label="收件箱" onClick={() => setTab("activity")}><MIcon name="inbox"></MIcon><span>收件箱</span><b>2</b></button><button aria-label="项目文档" onClick={() => onGoLark("docs")}><MIcon name="docs"></MIcon><span>项目文档</span></button></nav>
      <div className="side-group"><span>联调测试</span><button className="active-sub"><i className="project-dot blue"></i>AI 员工工作平台</button><button><i className="project-dot green"></i>敏捷开发模板</button></div>
      <div className="sidebar-user"><Avatar initials="R" tone="blue" size="sm"></Avatar><div><strong>Rowan</strong><small>Story 负责人</small></div><MIcon name="more"></MIcon></div>
    </aside>

    <section className="product-main">
      <header className="product-topbar"><div className="breadcrumbs"><span>AI员工工作平台-联调测试空间-0812</span><MIcon name="chevron" size={13}></MIcon><strong>Story 24233867</strong></div><div className="topbar-actions"><div className="mini-search"><MIcon name="search" size={15}></MIcon><span>搜索工作项</span></div><IconButton label="通知" icon="bell" badge="2"></IconButton></div></header>
      <div className="work-header"><div className="work-key">STORY · 24233867</div><div className="work-heading"><h1>研究 AI 员工工作平台的 V1 交付闭环</h1><StatusPill tone={incident === "blocked" ? "danger" : stage === "accepted" ? "success" : stage === "completed_sync" ? "warning" : "blue"}>{incident === "blocked" ? "执行阻塞" : currentStage.meegle}</StatusPill></div><p>目标：形成一份可核验的内部调研或正式报告，并在飞书完成验收。</p><div className="work-meta"><span><small>负责人</small><Avatar initials="R" tone="blue" size="xs"></Avatar>Rowan</span><span><small>流程</small>敏捷研发流程</span><span><small>优先级</small><i className="priority-high"></i>P1</span><span><small>AI 员工</small>{hasRun ? "项目研究员 v4" : "尚未发起 Run"}</span></div></div>
      <nav className="work-tabs"><button className={tab === "overview" ? "active" : ""} onClick={() => setTab("overview")}>概览</button><button className={`hyperwork-tab ${tab === "execution" ? "active" : ""}`} onClick={() => setTab("execution")}><span className="hw-mini-mark">HW</span>AI 执行 {hasRun ? <span className="tab-live"></span> : null}</button><button className={tab === "activity" ? "active" : ""} onClick={() => setTab("activity")}>活动</button></nav>

      <div className="work-body"><div className="work-content">
        {tab === "overview" ? <>
          <section className="content-section"><h3>验收标准</h3><ul className="acceptance-list"><li><MIcon name="check"></MIcon>交付内部调研、方案或正式报告的飞书文档</li><li><MIcon name="check"></MIcon>关键结论均有可追溯证据，且数据范围不超出发起确认</li><li><MIcon name="check"></MIcon>负责人可在飞书验收通过或结构化退回</li><li><MIcon name="check"></MIcon>Meegle 同步失败不阻塞已验收 Run 完成</li></ul></section>
          <section className="content-section"><div className="subsection-head"><h3>上下文与附件</h3><button onClick={() => onGoLark("docs")}><MIcon name="plus" size={14}></MIcon>关联文档</button></div><div className="linked-doc"><span className="doc-icon"><MIcon name="docs"></MIcon></span><div><strong>AI 员工平台设计 Wiki</strong><small>飞书知识引用 · v14 · 按当前操作者权限读取</small></div><StatusPill tone="success">可访问</StatusPill></div></section>
          <section className="content-section comments-section"><h3>评论</h3><div className="comment-list">{comments.map(comment => <article key={comment.id} className={`comment ${comment.kind}`}><Avatar initials={comment.avatar} tone={comment.kind === "ai" ? "violet" : "blue"} size="sm"></Avatar><div><header><strong>{comment.author}</strong>{comment.kind === "ai" ? <StatusPill dot={false} tone="violet">AI</StatusPill> : null}<time>{comment.time}</time></header><p>{comment.text}</p></div></article>)}</div><div className="comment-composer"><Avatar initials="R" tone="blue" size="sm"></Avatar><div><textarea rows="2" value={commentText} placeholder="评论中 @AI 工作平台，或把此 Story 链接发给飞书机器人…" onChange={event => setCommentText(event.target.value)}></textarea><footer><span>Meegle 只保留业务协作摘要</span><PrototypeButton size="sm" tone="primary" icon="send" disabled={!commentText.trim()} onClick={submitComment}>发送</PrototypeButton></footer></div></div></section>
        </> : null}

        {tab === "execution" ? <>
          <section className="content-section execution-section"><SectionTitle eyebrow={!hasRun ? "DISPATCH PROPOSAL · DP-0813-007" : "RUN-TEST-0813-007"} title={!hasRun ? "Run 尚未创建" : currentStage.label} detail={currentStage.description} action={hasRun ? <button className="text-button" onClick={onOpenRun}>查看运行详情 <MIcon name="chevron" size={14}></MIcon></button> : null}></SectionTitle>{!hasRun ? <div className="empty-run"><span><MIcon name="run" size={26}></MIcon></span><h4>{stage === "plan" ? "派工提案等待飞书确认" : "工作项已识别，只有派工提案"}</h4><p>DispatchProposal 只保存 WorkItemRef。负责人确认后，Platform 才会原子创建 Run、ExternalBinding 和活跃守卫。</p>{primaryAction()}</div> : <><StageRail currentId={stage}></StageRail><div className="run-summary-row"><div><span>执行进度</span><strong>{currentStage.progress}%</strong></div><ProgressBar value={currentStage.progress}></ProgressBar><div className="run-cost"><span>本次成本</span><strong>¥{stage === "running" ? 86 : 214}</strong><small>/ ¥220</small></div></div></>}</section>
          {stage === "running" && incident ? <IncidentSummary incident={incident} onOpenRun={onOpenRun}></IncidentSummary> : null}
          {hasRun ? <section className="content-section"><div className="subsection-head"><h3>本次执行主体</h3><StatusPill tone={incident === "blocked" ? "danger" : runPaused ? "warning" : stage === "review" ? "blue" : "success"}>{incident === "blocked" ? "Attempt 阻塞" : runPaused ? "已暂停" : stage === "review" ? `验收轮 ${acceptanceRound}` : "状态正常"}</StatusPill></div><div className="actor-grid"><ActorCard employee={window.prototypeEmployees[0]} state={stage === "running" ? "执行中" : "已完成"} progress={currentStage.progress}></ActorCard></div><div className="execution-actions">{primaryAction()} {stage === "running" && !incident ? <PrototypeButton icon="warning" onClick={onTriggerIncident}>模拟 Attempt 失联</PrototypeButton> : null}{stage === "running" && incident !== "blocked" && incident !== "recovering" ? <PrototypeButton icon={runPaused ? "play" : "pause"} onClick={onPause}>{runPaused ? "继续 Run" : "暂停 Run"}</PrototypeButton> : null}</div></section> : null}
        </> : null}

        {tab === "activity" ? <section className="content-section"><SectionTitle title="工作项活动" detail="只显示业务可读摘要；完整执行证据保留在 HyperWork。"></SectionTitle><div className="public-timeline">{auditEvents.slice().reverse().map(event => <article key={event.id}><span className={`timeline-dot ${event.level}`}></span><div><header><strong>{event.title}</strong><time>{event.time}</time></header><p>{event.detail}</p><small>{event.actor} · {event.type}</small></div></article>)}</div></section> : null}
      </div>

      <aside className="ai-side-panel"><div className="integration-owner-label"><span>HW</span>HyperWork 扩展层 · 非 Meegle 原生能力</div><div className="ai-panel-head"><div><Avatar initials="AI" tone="violet" size="sm"></Avatar><div><strong>HyperWork AI</strong><small>WorkItem 业务投影</small></div></div><StatusPill tone={stage === "completed_sync" ? "warning" : stage === "accepted" ? "success" : "blue"}>{currentStage.label}</StatusPill></div><div className="ai-stage-summary"><span>当前状态</span><h3>{currentStage.short}</h3><p>{currentStage.description}</p><ProgressBar value={currentStage.progress} tone={stage === "completed_sync" ? "amber" : "blue"}></ProgressBar><small>{stage === "completed_sync" ? "Run 已完成；Meegle 尚未同步" : "业务摘要可见；执行细节留在 Platform"}</small></div>{hasRun ? <div className="compact-team"><span>本次 AI 员工</span><div><Avatar initials="研" tone="violet" size="xs"></Avatar><strong>项目研究员 v4 · 1 ActorRun</strong></div></div> : <div className="recommendation"><span><MIcon name="employee"></MIcon></span><div><strong>推荐：项目研究员 v4</strong><p>确认前仅生成 DispatchProposal，不消耗正式执行预算。</p></div></div>}<div className="panel-action-stack">{primaryAction()}</div><button className="audit-link" onClick={onOpenRun}><MIcon name="audit"></MIcon>打开 HyperWork Run<MIcon name="chevron"></MIcon></button></aside>
      </div>
    </section>
  </div>;
}

function ActorCard({ employee, state, progress }) {
  return <article className="actor-card lead"><header><Avatar initials={employee.initials} tone={employee.tone} size="sm"></Avatar><div><strong>{employee.name}</strong><small>AI Employee · v4</small></div><StatusPill tone={state === "已完成" ? "success" : "blue"} dot={false}>{state}</StatusPill></header><p>{employee.skills.join(" · ")}</p><ProgressBar value={progress} tone="violet"></ProgressBar></article>;
}

function IncidentSummary({ incident, onOpenRun }) {
  const resolved = incident === "resolved";
  return <section className={`incident-summary ${resolved ? "resolved" : incident}`}><div className="incident-mark"><MIcon name={resolved ? "check" : incident === "recovering" ? "refresh" : "warning"}></MIcon></div><div><header><strong>{resolved ? "PairSession 已恢复" : incident === "recovering" ? "正在从 CP-014 恢复" : "Codex Attempt 心跳超时"}</strong><StatusPill tone={resolved ? "success" : incident === "recovering" ? "warning" : "danger"}>{resolved ? "已恢复" : incident === "recovering" ? "恢复中" : "需处理"}</StatusPill></header><p>{resolved ? "Attempt #2 已接管 PairSession，旧 fencing token 被拒绝。" : "Platform 已撤销 Lease 并保存检查点；Meegle Story 保持进行中。"}</p><dl><div><dt>检查点</dt><dd>CP-014</dd></div><div><dt>处理人</dt><dd>平台管理员</dd></div><div><dt>业务影响</dt><dd>{resolved ? "已解除" : "预计 +2 分钟"}</dd></div></dl></div><PrototypeButton icon="chevron" onClick={onOpenRun}>{resolved ? "查看恢复证据" : "处理故障"}</PrototypeButton></section>;
}

Object.assign(window, { MeegleWorkspace });