/* screens-pair.jsx — 手机与电脑关联流程（4 屏：手机引导 / 桌面二维码 / 扫码确认 / 关联成功） */
/* global React, Screen, Raccoon, Ic */

/* 顶部返回栏（手机内页通用） */
function PairAppBar({ title, onBack = true }) {
  return (
    <div className="appbar" style={{ borderBottom: '1px solid var(--border)' }}>
      {onBack ? (
        <button className="iconbtn"><Ic.back size={22} /></button>
      ) : <span style={{ width: 22 }} />}
      <div className="appbar-title" style={{ fontWeight: 600 }}>{title}</div>
      <div className="spacer" />
      <span style={{ width: 22 }} />
    </div>
  );
}

/* 主按钮 */
function PrimaryBtn({ children, full = true }) {
  return (
    <button style={{
      width: full ? '100%' : 'auto',
      height: 46, borderRadius: 12,
      background: 'var(--purple)', color: '#fff',
      fontSize: 15, fontWeight: 600, border: 'none',
      boxShadow: '0 6px 18px rgba(142,107,242,0.28)',
    }}>{children}</button>
  );
}

/* 次按钮 */
function GhostBtn({ children }) {
  return (
    <button style={{
      flex: 1, height: 46, borderRadius: 12,
      background: '#fff', color: 'var(--t2)',
      fontSize: 15, fontWeight: 500,
      border: '1px solid var(--border)',
    }}>{children}</button>
  );
}

/* 仿真二维码（CSS 方格图，不需要扫，只是视觉示意） */
function QRBlock({ size = 168 }) {
  // 21×21 网格，固定伪随机图案，三角定位点
  const N = 21;
  const seed = (i, j) => ((i * 7 + j * 13 + (i ^ j) * 5) % 11) < 5;
  const isFinder = (i, j) => (
    (i < 7 && j < 7) ||
    (i < 7 && j >= N - 7) ||
    (i >= N - 7 && j < 7)
  );
  const inFinderRing = (i, j) => {
    const within = (ci, cj) => i >= ci && i < ci + 7 && j >= cj && j < cj + 7;
    const ringPix = (ci, cj) => {
      const di = i - ci, dj = j - cj;
      const onOuter = di === 0 || di === 6 || dj === 0 || dj === 6;
      const onInner = di >= 2 && di <= 4 && dj >= 2 && dj <= 4;
      return onOuter || onInner;
    };
    if (within(0, 0)) return ringPix(0, 0);
    if (within(0, N - 7)) return ringPix(0, N - 7);
    if (within(N - 7, 0)) return ringPix(N - 7, 0);
    return false;
  };
  const cells = [];
  for (let i = 0; i < N; i++) for (let j = 0; j < N; j++) {
    const black = isFinder(i, j) ? inFinderRing(i, j) : seed(i, j);
    if (black) cells.push(<rect key={`${i}-${j}`} x={j} y={i} width={1} height={1} fill="#0a0a06" />);
  }
  return (
    <div style={{
      width: size, height: size, padding: 10,
      background: '#fff', borderRadius: 14,
      border: '1px solid var(--border)',
      boxShadow: '0 4px 18px rgba(10,10,6,0.06)',
    }}>
      <svg viewBox={`0 0 ${N} ${N}`} width="100%" height="100%" shapeRendering="crispEdges">
        {cells}
      </svg>
    </div>
  );
}

/* ---------- 屏 1：手机端引导页 ---------- */
function PairIntro() {
  return (
    <Screen>
      <PairAppBar title="添加电脑" />
      <div className="body" style={{ padding: '0 24px', display: 'flex', flexDirection: 'column' }}>
        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', textAlign: 'center' }}>
          <div style={{ width: 88, height: 88, borderRadius: 24, background: 'var(--purple-bg)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--purple-dark)' }}>
            <Ic.laptop size={44} />
          </div>
          <h2 style={{ fontSize: 22, fontWeight: 700, marginTop: 22, color: 'var(--t1)' }}>连接你的电脑</h2>
          <p style={{ fontSize: 14, color: 'var(--t3)', marginTop: 12, lineHeight: 1.7 }}>
            还没有桌面端？先在电脑上完成<br />
            下载安装，再按下面步骤完成关联。
          </p>

          {/* 步骤指引 */}
          <div style={{ marginTop: 26, width: '100%', background: 'var(--bg-subtle)', border: '1px solid var(--border)', borderRadius: 14, padding: '14px 16px', textAlign: 'left' }}>
            {[
              '在电脑上下载并安装「办公小浣熊」桌面端',
              '打开电脑上的「办公小浣熊」客户端',
              '进入「设置 → 关联手机」',
              '点击下方按钮扫描二维码',
            ].map((t, i) => (
              <div key={i} style={{ display: 'flex', alignItems: 'flex-start', gap: 10, padding: '6px 0' }}>
                <span style={{ width: 20, height: 20, borderRadius: '50%', background: 'var(--purple)', color: '#fff', fontSize: 11, fontWeight: 700, display: 'flex', alignItems: 'center', justifyContent: 'center', flex: '0 0 auto', marginTop: 1 }}>{i + 1}</span>
                <span style={{ fontSize: 13.5, color: 'var(--t2)', lineHeight: 1.55 }}>{t}</span>
              </div>
            ))}
          </div>
        </div>
        <div style={{ padding: '16px 0 22px' }}>
          <PrimaryBtn>扫描二维码</PrimaryBtn>
        </div>
      </div>
    </Screen>
  );
}

