const { DesignCanvas, DCSection, DCArtboard, DCPostIt } = window;

function Icon({ name, size = 18 }) {
  const paths = {
    agent: <><circle cx="12" cy="12" r="8"></circle><path d="M9 10h.01M15 10h.01M9 15c1.8 1.2 4.2 1.2 6 0"></path></>,
    desk: <><rect x="3" y="4" width="18" height="15" rx="1"></rect><path d="M8 4v15M3 9h5"></path></>,
    run: <><circle cx="12" cy="12" r="9"></circle><path d="m10 8 6 4-6 4Z"></path></>,
    expert: <><circle cx="12" cy="8" r="4"></circle><path d="M5 21c.6-4.2 3-6 7-6s6.4 1.8 7 6"></path></>,
    clock: <><circle cx="12" cy="12" r="9"></circle><path d="M12 7v5l3 2"></path></>,
    plus: <path d="M12 5v14M5 12h14"></path>,
    grid: <><rect x="4" y="4" width="6" height="6"></rect><rect x="14" y="4" width="6" height="6"></rect><rect x="4" y="14" width="6" height="6"></rect><rect x="14" y="14" width="6" height="6"></rect></>,
    more: <><circle cx="5" cy="12" r="1"></circle><circle cx="12" cy="12" r="1"></circle><circle cx="19" cy="12" r="1"></circle></>
  };
  return <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">{paths[name]}</svg>;
}

const navs = [["desk", "项目"], ["expert", "专家库"]];

const taskFirstMessages = [
  "把这批商品图统一成清透高级风格，生成白底主图、场景图、卖点图和详情页套图。",
  "生成护肤品电商套图并适配淘宝和小红书尺寸。",
  "批量美化本季女装商品图片并统一背景色。"
];

const baseSchemes = [
  { id: "scheme-commerce", title: "电商套图生成", description: "一次生成主图、场景图、卖点图与详情页", category: "电商套图", steps: ["素材检测", "批量精修", "套图生成", "确认导出"] },
  { id: "scheme-beautify", title: "图片批量美化", description: "批量去瑕疵、调色、增强质感并统一风格", category: "批量美化", steps: ["图片检测", "瑕疵清理", "色彩统一", "批量导出"] },
  { id: "scheme-product", title: "批量商品图处理", description: "自动抠图、换背景、加阴影和适配尺寸", category: "商品图", steps: ["主体识别", "智能抠图", "背景生成", "光影融合", "尺寸适配"] }
];

const baseProjectRuns = [{
  id: "run-commerce-demo",
  schemeId: "scheme-commerce",
  title: "电商套图生成",
  status: "执行中",
  progress: 38,
  total: 60,
  startedAt: "刚刚"
}];

const conversationPreviewMessage = taskFirstMessages[0];
const conversationPreviewScheme = {
  id: "scheme-conversation-preview",
  title: "电商套图批量生产方案",
  description: "统一商品图风格，生成白底主图、场景图、卖点图与详情页套图。",
  category: "电商套图",
  steps: ["素材检测", "批量精修", "视觉方案生成", "确认并导出"],
  generated: true
};

function taskNameFromFirstMessage(message) {
  return Array.from(message.trim()).slice(0, 10).join("");
}

