/* screens-account.jsx — 账户信息与设置 + 会员信息（iOS 三态 + 安卓套餐 + 支付方式 sheet）
   + 退出登录确认 + 注销账户 */
/* global React, Screen, Raccoon, Ic */

/* 顶部带返回的 AppBar */
function AccountAppBar({ title }) {
  return (
    <div className="appbar">
      <button className="iconbtn"><Ic.back size={22} /></button>
      <div className="appbar-title" style={{ fontSize: 16 }}>{title}</div>
      <div className="spacer" />
      <div style={{ width: 32 }} />
    </div>
  );
}

/* —— ① 账户信息与设置（一级页） —— */
function AccountHome() {
  return (
    <Screen>
      <AccountAppBar title="账户信息与设置" />
      <div className="body">
        <div className="scroll" style={{ overflow: 'auto', background: 'var(--bg-subtle)' }}>
          {/* 头像 / 用户名 / 会员状态 */}
          <div style={{
            background: '#fff', padding: '28px 20px 24px', textAlign: 'center',
            display: 'flex', flexDirection: 'column', alignItems: 'center',
          }}>
            <Raccoon size="lg" brand />
            <div style={{ marginTop: 12, fontSize: 18, fontWeight: 600, color: 'var(--t1)' }}>Joe Hou</div>
            <div style={{
              marginTop: 8, display: 'inline-flex', alignItems: 'center', gap: 6,
              fontSize: 12.5, color: 'var(--muted)', fontWeight: 500,
              background: 'var(--bg-subtle)', borderRadius: 14, padding: '4px 12px',
            }}>
              免费版本
              <Ic.chevR size={12} />
            </div>
          </div>

          {/* 基本信息 */}
          <SectionGroup>
            <Row label="手机号" value="138 **** 8888" />
            <Row label="邮箱" value="joe@xx.com" />
            <Row label="创建时间" value="2025-03-12" />
          </SectionGroup>

          {/* 会员 + 用量 */}
          <SectionGroup>
            <Row label="会员信息" arrow />
            <RowUsage used="2,400" total="10,000" />
          </SectionGroup>

          {/* 关于我们 */}
          <SectionGroup>
            <Row label="关于我们" arrow />
          </SectionGroup>

          {/* 退出登录 */}
          <div style={{ padding: '20px 16px 6px' }}>
            <button style={{
              width: '100%', height: 52, borderRadius: 999,
              background: 'var(--danger)', color: '#fff',
              border: 'none', fontSize: 16, fontWeight: 600,
            }}>退出登录</button>
          </div>

          {/* 注销账户（弱化） */}
          <div style={{ textAlign: 'center', padding: '16px 0 24px' }}>
            <span style={{ fontSize: 13, color: 'var(--muted)' }}>
              注销账户 <Ic.chevR size={11} color="var(--muted)" />
            </span>
          </div>
        </div>
      </div>
    </Screen>
  );
}

function SectionGroup({ children }) {
  return (
    <div style={{ background: '#fff', marginTop: 10, borderTop: '1px solid var(--border)', borderBottom: '1px solid var(--border)' }}>
      {children}
    </div>
  );
}

function Row({ label, value, arrow }) {
  return (
    <div style={{
      display: 'flex', alignItems: 'center', padding: '14px 16px',
      borderBottom: '1px solid var(--bg-subtle)', minHeight: 22,
    }}>
      <div style={{ flex: 1, fontSize: 14, color: 'var(--t1)' }}>{label}</div>
      {value && <div style={{ fontSize: 13.5, color: 'var(--muted)' }}>{value}</div>}
      {arrow && <Ic.chevR size={14} color="var(--muted)" />}
    </div>
  );
}

