/* screens-preview.jsx — 文件预览（PRD §(6)）
   覆盖：可预览态（HTML / 图片 / 分页图片）、加载骨架屏、不可预览态（未支持格式 / 转换失败）、⋯ 更多菜单 */
/* global React, Screen, Ic */

/* ---------- 顶栏 ---------- */
function PreviewAppBar({ title }) {
  return (
    <div className="appbar" style={{ background: 'var(--bg-subtle)' }}>
      <button className="iconbtn"><Ic.back size={22} /></button>
      <div className="appbar-title" style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{title}</div>
      <div className="spacer" />
      <button className="iconbtn" style={{ letterSpacing: 1, fontSize: 22, lineHeight: '1', paddingBottom: 6 }}>···</button>
    </div>
  );
}

/* ---------- ① PDF 预览（HTML 模式） ---------- */
function PreviewPDF() {
  const lines = [0.9, 0.95, 0.7, 0.92, 0.88, 0.6, 0.95, 0.82, 0.7, 0.9, 0.94, 0.55, 0.88, 0.92];
  return (
    <Screen tinted>
      <PreviewAppBar title="2026 Q2 产品策略.pdf" />
      <div className="body" style={{ background: '#fff' }}>
        <div className="scroll" style={{ padding: '18px 22px 24px' }}>
          <div style={{ fontSize: 18, fontWeight: 700, color: 'var(--t1)', marginBottom: 14 }}>2026 Q2 产品策略</div>
          <div style={{ fontSize: 12, color: 'var(--muted)', marginBottom: 18 }}>更新于 2026-06-12 · 共 12 页</div>
          {lines.map((w, i) => (
            <div key={i} style={{ height: 9, borderRadius: 2, background: w > 0.85 ? '#ececec' : '#f1f1f1', width: `${w * 100}%`, marginBottom: 11 }} />
          ))}
          <div style={{ height: 14 }} />
          <div style={{ fontSize: 14, fontWeight: 700, color: 'var(--t2)', marginBottom: 10 }}>一、市场环境</div>
          {lines.slice(0, 6).map((w, i) => (
            <div key={i} style={{ height: 9, borderRadius: 2, background: '#f1f1f1', width: `${w * 100}%`, marginBottom: 11 }} />
          ))}
        </div>
      </div>
    </Screen>
  );
}

/* ---------- ② ⋯ 更多菜单 ---------- */
function PreviewMoreMenu() {
  return (
    <Screen tinted>
      <PreviewAppBar title="2026 Q2 产品策略.pdf" />
      <div className="body" style={{ background: '#fff', position: 'relative' }}>
        <div className="scroll" style={{ padding: '18px 22px 24px', filter: 'blur(0.3px)', opacity: 0.55 }}>
          <div style={{ fontSize: 18, fontWeight: 700, color: 'var(--t1)', marginBottom: 14 }}>2026 Q2 产品策略</div>
          {[0.9, 0.95, 0.7, 0.92, 0.88, 0.6, 0.95].map((w, i) => (
            <div key={i} style={{ height: 9, borderRadius: 2, background: '#f1f1f1', width: `${w * 100}%`, marginBottom: 11 }} />
          ))}
        </div>
        {/* 半透明遮罩 */}
        <div style={{ position: 'absolute', inset: 0, background: 'rgba(0,0,0,0.18)' }} />
        {/* 菜单卡 */}
        <div style={{
          position: 'absolute', top: 6, right: 12, width: 200,
          background: '#fff', borderRadius: 12, boxShadow: '0 10px 32px rgba(0,0,0,0.18)',
          border: '1px solid var(--border)', overflow: 'hidden',
        }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '14px 16px', borderBottom: '1px solid var(--border)' }}>
            <Ic.arrowUp size={18} color="var(--t2)" style={{ transform: 'rotate(180deg)' }} />
            <span style={{ fontSize: 15, color: 'var(--t1)' }}>下载</span>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '14px 16px' }}>
            <Ic.sparkle size={18} color="var(--purple-dark)" />
            <span style={{ fontSize: 15, color: 'var(--t1)' }}>基于此文件提问</span>
          </div>
        </div>
      </div>
    </Screen>
  );
}

