/* global React, Button, CloudDivider, SealIcon */
const { useState: useSP } = React;

/* =========================================================
   About · 关于陛下
========================================================= */
function AboutPage({ onCompose, onNav }) {
  return (
    <div className="bx-editorial">
      <header className="bx-editorial__head">
        <span className="eyebrow">ABOUT · 关于陛下</span>
        <h1 className="h1">朕是谁</h1>
        <p className="subtitle">现代宫廷,一人独坐</p>
      </header>

      {/* Section 1 */}
      <section className="bx-editorial__sec">
        <h2 className="h2 bx-editorial__sec-title">朕的来历</h2>
        <div className="bx-editorial__prose">
          <p>朕本是一介书生,在这个快节奏的时代,做着一件慢得不像话的事——听爱卿们说话。</p>
          <p>从前总有朋友深夜发来长长的语音,说工作、说爱人、说爹娘,说些不足与外人道的碎事。朕一边听一边想:这世上不缺说话的地方,缺的是愿意慢慢听的人。于是便有了这个信箱。</p>
          <p>朕会在抖音不定时开朝会,亲自批阅爱卿们呈来的奏折。选中的,朕会当场宣读;有些感触格外深的,朕会剪成小段视频,让更多人看到。没被选中的,也不必气馁——朕每一封都看了,这是朕给自己立的规矩。</p>
          <p>朕性情闷,话不多,但凡爱卿开口,朕必认真听。这世上最难的不是开口,是遇到一个认真听的人。朕愿意当这个人。</p>
        </div>
      </section>

      <CloudDivider/>

      {/* Section 2 */}
      <section className="bx-editorial__sec">
        <h2 className="h2 bx-editorial__sec-title">朕的抖音</h2>
        <div className="bx-about__accounts bx-about__accounts--wide">
          <div className="bx-acct-card">
            <div className="bx-acct-card__qr"><QRPlaceholder/></div>
            <div className="bx-acct-card__body">
              <div className="bx-acct-card__row"><span className="rank-badge">主号</span><h3 className="h3">陛下</h3></div>
              <p className="small">124.6 万爱卿 · 认证:内容创作者 · 朝会直播</p>
              <Button variant="secondary" size="sm">关注</Button>
            </div>
          </div>
          <div className="bx-acct-card">
            <div className="bx-acct-card__qr"><QRPlaceholder/></div>
            <div className="bx-acct-card__body">
              <div className="bx-acct-card__row"><span className="rank-badge">小号</span><h3 className="h3">陛下ovo</h3></div>
              <p className="small">38.2 万爱卿 · 日常碎语 · 不正经</p>
              <Button variant="secondary" size="sm">关注</Button>
            </div>
          </div>
        </div>
        <p className="small bx-about__foot">朝会不定时开播,爱卿可关注抖音开播提醒,避免错过。</p>
      </section>

      <CloudDivider/>

      {/* Section 3 · Oath */}
      <section className="bx-oath">
        <div className="bx-oath__frame">
          <span className="eyebrow">OATH · 朕的誓言</span>
          <p className="bx-oath__text">
            朕承诺:每一封奏折,朕必亲自过目。<br/>
            纵不能悉数宣读,亦不会辜负爱卿笔下心意。<br/>
            凡投之以言,朕必还之以念。
          </p>
          <div className="bx-oath__sig">
            <div className="bx-oath__seal"><SealIcon size={32} color="var(--bronze)"/></div>
            <span className="small">丙午年春 · 2026</span>
          </div>
        </div>
      </section>

      {/* Bottom CTA */}
      <section className="bx-editorial__cta">
        <h2 className="h2">爱卿可愿一试?</h2>
        <Button variant="primary" size="lg" onClick={onCompose} icon={<SealIcon size={16} color="#fff"/>}>即刻上奏</Button>
      </section>
    </div>
  );
}

function QRPlaceholder() {
  // Visual placeholder — not a scannable code. Real QRs need to be supplied
  // by ops (or generated server-side) once the wechat 小秘书 / 抖音 主号 are live.
  return (
    <div style={{ width: 84, height: 84, display: 'flex', alignItems: 'center', justifyContent: 'center',
                   background: 'rgba(139,107,58,0.06)', border: '1px dashed var(--bronze-line)',
                   borderRadius: 6, fontSize: 11, color: 'var(--ink-3)', textAlign: 'center', padding: 6, lineHeight: 1.3 }}>
      二维码<br/>待补
    </div>
  );
}