/* ---------- 屏 2：桌面端「关联手机」设置页（展示二维码） ---------- */
/* 用一个尺寸略大的桌面框来呈现，区别于手机屏；放在画布上看起来是流程参照 */
function PairDesktopQR() {
  const SideItem = ({ label, active = false }) => (
    <div style={{
      display: 'flex', alignItems: 'center', gap: 9,
      padding: '9px 12px', borderRadius: 8,
      background: active ? 'var(--purple-bg)' : 'transparent',
      color: active ? 'var(--purple-dark)' : 'var(--t2)',
      fontSize: 13.5, fontWeight: active ? 600 : 500,
    }}>{label}</div>
  );
  return (
    <div style={{ width: '100%', height: '100%', background: 'rgba(10,10,6,0.18)', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 20 }}>
      <div style={{
        width: '100%', maxWidth: 640, background: '#fff',
        borderRadius: 18, overflow: 'hidden',
        boxShadow: '0 20px 60px rgba(10,10,6,0.18)',
        display: 'flex', flexDirection: 'column',
      }}>
        {/* 顶栏 */}
        <div style={{ padding: '14px 18px', display: 'flex', alignItems: 'center', borderBottom: '1px solid var(--border)' }}>
          <div style={{ fontSize: 18, fontWeight: 700 }}>设置</div>
          <div style={{ flex: 1 }} />
          <button className="iconbtn" style={{ color: 'var(--muted)' }}><Ic.x size={18} /></button>
        </div>
        <div style={{ display: 'flex', flex: 1, minHeight: 0 }}>
          {/* 侧栏 */}
          <div style={{ width: 168, padding: 10, borderRight: '1px solid var(--border)', background: '#fafafa' }}>
            <SideItem label="我的账号" />
            <SideItem label="通用" />
            <SideItem label="关联手机" active />
            <SideItem label="快捷键" />
            <SideItem label="Appshot" />
            <SideItem label="新手引导" />
            <SideItem label="插件" />
            <SideItem label="桌面宠物" />
            <SideItem label="存储管理" />
            <SideItem label="连接数据源" />
            <SideItem label="关于我们" />
          </div>
          {/* 内容 */}
          <div style={{ flex: 1, padding: '22px 28px', display: 'flex', flexDirection: 'column' }}>
            <div style={{ fontSize: 17, fontWeight: 700, color: 'var(--t1)' }}>关联手机</div>
            <p style={{ fontSize: 13, color: 'var(--t3)', marginTop: 10, lineHeight: 1.7 }}>
              用手机扫描下方二维码，完成与小浣熊手机端的关联。
            </p>
            <div style={{ marginTop: 18, display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
              <QRBlock size={188} />
              <div style={{ marginTop: 14, fontSize: 12.5, color: 'var(--muted)' }}>
                二维码有效期：<b style={{ color: 'var(--t2)' }}>2:47</b>
              </div>
              <button style={{
                marginTop: 12, height: 34, padding: '0 16px',
                borderRadius: 9, fontSize: 13, fontWeight: 500,
                color: 'var(--purple-dark)', background: 'var(--purple-bg)',
                border: '1px solid var(--purple-border)',
              }}>刷新二维码</button>
            </div>
            <div style={{ flex: 1 }} />
            <p style={{ fontSize: 12, color: 'var(--subtle)', marginTop: 18 }}>
              本机最多可被一台手机关联；如需更换，请先在已绑定的手机端解除关联。
            </p>
          </div>
        </div>
      </div>
    </div>
  );
}

/* ---------- 屏 2b：桌面端「关联手机」已关联管理态 ---------- */
function PairDesktopLinked() {
  const SideItem = ({ label, active = false }) => (
    <div style={{
      display: 'flex', alignItems: 'center', gap: 9,
      padding: '9px 12px', borderRadius: 8,
      background: active ? 'var(--purple-bg)' : 'transparent',
      color: active ? 'var(--purple-dark)' : 'var(--t2)',
      fontSize: 13.5, fontWeight: active ? 600 : 500,
    }}>{label}</div>
  );
  return (
    <div style={{ width: '100%', height: '100%', background: 'rgba(10,10,6,0.18)', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 20 }}>
      <div style={{
        width: '100%', maxWidth: 640, background: '#fff',
        borderRadius: 18, overflow: 'hidden',
        boxShadow: '0 20px 60px rgba(10,10,6,0.18)',
        display: 'flex', flexDirection: 'column',
      }}>
        <div style={{ padding: '14px 18px', display: 'flex', alignItems: 'center', borderBottom: '1px solid var(--border)' }}>
          <div style={{ fontSize: 18, fontWeight: 700 }}>设置</div>
          <div style={{ flex: 1 }} />
          <button className="iconbtn" style={{ color: 'var(--muted)' }}><Ic.x size={18} /></button>
        </div>
        <div style={{ display: 'flex', flex: 1, minHeight: 0 }}>
          <div style={{ width: 168, padding: 10, borderRight: '1px solid var(--border)', background: '#fafafa' }}>
            <SideItem label="我的账号" />
            <SideItem label="通用" />
            <SideItem label="关联手机" active />
            <SideItem label="快捷键" />
            <SideItem label="Appshot" />
            <SideItem label="新手引导" />
            <SideItem label="插件" />
            <SideItem label="桌面宠物" />
            <SideItem label="存储管理" />
            <SideItem label="连接数据源" />
            <SideItem label="关于我们" />
          </div>
          <div style={{ flex: 1, padding: '22px 28px', display: 'flex', flexDirection: 'column' }}>
            <div style={{ fontSize: 17, fontWeight: 700, color: 'var(--t1)' }}>关联手机</div>
            <p style={{ fontSize: 13, color: 'var(--t3)', marginTop: 10, lineHeight: 1.7 }}>
              本机已与下列手机建立关联，可在该手机上向本电脑发起任务。
            </p>

            {/* 已关联手机信息卡 */}
            <div style={{
              marginTop: 18,
              border: '1px solid var(--border)', borderRadius: 14,
              padding: '16px 18px',
              display: 'flex', alignItems: 'center', gap: 14,
              background: '#fff',
            }}>
              {/* 手机示意图标（SVG，对齐图标体系） */}
              <div style={{
                width: 46, height: 60, borderRadius: 9,
                background: 'linear-gradient(135deg,#f3effd,#e7e2f6)',
                border: '1px solid var(--purple-border)',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                color: 'var(--purple-dark)',
                flex: '0 0 auto',
              }}>
                <svg width={22} height={32} viewBox="0 0 22 32" fill="none" stroke="currentColor" strokeWidth={1.6} strokeLinecap="round" strokeLinejoin="round">
                  <rect x={1.5} y={1.5} width={19} height={29} rx={3.5} />
                  <line x1={8} y1={4.5} x2={14} y2={4.5} />
                  <circle cx={11} cy={27} r={1.1} fill="currentColor" stroke="none" />
                </svg>
              </div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 15, fontWeight: 600, color: 'var(--t1)' }}>Joe 的 iPhone 16 Pro</div>
                <div style={{ fontSize: 12.5, color: 'var(--muted)', marginTop: 3, lineHeight: 1.6 }}>
                  iOS 18.4 · 小浣熊 v1.2.0
                </div>
                <div style={{ fontSize: 12, color: 'var(--purple-dark)', marginTop: 5, display: 'inline-flex', alignItems: 'center', gap: 5 }}>
                  <span className="dot on" /> 最近活跃：刚刚
                </div>
              </div>
              <button style={{
                height: 34, padding: '0 14px',
                borderRadius: 9, fontSize: 13, fontWeight: 500,
                color: '#c0392b', background: '#fff',
                border: '1px solid #f1c7c2',
              }}>解除关联</button>
            </div>

            <div style={{ flex: 1 }} />
            <p style={{ fontSize: 12, color: 'var(--subtle)', marginTop: 18, lineHeight: 1.6 }}>
              本机最多可被一台手机关联。解除后可重新扫码关联另一台手机；手机端的关联状态会同步失效。
            </p>
          </div>
        </div>
      </div>
    </div>
  );
}