/* ---------- ③ PPT 预览（分页图片 + 底部页码） ---------- */
function PreviewPPT() {
  return (
    <Screen tinted>
      <PreviewAppBar title="季度汇报.pptx" />
      <div className="body" style={{ background: '#222' }}>
        <div className="scroll" style={{ padding: '22px 22px 60px', display: 'flex', flexDirection: 'column', gap: 16 }}>
          {/* 当前页（大） */}
          <div style={{ background: '#fff', borderRadius: 8, boxShadow: '0 10px 28px rgba(0,0,0,0.4)', aspectRatio: '16 / 9', padding: '28px 26px', display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
            <div>
              <div style={{ fontSize: 12, color: 'var(--purple-dark)', fontWeight: 600, marginBottom: 10 }}>Q2 季度汇报</div>
              <div style={{ fontSize: 20, fontWeight: 700, color: 'var(--t1)', lineHeight: 1.35 }}>核心业务进展<br />与下半年规划</div>
            </div>
            <div style={{ fontSize: 11, color: 'var(--muted)' }}>2026-06-15 · 产品部</div>
          </div>
          {/* 下一页（半露） */}
          <div style={{ background: '#fff', borderRadius: 8, boxShadow: '0 6px 16px rgba(0,0,0,0.3)', aspectRatio: '16 / 9', padding: '22px 26px', opacity: 0.95 }}>
            <div style={{ fontSize: 14, fontWeight: 700, color: 'var(--t2)', marginBottom: 12 }}>一、Q2 关键指标</div>
            {[0.85, 0.7, 0.78, 0.62].map((w, i) => (
              <div key={i} style={{ height: 7, borderRadius: 2, background: '#ececec', width: `${w * 100}%`, marginBottom: 8 }} />
            ))}
          </div>
        </div>
        {/* 底部页码 */}
        <div style={{ position: 'absolute', left: 0, right: 0, bottom: 18, display: 'flex', justifyContent: 'center' }}>
          <div style={{ background: 'rgba(0,0,0,0.55)', color: '#fff', fontSize: 12, fontWeight: 500, padding: '6px 14px', borderRadius: 20 }}>
            第 1 页 / 共 18 页
          </div>
        </div>
      </div>
    </Screen>
  );
}

/* ---------- ④ 图片预览（双指缩放） ---------- */
function PreviewImage() {
  return (
    <Screen tinted>
      <PreviewAppBar title="发布会现场.jpg" />
      <div className="body" style={{ background: '#0a0a0a', position: 'relative' }}>
        {/* 缩放后的占位图 */}
        <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <div style={{
            width: 460, height: 320, transform: 'translateX(-30px) translateY(10px)',
            background: 'linear-gradient(135deg, #6e45d9 0%, #b298fa 35%, #ffd97a 70%, #ff8a5c 100%)',
            borderRadius: 6, position: 'relative', overflow: 'hidden',
          }}>
            <div style={{ position: 'absolute', left: 60, top: 90, width: 180, height: 180, borderRadius: '50%', background: 'rgba(255,255,255,0.25)', filter: 'blur(20px)' }} />
            <div style={{ position: 'absolute', right: 40, bottom: 30, width: 120, height: 120, borderRadius: '50%', background: 'rgba(255,255,255,0.18)', filter: 'blur(14px)' }} />
          </div>
        </div>
        {/* 缩放指示 */}
        <div style={{ position: 'absolute', left: 0, right: 0, bottom: 22, display: 'flex', justifyContent: 'center' }}>
          <div style={{ background: 'rgba(0,0,0,0.6)', color: '#fff', fontSize: 12, fontWeight: 500, padding: '6px 14px', borderRadius: 20 }}>
            240%
          </div>
        </div>
      </div>
    </Screen>
  );
}

/* ---------- ⑤ 加载骨架屏 ---------- */
function PreviewLoading() {
  return (
    <Screen tinted>
      <PreviewAppBar title="2026 Q2 产品策略.pdf" />
      <div className="body" style={{ background: '#fff' }}>
        <div className="scroll" style={{ padding: '18px 22px 24px' }}>
          <div style={{ height: 22, borderRadius: 4, background: '#ececec', width: '70%', marginBottom: 18 }} />
          <div style={{ height: 12, borderRadius: 3, background: '#f1f1f1', width: '40%', marginBottom: 22 }} />
          {[0.95, 0.9, 0.88, 0.92, 0.6, 0.95, 0.82, 0.78, 0.92].map((w, i) => (
            <div key={i} style={{ height: 10, borderRadius: 3, background: '#f1f1f1', width: `${w * 100}%`, marginBottom: 12 }} />
          ))}
          <div style={{ height: 12 }} />
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '12px 0', fontSize: 12.5, color: 'var(--muted)' }}>
            <span style={{ display: 'inline-block', width: 12, height: 12, borderRadius: '50%', border: '2px solid var(--purple)', borderTopColor: 'transparent', marginRight: 8, animation: 'none' }} />
            正在生成预览…
          </div>
        </div>
      </div>
    </Screen>
  );
}

