const { useState } = React;

const initialLeads = [
  { id: "L-2048", company: "Northstar Systems GmbH", initials: "NS", person: "Lena Fischer", email: "l.fischer@northstarsys.de", country: "Germany", demand: "Edge gateway product inquiry", product: "Gateway Series G8", source: "官网产品页", time: "12 分钟前", status: "待确认", tone: "blue", owner: "未分配", ownerInitials: "?", value: "€18,000" },
  { id: "L-2047", company: "Alpine Control Ltd.", initials: "AC", person: "Oliver Grant", email: "oliver@alpinecontrol.co.uk", country: "United Kingdom", demand: "Request for distributor pricing", product: "Gateway Series G6", source: "官网联系表单", time: "1 小时前", status: "待确认", tone: "teal", owner: "未分配", ownerInitials: "?", value: "€32,000" },
  { id: "L-2046", company: "Nexa Automation Inc.", initials: "NA", person: "Chloe Martin", email: "chloe@nexa-auto.com", country: "United States", demand: "Sample request for 20 units", product: "Gateway Series G8", source: "官网产品页", time: "昨天 16:42", status: "已分配", tone: "gold", owner: "陈晓", ownerInitials: "陈", value: "€9,600" },
  { id: "L-2045", company: "MiraTech Solutions", initials: "MT", person: "Daniel Kim", email: "daniel@miratech.kr", country: "South Korea", demand: "Technical specification request", product: "Gateway Series G4", source: "官网联系表单", time: "昨天 11:18", status: "已联系", tone: "blue", owner: "王敏", ownerInitials: "王", value: "€7,200" },
];

const stages = ["新询盘", "资质评估", "需求分析", "提案", "谈判", "样品测试"];
const initialOpportunities = [
  { id: "OP-031", name: "Industrial gateway evaluation", company: "Northstar Systems GmbH", stage: "新询盘", value: 18000, probability: 5, owner: "陈晓", initials: "陈", color: "blue", due: "2026-11-20" },
  { id: "OP-029", name: "Q4 gateway deployment", company: "Nexa Automation Inc.", stage: "资质评估", value: 9600, probability: 15, owner: "陈晓", initials: "陈", color: "teal", due: "2026-11-15" },
  { id: "OP-026", name: "Warehouse monitoring project", company: "Alpine Control Ltd.", stage: "需求分析", value: 32000, probability: 30, owner: "王敏", initials: "王", color: "gold", due: "2026-12-05" },
  { id: "OP-024", name: "Smart utility cabinet", company: "Epsilon Energy", stage: "提案", value: 24500, probability: 50, owner: "陈晓", initials: "陈", color: "blue", due: "2026-11-30" },
  { id: "OP-021", name: "Factory network refresh", company: "Vertex Controls", stage: "谈判", value: 41800, probability: 70, owner: "赵磊", initials: "赵", color: "teal", due: "2026-11-10" },
  { id: "OP-018", name: "Prototype batch order", company: "MiraTech Solutions", stage: "样品测试", value: 7200, probability: 80, owner: "王敏", initials: "王", color: "gold", due: "2026-11-08" },
];

const steps = [
  { label: "官网线索", sub: "收件与分配" },
  { label: "客户档案", sub: "资料与跟进" },
  { label: "询盘管道", sub: "机会推进" },
  { label: "报价订单", sub: "转化与交付" },
];

const navItems = [
  ["▦", "工作台"], ["♧", "线索收件箱"], ["◉", "客户"], ["▤", "询盘管道"], ["✉", "邮件"], ["▧", "报价"], ["▣", "订单"], ["◎", "数据分析"],
];

function Tag({ children, tone = "gray" }) { return <span className={`tag ${tone}`}>{children}</span>; }
function Avatar({ initials, tone = "" }) { return <span className={`avatar ${tone}`}>{initials}</span>; }
function Button({ children, onClick, primary = false, soft = false, small = false, danger = false, disabled = false }) {
  return <button className={`button ${primary ? "primary" : ""} ${soft ? "soft" : ""} ${small ? "small" : ""} ${danger ? "danger" : ""}`} onClick={onClick} disabled={disabled}>{children}</button>;
}
function Card({ title, extra, children, className = "", style = {} }) {
  return <section className={`card ${className}`} style={style}><div className="card-head"><div className="card-title">{title}</div>{extra}</div>{children}</section>;
}