/* =========================================================
   Rules · 投稿须知
========================================================= */
function RulesPage({ onCompose }) {
  const items = [
    {
      t: '关于你的奏折',
      lis: [
        '奏折字数不限,朕听得下;唯恐过于冗长则难以宣读',
        '题目限 30 字',
        '请使用中文投稿',
        '建议一次只讲一件事,朕才能批阅得深入',
      ],
    },
    {
      t: '关于隐私',
      lis: [
        '默认「匿名宣读」——直播读信时不会提你的爱卿尊号',
        '选择「实名宣读」——直播宣读时会提到你的尊号',
        '「是否允许剪辑成视频」的选择,朕会严格遵守',
        '本站只支持抖音扫码登录 · 仅获取你的抖音昵称与头像,不读私信、视频、粉丝',
        '本站与抖音平台无官方关联,请知悉',
      ],
    },
    {
      t: '朕不会批阅的内容',
      lis: [
        '涉及违法、涉政、涉黄内容',
        '恶意广告、推销、引流',
        '辱骂、攻击他人的内容',
        '未经当事人同意的他人隐私',
        'AI 生成的虚假故事(朕会尽力识别,但希望爱卿们自觉)',
      ],
    },
    {
      t: '被宣读 / 剪成视频后',
      lis: [
        '朕会保留奏折的核心情节,但可能做少量改动以保护隐私',
        '若你希望撤回已被宣读的奏折,可在「我的奏折」中申请,朕会在下次朝会中致歉说明',
        '你保留对你文字内容的版权;朕保留宣读及剪辑发布的使用权',
      ],
    },
    {
      t: '批阅时效',
      lis: [
        '绝大多数奏折将在 3–7 日内批阅',
        '若超过 14 日未被选中,说明此次朕未能遇见这封奏折,爱卿不必气馁,可再上一本',
      ],
    },
    {
      t: '关于本站',
      lis: [
        '本站为「陛下」个人粉丝互动网站',
        '不收取任何费用,永久免费开放',
        '如发现 bug 或有建议,请联系陛下小秘书(微信二维码在页尾)',
      ],
    },
  ];
  const [open, setOpen] = useSP(0);
  return (
    <div className="bx-editorial">
      <header className="bx-editorial__head">
        <span className="eyebrow">RULES · 投稿须知</span>
        <h1 className="h1">上奏之前,请阅此篇</h1>
        <p className="subtitle">朕的规矩,爱卿请知</p>
      </header>
      <div className="bx-accordion">
        {items.map((it, i) => (
          <div key={i} className={`bx-acc ${open === i ? 'is-open' : ''}`}>
            <button className="bx-acc__head" onClick={() => setOpen(open === i ? -1 : i)}>
              <span className="bx-acc__n">{String(i + 1).padStart(2, '0')}</span>
              <span className="bx-acc__t">{it.t}</span>
              <span className="bx-acc__chev">{open === i ? '—' : '+'}</span>
            </button>
            {open === i && (
              <ul className="bx-acc__body">
                {it.lis.map((l, j) => <li key={j}>{l}</li>)}
              </ul>
            )}
          </div>
        ))}
      </div>
      <div className="bx-editorial__closing">
        <p className="serif-body">朕感谢每一位愿意提笔上奏的爱卿。<br/>这个信箱,因你而存在。</p>
        <Button variant="primary" size="lg" onClick={onCompose} icon={<SealIcon size={16} color="#fff"/>}>我已阅,即刻上奏</Button>
      </div>
    </div>
  );
}