function Shell({ active = "项目", activeTask = "", title, crumb, actions, compact = false, tasks = taskFirstMessages, schemes = baseSchemes, projectRuns = baseProjectRuns, onCreateTask, onGenerateScheme, onEditScheme, onRunScheme, onPreviewWorkflow, newTaskInitialState = "empty", defaultView = "content", children }) {
  const [selectedTask, setSelectedTask] = React.useState(activeTask);
  const [currentView, setCurrentView] = React.useState(defaultView);
  const [selectedRun, setSelectedRun] = React.useState(null);
  const showingTask = currentView === "new-task";
  const showingProjects = currentView === "project";
  const showingRunHistory = currentView === "run-history";
  const openNewTask = () => setCurrentView("new-task");
  const openRun = (runOrScheme) => {
    const run = runOrScheme.status ? runOrScheme : onRunScheme(runOrScheme);
    setSelectedRun(run);
    setCurrentView("run-history");
  };
  const currentTitle = showingTask ? "新建任务" : showingProjects ? "项目" : showingRunHistory ? `${selectedRun?.title || "方案"} · 运行记录` : title;
  const currentCrumb = showingTask ? "任务 / 与 Agent 协作" : showingProjects ? "首页 / 项目" : showingRunHistory ? `空间 / ${selectedRun?.title || "方案"} / 运行记录` : crumb;
  const resolvedActions = typeof actions === "function" ? actions({ openNewTask, showProjects: () => setCurrentView("project"), openRunScheme: openRun }) : actions;
  const currentActions = showingProjects ? <button className="btn primary" onClick={openNewTask}>新建任务</button> : showingRunHistory ? <button className="btn primary">再次运行</button> : resolvedActions;
  const resolvedChildren = typeof children === "function" ? children({ openRunScheme: openRun }) : children;

  return <div className={`screen ${compact ? "compact-nav" : ""}`} data-screen-label={currentTitle}>
    <aside className="sidebar">
      <div className="brand"><span className="brand-mark">M</span>{!compact && "美图智绘"}</div>
      <button className={`nav-item new-task ${showingTask ? "selected" : ""}`} onClick={openNewTask}><Icon name="plus"/>{!compact && "新建任务"}</button>
      {navs.map(([icon, label]) => <button onClick={() => setCurrentView(label === "项目" ? "project" : "content")} className={`nav-item ${(showingProjects && label === "项目") || (!showingTask && !showingProjects && !showingRunHistory && active === label) ? "active" : ""}`} key={label}><Icon name={icon}/>{!compact && label}</button>)}
      {!compact && <div className="task-group">
        <div className="task-heading"><span>任务</span><span>{tasks.length}</span></div>
        <div className="task-list">{tasks.map((message, index) => {
          const taskName = taskNameFromFirstMessage(message);
          return <button key={`${taskName}-${index}`} title={message} className={`task-item ${selectedTask === taskName && showingTask ? "active" : ""}`} onClick={() => { setSelectedTask(taskName); setCurrentView("new-task"); }}><span></span>{taskName}</button>;
        })}</div>
      </div>}
      {!compact && <div className="project-group">
        <div className="project-tab space-tab"><span><Icon name="grid" size={16}/>空间</span><b>{projectRuns.length}</b></div>
        <div className="project-run-list">{projectRuns.map((run) => <button className={`project-run-item ${showingRunHistory && selectedRun?.id === run.id ? "active" : ""}`} key={run.id} onClick={() => openRun(run)} title={`${run.title} · 查看运行记录`}><i></i><span>{run.title}</span><small>记录</small></button>)}</div>
      </div>}
      <div className="nav-spacer"></div>
      <div className="agent-chip"><span className="avatar">林</span>{!compact && <span>林晓 · 产品组</span>}</div>
    </aside>
    <main className={`main ${showingTask ? "task-main" : ""}`}>
      {!showingTask && <header className="topbar"><div><span className="crumb">{currentCrumb}</span><h1>{currentTitle}</h1></div><div className="grow"></div>{currentActions}</header>}
      <section className={`content ${showingTask ? "task-content" : ""}`}>{showingTask ? <NewTaskPage onCreateTask={onCreateTask} onGenerateScheme={onGenerateScheme} onShowProjects={() => setCurrentView("project")} onPreviewWorkflow={onPreviewWorkflow} initialState={newTaskInitialState}/> : showingProjects ? <ProjectOverview schemes={schemes} onStartTask={() => setCurrentView("new-task")} onEditScheme={onEditScheme} onRunScheme={openRun}/> : showingRunHistory ? <RunHistoryContent run={selectedRun}/> : resolvedChildren}</section>
    </main>
  </div>;
}