function App() {
  const initialScreen = Math.max(0, Math.min(3, Number(new URLSearchParams(window.location.search).get("screen") || 0)));
  const [screen, setScreen] = useState(initialScreen);
  const [nav, setNav] = useState(["线索收件箱", "客户", "询盘管道", "报价"][initialScreen]);
  const [leads, setLeads] = useState(initialLeads);
  const [selectedLead, setSelectedLead] = useState(initialLeads[0]);
  const [opportunities, setOpportunities] = useState(initialOpportunities);
  const [selectedOpp, setSelectedOpp] = useState(initialOpportunities[0]);
  const [drawer, setDrawer] = useState("");
  const [modal, setModal] = useState("");
  const [toast, setToast] = useState("");
  const [owner, setOwner] = useState("陈晓");
  const [followups, setFollowups] = useState([
    { title: "官网询盘已进入 CRM，等待销售首次响应。", date: "今天 10:48", user: "系统" },
    { title: "客户查看了 Gateway Series G8 产品资料。", date: "今天 10:36", user: "官网行为" },
    { title: "询盘信息已提交：希望了解批量采购与交货周期。", date: "今天 10:34", user: "Lena Fischer" },
  ]);
  const [followupText, setFollowupText] = useState("");
  const [converted, setConverted] = useState(false);
  const [search, setSearch] = useState("");

  function notify(message) {
    setToast(message);
    window.setTimeout(() => setToast(""), 2400);
  }
  function goStep(index) {
    setScreen(index);
    const target = ["线索收件箱", "客户", "询盘管道", "报价"][index];
    setNav(target);
    setDrawer("");
    setModal("");
  }
  function assignLead() {
    setLeads((rows) => rows.map((row) => row.id === selectedLead.id ? { ...row, owner, ownerInitials: owner.slice(0, 1), status: "已分配" } : row));
    const updated = { ...selectedLead, owner, ownerInitials: owner.slice(0, 1), status: "已分配" };
    setSelectedLead(updated);
    setDrawer("");
    setFollowups((items) => [{ title: `官网线索已分配给 ${owner}，等待首次联系。`, date: "今天 10:52", user: "CRM 系统" }, ...items]);
    notify(`已将线索分配给 ${owner}`);
    setScreen(1);
    setNav("客户");
  }
  function saveFollowup() {
    if (!followupText.trim()) { notify("请先填写沟通内容"); return; }
    setFollowups((items) => [{ title: followupText.trim(), date: "刚刚", user: "陈晓" }, ...items]);
    setFollowupText("");
    setModal("");
    notify("跟进记录已添加，下一步行动已保存");
  }
  function moveOpportunity() {
    const currentIndex = stages.indexOf(selectedOpp.stage);
    const nextStage = stages[Math.min(currentIndex + 1, stages.length - 1)];
    const probability = [5, 15, 30, 50, 70, 80][stages.indexOf(nextStage)];
    const updated = { ...selectedOpp, stage: nextStage, probability };
    setOpportunities((rows) => rows.map((row) => row.id === selectedOpp.id ? updated : row));
    setSelectedOpp(updated);
    setDrawer("");
    notify(`机会已推进至「${nextStage}」`);
  }
  function convertQuote() {
    setConverted(true);
    setModal("");
    notify("报价已转为订单，主要条款已承接");
  }

  const filteredLeads = leads.filter((lead) => `${lead.company} ${lead.person} ${lead.source}`.toLowerCase().includes(search.toLowerCase()));

  return <div className="app">
    <aside className="sidebar">
      <div className="brand"><div className="brand-mark">N</div><div><div className="brand-title">NovaCRM</div><div className="brand-sub">客户经营平台</div></div></div>
      <div className="nav-caption">工作空间</div>
      <nav className="nav">{navItems.map(([icon, label]) => <button key={label} className={`nav-item ${nav === label ? "active" : ""}`} onClick={() => { setNav(label); if (label === "客户") goStep(1); else if (label === "询盘管道") goStep(2); else if (label === "报价" || label === "订单") goStep(3); else if (label === "线索收件箱") goStep(0); else notify(`${label}页面作为本次流程演示的辅助入口`); }}><span className="nav-icon">{icon}</span><span>{label}</span>{label === "线索收件箱" && <span className="nav-count">4</span>}</button>)}</nav>
      <div className="nav-caption">管理</div>
      <nav className="nav"><button className="nav-item" onClick={() => notify("团队设置由 CRM 管理员维护")}><span className="nav-icon">⚙</span><span>设置</span></button></nav>
      <div className="side-bottom"><div className="team-chip"><Avatar initials="陈" /><div><div className="team-name">陈晓</div><div className="team-role">销售  /  华东团队</div></div><span style={{marginLeft:"auto",color:"#a0a7b1",fontSize:12}}>⌄</span></div></div>
    </aside>

    <div className="workspace">
      <header className="topbar">
        <div className="crumb">NovaCRM&nbsp; / &nbsp;<b>{nav}</b></div>
        <div className="top-actions"><label className="search-box"><span>⌕</span><input value={search} onChange={(event) => setSearch(event.target.value)} placeholder="搜索客户、联系人、询盘" /></label><span className="top-icon">♧<i className="notice-dot"></i></span><div className="account"><Avatar initials="陈" /><span>陈晓</span><span style={{color:"#9aa2af"}}>⌄</span></div></div>
      </header>
      <main className="main">
        <div className="demo-ribbon"><div><strong>交互示意原型</strong>基于 CRM 文档描述的现有功能构建，页面与示例数据用于业务讨论</div><span className="ribbon-note">样例公司及金额均为虚构</span></div>
        <div className="walkthrough"><div className="walk-title">客户经营流程演示</div><div className="walk-steps">{steps.map((step, index) => <React.Fragment key={step.label}><button className={`walk-step ${screen === index ? "active" : ""} ${screen > index ? "done" : ""}`} onClick={() => goStep(index)}><span className="step-circle">{screen > index ? "✓" : index + 1}</span><span>{step.label}</span></button>{index < steps.length - 1 && <span className="walk-arrow">→</span>}</React.Fragment>)}</div><Button small soft onClick={() => setModal("discussion")}>讨论这一步</Button></div>
        {screen === 0 && <LeadInbox leads={filteredLeads} onSelect={(lead) => { setSelectedLead(lead); setOwner(lead.owner === "未分配" ? "陈晓" : lead.owner); setDrawer("lead"); }} onCreate={() => notify("官网表单提交后，线索可进入此待处理列表")}/>}
        {screen === 1 && <CustomerView lead={selectedLead} followups={followups} onAdd={() => setModal("followup")} onNext={() => goStep(2)} />}
        {screen === 2 && <PipelineView opportunities={opportunities} selected={selectedOpp} onSelect={(opp) => { setSelectedOpp(opp); setDrawer("opportunity"); }} />}
        {screen === 3 && <QuoteView lead={selectedLead} converted={converted} onConvert={() => setModal("convert")} onReopen={() => setConverted(false)} />}
      </main>
    </div>

    {drawer === "lead" && <LeadDrawer lead={selectedLead} owner={owner} setOwner={setOwner} onClose={() => setDrawer("")} onAssign={assignLead} />}
    {drawer === "opportunity" && <OpportunityDrawer opportunity={selectedOpp} onClose={() => setDrawer("")} onMove={moveOpportunity} onFollow={() => { setDrawer(""); setScreen(1); setNav("客户"); setModal("followup"); }} />}
    {modal === "followup" && <FollowupModal value={followupText} setValue={setFollowupText} onClose={() => setModal("")} onSave={saveFollowup} />}
    {modal === "convert" && <ConvertModal lead={selectedLead} onClose={() => setModal("")} onConvert={convertQuote} />}
    {modal === "discussion" && <DiscussionModal screen={screen} onClose={() => setModal("")} />}
    {toast && <div className="toast">✓ &nbsp;{toast}</div>}
  </div>;
}