/* =========================================================
   FAQ · 常见之问
========================================================= */
function FAQPage() {
  const groups = [
    {
      id: 'post', label: '投稿相关',
      qs: [
        ['朕何时批阅我的奏折?', '绝大多数奏折将于 3–7 日内批阅。朕的案头每日都有新奏,请爱卿稍候。'],
        ['为何我的奏折一直是「待批阅」状态?', '可能原因:一、尚未轮到;二、内容不符合朕的规矩(详见《投稿须知》);三、朕此刻在闭关(休播期)。'],
        ['朕何时会宣读我的奏折?', '被标记为「已选中」后,通常在 7–14 日内的朝会中宣读。具体时间不定,因奏折多寡与朕当日心情而定。'],
        ['可以一次投多封奏折吗?', '可以,但朕恳请爱卿一奏一事。事多情杂,朕难以批阅得深。'],
        ['我的奏折被拒了,是朕不喜欢吗?', '并非如此。朕每日所阅奏折甚多,无法悉数宣读。不被选中,只代表「这次没有缘分」,不代表爱卿的故事不值一听。'],
      ],
    },
    {
      id: 'acct', label: '账号相关',
      qs: [
        ['如何登录?', '本站只支持抖音扫码登录 · 电脑端访问会跳到抖音二维码页,用抖音 App 扫码即可;手机端会自动跳到抖音 App 完成授权。无需另设密码。'],
        ['为何不需要密码?', '朕通过抖音平台认你身份,既不存密码也不会泄漏。换设备只需再扫一次抖音码,十分简便。'],
        ['可否换抖音号登录?', '可以。同一个抖音号每次扫码登录的都是同一个爱卿档案。换了抖音号即换了档案,旧档案不可合并。'],
        ['可以修改尊号、头像吗?', '可以。个人中心 → 账号设置 → 修改尊号。头像默认沿用你的抖音头像。'],
        ['可以注销账号吗?', '可以。个人中心 → 账号设置 → 注销账号。注销后所有数据不可恢复,请慎重。'],
      ],
    },
    {
      id: 'privacy', label: '隐私相关',
      qs: [
        ['我的奏折会被所有人看到吗?', '仅「已被批阅并公开」的奏折会展示在「御批精选」页面。「待批阅」和「已选中未宣读」的奏折,仅你和朕可见。'],
        ['选择「匿名宣读」后真的不会暴露身份吗?', '朕会遵守承诺,在直播和剪辑中不提你的爱卿尊号和抖音 ID。但如果奏折内容本身含有可识别的个人信息(如「我是住在上海的 30 岁女性」),朕建议你在投稿时自行调整。'],
        ['本站会收集我的什么信息?', '仅在你抖音授权时获取的:抖音 open_id(用于辨识你)、抖音昵称、抖音头像。除此之外只存你投递的奏折和评论。不读取你的私信、视频、粉丝。'],
      ],
    },
    {
      id: 'tech', label: '技术问题',
      qs: [
        ['网站卡顿 / 打不开怎么办?', '请先尝试刷新页面、清除浏览器缓存。若仍有问题,可联系陛下小秘书反馈。'],
        ['支持哪些浏览器?', '建议使用 Chrome、Safari、Edge、Firefox 的较新版本。移动端全部主流浏览器均支持。'],
        ['可以用电脑投稿吗?', '当然可以,本站是纯网页端,手机和电脑浏览器均可使用。'],
      ],
    },
    {
      id: 'other', label: '其他',
      qs: [
        ['陛下真的每封都看吗?', '是。这是朕的承诺。'],
        ['陛下可以回复我的私信吗?', '朕无法一一私信回复,但每一封奏折的心意,朕都记得。若有幸被宣读,便是朕给你的回音。'],
        ['本站会做 App 吗?', '暂无计划。纯网页足矣,朕希望这里是一个安静的地方,不需要每天弹通知扰爱卿。'],
      ],
    },
  ];
  const [active, setActive] = useSP('post');
  const [openMap, setOpenMap] = useSP({});
  const toggle = (k) => setOpenMap(m => ({ ...m, [k]: !m[k] }));
  return (
    <div className="bx-editorial bx-faq">
      <header className="bx-editorial__head">
        <span className="eyebrow">FAQ · 常见之问</span>
        <h1 className="h1">朕替你答</h1>
        <p className="subtitle">爱卿若有疑,先翻此册</p>
      </header>
      <div className="bx-faq__layout">
        <aside className="bx-faq__side">
          {groups.map(g => (
            <a key={g.id} href={`#faq-${g.id}`} className={`bx-faq__nav ${active === g.id ? 'is-active' : ''}`} onClick={() => setActive(g.id)}>{g.label}</a>
          ))}
        </aside>
        <div className="bx-faq__main">
          {groups.map(g => (
            <section key={g.id} id={`faq-${g.id}`} className="bx-faq__group">
              <h3 className="h3 bx-faq__group-t">{g.label}</h3>
              <div className="bx-accordion">
                {g.qs.map(([q, a], i) => {
                  const key = `${g.id}-${i}`;
                  const isOpen = !!openMap[key];
                  return (
                    <div key={i} className={`bx-acc ${isOpen ? 'is-open' : ''}`}>
                      <button className="bx-acc__head" onClick={() => toggle(key)}>
                        <span className="bx-acc__q">{q}</span>
                        <span className="bx-acc__chev">{isOpen ? '—' : '+'}</span>
                      </button>
                      {isOpen && <div className="bx-acc__a"><p>{a}</p></div>}
                    </div>
                  );
                })}
              </div>
            </section>
          ))}
          <div className="bx-faq__tail">
            <p className="small">若此处未见你的问题,请联系陛下小秘书</p>
            <div className="bx-qr-line"><QRPlaceholder/><span className="small">微信扫码 · 陛下小秘书</span></div>
          </div>
        </div>
      </div>
    </div>
  );
}