function RowUsage({ used, total }) {
  const pct = 24;
  return (
    <div style={{ padding: '12px 16px 14px' }}>
      <div style={{ display: 'flex', alignItems: 'center' }}>
        <div style={{ flex: 1, fontSize: 14, color: 'var(--t1)' }}>资源用量</div>
        <div style={{ fontSize: 12.5, color: 'var(--muted)' }}>{used} / {total} 次</div>
      </div>
      <div style={{
        marginTop: 10, height: 6, background: 'var(--bg-subtle)', borderRadius: 3, overflow: 'hidden',
      }}>
        <div style={{ width: pct + '%', height: '100%', background: 'var(--purple)' }} />
      </div>
    </div>
  );
}

/* —— ② iOS 分支 · 当前已订阅 IAP —— */
function MemberIOSSubscribed() {
  return (
    <Screen>
      <AccountAppBar title="会员信息" />
      <div className="body">
        <div className="scroll" style={{ overflow: 'auto', background: 'var(--bg-subtle)' }}>
          {/* 会员状态卡 */}
          <div style={{
            margin: '14px 16px 0', padding: '20px 18px',
            background: 'linear-gradient(135deg, #8E6BF2 0%, #6E45D9 100%)',
            borderRadius: 16, color: '#fff',
          }}>
            <div style={{ display: 'inline-flex', alignItems: 'center', gap: 6, fontSize: 12.5, fontWeight: 600, opacity: 0.9 }}>
              <Ic.sparkle size={14} /> 已开通
            </div>
            <div style={{ marginTop: 10, fontSize: 22, fontWeight: 700 }}>升级版</div>
            <div style={{ marginTop: 14, fontSize: 12.5, opacity: 0.88 }}>下一次续费 · 2026-07-01</div>
            <div style={{ marginTop: 4, fontSize: 12.5, opacity: 0.88 }}>金额 · ¥28</div>
            <button style={{
              marginTop: 18, width: '100%', height: 44, borderRadius: 999,
              background: 'rgba(255,255,255,0.92)', color: 'var(--purple-dark)',
              border: 'none', fontSize: 14.5, fontWeight: 600,
            }}>管理订阅</button>
          </div>

          <SectionGroup>
            <Row label="会员权益详情" arrow />
            <Row label="隐私政策" arrow />
            <Row label="会员订阅服务条款" arrow />
            <Row label="会员自动续费服务条款" arrow />
          </SectionGroup>
        </div>
      </div>
    </Screen>
  );
}

/* —— ③ iOS 分支 · 未订阅 · 套餐列表 —— */
function MemberIOSPlans() {
  return (
    <Screen>
      <AccountAppBar title="会员信息" />
      <div className="body">
        <div className="scroll" style={{ overflow: 'auto', background: 'var(--bg-subtle)' }}>
          <div style={{
            margin: '14px 16px 0', padding: '20px 18px',
            background: '#fff', border: '1px solid var(--border)', borderRadius: 16,
            textAlign: 'center',
          }}>
            <div style={{ fontSize: 13, color: 'var(--purple-dark)', fontWeight: 600 }}>免费版 · 升级解锁更多权益</div>
            <div style={{ marginTop: 6, fontSize: 12.5, color: 'var(--muted)' }}>更多深度思考次数 · 大文件上传 · 专属支持</div>
          </div>

          <div style={{ padding: '14px 16px 0' }}>
            <PlanCard title="连续包月" price="¥28 / 月" />
            <PlanCard title="连续包年" price="¥198 / 年" hint="平均 ¥16.5 / 月" selected />
          </div>

          <div style={{ padding: '14px 20px 0' }}>
            <button style={{
              width: '100%', height: 52, borderRadius: 999,
              background: 'var(--purple)', color: '#fff',
              border: 'none', fontSize: 16, fontWeight: 600,
            }}>立即开通</button>
          </div>

          <p style={{ fontSize: 11.5, color: 'var(--muted)', padding: '12px 20px 0', lineHeight: 1.7 }}>
            购买确认后费用将从 iTunes 账户扣除。订阅自动续订，可在到期前 24 小时取消，否则将自动续订下一周期。可在 Apple ID 设置中管理。
            <br /><span style={{ color: 'var(--purple-dark)' }}>《用户协议》</span> <span style={{ color: 'var(--purple-dark)' }}>《隐私政策》</span>
          </p>

          <div style={{ textAlign: 'center', padding: '20px 0 28px' }}>
            <span style={{ fontSize: 13, color: 'var(--muted)' }}>恢复购买</span>
          </div>
        </div>
      </div>
    </Screen>
  );
}