function LeadInbox({ leads, onSelect, onCreate }) {
  return <>
    <div className="page-heading"><div><h1>线索收件箱</h1><div className="page-desc">集中处理从官网和其他渠道进入的新客户机会</div></div><div className="heading-actions"><Button onClick={onCreate}>导出列表</Button><Button primary onClick={onCreate}>＋ 新建客户</Button></div></div>
    <div className="stats-grid"><Stat label="待处理线索" value="12" foot={<><span className="up">↑ 3</span> 较上周</>} /><Stat label="今日新增" value="4" foot="官网表单 3  /  展会 1" /><Stat label="待首次响应" value="7" foot={<span style={{color:"#d48806"}}>最早 2 小时前</span>} /><Stat label="本月有效询盘" value="38" foot="转化率 31.6%" /></div>
    <Card title="新线索" extra={<div className="toolbar"><select className="filter-select"><option>全部来源</option><option>官网</option><option>展会</option></select><select className="filter-select"><option>全部状态</option><option>待确认</option><option>已分配</option></select><Button small>筛选</Button></div>}>
      <div className="tabs"><button className="tab active">待处理 <span className="tag blue">12</span></button><button className="tab">已分配</button><button className="tab">已联系</button><button className="tab">已转客户</button></div>
      <div className="table-wrap"><table><thead><tr><th style={{width:"26%"}}>公司 / 联系人</th><th style={{width:"24%"}}>需求概要</th><th>来源</th><th>提交时间</th><th>负责人</th><th>状态</th><th></th></tr></thead><tbody>{leads.map((lead) => <tr key={lead.id} className="clickable" onClick={() => onSelect(lead)}><td><div className="company-cell"><span className={`company-mark ${lead.tone}`}>{lead.initials}</span><div><div className="company-name">{lead.company}</div><div className="company-sub">{lead.person}  /  {lead.country}</div></div></div></td><td><div style={{color:"#4c5664",fontSize:10}}>{lead.demand}</div><div className="company-sub">{lead.product}</div></td><td><Tag tone="blue">{lead.source}</Tag></td><td>{lead.time}</td><td>{lead.owner === "未分配" ? <span style={{color:"#b0b6bf"}}>— 未分配</span> : <span style={{display:"inline-flex",alignItems:"center",gap:5}}><span className="mini-avatar">{lead.ownerInitials}</span>{lead.owner}</span>}</td><td><Tag tone={lead.status === "待确认" ? "gold" : lead.status === "已联系" ? "green" : "gray"}>{lead.status}</Tag></td><td><button className="row-link" onClick={(event) => { event.stopPropagation(); onSelect(lead); }}>查看 ›</button></td></tr>)}</tbody></table></div>
    </Card>
    <div className="attention-banner"><span>ⓘ</span><span>官网线索进入 CRM 后，建议由销售主管确认分配原则与首次响应时限；接口接入和自动分配需在实施阶段核实。</span></div>
  </>;
}
function Stat({ label, value, foot }) { return <div className="stat-card"><div className="stat-label">{label}</div><div className="stat-value">{value}</div><div className="stat-foot">{foot}</div></div>; }

