omniai-web/src/components/BetaApplicationModal.tsx

import { CloseOutlined, ExperimentOutlined } from "@ant-design/icons";
import { useState } from "react";
import { betaApplicationClient } from "../api/betaApplicationClient";

interface BetaApplicationModalProps {
  open: boolean;
  onClose: () => void;
}

/* ── Form state ── */
interface BetaFormData {
  name: string;
  phone: string;
  wechat: string;
  industry: string;
  company: string;
  city: string;
  aiTools: string;
  aiDuration: string;
  aiTrack: string;
  aiDirection: string[];
  weeklyUsage: string;
  feedbackWilling: string;
  wantFeature: string[];
  selfStatement: string;
  signature: string;
  agreeRules: boolean;
}

const INITIAL_FORM: BetaFormData = {
  name: "",
  phone: "",
  wechat: "",
  industry: "",
  company: "",
  city: "",
  aiTools: "",
  aiDuration: "",
  aiTrack: "",
  aiDirection: [],
  weeklyUsage: "",
  feedbackWilling: "",
  wantFeature: [],
  selfStatement: "",
  signature: "",
  agreeRules: false,
};

/* ── Option groups (from the docx) ── */
const AI_DURATION_OPTIONS = ["1年以内", "1-3年", "3-5年", "5年以上"];
const AI_TRACK_OPTIONS = ["是，长期承接相关业务", "业余创作", "新手学习"];
const AI_DIRECTION_OPTIONS = [
  "AI短剧批量制作", "漫剧剧情生成", "自媒体短视频", "电商图文及视频素材",
  "MCN商业内容", "企业宣传视频", "个人兴趣创作", "其他",
];
const WEEKLY_USAGE_OPTIONS = ["7次及以上", "1-3次", "空闲时间使用"];
const FEEDBACK_OPTIONS = ["全力配合深度反馈", "简单体验留言", "仅使用不反馈"];
const WANT_FEATURE_OPTIONS = [
  "一站式短剧漫剧完整AIGC工作流", "电商素材自动化创作流程",
  "多模态智能中枢全能创作", "批量自动化创作流程", "全新未公开AI创作玩法",
];

/* ── Helper: single-select radio group ── */
function RadioGroup({
  name, options, value, onChange,
}: {
  name: string;
  options: string[];
  value: string;
  onChange: (v: string) => void;
}) {
  return (
    <div className="beta-radio-group">
      {options.map((opt) => (
        <label key={opt} className="beta-radio">
          <input
            type="radio"
            name={name}
            checked={value === opt}
            onChange={() => onChange(opt)}
          />
          <span>{opt}</span>
        </label>
      ))}
    </div>
  );
}

/* ── Helper: multi-select checkbox group ── */
function CheckboxGroup({
  options, value, onChange,
}: {
  options: string[];
  value: string[];
  onChange: (v: string[]) => void;
}) {
  return (
    <div className="beta-checkbox-group">
      {options.map((opt) => (
        <label key={opt} className="beta-checkbox">
          <input
            type="checkbox"
            checked={value.includes(opt)}
            onChange={() => {
              if (value.includes(opt)) {
                onChange(value.filter((item) => item !== opt));
              } else {
                onChange([...value, opt]);
              }
            }}
          />
          <span>{opt}</span>
        </label>
      ))}
    </div>
  );
}

/* ── Helper: text field ── */
function TextField({
  label, value, onChange, placeholder,
}: {
  label: string;
  value: string;
  onChange: (v: string) => void;
  placeholder?: string;
}) {
  return (
    <div className="beta-text-field">
      <span className="beta-text-field__label">{label}</span>
      <input
        type="text"
        className="beta-text-field__input"
        value={value}
        onChange={(e) => onChange(e.target.value)}
        placeholder={placeholder ?? "请填写"}
      />
    </div>
  );
}