/* ---------- 屏 3：手机扫码确认页 ---------- */
function PairConfirm() {
  return (
    <Screen>
      <PairAppBar title="确认关联" />
      <div className="body" style={{ padding: '0 24px', display: 'flex', flexDirection: 'column' }}>
        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', paddingTop: 28 }}>
          <div style={{ width: 72, height: 72, borderRadius: 20, background: 'var(--purple-bg)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--purple-dark)' }}>
            <Ic.laptop size={34} />
          </div>
          <div style={{ fontSize: 14, color: 'var(--muted)', marginTop: 14 }}>已识别到以下设备</div>

          {/* 设备信息卡 */}
          <div style={{
            width: '100%', marginTop: 14,
            background: '#fff', border: '1px solid var(--border)',
            borderRadius: 14, padding: '14px 16px',
          }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
              <div style={{ width: 38, height: 38, borderRadius: 10, background: 'var(--bg-subtle)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--t2)', flex: '0 0 auto' }}>
                <Ic.laptop size={20} />
              </div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 15, fontWeight: 600, color: 'var(--t1)' }}>Joe 的 MacBook Pro</div>
                <div style={{ fontSize: 12, color: 'var(--muted)', marginTop: 2 }}>macOS 15.4 · 小浣熊客户端 v2.3.1</div>
              </div>
            </div>
          </div>

          <p style={{ fontSize: 13, color: 'var(--t3)', marginTop: 22, lineHeight: 1.7, textAlign: 'center' }}>
            关联后，你可以在手机上向<br />这台电脑发起任务。
          </p>

          {/* 安全提示 */}
          <div style={{
            marginTop: 18, width: '100%',
            background: '#fff8e6', border: '1px solid #f3e3b0',
            borderRadius: 12, padding: '10px 12px',
            display: 'flex', gap: 9, alignItems: 'flex-start',
          }}>
            <span style={{ width: 18, height: 18, borderRadius: '50%', background: '#e8a500', color: '#fff', fontSize: 12, fontWeight: 700, display: 'flex', alignItems: 'center', justifyContent: 'center', flex: '0 0 auto', marginTop: 1 }}>!</span>
            <div style={{ fontSize: 12.5, color: '#7a5b00', lineHeight: 1.55 }}>
              请确认这是你本人的电脑。关联后该电脑将允许此手机远程发起任务。
            </div>
          </div>
        </div>

        <div style={{ padding: '18px 0 22px', display: 'flex', gap: 10 }}>
          <GhostBtn>取消</GhostBtn>
          <button style={{
            flex: 1.4, height: 46, borderRadius: 12,
            background: 'var(--purple)', color: '#fff',
            fontSize: 15, fontWeight: 600, border: 'none',
            boxShadow: '0 6px 18px rgba(142,107,242,0.28)',
          }}>确认关联</button>
        </div>
      </div>
    </Screen>
  );
}