function LeadDrawer({ lead, owner, setOwner, onClose, onAssign }) {
  return <div className="drawer-backdrop" onMouseDown={(event) => { if (event.target === event.currentTarget) onClose(); }}><aside className="drawer"><div className="drawer-head"><div><div className="drawer-heading">官网询盘详情</div><div className="drawer-sub">{lead.id}  /  提交于 {lead.time}</div></div><button className="close-button" onClick={onClose}>×</button></div><div className="drawer-body">
    <div className="drawer-section"><div className="drawer-section-title">客户提交的信息</div><div className="info-box">“{lead.demand}。请提供产品规格、批量采购价格和交货周期。”</div></div>
    <div className="drawer-section"><div className="drawer-section-title">企业与联系人</div><Info label="公司名称" value={lead.company} /><Info label="联系人" value={lead.person} /><Info label="工作邮箱" value={lead.email} /><Info label="国家/地区" value={lead.country} /><Info label="感兴趣产品" value={lead.product} /></div>
    <div className="drawer-section"><div className="drawer-section-title">来源追溯</div><Info label="来源渠道" value={<Tag tone="blue">{lead.source}</Tag>} /><Info label="提交页面" value="/products/edge-gateway" /><Info label="提交时间" value="2026-10-18 10:34" /></div>
    <div className="drawer-section"><div className="drawer-section-title">重复客户检查</div><div className="info-box">未发现相同邮箱的已知联系人。建议销售确认公司主体后再创建客户档案。</div></div>
    <div className="drawer-section"><div className="drawer-section-title">分配负责人</div><label className="form-label" htmlFor="lead-owner">销售负责人</label><select id="lead-owner" className="form-select" value={owner} onChange={(event) => setOwner(event.target.value)}><option>陈晓</option><option>王敏</option><option>赵磊</option></select></div>
  </div><div className="drawer-foot"><Button onClick={onClose}>稍后处理</Button><Button primary onClick={onAssign}>确认客户并分配</Button></div></aside></div>;
}
function Info({ label, value }) { return <div className="info-row"><span>{label}</span><b>{value}</b></div>; }

