const { useState } = React;
const { Icon, ProtoNav } = window;

// 复用字段组件
function Field({ label, required, optional, full, help, error, children }) {
  return (
    <div className={"field" + (full ? " field--full" : "")}>
      <label className="field-label">
        {label}
        {required && <span className="field-required">*</span>}
        {optional && <span className="field-optional">（选填）</span>}
      </label>
      {children}
      {help && <span className="field-help">{help}</span>}
      {error && <span className="field-error">{error}</span>}
    </div>
  );
}

function LeadModal() {
  const [ibossOpen, setIbossOpen] = useState(true);
  const [uploaded, setUploaded] = useState(false);
  const [errors, setErrors] = useState({});

  const submit = () => {
    const e = {};
    if (!uploaded) e.proof = "请上传有效公司注册证明";
    setErrors(e);
  };

  return (
    <div className="lead-modal" data-screen-label="modal-lead-form">
      <div className="lead-modal-header">
        <span className="lead-modal-eyebrow"><Icon.Sparkles size={14} /> 三层递进 · 最高 $1000</span>
        <h2 className="lead-modal-title">提交企业信息，开启试用之旅</h2>
        <p className="lead-modal-intro">
          个人信息真实可获得 <strong>20 USD</strong>，企业信息真实可额外获得 <strong>180 USD</strong>，
          经销售人员与您联系确认后可获得 <strong>800 USD</strong> AI Hub 产品的首月消费抵扣券。
        </p>
        <button className="modal-close" aria-label="关闭"><Icon.Close size={20} /></button>
      </div>

      <div className="lead-modal-body">
        {/* ① 基本信息（EB+iBOSS 共用，必填） */}
        <div className="field-group">
          <h3 className="field-group-title">
            <Icon.Building size={16} /> ① 基本信息
            <span className="field-group-title-tag">EB 审核 + iBOSS 认证共用 · 必填</span>
          </h3>
          <div className="field-grid">
            <Field label="企业注册名称" required full help="必须与商业登记证一致">
              <input className="input" placeholder="请输入企业注册名称" />
            </Field>
            <Field label="国家/地区" required>
              <select className="select"><option>中国</option><option>中国香港</option><option>新加坡</option></select>
            </Field>
            <Field label="城市" required>
              <input className="input" placeholder="请输入城市名称" />
            </Field>
            <Field label="企业联系人姓名" required>
              <input className="input" placeholder="请输入联系人姓名" />
            </Field>
            <Field label="联系人电话" required>
              <div className="input-group">
                <span className="input-prefix">+86</span>
                <input className="input" placeholder="请输入电话号码" style={{ borderRadius: "0 var(--radius-md) var(--radius-md) 0" }} />
              </div>
            </Field>
            <Field label="联系人企业邮箱" required full>
              <input className="input" placeholder="请输入企业邮箱" />
            </Field>
          </div>
        </div>

        {/* ② 业务信息（EB 必填） */}
        <div className="field-group">
          <h3 className="field-group-title">
            <Icon.Sparkles size={16} /> ② 业务信息
            <span className="field-group-title-tag">EB 审核 · 必填</span>
          </h3>
          <div className="field-grid">
            <Field label="大模型应用场景" required full>
              <select className="select">
                <option value="">请选择</option>
                <option>智能摘要</option><option>文档解析</option><option>智能问答</option>
                <option>文案生成</option><option>风险识别</option><option>数据提取</option><option>其他</option>
              </select>
            </Field>
            <Field label="应用场景描述" required full help="请描述大模型具体能力落地场景及使用主体：哪个部门/岗位在用">
              <textarea className="textarea" placeholder="请描述具体场景（10-500 字符）" />
            </Field>
            <Field label="需求背景" required full help="请描述贵公司简介及业务痛点诉求">
              <textarea className="textarea" placeholder="请说明业务需求和期望解决的问题（20-500 字符）" />
            </Field>
            <Field label="模型名称" optional full help="如不确定可留空">
              <input className="input" placeholder="如 GPT-4o、Claude（选填）" />
            </Field>
          </div>
        </div>

        {/* ③ 客户经理信息（EB 可选） */}
        <div className="field-group">
          <h3 className="field-group-title">
            <Icon.Headset size={16} /> ③ 客户经理信息
            <span className="field-group-title-tag">EB 审核 · 选填</span>
          </h3>
          <div className="field-grid">
            <Field label="客户经理姓名" optional>
              <input className="input" placeholder="如有专属客户经理可填写" />
            </Field>
            <Field label="客户经理邮箱" optional>
              <input className="input" placeholder="请输入客户经理邮箱" />
            </Field>
          </div>
        </div>

        {/* iBOSS 认证折叠区 */}
        <button className="iboss-collapse-trigger" aria-expanded={ibossOpen} onClick={() => setIbossOpen(!ibossOpen)}>
          <Icon.ChevronRight size={20} className="iboss-collapse-icon" />
          <span className="iboss-collapse-title">
            可选：贵企业如果首次订购 AI Hub 产品，可额外获得 <strong>800 USD</strong> 的 AI Hub 产品首月消费抵扣券（以企业为单位）
          </span>
          <span className="iboss-collapse-badge">+$800</span>
        </button>

        {ibossOpen && (
          <div className="iboss-collapse-content">
            {/* ④ 企业详细信息 */}
            <div className="field-group">
              <h3 className="field-group-title">
                <Icon.Building size={16} /> ④ 企业详细信息
                <span className="field-group-title-tag">iBOSS 认证 · 展开后必填</span>
              </h3>
              <div className="field-grid">
                <Field label="行业" required><select className="select"><option value="">请选择行业</option><option>金融</option><option>互联网</option><option>制造</option><option>教育</option></select></Field>
                <Field label="企业注册编码" required help="统一社会信用代码，18 位"><input className="input" placeholder="请输入 18 位编码" /></Field>
                <Field label="业务拓展地" required><input className="input" placeholder="请输入业务拓展地" /></Field>
                <Field label="公司网站" optional><input className="input" placeholder="https://" /></Field>
                <Field label="公司地址" required full><textarea className="textarea" style={{ minHeight: 60 }} placeholder="请输入公司地址（10-200 字符）" /></Field>
              </div>
            </div>

            {/* ⑤ 文件上传 */}
            <div className="field-group">
              <h3 className="field-group-title">
                <Icon.Upload size={16} /> ⑤ 文件上传
              </h3>
              <div className="field-grid">
                <Field label="上传有效公司注册证明" required full error={errors.proof}>
                  {uploaded ? (
                    <div className="upload-file">
                      <Icon.File size={20} className="upload-file-icon" />
                      <span className="upload-file-name">business-license.pdf</span>
                      <span className="upload-file-size">2.4 MB</span>
                      <button className="btn btn--text btn--sm" onClick={() => setUploaded(false)}><Icon.Trash size={14} /></button>
                    </div>
                  ) : (
                    <div className="upload" onClick={() => setUploaded(true)} style={{ cursor: "pointer" }}>
                      <Icon.Upload size={32} className="upload-icon" />
                      <span className="upload-text">点击上传或拖拽文件至此</span>
                      <span className="upload-hint">支持 pdf / jpg / jpeg / bmp / png，单文件 ≤ 5MB</span>
                    </div>
                  )}
                </Field>
                <Field label="上传财务报表" optional full help="建议上传以缩短审核时长">
                  <div className="upload">
                    <Icon.Upload size={32} className="upload-icon" />
                    <span className="upload-text">点击上传或拖拽文件至此</span>
                    <span className="upload-hint">选填，建议上传以缩短审核时长</span>
                  </div>
                </Field>
              </div>
            </div>

            {/* ⑥ 存量客户信息（可选） */}
            <div className="field-group">
              <h3 className="field-group-title">
                <Icon.Info size={16} /> ⑥ 存量客户信息
                <span className="field-group-title-tag">选填</span>
              </h3>
              <div className="field-grid">
                <Field label="CMI 客户编码" optional full help="如您已是 CMI 客户，请填写客户编码">
                  <input className="input" placeholder="请输入 CMI 客户编码" />
                </Field>
              </div>
            </div>
          </div>
        )}
      </div>

      <div className="lead-modal-footer">
        <span className="lead-modal-footer-agree">
          提交即表示您同意我们的<a>服务条款</a>和<a>隐私政策</a>
        </span>
        <button className="btn btn--secondary">取消</button>
        <button className="btn btn--primary" onClick={submit}>提交</button>
      </div>
    </div>
  );
}