/* ---------- 不可预览态 · 通用骨架 ---------- */
function UnsupportedShell({ ext, fileName, fileType, size, uploaded, message, primary, secondary }) {
  return (
    <Screen tinted>
      <PreviewAppBar title={fileName} />
      <div className="body">
        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', padding: '20px 28px 40px', textAlign: 'center' }}>
          {/* 文件图标卡 */}
          <div style={{
            width: 96, height: 116, borderRadius: 12, background: '#fff',
            border: '1px solid var(--border)', position: 'relative',
            display: 'flex', alignItems: 'flex-end', justifyContent: 'center',
            paddingBottom: 14, marginBottom: 18,
            boxShadow: '0 6px 18px rgba(0,0,0,0.04)',
          }}>
            {/* 折角 */}
            <div style={{ position: 'absolute', top: 0, right: 0, width: 26, height: 26, background: 'var(--bg-subtle)', borderLeft: '1px solid var(--border)', borderBottom: '1px solid var(--border)', borderBottomLeftRadius: 6 }} />
            <span style={{ fontSize: 13, fontWeight: 700, color: 'var(--purple-dark)', letterSpacing: 0.5 }}>{ext}</span>
          </div>
          <div style={{ fontSize: 16, fontWeight: 600, color: 'var(--t1)', marginBottom: 6, wordBreak: 'break-all' }}>{fileName}</div>
          <div style={{ fontSize: 12.5, color: 'var(--muted)', marginBottom: 4 }}>{fileType} · {size}</div>
          <div style={{ fontSize: 12.5, color: 'var(--muted)', marginBottom: 22 }}>上传于 {uploaded}</div>
          <div style={{ fontSize: 13.5, color: 'var(--t3)', lineHeight: 1.6, marginBottom: 28, maxWidth: 280 }}>{message}</div>

          <button style={{
            width: '100%', maxWidth: 320, height: 50, borderRadius: 999,
            background: 'var(--purple)', color: '#fff', border: 'none',
            fontSize: 16, fontWeight: 600, marginBottom: 12,
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 8,
          }}>
            <Ic.sparkle size={17} /> {primary}
          </button>
          <button style={{
            width: '100%', maxWidth: 320, height: 50, borderRadius: 999,
            background: '#fff', color: 'var(--t2)', border: '1px solid var(--border)',
            fontSize: 16, fontWeight: 500,
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 8,
          }}>
            <Ic.arrowUp size={16} style={{ transform: 'rotate(180deg)' }} /> {secondary}
          </button>
        </div>
      </div>
    </Screen>
  );
}