function CustomerView({ lead, followups, onAdd, onNext }) {
  return <>
    <div className="page-heading"><div><h1>客户档案</h1><div className="page-desc">企业资料、联系人和沟通记录集中在同一客户视图中</div></div><div className="heading-actions"><Button>编辑客户</Button><Button primary onClick={onAdd}>＋ 新增跟进</Button></div></div>
    <section className="card"><div className="profile-top"><div className="profile-logo">{lead.initials}</div><div><div className="profile-name">{lead.company}</div><div className="profile-meta"><span>⌖ {lead.country}</span><span>⌘ 自动化设备</span><span>◉ 官网来源</span></div><div style={{display:"flex",gap:6,marginTop:9}}><Tag tone="blue">潜在客户</Tag><Tag tone="gold">新官网线索</Tag></div></div><div className="profile-right"><div className="owner-label">客户负责人</div><div className="owner-name"><span className="mini-avatar">{lead.ownerInitials === "?" ? "陈" : lead.ownerInitials}</span>　{lead.owner === "未分配" ? "陈晓" : lead.owner}</div><div style={{marginTop:9}}><Tag tone="green"><i className="status-dot"></i>活跃</Tag></div></div></div><div className="tabs"><button className="tab active">客户概况</button><button className="tab">联系人 <span className="tag gray">2</span></button><button className="tab">询盘 <span className="tag gray">1</span></button><button className="tab">报价与订单</button><button className="tab">文件</button></div>
    <div style={{padding:"16px"}}><div className="profile-content"><Card title="企业信息"><div className="card-body"><div className="details-grid"><Detail label="公司名称" value={lead.company} /><Detail label="国家 / 地区" value={lead.country} /><Detail label="行业" value="工业自动化" /><Detail label="客户来源" value={<Tag tone="blue">官网产品页</Tag>} /><Detail label="公司网站" value="northstarsys.de" /><Detail label="客户等级" value="待评估" /></div></div></Card><Card title="主要联系人" extra={<button className="row-link">＋ 添加联系人</button>}><div className="card-body"><div className="contact-card"><Avatar initials="LF" tone="teal" /><div><div className="contact-name">{lead.person}</div><div className="contact-role">采购经理  /  主要联系人</div><div className="company-sub">{lead.email}</div></div><span style={{marginLeft:"auto",color:"#9aa2af"}}> /  /  / </span></div><div className="contact-card"><Avatar initials="TK" tone="gold" /><div><div className="contact-name">Thomas Keller</div><div className="contact-role">技术负责人</div><div className="company-sub">t.keller@northstarsys.de</div></div><span style={{marginLeft:"auto",color:"#9aa2af"}}> /  /  / </span></div></div></Card></div>
    <div className="profile-content"><Card title="客户互动时间线" extra={<button className="row-link">全部活动 ↓</button>}><div className="card-body"><div className="timeline">{followups.map((item, index) => <div className={`timeline-item ${index === 0 ? "green" : ""}`} key={`${item.title}-${index}`}><div className="timeline-date">{item.date}  /  {item.user}</div><div className="timeline-title">{item.title}</div></div>)}</div><div style={{marginTop:16}}><Button small onClick={onAdd}>＋ 记录跟进</Button></div></div></Card><Card title="待办与机会"><div className="card-body"><div className="detail-label">关联询盘</div><div style={{fontSize:11,fontWeight:600,color:"#344054",marginBottom:4}}>Industrial gateway evaluation</div><div style={{display:"flex",gap:6,alignItems:"center",marginBottom:14}}><Tag tone="blue">新询盘</Tag><span style={{fontSize:9,color:"#8c939e"}}>€18,000 预估</span></div><div className="info-box" style={{background:"#fffbe6",borderColor:"#ffe58f",color:"#896316"}}>下一步：确认采购数量与技术要求<br/>计划日期：2026-10-20</div><div style={{marginTop:14}}><Button primary small onClick={onNext}>查看询盘进度 →</Button></div></div></Card></div></div>
    </section>
  </>;
}
function Detail({ label, value }) { return <div><div className="detail-label">{label}</div><div className="detail-value">{value}</div></div>; }