const BetaApplicationModal = ({ open, onClose }: BetaApplicationModalProps) => {
  const [form, setForm] = useState<BetaFormData>(INITIAL_FORM);
  const [submitting, setSubmitting] = useState(false);
  const [message, setMessage] = useState<{ tone: "success" | "error"; text: string } | null>(null);

  const update = <K extends keyof BetaFormData>(key: K, value: BetaFormData[K]) => {
    setForm((prev) => ({ ...prev, [key]: value }));
    setMessage(null);
  };

  const close = () => {
    if (submitting) return;
    onClose();
  };

  const validate = () => {
    if (!form.name.trim()) return "请填写姓名 / 常用昵称";
    if (!form.phone.trim()) return "请填写联系手机号码";
    if (!form.wechat.trim()) return "请填写微信账号";
    if (!form.selfStatement.trim()) return "请填写申请自述";
    if (!form.signature.trim()) return "请填写申请人确认签字";
    if (!form.agreeRules) return "请先阅读并同意内测规则";
    return null;
  };

  const submit = async () => {
    if (submitting) return;
    const validationError = validate();
    if (validationError) {
      setMessage({ tone: "error", text: validationError });
      return;
    }

    setSubmitting(true);
    setMessage(null);
    try {
      await betaApplicationClient.submit({
        ...form,
        name: form.name.trim(),
        phone: form.phone.trim(),
        wechat: form.wechat.trim(),
        industry: form.industry.trim(),
        company: form.company.trim(),
        city: form.city.trim(),
        aiTools: form.aiTools.trim(),
        aiDuration: form.aiDuration.trim(),
        aiTrack: form.aiTrack.trim(),
        weeklyUsage: form.weeklyUsage.trim(),
        feedbackWilling: form.feedbackWilling.trim(),
        selfStatement: form.selfStatement.trim(),
        signature: form.signature.trim(),
      });
      setForm(INITIAL_FORM);
      setMessage({ tone: "success", text: "申请已提交，请留意站内通知。" });
    } catch (error) {
      setMessage({ tone: "error", text: error instanceof Error ? error.message : "提交内测申请失败" });
    } finally {
      setSubmitting(false);
    }
  };

  if (!open) return null;

  return (
    <div className="beta-application-modal" role="dialog" aria-modal="true" aria-labelledby="beta-modal-title">
      <button type="button" className="beta-application-modal__backdrop" onClick={close} aria-label="关闭内测申请弹窗" />

      <section className="beta-application-modal__panel">
        {/* ── Header ── */}
        <header className="beta-modal-header">
          <div className="beta-modal-header__left">
            <ExperimentOutlined className="beta-modal-header__icon" />
            <div>
              <h2 id="beta-modal-title">OmniAI 内测体验官申请表</h2>
              <p className="beta-modal-header__subtitle">封闭限量内测 · 仅限 <strong>30 人</strong> · 赠送 <strong>500 元</strong> 通用调用积分</p>
            </div>
          </div>
          <button type="button" className="beta-modal-header__close" onClick={close} aria-label="关闭" disabled={submitting}>
            <CloseOutlined />
          </button>
        </header>

        {/* ── Body (scrollable document) ── */}
        <div className="beta-modal-body">

          {/* 一、个人基础信息 */}
          <section className="beta-doc-section">
            <h3 className="beta-doc-section__title">一、个人基础信息</h3>
            <div className="beta-doc-grid">
              <TextField label="姓名 / 常用昵称" value={form.name} onChange={(v) => update("name", v)} />
              <TextField label="联系手机号码" value={form.phone} onChange={(v) => update("phone", v)} />
              <TextField label="微信账号" value={form.wechat} onChange={(v) => update("wechat", v)} />
              <TextField label="所在行业 / 职业" value={form.industry} onChange={(v) => update("industry", v)} />
              <TextField label="所属公司 / 机构" value={form.company} onChange={(v) => update("company", v)} />
              <TextField label="所在城市" value={form.city} onChange={(v) => update("city", v)} />
            </div>
          </section>

          {/* 二、AI从业与使用经历 */}
          <section className="beta-doc-section">
            <h3 className="beta-doc-section__title">二、AI 从业与使用经历</h3>
            <div className="beta-doc-grid">
              <TextField label="日常常用 AI 创作工具有哪些" value={form.aiTools} onChange={(v) => update("aiTools", v)} placeholder="例如：Midjourney / Stable Diffusion / ChatGPT 等" />
              <div className="beta-form-group">
                <span className="beta-form-group__label">AI 内容创作从业时长</span>
                <RadioGroup name="aiDuration" options={AI_DURATION_OPTIONS} value={form.aiDuration} onChange={(v) => update("aiDuration", v)} />
              </div>
              <div className="beta-form-group">
                <span className="beta-form-group__label">是否深耕 AI 短剧、漫剧、数字视频、电商赛道</span>
                <RadioGroup name="aiTrack" options={AI_TRACK_OPTIONS} value={form.aiTrack} onChange={(v) => update("aiTrack", v)} />
              </div>
              <div className="beta-form-group beta-form-group--full">
                <span className="beta-form-group__label">日常主要创作方向（可多选）</span>
                <CheckboxGroup options={AI_DIRECTION_OPTIONS} value={form.aiDirection} onChange={(v) => update("aiDirection", v)} />
              </div>
            </div>
          </section>

          {/* 三、内测使用意向调研 */}
          <section className="beta-doc-section">
            <h3 className="beta-doc-section__title">三、内测使用意向调研</h3>
            <div className="beta-doc-grid">
              <div className="beta-form-group">
                <span className="beta-form-group__label">每周可稳定登录使用内测平台次数</span>
                <RadioGroup name="weeklyUsage" options={WEEKLY_USAGE_OPTIONS} value={form.weeklyUsage} onChange={(v) => update("weeklyUsage", v)} />
              </div>
              <div className="beta-form-group">
                <span className="beta-form-group__label">是否愿意积极反馈产品 BUG、优化建议、功能需求</span>
                <RadioGroup name="feedback" options={FEEDBACK_OPTIONS} value={form.feedbackWilling} onChange={(v) => update("feedbackWilling", v)} />
              </div>
              <div className="beta-form-group beta-form-group--full">
                <span className="beta-form-group__label">本次最想体验 OmniAI 核心功能（可多选）</span>
                <CheckboxGroup options={WANT_FEATURE_OPTIONS} value={form.wantFeature} onChange={(v) => update("wantFeature", v)} />
              </div>
            </div>
          </section>

          {/* 四、申请自述 */}
          <section className="beta-doc-section">
            <h3 className="beta-doc-section__title">四、申请自述 <em className="beta-required">（必填）</em></h3>
            <p className="beta-doc-section__desc">请简述自身 AI 创作优势、业务需求，以及加入本次封闭内测的理由：</p>
            <textarea
              className="beta-textarea"
              value={form.selfStatement}
              onChange={(e) => update("selfStatement", e.target.value)}
              placeholder="请在此填写您的申请自述（必填）…"
              rows={6}
            />
          </section>

          {/* 五、内测规则知情同意书 */}
          <section className="beta-doc-section">
            <h3 className="beta-doc-section__title">五、内测规则知情同意书</h3>
            <ol className="beta-rules-list">
              <li>本次为封闭限量内测，仅限 <strong>30 人</strong>，按照资质匹配度 + 申请顺序筛选；</li>
              <li>内测赠送 <strong>500 元</strong> 通用调用积分，仅限内测期间使用，不可提现、不可转让、不可兑换现金；</li>
              <li>内测版本含未上线测试功能，存在功能不稳定、界面调整、参数优化等情况，申请人自愿理解包容；</li>
              <li>严禁私自泄露内测专属工作流、内部功能、测试接口、未发布技术方案等内部资料；</li>
              <li>审核通过后，官方将在 <strong>48 小时</strong> 内发放内测账号、登录权限及免费积分；</li>
              <li>正式版上线后，优质内测体验官可享受专属永久优惠权限与平台荣誉称号。</li>
            </ol>

            <label className="beta-agree-row">
              <input
                type="checkbox"
                checked={form.agreeRules}
                onChange={(e) => update("agreeRules", e.target.checked)}
              />
              <span>本人已完整阅读并同意以上全部内测规则，自愿遵守内测所有管理要求。</span>
            </label>

            <div className="beta-doc-grid beta-doc-grid--two">
              <TextField label="申请人确认签字" value={form.signature} onChange={(v) => update("signature", v)} placeholder="请签署姓名" />
              <div className="beta-text-field">
                <span className="beta-text-field__label">申请填写日期</span>
                <input type="text" className="beta-text-field__input" value="2026年    月    日" readOnly />
              </div>
            </div>
          </section>

        </div>

        {/* ── Footer ── */}
        <footer className="beta-modal-footer">
          {message ? (
            <p className={`beta-modal-footer__message beta-modal-footer__message--${message.tone}`} role="status">
              {message.text}
            </p>
          ) : null}
          <button type="button" className="beta-modal-footer__btn beta-modal-footer__btn--secondary" onClick={close} disabled={submitting}>
            关闭
          </button>
          <button type="button" className="beta-modal-footer__btn beta-modal-footer__btn--primary" onClick={() => void submit()} disabled={submitting}>
            {submitting ? "提交中..." : "提交申请"}
          </button>
        </footer>
      </section>
    </div>
  );
};

export default BetaApplicationModal;