/* global React, Button, SealIcon, SensitiveNotice,
          loadDrafts, saveDraft, deleteDraft, loadAutoDraft, saveAutoDraft, clearAutoDraft, DraftRecover */
const { useState: useStateForm, useEffect: useEffForm } = React;

function LoginModal({ open, onClose, onSubmit, onRules }) {
  const [busy, setBusy] = useStateForm(null);            // 'douyin' | 'wechat' | null
  const [authModes, setAuthModes] = useStateForm({ password: false, oauth: ['douyin', 'wechat'] });
  // legacy password fallback (only used when backend explicitly enables it for dev/staging)
  const [legacyOpen, setLegacyOpen] = useStateForm(false);
  const [legacyId, setLegacyId] = useStateForm('');
  const [legacyPw, setLegacyPw] = useStateForm('');
  const [legacyErr, setLegacyErr] = useStateForm('');
  const [legacyBusy, setLegacyBusy] = useStateForm(false);

  // Probe backend capabilities once when modal opens
  useEffForm(() => {
    if (!open || !window.bxApi) return;
    fetch((window.BX_API_BASE || '') + '/api/user/auth_modes', { credentials: 'include' })
      .then(r => r.json()).then(setAuthModes).catch(() => {});
    setBusy(null); setLegacyOpen(false); setLegacyErr('');
  }, [open]);

  async function startOAuth(provider) {
    if (!window.bxApi) {
      window.showToast && window.showToast({ type: 'warning', msg: '第三方登录需在云端环境使用' });
      return;
    }
    setBusy(provider);
    try {
      const r = await window.bxApi.oauthStart(provider, 'login');
      // Full page redirect to the provider's authorize URL. The provider page
      // displays the QR code (desktop) or deep-links into its app (mobile).
      // After grant, provider redirects to /api/user/oauth/:provider/callback,
      // which sets a session cookie and 302's back to /mailbox/.
      window.location.href = r.authorize_url;
    } catch (e) {
      setBusy(null);
      if (e.error === 'provider_not_configured') {
        window.showToast && window.showToast({ type: 'warning', msg: '此授权尚未配置,请联系陛下管理员' });
      } else {
        window.showToast && window.showToast({ type: 'error', msg: (e && e.message) || '授权请求失败' });
      }
    }
  }

  async function legacyLogin() {
    if (legacyBusy) return;
    if (!legacyId.trim() || !legacyPw) { setLegacyErr('两栏皆不可空'); return; }
    setLegacyBusy(true); setLegacyErr('');
    try {
      const u = await window.bxApi.login({ douyin_id: legacyId.trim(), password: legacyPw });
      onSubmit(u);
    } catch (e) {
      setLegacyErr((e && e.message) || '登录失败');
    } finally {
      setLegacyBusy(false);
    }
  }

  if (!open) return null;
  const oauthList = (authModes.oauth || []);
  const douyinAvail = oauthList.includes('douyin');
  const wechatAvail = oauthList.includes('wechat');

  return (
    <div className="bx-modal" onClick={onClose}>
      <div className="bx-modal__card" onClick={e => e.stopPropagation()}>
        <button className="bx-modal__close" onClick={onClose}>×</button>
        <h2 className="h2 bx-modal__title">登入朝堂</h2>
        <p className="small bx-modal__note" style={{ lineHeight: 1.7 }}>
          本站只支持<strong>抖音扫码登录</strong> · 朕通过抖音认你身份,无需另设口谕。<br/>
          电脑访问 → 点下面按钮跳到抖音二维码页 → 用抖音 App 扫码<br/>
          手机访问 → 点下面按钮自动跳到抖音 App 完成授权
        </p>
        <div className="bx-form" style={{ marginTop: 24 }}>
          {(douyinAvail || !window.bxApi) ? (
            <button
              type="button"
              className="bx-btn bx-btn--primary bx-btn--lg"
              style={{ width: '100%', justifyContent: 'center', gap: 10, padding: '16px 24px', fontSize: 16 }}
              onClick={() => startOAuth('douyin')}
              disabled={busy === 'douyin'}>
              <svg width="22" height="22" viewBox="0 0 48 48" fill="currentColor" aria-hidden="true">
                <path d="M38 14c-3 0-6-2-7-5h-5v20a6 6 0 1 1-6-6v-5a11 11 0 1 0 11 11V20c2 2 5 3 7 3v-5z"/>
              </svg>
              <span>{busy === 'douyin' ? '跳转抖音中…' : '抖音扫码登录'}</span>
            </button>
          ) : (
            <div style={{ padding: 16, background: 'rgba(139,107,58,0.06)', border: '1px dashed var(--bronze-line)', borderRadius: 8, fontSize: 13, color: 'var(--ink-3)', lineHeight: 1.7, textAlign: 'center' }}>
              抖音登录尚在配置中。请联系陛下管理员或稍后再试。
            </div>
          )}

          {wechatAvail && (
            <button
              type="button"
              className="bx-btn bx-btn--secondary"
              style={{ width: '100%', justifyContent: 'center', gap: 10, marginTop: 10 }}
              onClick={() => startOAuth('wechat')}
              disabled={busy === 'wechat'}>
              <svg width="20" height="20" viewBox="0 0 48 48" fill="currentColor" aria-hidden="true">
                <path d="M18 10c-7 0-13 5-13 11 0 3 2 6 5 8l-1 4 5-3c1 0 2 1 4 1h2c-1-2-1-3-1-5 0-6 6-11 13-11l1 .1C31 12 25 10 18 10zm-5 7a2 2 0 1 1 0 4 2 2 0 0 1 0-4zm10 0a2 2 0 1 1 0 4 2 2 0 0 1 0-4zM33 19c-6 0-11 4-11 10 0 5 5 10 11 10l3-.5 4 2-1-3c3-2 4-5 4-8 0-6-5-10-10-10zm-3 6a2 2 0 1 1 0 3 2 2 0 0 1 0-3zm7 0a2 2 0 1 1 0 3 2 2 0 0 1 0-3z"/>
              </svg>
              <span>{busy === 'wechat' ? '跳转微信中…' : '微信扫码登录'}</span>
            </button>
          )}

          <div className="small" style={{ marginTop: 18, color: 'var(--ink-3)', textAlign: 'center', lineHeight: 1.7 }}>
            点击即表示朕已阅 <a onClick={(e) => { e.preventDefault(); onRules && onRules(); }} style={{ color: 'var(--bronze)', cursor: 'pointer', textDecoration: 'underline', textUnderlineOffset: 3 }}>《投稿须知》</a>。<br/>
            朕仅获取你的抖音昵称与头像,不读你的私信、视频或粉丝。
          </div>

          {/* Legacy password form — only when backend explicitly enables PASSWORD_AUTH. */}
          {authModes.password && (
            <div style={{ marginTop: 28, paddingTop: 18, borderTop: '1px dashed var(--hairline)' }}>
              {!legacyOpen ? (
                <button type="button" className="bx-fp__link" onClick={() => setLegacyOpen(true)}
                  style={{ display: 'block', margin: '0 auto', fontSize: 12, color: 'var(--ink-3)' }}>
                  开发模式:口谕登录 →
                </button>
              ) : (
                <div className="bx-form">
                  <p className="small" style={{ color: 'var(--ink-3)', margin: '0 0 8px' }}>测试通道,生产环境关闭</p>
                  <label className="bx-field">
                    <span className="bx-field__lbl">抖音 ID</span>
                    <input value={legacyId} onChange={e => { setLegacyId(e.target.value); setLegacyErr(''); }}/>
                  </label>
                  <label className="bx-field">
                    <span className="bx-field__lbl">口谕</span>
                    <input type="password" value={legacyPw} onChange={e => { setLegacyPw(e.target.value); setLegacyErr(''); }}/>
                  </label>
                  {legacyErr && <span className="bx-field__err">{legacyErr}</span>}
                  <Button variant="secondary" onClick={legacyLogin}>{legacyBusy ? '登录中…' : '口谕登录'}</Button>
                </div>
              )}
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

function ComposeForm({ onSubmit, draftToEdit }) {
  const [title, setTitle] = useStateForm(draftToEdit?.title || '');
  const [body, setBody] = useStateForm(draftToEdit?.body || '');
  const [cat, setCat] = useStateForm(draftToEdit?.cat || '情感困扰');
  const [named, setNamed] = useStateForm(draftToEdit?.named || 'real');
  const [clip, setClip] = useStateForm(draftToEdit?.clip || 'yes');
  const [errs, setErrs] = useStateForm({});
  const [recovered, setRecovered] = useStateForm(null);
  const [draftId, setDraftId] = useStateForm(draftToEdit?.id || null);
  const [images, setImages] = useStateForm(draftToEdit?.images || []); // [{id, url, name, size}]
  const [submitting, setSubmitting] = useStateForm(false);   // double-click guard
  const [savingDraft, setSavingDraft] = useStateForm(false);
  const [sens, setSens] = useStateForm({ blocked: [], warnings: [] });  // 违规词检测结果
  const fileInputRef = React.useRef(null);
  const checkTimer = React.useRef(null);
  const imagesRef = React.useRef(images);
  imagesRef.current = images;            // 始终指向最新 images,供卸载时清理用
  const MAX_IMAGES = 6;
  const MAX_IMAGE_MB = 5;

  // 组件卸载时(用户中途离开/不提交)兜底释放所有 blob: 预览 URL,避免内存泄漏。
  useEffForm(() => () => {
    imagesRef.current.forEach(img => {
      if (img.url && img.url.startsWith('blob:')) URL.revokeObjectURL(img.url);
    });
  }, []);

  function handleImageFiles(files) {
    const incoming = Array.from(files || []);
    if (incoming.length === 0) return;
    const room = MAX_IMAGES - images.length;
    if (room <= 0) {
      window.showToast && window.showToast({ type: 'warning', msg: `至多 ${MAX_IMAGES} 张图，不可再添` });
      return;
    }
    const picked = incoming.slice(0, room);
    const added = [];
    picked.forEach(f => {
      if (!f.type.startsWith('image/')) {
        window.showToast && window.showToast({ type: 'error', msg: `「${f.name}」非图片，朕不收` });
        return;
      }
      if (f.size > MAX_IMAGE_MB * 1024 * 1024) {
        window.showToast && window.showToast({ type: 'error', msg: `「${f.name}」超过 ${MAX_IMAGE_MB}MB` });
        return;
      }
      added.push({ id: Date.now() + Math.random(), url: URL.createObjectURL(f), name: f.name, size: f.size, file: f });
    });
    if (added.length > 0) setImages(x => [...x, ...added]);
    if (incoming.length > room) window.showToast && window.showToast({ type: 'warning', msg: `只收了前 ${room} 张，余者请删一些再上` });
  }
  function removeImage(id) {
    setImages(x => {
      const gone = x.find(i => i.id === id);
      if (gone && gone.url && gone.url.startsWith('blob:')) URL.revokeObjectURL(gone.url);
      return x.filter(i => i.id !== id);
    });
  }
  function onDrop(e) { e.preventDefault(); handleImageFiles(e.dataTransfer.files); }
  function onDragOver(e) { e.preventDefault(); }

  // Draft recovery on mount — only if not already editing a draft
  useEffForm(() => {
    if (draftToEdit) return;
    const auto = loadAutoDraft();
    if (auto && (auto.title || auto.body) && (auto.body || '').length > 10) {
      setRecovered(auto);
    }
  }, []);

  // Auto-save every 30s
  useEffForm(() => {
    const t = setInterval(() => {
      if (title.trim() || body.trim()) saveAutoDraft({ title, body, cat, named, clip });
    }, 30000);
    return () => clearInterval(t);
  }, [title, body, cat, named, clip]);

  // 违规词实时检测:停手 400ms 后查一次(防抖)。命中 block 词则禁止呈递。
  useEffForm(() => {
    if (!window.bxApi) return;                        // 离线 mock 模式不查
    const text = (title + '\n' + body).trim();
    if (!text) { setSens({ blocked: [], warnings: [] }); return; }
    clearTimeout(checkTimer.current);
    checkTimer.current = setTimeout(() => {
      window.bxApi.checkContent(text)
        .then(r => setSens({ blocked: r.blocked || [], warnings: r.warnings || [] }))
        .catch(() => {});                             // 网络/401 静默,不打扰打字
    }, 400);
    return () => clearTimeout(checkTimer.current);
  }, [title, body]);

  function restore() { setTitle(recovered.title || ''); setBody(recovered.body || ''); setCat(recovered.cat || '情感困扰'); setRecovered(null); }
  function discardRecovered() { clearAutoDraft(); setRecovered(null); }

  function validate() {
    const e = {};
    if (!title.trim()) e.title = '题目不可空';
    else if (title.length > 30) e.title = '题目不过 30 字';
    if (!body.trim()) e.body = '正文不可空';
    else if (body.trim().length < 20) e.body = '正文至少 20 字 · 朕需略知全貌';
    setErrs(e);
    return Object.keys(e).length === 0;
  }

  async function doSubmit() {
    if (submitting) return;     // double-click guard
    if (!validate()) { window.showToast && window.showToast({ type: 'error', msg: '奏折有漏,请爱卿检查' }); return; }
    if (sens.blocked.length) {  // 违规词未改,不放行
      window.showToast && window.showToast({ type: 'error', msg: '奏折含违规词,请先修改后再呈' });
      return;
    }
    setSubmitting(true);
    try {
      if (window.bxApi) {
        try {
          const res = await window.bxApi.submitLetter({
            title, body, category: cat,
            anonymous: named === 'anon',
            allow_clip: clip === 'yes',
            use_priority_credit: false,
          });
          // Upload images sequentially after we have a letter id
          for (const img of images) {
            if (img.file) {
              try { await window.bxApi.uploadImage(res.id, img.file); }
              catch (e) { window.showToast && window.showToast({ type: 'warning', msg: `图片 ${img.name} 上传失败: ${e.message}` }); }
            }
          }
          // Delete the draft we just submitted — from the correct store
          if (draftId) {
            if (typeof draftId === 'number' && window.bxApi) {
              try { await window.bxApi.deleteDraft(draftId); } catch {}
            } else {
              deleteDraft(draftId);
            }
          }
          // Free blob: URL previews to avoid memory leak.
          for (const img of images) { if (img.url && img.url.startsWith('blob:')) URL.revokeObjectURL(img.url); }
          clearAutoDraft();
          onSubmit({ id: res.id });
          return;
        } catch (err) {
          // 后端违规词闸(绕过前端直发也会被拦)。把命中词回填,标红正文。
          if (err && err.error === 'sensitive_content') {
            if (err.details) setSens({ blocked: err.details.blocked || [], warnings: err.details.warnings || [] });
            if (err.fields) setErrs(err.fields);
            window.showToast && window.showToast({ type: 'error', msg: '奏折含违规词,请修改后再呈' });
            return;
          }
          if (err && err.fields) { setErrs(err.fields); return; }
          window.showToast && window.showToast({ type: 'error', msg: (err && err.message) || '呈递失败,请稍后再试' });
          return;
        }
      }
      // offline fallback
      if (draftId) deleteDraft(draftId);
      clearAutoDraft();
      onSubmit({ title, body, cat, images });
    } finally {
      setSubmitting(false);
    }
  }

  async function doSaveDraft() {
    if (savingDraft) return;
    if (!title.trim() && !body.trim() && images.length === 0) { window.showToast && window.showToast({ type: 'info', msg: '尚无内容可存' }); return; }
    setSavingDraft(true);
    try {
      // Try server draft first (persists across devices). Fall back to localStorage.
      if (window.bxApi) {
        try {
          const payload = {
            title, body, category: cat,
            anonymous: named === 'anon',
            allow_clip: clip === 'yes',
          };
          const r = typeof draftId === 'number'
            ? await window.bxApi.updateDraft(draftId, payload)
            : await window.bxApi.createDraft(payload);
          setDraftId(r.id);
          clearAutoDraft();
          window.showToast && window.showToast({ type: 'success', msg: '奏折已入草稿匣' });
          return;
        } catch (e) {
          if (e.status === 401) { window.showToast && window.showToast({ type: 'warning', msg: '请先入朝方可存草稿' }); return; }
          // else fall through to local
        }
      }
      const draft = { id: draftId, title, body, cat, named, clip, images };
      const list = saveDraft(draft);
      const saved = list[0];
      setDraftId(saved.id);
      clearAutoDraft();
      window.showToast && window.showToast({ type: 'success', msg: '奏折已入草稿匣(本地)' });
    } finally {
      setSavingDraft(false);
    }
  }

  return (
    <div className="bx-page">
      <div className="bx-page__head">
        <span className="eyebrow">COMPOSE · 上奏</span>
        <h1 className="h1">呈递奏折</h1>
        <p className="subtitle">朕听着呢,爱卿请讲</p>
      </div>
      {recovered && <DraftRecover draft={recovered} onRestore={restore} onDiscard={discardRecovered}/>}
      <div className="bx-compose">
        <div className="bx-compose__main">
          <label className={'bx-field ' + (errs.title ? 'bx-field--err' : '')}>
            <span className="bx-field__lbl">奏折题目 <span className="req">*</span></span>
            <input value={title} onChange={e => { setTitle(e.target.value); setErrs(x => ({ ...x, title: '' })); }} placeholder="一句话道出所奏之事" maxLength={30}/>
            <span className="bx-field__counter">{title.length}/30</span>
            {errs.title && <span className="bx-field__err">{errs.title}</span>}
          </label>
          <label className="bx-field">
            <span className="bx-field__lbl">所奏分类</span>
            <select value={cat} onChange={e => setCat(e.target.value)}>
              <option>情感困扰</option><option>工作烦恼</option><option>学业求助</option>
              <option>生活趣事</option><option>单纯吐槽</option><option>感谢陛下</option><option>其他</option>
            </select>
          </label>
          <label className={'bx-field ' + ((errs.body || sens.blocked.length) ? 'bx-field--err' : '')}>
            <span className="bx-field__lbl">奏折正文 <span className="req">*</span></span>
            <textarea value={body} onChange={e => { setBody(e.target.value); setErrs(x => ({ ...x, body: '' })); }} rows={10} placeholder="慢慢道来,朕不急……" maxLength={30000}/>
            <span className="bx-field__counter" style={{
              color: body.length > 28000 ? 'var(--danger, #c53030)' : (body.length > 25000 ? 'var(--bronze)' : undefined)
            }}>
              {body.length.toLocaleString()} / 30,000 字 · 每 30 秒自动暂存
              {body.length > 28000 && ' · 接近上限'}
            </span>
            {errs.body && <span className="bx-field__err">{errs.body}</span>}
          </label>
          <div className="bx-field">
            <span className="bx-field__lbl">附上图片（选填，至多 {MAX_IMAGES} 张，单张 ≤ {MAX_IMAGE_MB}MB）</span>
            <div className={'bx-upload ' + (images.length >= MAX_IMAGES ? 'is-full' : '')}
                 onDrop={onDrop} onDragOver={onDragOver}
                 onClick={() => images.length < MAX_IMAGES && fileInputRef.current && fileInputRef.current.click()}>
              <input ref={fileInputRef} type="file" accept="image/*" multiple hidden
                     onChange={e => { handleImageFiles(e.target.files); e.target.value = ''; }}/>
              {images.length === 0 ? (
                <div className="bx-upload__empty">
                  <svg viewBox="0 0 24 24" width="28" height="28" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round">
                    <rect x="3" y="5" width="18" height="14" rx="2"/><circle cx="9" cy="10" r="1.5"/><path d="M21 16l-5-5-4 4-3-2-6 6"/>
                  </svg>
                  <div className="bx-upload__hint"><strong>点此上传</strong> 或将图片拖入此处</div>
                  <div className="small">可附照片、截图、插画等。图片仅朕过目，不会在列表中展示。</div>
                </div>
              ) : (
                <>
                  <div className="bx-upload__grid">
                    {images.map(img => (
                      <div key={img.id} className="bx-upload__tile">
                        <img src={img.url} alt={img.name} loading="lazy" decoding="async"/>
                        <button type="button" className="bx-upload__remove" onClick={e => { e.stopPropagation(); removeImage(img.id); }} title="移除">×</button>
                      </div>
                    ))}
                    {images.length < MAX_IMAGES && (
                      <div className="bx-upload__tile bx-upload__tile--add">
                        <span>＋</span>
                        <span className="small">再添一张</span>
                      </div>
                    )}
                  </div>
                  <div className="small bx-upload__count">已添 {images.length} / {MAX_IMAGES}</div>
                </>
              )}
            </div>
          </div>
          <div className="bx-radio-group">
            <span className="bx-field__lbl">宣读方式</span>
            <label className="bx-radio"><input type="radio" name="n" checked={named === 'anon'} onChange={() => setNamed('anon')}/><span>匿名宣读 · 不提尊号</span></label>
            <label className="bx-radio"><input type="radio" name="n" checked={named === 'real'} onChange={() => setNamed('real')}/><span>实名宣读 · 提及尊号</span></label>
          </div>
          <div className="bx-radio-group">
            <span className="bx-field__lbl">是否允许剪辑成视频</span>
            <label className="bx-radio"><input type="radio" name="c" checked={clip === 'yes'} onChange={() => setClip('yes')}/><span>允许</span></label>
            <label className="bx-radio"><input type="radio" name="c" checked={clip === 'no'} onChange={() => setClip('no')}/><span>仅直播宣读,不剪辑</span></label>
          </div>
          <SensitiveNotice blocked={sens.blocked} warnings={sens.warnings}/>
          <div className="bx-compose__actions">
            <Button variant="primary" size="lg" onClick={doSubmit}
                    disabled={submitting || sens.blocked.length > 0}
                    title={sens.blocked.length ? '请先修改违规词再呈递' : undefined}
                    icon={<SealIcon size={16} color="#fff"/>}>
              {submitting ? '呈递中…' : (sens.blocked.length ? '含违规词,待修改' : '呈上')}
            </Button>
            <Button variant="secondary" onClick={doSaveDraft}>{savingDraft ? '存中…' : '存为草稿'}</Button>
          </div>
        </div>
        <aside className="bx-compose__aside">
          <h4 className="h4">投稿须知</h4>
          <ul>
            <li>朕不定时开朝会,可关注抖音开播提醒</li>
            <li>审阅后 3–7 日内批阅</li>
            <li>涉及违法、广告、辱骂之奏折,朕将打入冷宫</li>
            <li>被选中宣读者,朕将赐予「常在」或更高封号</li>
          </ul>
          <h4 className="h4" style={{ marginTop: 24 }}>朕最爱读的奏折</h4>
          <ul>
            <li>情真意切,不雕琢 · 讲一件具体的事,不泛谈人生</li>
            <li>细节丰富 · 让朕如临其境</li>
            <li>有问题,也有你自己的判断</li>
          </ul>
        </aside>
      </div>
    </div>
  );
}

function SubmitSuccess({ id, onAnother, onMine, onHome }) {
  // 仪式感:全屏古风背景 + 卷轴展开 + 印章落下 + 粒子飘起 + 编号特写
  // 进场顺序:卷轴展开 (0-700ms) → 印章降落 (500-1200ms) → 文字逐字 (1000-2000ms)
  // → 粒子飘起 (1200ms+ 持续) → 按钮淡入 (2200ms)
  // 配音: 给一个 <audio> 占位,你录好 准奏 音效后放 assets/zhun-zou.mp3 即可
  const [stage, setStage] = useStateForm(0);
  useEffForm(() => {
    const t1 = setTimeout(() => setStage(1), 700);   // 印章
    const t2 = setTimeout(() => setStage(2), 1400);  // 文字
    const t3 = setTimeout(() => setStage(3), 2400);  // 按钮
    // 尝试播放音效(用户没录则静默)
    try {
      const a = new Audio('../../assets/zhun-zou.mp3');
      a.volume = 0.6;
      a.play().catch(() => {});
    } catch {}
    return () => { clearTimeout(t1); clearTimeout(t2); clearTimeout(t3); };
  }, []);

  function shareToWeChat() {
    if (navigator.share) {
      navigator.share({
        title: `朕已收到奏折 #${id}`,
        text: '朕在「陛下信箱」上奏了一本,静候朕召。',
        url: window.location.origin + window.location.pathname,
      }).catch(() => {});
    } else {
      const url = window.location.origin + window.location.pathname + '#letter=' + id;
      const ta = document.createElement('textarea'); ta.value = url; document.body.appendChild(ta); ta.select();
      try { document.execCommand('copy'); } catch {}
      ta.remove();
      window.showToast && window.showToast({ type: 'success', msg: '链接已复制 · 可粘贴至抖音 / 微信分享' });
    }
  }

  return (
    <div className="bx-ceremony">
      {/* 全屏古风背景 */}
      <div className="bx-ceremony__bg" aria-hidden="true"/>

      {/* 卷轴展开 */}
      <div className={'bx-ceremony__scroll ' + (stage >= 0 ? 'is-open' : '')}>
        <div className="bx-ceremony__scroll-rod bx-ceremony__scroll-rod--top"/>
        <div className="bx-ceremony__scroll-paper">
          {/* 印章 */}
          <div className={'bx-ceremony__seal ' + (stage >= 1 ? 'is-down' : '')}>
            <svg viewBox="0 0 120 120" width="120" height="120">
              <rect x="10" y="10" width="100" height="100" rx="6" fill="#A63F2E" stroke="#7A2E1F" strokeWidth="2"/>
              <g fill="#FAF7F2" fontFamily="serif" textAnchor="middle">
                <text x="60" y="48" fontSize="28" fontWeight="700">陛</text>
                <text x="60" y="80" fontSize="28" fontWeight="700">下</text>
                <text x="60" y="106" fontSize="14" letterSpacing="2" opacity="0.85">已收</text>
              </g>
            </svg>
          </div>

          {/* 文字 */}
          <div className={'bx-ceremony__text ' + (stage >= 2 ? 'is-in' : '')}>
            <h1 className="bx-ceremony__h1">朕已收到爱卿的奏折</h1>
            <p className="bx-ceremony__sub">准奏。约 3–7 日批阅,静候朕召。</p>
            <div className="bx-ceremony__id">
              <span className="bx-ceremony__id-label">第</span>
              <span className="bx-ceremony__id-num">{id}</span>
              <span className="bx-ceremony__id-label">号 奏 折</span>
            </div>
          </div>

          {/* 粒子(金色光点) */}
          {stage >= 1 && (
            <div className="bx-ceremony__particles" aria-hidden="true">
              {Array.from({ length: 18 }).map((_, i) => (
                <span key={i} className="bx-ceremony__particle" style={{
                  '--i': i,
                  left: (4 + (i * 5.4) % 92) + '%',
                  animationDelay: (i * 0.18) + 's',
                  animationDuration: (3.2 + (i % 4) * 0.5) + 's',
                }}/>
              ))}
            </div>
          )}
        </div>
        <div className="bx-ceremony__scroll-rod bx-ceremony__scroll-rod--bottom"/>
      </div>

      {/* 按钮 */}
      <div className={'bx-ceremony__cta ' + (stage >= 3 ? 'is-in' : '')}>
        <button type="button" className="bx-btn bx-btn--primary" onClick={shareToWeChat}>
          <span style={{display:'inline-flex',alignItems:'center',gap:6}}>
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><circle cx="6" cy="12" r="2.5"/><circle cx="18" cy="6" r="2.5"/><circle cx="18" cy="18" r="2.5"/><path d="M8.3 10.8L15.7 7.2M8.3 13.2L15.7 16.8"/></svg>
            分享至抖音 / 微信
          </span>
        </button>
        <button type="button" className="bx-btn bx-btn--secondary" onClick={onMine}>看我的奏折</button>
        <button type="button" className="bx-btn bx-btn--tertiary" onClick={onAnother}>再上一本</button>
        <button type="button" className="bx-btn bx-btn--tertiary" onClick={onHome}>返回首页</button>
      </div>
    </div>
  );
}

Object.assign(window, { LoginModal, ComposeForm, SubmitSuccess });