function PipelineView({ opportunities, selected, onSelect }) {
  return <>
    <div className="page-heading"><div><h1>询盘管道</h1><div className="page-desc">一个客户可以有多个询盘；每个机会独立推进、评估和复盘</div></div><div className="heading-actions"><Button>列表视图</Button><Button primary>＋ 新建询盘</Button></div></div>
    <div className="stats-grid"><Stat label="开放询盘" value="24" foot="6 个销售阶段" /><Stat label="管道金额" value="€286.4K" foot="按估值汇总" /><Stat label="本季度预计成交" value="€92.8K" foot="加权金额 €41.6K" /><Stat label="超过 14 天未更新" value="5" foot={<span style={{color:"#d48806"}}>建议优先复盘</span>} /></div>
    <Card title="销售机会阶段" extra={<div className="toolbar"><select className="filter-select"><option>全部负责人</option><option>陈晓</option></select><select className="filter-select"><option>预计成交日期</option><option>本季度</option></select><Button small>规则预览</Button></div>}>
      <div className="pipeline">{stages.map((stage) => { const inStage = opportunities.filter((opp) => opp.stage === stage); return <div className="stage-col" key={stage}><div className="stage-head"><span>{stage}</span><span className="stage-num">{inStage.length}</span></div>{inStage.map((opp) => <div className="opportunity" key={opp.id} onClick={() => onSelect(opp)}><div className="opp-name">{opp.name}</div><div className="opp-company">{opp.company}</div><div className="opp-value"><b>€{opp.value.toLocaleString()}</b><span>{opp.probability}%</span></div><div className="opp-owner"><span className="mini-avatar">{opp.initials}</span>{opp.owner}<span style={{marginLeft:"auto"}}>{opp.due.slice(5)}</span></div></div>)}</div>; })}</div>
    </Card>
    <div className="attention-banner"><span>ⓘ</span><span>当前 CRM 的询盘阶段及概率规则作为讨论基线；阶段定义、进入条件和预测口径可由业务团队调整。</span></div>
  </>;
}

function OpportunityDrawer({ opportunity, onClose, onMove, onFollow }) {
  return <div className="drawer-backdrop" onMouseDown={(event) => { if (event.target === event.currentTarget) onClose(); }}><aside className="drawer"><div className="drawer-head"><div><div className="drawer-heading">{opportunity.name}</div><div className="drawer-sub">{opportunity.id}  /  {opportunity.company}</div></div><button className="close-button" onClick={onClose}>×</button></div><div className="drawer-body"><div className="detail-strip"><div className="strip-item"><div className="strip-label">当前阶段</div><div className="strip-value"><Tag tone="blue">{opportunity.stage}</Tag></div></div><div className="strip-item"><div className="strip-label">预计金额</div><div className="strip-value">€{opportunity.value.toLocaleString()}</div></div><div className="strip-item"><div className="strip-label">成交概率</div><div className="strip-value">{opportunity.probability}%</div></div></div><div className="drawer-section"><div className="drawer-section-title">机会信息</div><Info label="关联客户" value={opportunity.company} /><Info label="负责人" value={opportunity.owner} /><Info label="预计成交日期" value={opportunity.due} /><Info label="产品" value="Gateway Series G8" /><Info label="需求摘要" value="计划部署边缘网关，正在确认规模和技术要求。" /></div><div className="drawer-section"><div className="drawer-section-title">阶段推进记录</div><div className="timeline"><div className="timeline-item green"><div className="timeline-date">今天 10:52  /  陈晓</div><div className="timeline-title">已查看官网提交信息，准备首次联系。</div></div><div className="timeline-item"><div className="timeline-date">今天 10:34  /  系统</div><div className="timeline-title">官网线索转为询盘，进入新询盘阶段。</div></div></div></div><div className="info-box">推进阶段时，请同步确认客户需求是否满足当前阶段标准，并记录下一步行动。</div></div><div className="drawer-foot"><Button onClick={onFollow}>＋ 记录跟进</Button><Button primary onClick={onMove}>推进到下一阶段</Button></div></aside></div>;
}

