// new-lead-modal.jsx
function NewLeadModal({ onClose, user, onCreated }) {
  const [form, setForm] = React.useState({
    name: "", company: "", role: "", phone: "", email: "",
    product_interest: "igaming-live", request_type: "demo",
    message: "", assigned_to: "", status: "new",
  });
  const [submitting, setSubmitting] = React.useState(false);
  const [error, setError] = React.useState('');

  const update = (k) => (e) => setForm({ ...form, [k]: e.target.value });
  const canSubmit = form.name.trim() && (form.email.trim() || form.phone.trim());

  React.useEffect(() => {
    const onKey = (e) => { if (e.key === "Escape") onClose(); };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, []);

  const handleSubmit = async () => {
    if (!canSubmit || submitting) return;
    setSubmitting(true);
    setError('');
    try {
      const body = { ...form };
      if (!user?.isAdmin) delete body.assigned_to;
      await window.api.createLead(body);
      onCreated();
    } catch (e) {
      setError(e.message || '提交失败');
      setSubmitting(false);
    }
  };

  return (
    <>
      <div className="modal-backdrop" onClick={onClose}></div>
      <div className="modal" role="dialog" aria-modal="true">
        <header className="modal-header">
          <div>
            <h2 className="modal-title">新建线索</h2>
            <div className="modal-sub">手动录入一条新线索，提交后默认进入"新线索"列表</div>
          </div>
          <button className="icon-btn" onClick={onClose} aria-label="关闭">✕</button>
        </header>

        <div className="modal-body">
          <div className="form-section">
            <div className="form-section-label">基础信息</div>
            <div className="form-grid">
              <Field label="姓名" required>
                <input className="form-input" value={form.name} onChange={update("name")} placeholder="例如 陈嘉豪" />
              </Field>
              <Field label="公司">
                <input className="form-input" value={form.company} onChange={update("company")} placeholder="例如 星河娱乐集团" />
              </Field>
              <Field label="职位">
                <input className="form-input" value={form.role} onChange={update("role")} placeholder="例如 产品负责人" />
              </Field>
              <Field label="电话">
                <input className="form-input" value={form.phone} onChange={update("phone")} placeholder="+86 / +60 / +65 ..." />
              </Field>
              <Field label="邮件" full>
                <input className="form-input" type="email" value={form.email} onChange={update("email")} placeholder="name@company.com" />
              </Field>
            </div>
          </div>

          <div className="form-section">
            <div className="form-section-label">意向信息</div>
            <div className="form-grid">
              <Field label="产品意向">
                <select className="form-input" value={form.product_interest} onChange={update("product_interest")}>
                  <option value="igaming-live">iGaming 直播</option>
                  <option value="igaming-vod">iGaming 点播</option>
                  <option value="cloud-services">云服务</option>
                  <option value="not-sure">待定</option>
                </select>
              </Field>
              <Field label="初始状态">
                <select className="form-input" value={form.status} onChange={update("status")}>
                  {window.STATUS_ORDER.map(s => (
                    <option key={s} value={s}>{window.STATUS_META[s].label}</option>
                  ))}
                </select>
              </Field>
              {user?.isAdmin && (
                <Field label="分配给（邮箱）">
                  <input className="form-input" type="email" value={form.assigned_to} onChange={update("assigned_to")} placeholder="name@cloudmate.ai（留空则不分配）" />
                </Field>
              )}
              <Field label="备注 / 来源场景" full>
                <textarea className="form-input" value={form.message} onChange={update("message")} rows={3} placeholder="记录来源场景、关键诉求或其他上下文..." />
              </Field>
            </div>
          </div>
        </div>

        <footer className="modal-footer">
          <span className="modal-foot-hint">
            {error
              ? <span style={{ color: '#ef4444' }}>{error}</span>
              : <span><span className="req-star">*</span> 姓名为必填，邮件或电话至少填一项</span>
            }
          </span>
          <div className="modal-actions">
            <button className="btn-ghost" onClick={onClose}>取消</button>
            <button className="btn-primary" disabled={!canSubmit || submitting} onClick={handleSubmit}>
              {submitting ? '提交中…' : '提交并创建'}
            </button>
          </div>
        </footer>
      </div>
    </>
  );
}

function Field({ label, required, full, children }) {
  return (
    <label className={`field ${full ? "field-full" : ""}`}>
      <span className="field-label">{label}{required && <span className="req-star">*</span>}</span>
      {children}
    </label>
  );
}

window.NewLeadModal = NewLeadModal;