function NewTaskPage({ onCreateTask, onGenerateScheme, onShowProjects, onPreviewWorkflow, initialState = "empty" }) {
  const isCompletedPreview = initialState === "completed-preview";
  const isWorkflowQuestion = initialState === "workflow-question";
  const hasCompletedConversation = isCompletedPreview || isWorkflowQuestion;
  const [messages, setMessages] = React.useState(() => hasCompletedConversation ? [
    { role: "user", text: conversationPreviewMessage },
    { role: "agent", text: "已理解主要目标。请再补充目标平台、素材数量或偏好的视觉风格，我会据此匹配专家和处理节点。" },
    { role: "user", text: "淘宝与小红书，共 50 张，清透高级风。" },
    { role: "agent", text: "信息已完整。我已匹配素材检测、商品精修与电商视觉专家。是否现在生成一套可预览、可编辑的工作流方案？" }
  ] : []);
  const [draft, setDraft] = React.useState("");
  const [firstMessage, setFirstMessage] = React.useState(hasCompletedConversation ? conversationPreviewMessage : "");
  const [savedScheme, setSavedScheme] = React.useState(isCompletedPreview ? conversationPreviewScheme : null);
  const userMessages = messages.filter((message) => message.role === "user");
  const ready = userMessages.length >= 2;

  const sendMessage = (preset) => {
    const text = (preset || draft).trim();
    if (!text) return;
    const isFirst = !firstMessage;
    if (isFirst) {
      setFirstMessage(text);
      onCreateTask(text);
    }
    const reply = isFirst
      ? "已理解主要目标。请再补充目标平台、素材数量或偏好的视觉风格，我会据此匹配专家和处理节点。"
      : "信息已完整。我已匹配素材检测、商品精修与电商视觉专家。是否现在生成一套可预览、可编辑的工作流方案？";
    setMessages((current) => [...current, { role: "user", text }, { role: "agent", text: reply }]);
    setDraft("");
  };

  const saveGeneratedScheme = () => {
    const scheme = onGenerateScheme(firstMessage);
    setSavedScheme(scheme);
  };

  if (!userMessages.length) {
    return <div className="agent-start-page" aria-label="新建视觉任务页面">
      <div className="agent-start-center">
        <div className="agent-start-title"><span className="agent-start-mark">M</span><h2>今天想完成什么视觉任务？</h2><span className="preview-badge">视觉 Agent</span></div>
      <div className="agent-start-tools"><span><Icon name="grid" size={15}/>视觉创作</span></div>
        <div className="agent-start-composer">
          <textarea autoFocus value={draft} onChange={(event) => setDraft(event.target.value)} onKeyDown={(event) => { if (event.key === "Enter" && !event.shiftKey) { event.preventDefault(); sendMessage(); } }} placeholder="描述你想生成或处理的图片、PPT 或视频..."></textarea>
          <div className="agent-start-actions"><div><button title="添加素材"><Icon name="plus" size={18}/></button><button className="text-tool"><Icon name="expert" size={15}/>选择专家</button></div><div><span>美图视觉 Agent</span><button className="start-send" disabled={!draft.trim()} onClick={() => sendMessage()} aria-label="发送任务">↑</button></div></div>
        </div>
        <p className="agent-start-hint">发送需求后，Agent 将自动理解目标、匹配专家并生成可编辑的处理方案。</p>
      </div>
    </div>;
  }

  return <section className="conversation-modal inline-conversation" aria-label="新建视觉任务页面">
      <header className="conversation-head">
        <div><span className="modal-kicker">视觉任务</span><h2>与 Agent 对话，生成处理方案</h2></div>
        <span className="inline-status"><i></i>对话内容自动保存</span>
      </header>
      <div className="conversation-body">
        <div className="message-stream">
          {messages.map((message, index) => <div className={`dialog-message ${message.role}`} key={`${message.role}-${index}`}>
            {message.role === "agent" && <span className="agent-avatar">M</span>}
            <div><b>{message.role === "agent" ? "美图智绘 Agent" : "你"}</b><p>{message.text}</p></div>
          </div>)}
          {!firstMessage && <div className="prompt-suggestions">
            {["批量生成护肤品电商套图", "统一美化一批商品图片", "把产品素材生成营销短视频"].map((text) => <button key={text} onClick={() => sendMessage(text)}>{text}</button>)}
          </div>}
          {firstMessage && !ready && <div className="prompt-suggestions compact">
            {["淘宝与小红书，共 50 张，清透高级风", "抖音商城，共 30 张，强化商品质感"].map((text) => <button key={text} onClick={() => sendMessage(text)}>{text}</button>)}
          </div>}
          {ready && !savedScheme && <div className="generate-callout workflow-decision">
            <div><span>需求信息已齐全</span><b>是否生成工作流方案？</b><p>将生成 4 个处理步骤，并由 3 位视觉专家协同完成。</p></div>
            <div className="generate-actions"><button className="btn" onClick={() => setDraft("我还想补充：")}>继续补充</button><button className="btn primary" onClick={saveGeneratedScheme}>生成工作流方案</button></div>
          </div>}
          {ready && savedScheme && <div className="workflow-preview-callout">
            <div className="workflow-preview-head"><div><span className="preview-ready">工作流方案已生成</span><b>{savedScheme.title}</b><p>{savedScheme.description}</p></div><span className="preview-step-count">{savedScheme.steps.length} 个步骤</span></div>
            <div className="preview-flow-mini">{savedScheme.steps.map((step, index) => <React.Fragment key={step}><div><span>{String(index + 1).padStart(2, "0")}</span><b>{step}</b></div>{index < savedScheme.steps.length - 1 && <i></i>}</React.Fragment>)}</div>
            <div className="workflow-preview-actions"><button className="btn" onClick={onShowProjects}>保存并查看项目</button><button className="btn primary" onClick={onPreviewWorkflow}>预览并编辑工作流方案</button></div>
          </div>}
        </div>
      </div>
      <footer className="dialog-composer">
        <textarea value={draft} onChange={(event) => setDraft(event.target.value)} onKeyDown={(event) => { if (event.key === "Enter" && !event.shiftKey) { event.preventDefault(); sendMessage(); } }} placeholder={firstMessage ? "补充平台、数量、风格或交付要求..." : "描述你的处理需求..."}></textarea>
        <div><span>Enter 发送 · Shift + Enter 换行</span><button className="send-button" disabled={!draft.trim()} onClick={() => sendMessage()}>发送</button></div>
      </footer>
  </section>;
}