/* ---------- ⑥ 不可预览 · 本期未支持的格式 ---------- */
function PreviewUnsupportedFormat() {
  return (
    <UnsupportedShell
      ext="DOCX"
      fileName="客户访谈纪要-0518.docx"
      fileType="Word 文档"
      size="2.3 MB"
      uploaded="2 天前"
      message="本期暂不支持 Word 文档的在线预览，你可以下载原文件后查看，或直接基于这份文件向小浣熊提问。"
      primary="基于此文件提问"
      secondary="下载原文件"
    />
  );
}

/* ---------- ⑦ 不可预览 · 服务端转换失败 ---------- */
function PreviewRenderFailed() {
  return (
    <Screen tinted>
      <PreviewAppBar title="供应商合同汇总.xlsx" />
      <div className="body">
        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', padding: '20px 28px 40px', textAlign: 'center' }}>
          <div style={{
            width: 96, height: 116, borderRadius: 12, background: '#fff',
            border: '1px solid var(--border)', position: 'relative',
            display: 'flex', alignItems: 'flex-end', justifyContent: 'center',
            paddingBottom: 14, marginBottom: 18,
            boxShadow: '0 6px 18px rgba(0,0,0,0.04)',
          }}>
            <div style={{ position: 'absolute', top: 0, right: 0, width: 26, height: 26, background: 'var(--bg-subtle)', borderLeft: '1px solid var(--border)', borderBottom: '1px solid var(--border)', borderBottomLeftRadius: 6 }} />
            {/* 失败角标 */}
            <div style={{
              position: 'absolute', bottom: -6, right: -6, width: 28, height: 28, borderRadius: '50%',
              background: 'var(--danger)', color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center',
              border: '2px solid #fff', fontSize: 16, fontWeight: 700,
            }}>!</div>
            <span style={{ fontSize: 13, fontWeight: 700, color: 'var(--purple-dark)', letterSpacing: 0.5 }}>XLSX</span>
          </div>
          <div style={{ fontSize: 16, fontWeight: 600, color: 'var(--t1)', marginBottom: 6 }}>供应商合同汇总.xlsx</div>
          <div style={{ fontSize: 12.5, color: 'var(--muted)', marginBottom: 4 }}>Excel 表格 · 8.7 MB</div>
          <div style={{ fontSize: 12.5, color: 'var(--muted)', marginBottom: 22 }}>上传于刚刚</div>
          <div style={{ fontSize: 14, fontWeight: 600, color: 'var(--danger)', marginBottom: 8 }}>预览生成失败</div>
          <div style={{ fontSize: 13, color: 'var(--t3)', lineHeight: 1.6, marginBottom: 28, maxWidth: 280 }}>
            服务端处理这份文件时出了点问题，你可以重试，或下载原文件后用其他应用打开。
          </div>

          <button style={{
            width: '100%', maxWidth: 320, height: 50, borderRadius: 999,
            background: 'var(--purple)', color: '#fff', border: 'none',
            fontSize: 16, fontWeight: 600, marginBottom: 12,
          }}>重试</button>
          <button style={{
            width: '100%', maxWidth: 320, height: 50, borderRadius: 999,
            background: '#fff', color: 'var(--t2)', border: '1px solid var(--border)',
            fontSize: 16, fontWeight: 500, marginBottom: 12,
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 8,
          }}>
            <Ic.arrowUp size={16} style={{ transform: 'rotate(180deg)' }} /> 下载原文件
          </button>
          <button style={{
            width: '100%', maxWidth: 320, height: 50, borderRadius: 999,
            background: 'transparent', color: 'var(--purple-dark)', border: 'none',
            fontSize: 14.5, fontWeight: 500,
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 6,
          }}>
            <Ic.sparkle size={15} /> 基于此文件提问
          </button>
        </div>
      </div>
    </Screen>
  );
}

Object.assign(window, {
  PreviewPDF,
  PreviewMoreMenu,
  PreviewPPT,
  PreviewImage,
  PreviewLoading,
  PreviewUnsupportedFormat,
  PreviewRenderFailed,
});