function PlanCard({ title, price, hint, selected }) {
  return (
    <div style={{
      padding: '16px 18px', marginBottom: 10, borderRadius: 14,
      background: '#fff', display: 'flex', alignItems: 'center',
      border: '2px solid ' + (selected ? 'var(--purple)' : 'var(--border)'),
    }}>
      <div style={{ flex: 1 }}>
        <div style={{ fontSize: 15, fontWeight: 600, color: 'var(--t1)' }}>{title}</div>
        {hint && <div style={{ fontSize: 12, color: 'var(--purple-dark)', marginTop: 4 }}>{hint}</div>}
      </div>
      <div style={{ fontSize: 15, fontWeight: 600, color: 'var(--t1)' }}>{price}</div>
    </div>
  );
}

/* —— ④ iOS 分支 · 检测到跨平台订阅 · 模糊提示 —— */
function MemberIOSCrossPlatform() {
  return (
    <Screen>
      <AccountAppBar title="会员信息" />
      <div className="body">
        <div className="scroll" style={{ overflow: 'auto' }}>
          <div style={{
            margin: '40px 24px 0', padding: '32px 24px',
            background: '#fff', border: '1px solid var(--border)', borderRadius: 18,
            textAlign: 'center',
          }}>
            <div style={{ fontSize: 36 }}>✨</div>
            <p style={{ fontSize: 14, color: 'var(--t1)', lineHeight: 1.8, marginTop: 14 }}>
              您的账号已在其他平台开通了会员，权益在所有平台通用，您可以直接使用。
            </p>
            <p style={{ fontSize: 13, color: 'var(--muted)', marginTop: 12 }}>
              当前会员有效期至 2026-12-31
            </p>
            <p style={{ fontSize: 13, color: 'var(--muted)', marginTop: 14, lineHeight: 1.7 }}>
              如需调整订阅，请前往原平台管理。
            </p>
            <button style={{
              marginTop: 22, height: 44, padding: '0 24px', borderRadius: 999,
              background: '#fff', border: '1px solid var(--border-strong)',
              color: 'var(--t2)', fontSize: 14, fontWeight: 600,
            }}>刷新订阅状态</button>
          </div>
        </div>
      </div>
    </Screen>
  );
}

/* —— ⑤ 安卓分支 · 未订阅 · 套餐列表 —— */
function MemberAndroidPlans() {
  return (
    <Screen>
      <AccountAppBar title="会员信息" />
      <div className="body">
        <div className="scroll" style={{ overflow: 'auto', background: 'var(--bg-subtle)' }}>
          <div style={{
            margin: '14px 16px 0', padding: '20px 18px',
            background: '#fff', border: '1px solid var(--border)', borderRadius: 16,
            textAlign: 'center',
          }}>
            <div style={{ fontSize: 13, color: 'var(--purple-dark)', fontWeight: 600 }}>免费版 · 升级解锁更多权益</div>
            <div style={{ marginTop: 6, fontSize: 12.5, color: 'var(--muted)' }}>更多深度思考次数 · 大文件上传 · 专属支持</div>
          </div>

          {/* 一次性 / 连续订阅 tab */}
          <div style={{ padding: '14px 16px 0' }}>
            <div style={{
              display: 'inline-flex', padding: 3, background: '#fff',
              borderRadius: 10, border: '1px solid var(--border)',
            }}>
              <div style={{ padding: '7px 18px', fontSize: 13, fontWeight: 600, background: 'var(--purple-bg)', color: 'var(--purple-dark)', borderRadius: 8 }}>一次性</div>
              <div style={{ padding: '7px 18px', fontSize: 13, color: 'var(--muted)' }}>连续订阅</div>
            </div>
          </div>

          {/* 套餐 */}
          <div style={{ padding: '12px 16px 0' }}>
            <PlanCard title="月卡" price="¥28" />
            <PlanCard title="季卡" price="¥78" hint="推荐 · 平均 ¥26 / 月" selected />
            <PlanCard title="年卡" price="¥268" hint="平均 ¥22.3 / 月" />
          </div>

          <div style={{ padding: '14px 20px 0' }}>
            <button style={{
              width: '100%', height: 52, borderRadius: 999,
              background: 'var(--purple)', color: '#fff',
              border: 'none', fontSize: 16, fontWeight: 600,
            }}>立即开通</button>
          </div>

          <p style={{ fontSize: 11.5, color: 'var(--muted)', padding: '12px 20px 0', lineHeight: 1.7 }}>
            订阅服务由小浣熊家族提供。连续订阅在到期前 24 小时自动续费，您可以随时在「会员信息」中取消自动续费。
            <br /><span style={{ color: 'var(--purple-dark)' }}>《会员订阅服务条款》</span> <span style={{ color: 'var(--purple-dark)' }}>《会员自动续费服务条款》</span>
          </p>

          <div style={{ textAlign: 'center', padding: '20px 0 28px' }}>
            <span style={{ fontSize: 13, color: 'var(--muted)' }}>恢复购买</span>
          </div>
        </div>
      </div>
    </Screen>
  );
}