function SchemeEditorDialog({ scheme, onClose, onSave }) {
  const [draft, setDraft] = React.useState(scheme);
  React.useEffect(() => setDraft(scheme), [scheme]);
  if (!scheme || !draft) return null;

  const updateStep = (index, value) => setDraft((current) => ({ ...current, steps: current.steps.map((step, stepIndex) => stepIndex === index ? value : step) }));
  const removeStep = (index) => setDraft((current) => ({ ...current, steps: current.steps.filter((_, stepIndex) => stepIndex !== index) }));

  return <div className="dialog-scrim editor-scrim" role="dialog" aria-modal="true" aria-label="编辑优化方案">
    <section className="scheme-editor-modal">
      <header className="conversation-head"><div><span className="modal-kicker">方案优化</span><h2>编辑处理方案</h2></div><button className="modal-close" onClick={onClose}>×</button></header>
      <div className="scheme-editor-body">
        <div className="editor-fields"><label>方案名称<input value={draft.title} onChange={(event) => setDraft({ ...draft, title: event.target.value })}/></label><label>方案说明<textarea value={draft.description} onChange={(event) => setDraft({ ...draft, description: event.target.value })}></textarea></label><div className="expert-note"><span className="agent-avatar">M</span><p><b>Agent 优化建议</b>建议保留样图确认节点，再将确认后的视觉规则批量应用到全部素材。</p></div></div>
        <div className="step-editor"><div className="step-editor-head"><div><span className="modal-kicker">WORKFLOW</span><h3>处理步骤</h3></div><button className="btn" onClick={() => setDraft((current) => ({ ...current, steps: [...current.steps, "新处理步骤"] }))}><Icon name="plus" size={15}/>添加步骤</button></div>
          <div className="editable-steps">{draft.steps.map((step, index) => <div className="editable-step" key={`${index}-${step}`}><span>{String(index + 1).padStart(2, "0")}</span><input value={step} onChange={(event) => updateStep(index, event.target.value)}/><button onClick={() => removeStep(index)}>删除</button></div>)}</div>
        </div>
      </div>
      <footer className="scheme-editor-footer"><span>修改会保存为新的方案版本</span><div><button className="btn" onClick={onClose}>取消</button><button className="btn primary" disabled={!draft.title.trim() || !draft.steps.length} onClick={() => onSave(draft)}>保存优化</button></div></footer>
    </section>
  </div>;
}

function FlowCard({ index, title, desc, expert, active }) {
  return <><div className={`flow-card ${active ? "active" : ""}`}>
    <span className="step-index">{index}</span>
    <div><h4>{title}</h4><p>{desc}</p><div className="flow-meta"><span className="flow-chip">{expert}</span><span className="flow-chip">输入 1</span><span className="flow-chip">输出 1</span></div></div>
    <button className="icon-btn"><Icon name="more" size={16}/></button>
  </div>{index !== "04" && <div className="flow-rail"></div>}</>;
}