function QuoteView({ lead, converted, onConvert, onReopen }) {
  return <>
    <div className="page-heading"><div><h1>{converted ? "订单详情" : "报价与订单"}</h1><div className="page-desc">从询盘报价到订单交付，主要商务信息沿客户链路追溯</div></div><div className="heading-actions">{converted ? <Button onClick={onReopen}>查看报价</Button> : <><Button>导出 PDF</Button><Button primary>＋ 新建报价</Button></>}</div></div>
    <div className="two-col" style={{gridTemplateColumns:"minmax(0,1.55fr) minmax(270px,.8fr)"}}>
      <div>
        <Card title={converted ? "订单摘要  /  SO-2026-018" : "报价摘要  /  QT-2026-018"} extra={<Tag tone={converted ? "green" : "gold"}>{converted ? "待收款" : "待客户确认"}</Tag>}>
          <div className="card-body"><div style={{display:"flex",justifyContent:"space-between",marginBottom:15}}><div><div className="detail-label">客户</div><div style={{fontSize:12,fontWeight:600,marginTop:5}}>{lead.company}</div><div className="company-sub">{lead.person}  /  {lead.email}</div></div><div style={{textAlign:"right"}}><div className="detail-label">关联询盘</div><div style={{fontSize:10,color:"#1677ff",marginTop:5}}>Industrial gateway evaluation</div></div></div><div className="table-wrap"><table><thead><tr><th>产品 / 说明</th><th>数量</th><th>单价</th><th>金额</th></tr></thead><tbody><tr><td><div className="company-name">Gateway Series G8</div><div className="company-sub">Industrial edge gateway</div></td><td>40</td><td>€450.00</td><td style={{color:"#303846",fontWeight:600}}>€18,000.00</td></tr><tr><td>国际运输与包装</td><td>1</td><td>€680.00</td><td>€680.00</td></tr></tbody></table></div><div style={{display:"flex",justifyContent:"flex-end",paddingTop:14}}><div style={{width:230}}><Info label="商品小计" value="€18,000.00" /><Info label="运输费用" value="€680.00" /><Info label="总金额" value={<span style={{fontSize:14,color:"#1d3557"}}>€18,680.00</span>} /></div></div><div style={{height:1,background:"#eff1f4",margin:"14px 0"}}/><div className="details-grid"><Detail label="付款条款" value="30% 预付款，发货前付清" /><Detail label="贸易条款" value="FOB Shanghai" /><Detail label="报价有效期" value="2026-11-15" /><Detail label="预计交付" value="收到预付款后 30 天" /></div></div>
        </Card>
        {converted && <Card title="订单履行进度" style={{marginTop:14}}><div className="card-body"><div className="order-progress"><div className="progress-step done">订单确认</div><div className="progress-step">收款</div><div className="progress-step">生产发货</div><div className="progress-step">交付完成</div></div><div className="attention-banner" style={{marginTop:0}}>下一步：记录预付款到账，并由运营确认生产排期。</div></div></Card>}
      </div>
      <div><div className="quote-total"><div className="quote-total-label">{converted ? "订单金额" : "报价总额"}</div><div className="quote-total-value">€18,680.00</div><div className="quote-kv"><span>币种</span><b>EUR</b></div><div className="quote-kv"><span>客户来源</span><b><Tag tone="blue">官网产品页</Tag></b></div><div className="quote-kv"><span>负责人</span><b>陈晓</b></div><div className="quote-kv"><span>最近更新</span><b>2026-10-18</b></div>{converted ? <div style={{marginTop:15}}><Button primary onClick={() => notify("已打开收款记录表单")}>＋ 添加收款记录</Button></div> : <div style={{marginTop:15}}><Button primary onClick={onConvert}>客户已接受  /  转订单</Button></div>}</div><Card title="客户与商机" style={{marginTop:13}}><div className="card-body"><div className="detail-label">客户</div><div style={{fontSize:11,fontWeight:600,marginTop:4}}>{lead.company}</div><div className="company-sub" style={{marginBottom:13}}>{lead.person}</div><div className="detail-label">机会状态</div><div style={{marginTop:5}}><Tag tone="blue">{converted ? "赢单" : "谈判中"}</Tag></div><div className="company-sub" style={{lineHeight:1.6,marginTop:10}}>客户、询盘、报价和订单在业务链路中保持关联，便于追溯沟通背景。</div></div></Card></div>
    </div>
  </>;
}