/* =========================================================
   404
========================================================= */
function NotFoundPage({ onHome, onCompose }) {
  return (
    <div className="bx-404">
      <div className="bx-404__art">
        <svg viewBox="0 0 320 160" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" style={{ color: 'var(--bronze)' }}>
          {/* gate */}
          <path d="M60 140 L60 60 Q 60 30, 90 30 L 150 30"/>
          <path d="M260 140 L260 60 Q 260 30, 230 30 L 170 30"/>
          <path d="M50 50 L270 50"/>
          <path d="M60 60 L260 60"/>
          {/* closed doors */}
          <rect x="75" y="60" width="80" height="80" rx="1"/>
          <rect x="165" y="60" width="80" height="80" rx="1"/>
          <circle cx="148" cy="100" r="3" fill="currentColor"/>
          <circle cx="172" cy="100" r="3" fill="currentColor"/>
          {/* tiled roof */}
          <path d="M40 50 L 60 30 L260 30 L 280 50"/>
          <path d="M90 30 L 90 50"/><path d="M120 30 L 120 50"/><path d="M150 30 L 150 50"/>
          <path d="M170 30 L 170 50"/><path d="M200 30 L 200 50"/><path d="M230 30 L 230 50"/>
          {/* lock */}
          <rect x="152" y="90" width="16" height="20" rx="2" fill="currentColor" opacity="0.15" stroke="none"/>
          <rect x="152" y="90" width="16" height="20" rx="2"/>
          <path d="M156 90 L156 85 Q 160 81, 164 85 L164 90"/>
        </svg>
        <div className="bx-404__num">404</div>
      </div>
      <h1 className="h1">此地并无此宫门</h1>
      <p className="subtitle">爱卿走错了路,朕在此等你回头</p>
      <div className="bx-404__cta">
        <Button variant="primary" size="lg" onClick={onHome}>返回首页</Button>
        <Button variant="secondary" onClick={onCompose}>去呈递一本奏折</Button>
      </div>
      <p className="small bx-404__note">若你坚信此处应有此宫门,请告知陛下小秘书。</p>
    </div>
  );
}

/* =========================================================
   Forgot Password
========================================================= */
function ForgotPasswordPage({ onBack }) {
  const [submitted, setSubmitted] = useSP(false);
  const [id, setId] = useSP('');
  const [name, setName] = useSP('');
  const [busy, setBusy] = useSP(false);
  const [err, setErr] = useSP('');

  async function submit() {
    if (!id.trim()) { setErr('请填抖音 ID'); return; }
    setErr(''); setBusy(true);
    try {
      if (window.bxApi) {
        // Backend returns the same response whether the account exists or not, to
        // avoid leaking whether a given douyin_id is registered.
        await window.bxApi.forgotPassword(id.trim());
      }
      setSubmitted(true);
    } catch (e) {
      setErr((e && e.message) || '提交失败,请稍后再试');
    } finally { setBusy(false); }
  }

  if (submitted) {
    return (
      <div className="bx-fp">
        <div className="bx-fp__card">
          <div className="bx-fp__stamp"><SealIcon size={56} color="var(--bronze)"/></div>
          <h1 className="h1">申请已呈</h1>
          <p className="body bx-fp__msg">若此抖音 ID 有关联账号,朕已备好重置令牌。请联系陛下小秘书出示你的抖音 ID,核实后小秘书将告知你令牌,你即可重设口谕。</p>
          <div className="bx-qr-line bx-qr-line--lg"><QRPlaceholder/><span className="small">微信扫码 · 陛下小秘书</span></div>
          <Button variant="primary" size="lg" onClick={onBack}>返回登录</Button>
        </div>
      </div>
    );
  }
  return (
    <div className="bx-fp">
      <div className="bx-fp__card">
        <h1 className="h1">爱卿忘了钥匙</h1>
        <p className="subtitle bx-fp__sub">朕来帮你</p>
        <div className="bx-form bx-fp__form">
          <label className="bx-field">
            <span className="bx-field__lbl">抖音 ID <span className="bx-req-dot"/></span>
            <input value={id} onChange={e => { setId(e.target.value); setErr(''); }} placeholder="当初入宫所填"/>
          </label>
          <label className="bx-field">
            <span className="bx-field__lbl">爱卿尊号(选填,辅助核身)</span>
            <input value={name} onChange={e => setName(e.target.value)} placeholder="若记得,可一并填"/>
          </label>
          {err && <div style={{ fontSize: 12, color: 'var(--danger, #c53030)', margin: '-6px 0 6px' }}>{err}</div>}
          <Button variant="primary" size="lg" onClick={submit} icon={<SealIcon size={16} color="#fff"/>}>{busy ? '提交中…' : '提交重置申请'}</Button>
          <button className="bx-fp__link" onClick={onBack}>回到登录 →</button>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { AboutPage, RulesPage, FAQPage, NotFoundPage, ForgotPasswordPage });