function AgentEditor({ onBackToConversation, ...props }) {
  return <Shell {...props} defaultView="content" active="" activeTask={taskNameFromFirstMessage(taskFirstMessages[0])} crumb="工作流草稿 / 自动保存" title="电商套图批量生产" actions={<>{onBackToConversation && <button className="btn" onClick={onBackToConversation}>返回对话</button>}<span className="badge"><i className="status-dot"></i>草稿 V1.4</span><button className="btn">试运行</button><button className="btn primary">发布方案</button></>}>
    <div className="editor-grid">
      <section className="panel chat"><div className="panel-head"><span>与 Agent 协作</span><span className="small muted">上下文 8</span></div><div className="chat-body">
        <div className="bubble user">{taskFirstMessages[0]}</div>
        <div className="agent-chip"><span className="agent-dot">A</span><b>视觉 Agent</b></div>
        <div className="bubble">已匹配商品精修和电商设计专家，并生成 4 个步骤。你可以调整尺寸、背景、版式或输出数量。</div>
        <div className="bubble">建议先确认一张主图样式，再把相同规则批量应用到其余商品图。</div>
      </div><div className="composer"><span>描述你想修改的内容...</span><div className="composer-actions"><Icon name="plus" size={17}/><button className="btn primary">发送</button></div></div></section>
      <section className="panel workflow"><div className="panel-head"><span>工作流画布</span><span className="small muted">4 个步骤 · 3 位专家</span></div><div className="workflow-stage">
        <FlowCard index="01" title="检测商品素材" desc="识别主体、瑕疵、背景和平台尺寸要求" expert="素材检测专家"/>
        <FlowCard index="02" title="批量精修与美化" desc="完成抠图、去瑕疵、调色和质感统一" expert="商品精修专家" active/>
        <FlowCard index="03" title="生成电商套图" desc="生成白底图、场景图、卖点图和详情页" expert="电商视觉专家"/>
        <FlowCard index="04" title="确认并批量导出" desc="审核样图并按平台规格批量输出" expert="人工节点"/>
        <div className="add-step">添加下一步</div>
      </div></section>
      <section className="panel property"><div className="panel-head"><span>卡片设置</span><button className="icon-btn"><Icon name="more" size={15}/></button></div><div className="property-body">
        <div className="field"><label>步骤名称</label><div className="field-box">批量精修与美化</div></div>
        <div className="field"><label>执行专家</label><div className="field-box expert-row"><span className="agent-dot">修</span><span>商品精修专家</span></div></div>
        <div className="field"><label>任务说明</label><div className="field-box large">批量去除杂乱背景和商品瑕疵，统一亮度、色温和质感，同时保持商品颜色真实。</div></div>
        <div className="divider"></div>
        <div className="field"><label>输入</label><div className="field-box">上一步：12 张产品原图</div></div>
        <div className="field"><label>输出</label><div className="field-box">白底图、透明底图、精修样图</div></div>
        <div className="field"><label>失败处理</label><div className="field-box">自动重试 2 次</div></div>
      </div></section>
    </div>
  </Shell>;
}

function ProjectOverview({ schemes, onStartTask, onEditScheme, onRunScheme }) {
  return <div className="workbench-grid"><div><section className="quick-agent"><span className="badge">Agent 快速创建</span><h2>今天要处理哪批图片？</h2><p className="muted small">描述目标后，Agent 会匹配视觉专家并生成可编辑的处理流程。</p><div className="prompt-box">例如：把 50 张商品图批量抠图并美化，生成适合淘宝和小红书的电商套图...<button className="btn primary" onClick={onStartTask}>开始对话</button></div></section><div className="title-row" style={{marginTop:18}}><div><h2 style={{fontSize:20}}>我的项目</h2><p>运行方案后，执行任务会出现在左侧空间列表</p></div><span className="small muted">共 {schemes.length} 个项目</span></div><div className="scheme-list">{schemes.slice(0,3).map((scheme)=><article className={`scheme-card ${scheme.generated ? "generated" : ""}`} key={scheme.id}>{scheme.generated && <span className="new-scheme-tag">刚刚生成</span>}<span className="badge">{scheme.steps.length} 步骤</span><h4>{scheme.title}</h4><p>{scheme.description}</p><div className="mini-flow"><i className="mini-node"></i><i className="mini-line"></i><i className="mini-node"></i><i className="mini-line"></i><i className="mini-node"></i></div><div className="scheme-card-actions"><button className="scheme-edit-link" onClick={() => onEditScheme(scheme)}>编辑优化</button><button className="scheme-run-link" onClick={() => onRunScheme(scheme)}>运行方案</button></div></article>)}</div></div><aside className="panel"><div className="panel-head">项目运行动态</div><div className="activity"><div className="activity-item"><b className="small">电商套图生成</b><p className="small muted">执行中 · 38 / 60 张</p></div><div className="activity-item"><b className="small">服装图片批量美化</b><p className="small muted">导出完成 · 1 小时前</p></div><div className="activity-item"><b className="small">家居商品图处理</b><p className="small muted">等待样图确认 · 2 小时前</p></div></div></aside></div>;
}

function WorkbenchFirst(props) {
  const [showWorkflowEditor, setShowWorkflowEditor] = React.useState(false);
  return showWorkflowEditor
    ? <AgentEditor {...props} onBackToConversation={() => setShowWorkflowEditor(false)}/>
    : <Shell {...props} active="" defaultView="new-task" crumb="首页" title="新建任务" onPreviewWorkflow={() => setShowWorkflowEditor(true)}/>;
}

function ConversationFlowPreview(props) {
  const [showWorkflowEditor, setShowWorkflowEditor] = React.useState(false);
  return showWorkflowEditor
    ? <AgentEditor {...props} onBackToConversation={() => setShowWorkflowEditor(false)}/>
    : <Shell {...props} active="" defaultView="new-task" crumb="任务 / 与 Agent 协作" title="对话与方案预览" newTaskInitialState="completed-preview" onPreviewWorkflow={() => setShowWorkflowEditor(true)}/>;
}