function HostInfo() {
  return (
    <div className="host-card">
      <p className="host-card-eyebrow">HOST PAGE</p>
      <h3 className="host-card-title">留资大表单 modal-lead-form</h3>
      <p style={{ font: "var(--font-body)", color: "var(--color-text-secondary)", lineHeight: 1.7, margin: 0 }}>
        右侧为弹窗主体（<strong>renderMode = overlay-on-host</strong>）。宿主页为营销首页 / 我的权益 / 活动落地页，此处仅渲染弹窗主体，不绘制宿主页背景。
      </p>

      <div className="host-card-list">
        <div className="host-card-list-item"><span className="host-card-list-item-num">1</span> ① 基本信息（6 字段）+ ② 业务信息（4 字段）+ ③ 客户经理（2 字段）= EB 审核必填</div>
        <div className="host-card-list-item"><span className="host-card-list-item-num">2</span> ④⑤⑥ 三组字段在 iBOSS 认证折叠区内，展开后必填</div>
        <div className="host-card-list-item"><span className="host-card-list-item-num">3</span> 字段 ① 同时用于 EB 审核和 iBOSS 认证，用户只需填一次</div>
        <div className="host-card-list-item"><span className="host-card-list-item-num">4</span> 弹窗 720px 宽，最大高度 80vh，内容区滚动</div>
        <div className="host-card-list-item"><span className="host-card-list-item-num">5</span> 提交后状态 → LEAD_APPLIED，触发三个并行审核流</div>
      </div>

      <div className="host-card-trigger">
        <Icon.Info size={16} />
        <div>
          <strong>触发条件：</strong>REGISTERED 用户登录后（活动周期内）<br />
          <strong>宿主页：</strong>营销首页 / 我的权益 / 活动落地页
        </div>
      </div>
    </div>
  );
}

function App() {
  return (
    <div className="proto-root">
      <ProtoNav active="lead" />
      <main className="modal-demo">
        <div className="modal-demo-host">
          <HostInfo />
          <div className="lead-modal-wrap" data-region="modal-lead-form">
            <LeadModal />
          </div>
        </div>
      </main>
    </div>
  );
}

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