function FollowupModal({ value, setValue, onClose, onSave }) {
  return <div className="modal-backdrop" onMouseDown={(event) => { if (event.target === event.currentTarget) onClose(); }}><div className="modal"><div className="drawer-head"><div><div className="modal-title">新增跟进</div><div className="modal-desc">记录沟通结论，并约定下一步行动</div></div><button className="close-button" onClick={onClose}>×</button></div><div className="modal-body"><div className="form-grid"><div className="form-field"><label className="form-label">跟进方式</label><select className="form-select"><option>电话</option><option>邮件</option><option>会议</option><option>备注</option></select></div><div className="form-field"><label className="form-label">跟进时间</label><input className="form-input" type="date" defaultValue="2026-10-18" /></div><div className="form-field full"><label className="form-label">沟通内容 *</label><textarea className="form-textarea" value={value} onChange={(event) => setValue(event.target.value)} placeholder="例如：已与客户确认采购数量，客户希望下周收到正式报价……" /></div><div className="form-field full"><label className="form-label">下一步行动日期</label><input className="form-input" type="date" defaultValue="2026-10-20" /></div></div></div><div className="modal-foot"><Button onClick={onClose}>取消</Button><Button primary onClick={onSave}>保存跟进</Button></div></div></div>;
}
function ConvertModal({ lead, onClose, onConvert }) {
  return <div className="modal-backdrop" onMouseDown={(event) => { if (event.target === event.currentTarget) onClose(); }}><div className="modal"><div className="drawer-head"><div><div className="modal-title">确认报价转订单</div><div className="modal-desc">系统将承接报价中的主要金额、币种、条款和产品明细</div></div><button className="close-button" onClick={onClose}>×</button></div><div className="modal-body"><div className="info-box" style={{marginBottom:14}}>客户：{lead.company}<br/>报价编号：QT-2026-018<br/>订单金额：€18,680.00</div><div className="form-grid"><div className="form-field"><label className="form-label">订单负责人</label><select className="form-select"><option>陈晓</option><option>王敏</option></select></div><div className="form-field"><label className="form-label">交付负责人</label><select className="form-select"><option>待分配</option><option>赵磊</option></select></div><div className="form-field full"><label className="form-label">内部交接备注</label><textarea className="form-textarea" placeholder="填写需要交接给运营的信息" /></div></div><div style={{fontSize:9,color:"#9aa2af",marginTop:11}}>转订单后报价状态将更新为赢单。审批或交接步骤按企业实际流程确认。</div></div><div className="modal-foot"><Button onClick={onClose}>返回报价</Button><Button primary onClick={onConvert}>确认转订单</Button></div></div></div>;
}
function DiscussionModal({ screen, onClose }) {
  const prompts = ["官网线索由谁接收和分配？首次响应希望控制在多久？", "客户资料中哪些字段是必填？联系人和公司如何判重？", "哪些条件满足后，询盘可以推进到下一阶段？", "报价审批、订单交接和收款记录由哪些角色负责？"];
  return <div className="modal-backdrop" onMouseDown={(event) => { if (event.target === event.currentTarget) onClose(); }}><div className="modal"><div className="drawer-head"><div><div className="modal-title">把这一步调整成你们的流程</div><div className="modal-desc">当前页面是讨论底稿，可沿用、调整、裁剪或列入开发评估</div></div><button className="close-button" onClick={onClose}>×</button></div><div className="modal-body"><div className="info-box"><b>工作坊讨论问题</b><br/><br/>{prompts[screen]}<br/><br/>请记录流程负责人、必要字段和该步骤的完成标准。</div><div style={{display:"flex",gap:7,marginTop:13}}><Tag tone="green">沿用</Tag><Tag tone="blue">调整</Tag><Tag tone="gold">裁剪</Tag><Tag tone="purple">开发评估</Tag></div></div><div className="modal-foot"><Button onClick={onClose}>关闭</Button><Button primary onClick={() => { onClose(); }}>记下业务结论</Button></div></div></div>;
}

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