function ConversationQuestionPreview(props) {
  const [showWorkflowEditor, setShowWorkflowEditor] = React.useState(false);
  return showWorkflowEditor
    ? <AgentEditor {...props} onBackToConversation={() => setShowWorkflowEditor(false)}/>
    : <Shell {...props} active="" defaultView="new-task" crumb="任务 / 与 Agent 协作" title="是否生成工作流" newTaskInitialState="workflow-question" onPreviewWorkflow={() => setShowWorkflowEditor(true)}/>;
}

function Library(props) {
  const { schemes, onEditScheme } = props;
  const extras = [
    { id: "scheme-fashion", title: "服装图批量换背景", description: "保留服装细节并批量生成场景背景", category: "批量美化", steps: ["检测", "抠图", "换背景", "细节融合", "导出"] },
    { id: "scheme-jewelry", title: "饰品图质感增强", description: "强化金属、宝石光泽并统一色调", category: "商品图", steps: ["检测", "精修", "增强", "导出"] },
    { id: "scheme-platform", title: "多平台尺寸适配", description: "批量生成淘宝、抖音和小红书尺寸", category: "电商套图", steps: ["识别", "适配", "导出"] }
  ];
  return <Shell {...props} active="项目" crumb="项目" title="我的项目" actions={({openNewTask}) => <button className="btn primary" onClick={openNewTask}>新建任务</button>}>{({openRunScheme}) => <><div className="title-row"><div><h2>图片处理项目</h2><p>沉淀可重复使用的电商图片批量生产流程</p></div><div className="field-box" style={{width:240}}>搜索处理项目...</div></div><div className="filters"><span className="filter active">全部 {schemes.length + extras.length}</span><span className="filter">电商套图</span><span className="filter">批量美化</span><span className="filter">商品图</span></div><div className="library-grid">{schemes.concat(extras).slice(0,6).map((scheme,i)=><article className="library-card" key={scheme.id}><div className="cover"><span className="badge">{scheme.category}</span><Icon name="grid"/></div><h3>{scheme.title}</h3><p>{scheme.description}</p><div className="mini-flow"><i className="mini-node"></i><i className="mini-line"></i><i className="mini-node"></i><i className="mini-line"></i><i className="mini-node"></i></div><footer><span className="small muted">{scheme.steps.length} 步骤 · V1.{i+1}</span><div className="library-actions"><button className="btn ghost" onClick={() => onEditScheme(scheme)}>编辑</button><button className="btn" onClick={() => openRunScheme(scheme)}>运行</button></div></footer></article>)}</div></>}</Shell>;
}

function Detail(props) {
  const { onEditScheme } = props;
  return <Shell {...props} active="项目" crumb="项目 / 电商套图" title="方案详情" actions={<><button className="btn">复制</button><button className="btn" onClick={() => onEditScheme(baseSchemes[0])}>编辑方案</button><button className="btn primary">立即运行</button></>}><div className="detail-grid"><div><section className="hero-card"><span className="badge">电商套图 · 批量处理</span><h2>电商套图生成器</h2><p>上传商品原图，自动完成素材检测、批量精修、背景统一和版式生成，输出主图、场景图、卖点图与详情页套图。</p><div className="expert-row"><span className="agent-dot">检</span><span className="agent-dot">修</span><span className="agent-dot">商</span><span className="small muted">3 位图片专家协同 · 4 个执行步骤</span></div></section><section className="hero-card" style={{marginTop:16}}><div className="panel-head" style={{padding:0,borderBottom:0}}>执行流程 <span className="small muted">预计 8–15 分钟</span></div><div className="timeline">{[["素材检测","输入"],["批量精修","美化"],["套图生成","版式"],["确认导出","人工"]].map(([a,b])=><div className="timeline-step" key={a}><strong>{a}</strong><span>{b}</span></div>)}</div></section></div><aside className="right-stack"><section className="side-card"><b>方案信息</b><div className="stat-grid" style={{marginTop:14}}><div className="stat"><strong>128</strong><span className="small muted">累计运行</span></div><div className="stat"><strong>96%</strong><span className="small muted">成功率</span></div></div><p className="small muted">当前版本 V1.4</p><p className="small muted">更新于 2026-08-25</p></section><section className="side-card"><b>本次运行需要</b><p className="small muted">商品原图、商品类目、目标平台、输出尺寸和参考风格。</p><button className="btn primary" style={{width:"100%"}}>上传图片并运行</button></section><section className="side-card"><b>最近运行</b><p className="small">护肤品电商套图 · 已完成</p><p className="small">智能相机商品图 · 等待确认</p></section></aside></div></Shell>;
}