/* ---------- 屏 4：关联成功页 ---------- */
function PairSuccess() {
  return (
    <Screen>
      <PairAppBar title="关联成功" onBack={false} />
      <div className="body" style={{ padding: '0 24px', display: 'flex', flexDirection: 'column' }}>
        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', textAlign: 'center' }}>
          <div style={{
            width: 96, height: 96, borderRadius: '50%',
            background: 'linear-gradient(135deg,#c8b6f9,#8e6bf2)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            color: '#fff',
            boxShadow: '0 12px 28px rgba(142,107,242,0.35)',
          }}>
            <Ic.check size={48} />
          </div>
          <h2 style={{ fontSize: 22, fontWeight: 700, marginTop: 22, color: 'var(--t1)' }}>关联成功！</h2>
          <p style={{ fontSize: 14, color: 'var(--t2)', marginTop: 12, lineHeight: 1.7 }}>
            <b style={{ color: 'var(--t1)' }}>Joe 的 MacBook Pro</b><br />
            已成功与手机关联。
          </p>
          <p style={{ fontSize: 13, color: 'var(--muted)', marginTop: 14, lineHeight: 1.7 }}>
            现在你可以在手机上向<br />这台电脑发起任务了。
          </p>

          {/* 关联设备摘要卡 */}
          <div style={{
            marginTop: 24, width: '100%',
            background: 'var(--purple-bg)', border: '1px solid var(--purple-border)',
            borderRadius: 14, padding: '12px 14px',
            display: 'flex', alignItems: 'center', gap: 12,
          }}>
            <div style={{ width: 36, height: 36, borderRadius: 10, background: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--purple-dark)', flex: '0 0 auto' }}>
              <Ic.laptop size={20} />
            </div>
            <div style={{ flex: 1, minWidth: 0, textAlign: 'left' }}>
              <div style={{ fontSize: 14, fontWeight: 600, color: 'var(--t1)' }}>Joe 的 MacBook Pro</div>
              <div style={{ fontSize: 12, color: 'var(--muted)', marginTop: 1, display: 'inline-flex', alignItems: 'center', gap: 5 }}>
                <span className="dot on" /> 在线 · 已就绪
              </div>
            </div>
          </div>
        </div>

        <div style={{ padding: '16px 0 22px' }}>
          <PrimaryBtn>开始使用</PrimaryBtn>
          <p style={{ fontSize: 11.5, color: 'var(--subtle)', marginTop: 10, textAlign: 'center' }}>
            2 秒后自动返回「新建任务」
          </p>
        </div>
      </div>
    </Screen>
  );
}

Object.assign(window, { PairIntro, PairDesktopQR, PairDesktopLinked, PairConfirm, PairSuccess });