/* —— ⑥ 安卓分支 · 支付方式选择 sheet —— */
function MemberAndroidPay() {
  return (
    <Screen>
      <AccountAppBar title="会员信息" />
      <div className="body">
        <div className="scroll" style={{ overflow: 'auto', background: 'var(--bg-subtle)' }}>
          <div style={{
            margin: '14px 16px 0', padding: '20px 18px',
            background: '#fff', border: '1px solid var(--border)', borderRadius: 16, textAlign: 'center',
          }}>
            <div style={{ fontSize: 13, color: 'var(--purple-dark)', fontWeight: 600 }}>免费版 · 升级解锁更多权益</div>
          </div>
        </div>
        <div style={{ position: 'absolute', inset: 0, background: 'rgba(10,10,6,0.36)', display: 'flex', flexDirection: 'column', justifyContent: 'flex-end' }}>
          <div style={{
            background: '#fff', borderTopLeftRadius: 20, borderTopRightRadius: 20,
            padding: '14px 16px calc(20px + env(safe-area-inset-bottom))',
          }}>
            <div style={{ width: 36, height: 4, background: '#e6e6e6', borderRadius: 2, margin: '0 auto 14px' }} />
            <div style={{ fontSize: 15, fontWeight: 600, color: 'var(--t1)', textAlign: 'center', marginBottom: 10 }}>选择支付方式</div>
            <PayOption icon="🔵" name="支付宝" />
            <PayOption icon="🟢" name="微信支付" selected />
            <button style={{
              marginTop: 14, width: '100%', height: 52, borderRadius: 999,
              background: 'var(--purple)', color: '#fff',
              border: 'none', fontSize: 16, fontWeight: 600,
            }}>确认支付 ¥78</button>
          </div>
        </div>
      </div>
    </Screen>
  );
}

function PayOption({ icon, name, selected }) {
  return (
    <div style={{
      display: 'flex', alignItems: 'center', gap: 12,
      padding: '14px 14px', borderRadius: 12,
      background: selected ? 'var(--purple-bg)' : '#fff',
      border: '1px solid ' + (selected ? 'var(--purple-border)' : 'var(--border)'),
      marginBottom: 8,
    }}>
      <span style={{ fontSize: 20 }}>{icon}</span>
      <div style={{ flex: 1, fontSize: 14.5, color: 'var(--t1)', fontWeight: 500 }}>{name}</div>
      <div style={{
        width: 18, height: 18, borderRadius: '50%',
        border: '1.5px solid ' + (selected ? 'var(--purple)' : 'var(--border-strong)'),
        background: selected ? 'var(--purple)' : '#fff',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
      }}>
        {selected && <Ic.check size={12} color="#fff" />}
      </div>
    </div>
  );
}