function RunHistoryContent({ run }) {
  const title = run?.title || "电商套图生成";
  const progress = `${Math.round(((run?.progress || 38) / (run?.total || 60)) * 100)}%`;
  const rows = [
    [title, run?.status || "执行中", progress, run?.startedAt || "刚刚", "查看详情"],
    [`${title} · 上一批次`, "已完成", "100%", "12 分钟", "查看产物"],
    [`${title} · 样图测试`, "已完成", "100%", "3 分钟", "查看产物"]
  ];
  return <><div className="title-row"><div><h2>{title} · 运行记录</h2><p>查看该方案的历史执行状态、进度和产物</p></div><div className="field-box" style={{width:260}}>搜索运行记录...</div></div><div className="filters"><span className="filter active">全部 3</span><span className="filter">运行中 1</span><span className="filter">已完成 2</span></div><div className="table"><div className="tr head"><div className="td">运行任务</div><div className="td">状态</div><div className="td">进度</div><div className="td">时间</div><div className="td">操作</div></div>{rows.map((row,index)=><div className="tr" key={`${row[0]}-${index}`}><div className="td"><b>{row[0]}</b><div className="small muted">RUN-0827-0{index + 1}</div></div><div className="td"><span className="badge">{row[1]}</span></div><div className="td"><div className="progress"><i style={{width:row[2]}}></i></div><span className="small muted">{row[2]}</span></div><div className="td">{row[3]}</div><div className="td"><button className="btn ghost">{row[4]}</button></div></div>)}</div></>;
}

function RunExecutionContent({ run }) {
  const progress = run?.progress || 38;
  const total = run?.total || 60;
  return <div className="run-layout"><section className="panel"><div className="panel-head">执行步骤 <span className="small muted">2 / 4</span></div><div className="run-steps"><div className="run-step done"><b>01 检测商品素材</b><div className="muted small">已完成 · 42 秒</div></div><div className="run-step running"><b>02 批量精修与美化</b><div className="muted small">正在处理 {progress} / {total} 张</div></div><div className="run-step"><b>03 生成电商套图</b><div className="muted small">等待执行</div></div><div className="run-step waiting"><b>04 确认并批量导出</b><div className="muted small">等待负责人</div></div></div></section><section className="panel result-preview"><div className="panel-head">样图预览 <span className="small muted">自动保存</span></div><div className="doc-preview"><div className="doc-line title"></div><div className="doc-line short"></div><div className="doc-line"></div><div className="doc-line"></div><br/><div className="doc-line title" style={{width:"28%"}}></div><div className="doc-line"></div><div className="doc-line short"></div><div className="doc-line"></div></div></section><section className="panel"><div className="panel-head">Agent 动态</div><div className="log"><div className="log-item"><strong>检测商品素材</strong>已识别 {total} 张商品图与 3 种拍摄背景</div><div className="log-item"><strong>批量抠图去瑕疵</strong>已完成 {progress} 张图片</div><div className="log-item"><strong>统一光影质感</strong>正在应用已确认的样图规则</div><div className="bubble">当前批次预计还需 2 分钟。你可以暂停执行或调整美化强度。</div><button className="btn">调整处理规则</button></div></section></div>;
}

function Running(props) {
  return <Shell {...props} crumb="空间 / 电商套图生成 / RUN-0826-03" title="电商套图生成 · 执行中" actions={<><span className="badge"><i className="status-dot"></i>已运行 04:36</span><button className="btn">暂停</button></>}><RunExecutionContent run={baseProjectRuns[0]}/></Shell>;
}

function Runs(props) {
  return <Shell {...props} crumb="空间 / 电商套图生成" title="电商套图生成 · 运行记录" actions={<button className="btn primary">再次运行</button>}><RunHistoryContent run={baseProjectRuns[0]}/></Shell>;
}

function App() {
  const [tasks, setTasks] = React.useState(() => {
    try { return JSON.parse(localStorage.getItem("meitu-zhihui-tasks")) || taskFirstMessages; }
    catch { return taskFirstMessages; }
  });
  const [schemes, setSchemes] = React.useState(() => {
    try { return JSON.parse(localStorage.getItem("meitu-zhihui-schemes")) || baseSchemes; }
    catch { return baseSchemes; }
  });
  const [projectRuns, setProjectRuns] = React.useState(() => {
    try { return JSON.parse(localStorage.getItem("meitu-zhihui-project-runs")) || baseProjectRuns; }
    catch { return baseProjectRuns; }
  });
  const [editingScheme, setEditingScheme] = React.useState(null);
  const [toastScheme, setToastScheme] = React.useState(null);

  React.useEffect(() => { localStorage.setItem("meitu-zhihui-tasks", JSON.stringify(tasks)); }, [tasks]);
  React.useEffect(() => { localStorage.setItem("meitu-zhihui-schemes", JSON.stringify(schemes)); }, [schemes]);
  React.useEffect(() => { localStorage.setItem("meitu-zhihui-project-runs", JSON.stringify(projectRuns)); }, [projectRuns]);

  const createTask = (message) => setTasks((current) => [message, ...current.filter((task) => task !== message)]);
  const generateScheme = (message) => {
    const summary = Array.from(message).slice(0, 34).join("");
    const scheme = {
      id: `scheme-${Date.now()}`,
      title: `${taskNameFromFirstMessage(message)}处理方案`,
      description: `${summary}${Array.from(message).length > 34 ? "…" : ""}`,
      category: message.includes("视频") ? "营销视频" : message.includes("PPT") ? "演示设计" : "电商套图",
      steps: message.includes("视频") ? ["素材分析", "脚本与分镜", "画面生成", "合成导出"] : ["素材检测", "批量精修", "视觉方案生成", "确认并导出"],
      generated: true
    };
    setSchemes((current) => [scheme, ...current]);
    setToastScheme(scheme);
    return scheme;
  };
  const saveScheme = (updated) => {
    setSchemes((current) => current.some((scheme) => scheme.id === updated.id) ? current.map((scheme) => scheme.id === updated.id ? { ...updated, generated: scheme.generated } : scheme) : [{ ...updated, generated: true }, ...current]);
    setEditingScheme(null);
    setToastScheme({ ...updated, optimized: true });
  };
  const runScheme = (scheme) => {
    const run = {
      id: `run-${scheme.id}-${Date.now()}`,
      schemeId: scheme.id,
      title: scheme.title,
      status: "执行中",
      progress: 1,
      total: 60,
      startedAt: "刚刚"
    };
    setProjectRuns((current) => [run, ...current.filter((item) => item.schemeId !== scheme.id)]);
    return run;
  };
  const shared = { tasks, schemes, projectRuns, onCreateTask: createTask, onGenerateScheme: generateScheme, onEditScheme: setEditingScheme, onRunScheme: runScheme };

  return <>
    <DesignCanvas minScale={0.12} maxScale={1.25}>
      <DCSection id="editor-directions" title="01 · 图片方案创建主流程" subtitle="项目选择高频场景 → Agent 生成并编辑批量图片处理流程">
        <DCArtboard id="workbench-first" label="01 · 默认新建任务" width={1280} height={760}><WorkbenchFirst {...shared}/></DCArtboard>
        <DCArtboard id="conversation-question" label="02 · 询问是否生成工作流" width={1280} height={760}><ConversationQuestionPreview {...shared}/></DCArtboard>
        <DCArtboard id="conversation-preview" label="03 · 工作流生成完成预览" width={1280} height={760}><ConversationFlowPreview {...shared}/></DCArtboard>
        <DCArtboard id="agent-first" label="04 · 工作流方案编辑" width={1280} height={760}><AgentEditor {...shared}/></DCArtboard>
        <DCPostIt top={-8} right={-195} rotate={2} width={175}>主要场景：电商套图、图片批量美化、批量商品图处理。</DCPostIt>
      </DCSection>
      <DCSection id="core-screens" title="02 · 核心产品页面" subtitle="图片方案沉淀、批量处理、样图确认与交付追踪">
        <DCArtboard id="library" label="项目 · 方案库" width={1280} height={760}><Library {...shared}/></DCArtboard>
        <DCArtboard id="detail" label="方案详情" width={1280} height={760}><Detail {...shared}/></DCArtboard>
        <DCArtboard id="running" label="执行态" width={1280} height={760}><Running {...shared}/></DCArtboard>
        <DCArtboard id="runs" label="运行记录" width={1280} height={760}><Runs {...shared}/></DCArtboard>
      </DCSection>
    </DesignCanvas>
    <SchemeEditorDialog scheme={editingScheme} onClose={() => setEditingScheme(null)} onSave={saveScheme}/>
    {toastScheme && <div className="scheme-toast"><span className="toast-check">✓</span><div><b>{toastScheme.optimized ? "方案优化已保存" : "方案已保存到项目"}</b><p>{toastScheme.title}</p></div><button onClick={() => { setEditingScheme(toastScheme); setToastScheme(null); }}>编辑优化</button><button className="toast-close" onClick={() => setToastScheme(null)}>×</button></div>}
  </>;
}

ReactDOM.createRoot(document.getElementById("root")).render(<App/>);