/* —— ⑦ 退出登录确认弹窗 —— */
function AccountLogoutConfirm() {
  return (
    <Screen>
      <AccountAppBar title="账户信息与设置" />
      <div className="body">
        <div className="scroll" style={{ background: 'var(--bg-subtle)' }}>
          <div style={{ height: '100%' }} />
        </div>
        <div style={{ position: 'absolute', inset: 0, background: 'rgba(10,10,6,0.36)', display: 'flex', flexDirection: 'column', justifyContent: 'flex-end' }}>
          <div style={{
            background: '#fff', borderTopLeftRadius: 20, borderTopRightRadius: 20,
            padding: '24px 20px calc(20px + env(safe-area-inset-bottom))',
            textAlign: 'center',
          }}>
            <div style={{ width: 36, height: 4, background: '#e6e6e6', borderRadius: 2, margin: '0 auto 16px' }} />
            <div style={{ fontSize: 17, fontWeight: 600, color: 'var(--t1)' }}>确定要退出当前账户吗？</div>
            <p style={{ fontSize: 13.5, color: 'var(--t3)', marginTop: 10, lineHeight: 1.7 }}>
              退出后，您将返回登录页面。已保存的文档与对话内容不会丢失，下次登录后仍可访问。
            </p>
            <button style={{
              marginTop: 20, width: '100%', height: 52, borderRadius: 999,
              background: 'var(--danger)', color: '#fff',
              border: 'none', fontSize: 16, fontWeight: 600,
            }}>退出登录</button>
            <button style={{
              marginTop: 10, width: '100%', height: 52, borderRadius: 999,
              background: '#fff', color: 'var(--t1)',
              border: '1px solid var(--border)', fontSize: 16, fontWeight: 500,
            }}>取消</button>
          </div>
        </div>
      </div>
    </Screen>
  );
}

/* —— ⑧ 注销账户 —— */
function AccountDeactivate() {
  return (
    <Screen>
      <AccountAppBar title="注销账户" />
      <div className="body">
        <div className="scroll" style={{ overflow: 'auto', padding: '20px 18px' }}>
          <div style={{
            background: 'rgba(235,87,87,0.06)', border: '1px solid rgba(235,87,87,0.18)',
            borderRadius: 12, padding: 14,
            fontSize: 13.5, color: 'var(--t1)', lineHeight: 1.7,
          }}>
            您正在申请注销您在小浣熊家族下的账号。注销后，该账号将无法使用且无法恢复，账号下的所有数据也将被删除。请确认是否继续注销，如确认，请输入验证码确认注销。
          </div>
          <div style={{ marginTop: 22, fontSize: 13, color: 'var(--t3)' }}>当前手机号</div>
          <div style={{ marginTop: 6, padding: '14px 0', borderBottom: '1px solid var(--border)', fontSize: 16, color: 'var(--t1)' }}>138 **** 8888</div>
          <div style={{ marginTop: 22, fontSize: 13, color: 'var(--t3)' }}>验证码</div>
          <div style={{ marginTop: 6, padding: '14px 0', borderBottom: '1px solid var(--border)', display: 'flex', alignItems: 'center' }}>
            <div style={{ flex: 1, fontSize: 16, color: 'var(--muted)' }}>请输入 6 位验证码</div>
            <span style={{ fontSize: 13, color: 'var(--purple-dark)', fontWeight: 600 }}>获取验证码</span>
          </div>
          <button style={{
            marginTop: 34, width: '100%', height: 52, borderRadius: 999,
            background: 'var(--danger)', color: '#fff',
            border: 'none', fontSize: 16, fontWeight: 600,
          }}>确认注销</button>
        </div>
      </div>
    </Screen>
  );
}

Object.assign(window, {
  AccountHome,
  MemberIOSSubscribed, MemberIOSPlans, MemberIOSCrossPlatform,
  MemberAndroidPlans, MemberAndroidPay,
  AccountLogoutConfirm, AccountDeactivate,
});