/* screens-desktop-profile.jsx — Pricing 2.0 · 桌面端 Profile Menu 积分余额卡片
   A. 菜单默认收起（免费版）
   B. 展开资源卡片 · 免费版
   C. 展开资源卡片 · 升级版（包年）
   ⚠️ AppShell 由 screens-desktop-shared.jsx 提供
*/
/* global React, AppShell */

/* ---- Profile Menu 下拉面板（对齐 Figma 1261-12144） ---- */
function ProfileMenu({ isPro, expanded, resourceCard, identityOpen }) {
  const P = '#8E6BF2', PD = '#6E45D9';
  const rowStyle = {
    padding: '11px 14px',
    display: 'flex', alignItems: 'center', gap: 10,
    cursor: 'pointer',
  };
  const labelStyle = { flex: 1, fontSize: 14, color: '#1A1A1A' };
  const arrow = (
    <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="#9D9D9D" strokeWidth="1.5" strokeLinecap="round">
      <path d="M5 3.5 8.5 7 5 10.5" />
    </svg>
  );

  return (
    <div style={{ position: 'relative', display: 'flex', alignItems: 'flex-start', gap: 8 }}>
      {/* 主菜单 */}
      <div style={{
        width: 248,
        background: '#fff',
        borderRadius: 16,
        boxShadow: '0 12px 36px rgba(0,0,0,0.14)',
        border: '1px solid #EBEBEB',
        overflow: 'hidden',
      }}>
        {/* 手机号 */}
        <div style={{ padding: '12px 14px 8px', fontSize: 13, color: '#9D9D9D' }}>
          +86 138****9999
        </div>

        {/* 切换身份 */}
        <div style={{ ...rowStyle, background: identityOpen ? 'rgba(142,107,242,0.06)' : 'transparent' }}>
          <span style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', width: 18 }}>
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="#1A1A1A" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round">
              <circle cx="8" cy="5.5" r="2.5" />
              <path d="M3 13.2c.8-2.2 2.8-3.7 5-3.7s4.2 1.5 5 3.7" />
            </svg>
          </span>
          <span style={labelStyle}>切换身份</span>
          {arrow}
        </div>

        {/* 资源用量 */}
        <div style={{ ...rowStyle, background: expanded ? 'rgba(142,107,242,0.06)' : 'transparent' }}>
          <span style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', width: 18 }}>
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="#1A1A1A" strokeWidth="1.4" strokeLinecap="round">
              <circle cx="8" cy="8" r="5.5" />
              <path d="M8 4.5V8l2.2 1.4" />
            </svg>
          </span>
          <span style={labelStyle}>资源用量</span>
          <span style={{ fontSize: 12.5, color: '#888' }}>{isPro ? '1820 积分' : '120 积分'}</span>
          {arrow}
        </div>

        {/* 升级（行内 + 解锁更多 badge） */}
        {!isPro && (
          <div style={rowStyle}>
            <span style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', width: 18 }}>
              <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke={P} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
                <circle cx="8" cy="8" r="5.5" />
                <path d="M5.5 8.5 8 6l2.5 2.5M8 10.5V6.2" />
              </svg>
            </span>
            <span style={{ ...labelStyle, color: P, fontWeight: 600 }}>升级</span>
            <span style={{
              padding: '2px 8px', borderRadius: 999,
              fontSize: 11, fontWeight: 600,
              background: 'rgba(142,107,242,0.12)',
              color: P,
            }}>解锁更多</span>
          </div>
        )}

        {/* 设置 */}
        <div style={rowStyle}>
          <span style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', width: 18 }}>
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="#1A1A1A" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round">
              <circle cx="8" cy="8" r="5.5" />
              <circle cx="8" cy="8" r="1.6" />
            </svg>
          </span>
          <span style={labelStyle}>设置</span>
        </div>

        {/* 分割线 */}
        <div style={{ height: 1, background: '#F2F2F2', margin: '2px 0' }} />

        {/* 退出登录 */}
        <div style={rowStyle}>
          <span style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', width: 18 }}>
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="#1A1A1A" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round">
              <path d="M9.5 3.5h2A1.5 1.5 0 0 1 13 5v6a1.5 1.5 0 0 1-1.5 1.5h-2" />
              <path d="M9 8H3M5.5 5.5 3 8l2.5 2.5" />
            </svg>
          </span>
          <span style={labelStyle}>退出登录</span>
        </div>
      </div>

      {/* 资源用量 右侧弹出卡片 */}
      {resourceCard}

      {/* 切换身份 的右侧子菜单（identityOpen 时显示） */}
      {identityOpen && (
        <div style={{
          width: 156,
          background: '#fff',
          borderRadius: 14,
          boxShadow: '0 12px 36px rgba(0,0,0,0.14)',
          border: '1px solid #EBEBEB',
          overflow: 'hidden',
          padding: '6px 0',
        }}>
          {[
            { label: '企业 A', active: false },
            { label: '企业 B', active: true },
            { label: '企业 C', active: false },
            { label: '个人', active: false },
          ].map(({ label, active }) => (
            <div key={label} style={{
              padding: '10px 14px',
              display: 'flex', alignItems: 'center', justifyContent: 'space-between',
              background: active ? 'rgba(142,107,242,0.06)' : 'transparent',
              cursor: 'pointer',
              fontSize: 14, color: '#1A1A1A',
            }}>
              <span>{label}</span>
              {active && (
                <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke={P} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                  <path d="M3 7.5 6 10.5l5-7" />
                </svg>
              )}
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

/* ---- 迷你进度条 ---- */
function MiniBar({ pct, danger }) {
  const c = danger ? '#FF4D4F' : (pct > 80 ? '#FFAD47' : '#8E6BF2');
  return (
    <div style={{ height: 5, background: '#EBEBEB', borderRadius: 999, overflow: 'hidden', marginTop: 5 }}>
      <div style={{ height: '100%', width: `${Math.min(100, pct)}%`, background: c, borderRadius: 999 }} />
    </div>
  );
}

/* ---- 资源用量右侧弹出卡片（独立浮层，跟切换身份同级） ----
   isPro       : 是否升级版
   subscription: 升级版的订阅状态
                 'renewing'  — 连续订阅 · 续订中
                 'cancelled' — 连续订阅 · 已取消续订（当前周期内仍可用）
                 'oneoff'    — 一次性购买（月卡 / 季卡 / 年卡），到期不自动续费
                 免费版不区分该状态
*/
function ResourceFlyout({ isPro, subscription = 'renewing' }) {
  const PD = '#6E45D9', P = '#8E6BF2';
  /* Pricing 2.0 体系：积分 + 存储空间 + 知识库库容（颜色按使用率分级） */
  const items = [
    { label: '可用积分',   val: isPro ? '1820 积分'  : '120 积分',     pct: isPro ? 30 : 20, color: P },        // 紫
    { label: '存储空间',   val: isPro ? '1.2 / 10 GB' : '388 / 500 MB', pct: isPro ? 12 : 78, color: '#FFAD47' }, // 橙
    { label: '知识库库容', val: isPro ? '88 / 500 MB' : '96.8 / 100 MB', pct: isPro ? 18 : 97, color: '#FF6B81' }, // 红
  ];

  /* 计划名 + 副信息（到期/续费）逻辑 */
  let planName, subInfo, actionLabel;
  if (!isPro) {
    planName = '个人免费版';
    subInfo = null;            // 免费版无到期时间，不展示该行
    actionLabel = '升级';
  } else if (subscription === 'cancelled') {
    planName = '个人升级版（连续包年）';
    subInfo = '到期时间：2027-06-23';
    actionLabel = '重新订阅';
  } else if (subscription === 'oneoff') {
    planName = '个人升级版（年卡）';
    subInfo = '到期时间：2027-06-23';
    actionLabel = '续费';
  } else {
    planName = '个人升级版（连续包年）';
    subInfo = '下次续费：2027-06-23';
    actionLabel = '管理订阅';
  }

  return (
    <div style={{
      width: 248,
      background: '#fff',
      borderRadius: 16,
      boxShadow: '0 12px 36px rgba(0,0,0,0.14)',
      border: '1px solid #EBEBEB',
      padding: '14px 16px 16px',
    }}>
      {/* 套餐名 + 操作链接 */}
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <span style={{ fontSize: 14, fontWeight: 600, color: '#1A1A1A' }}>
          {planName}
        </span>
        <span style={{ fontSize: 13, fontWeight: 500, color: P, cursor: 'pointer' }}>
          {actionLabel}
        </span>
      </div>
      {subInfo && (
        <div style={{ fontSize: 12, color: '#9D9D9D', marginTop: 4, marginBottom: 14 }}>
          {subInfo}
        </div>
      )}
      {!subInfo && <div style={{ marginBottom: 14 }} />}

      {items.map(({ label, val, pct, color }, i) => (
        <div key={i} style={{ marginTop: i > 0 ? 12 : 0 }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 12.5, color: '#1A1A1A' }}>
            <span>{label}</span>
            <span style={{ color: '#666' }}>{val}</span>
          </div>
          <div style={{ height: 5, background: '#EBEBEB', borderRadius: 999, overflow: 'hidden', marginTop: 6 }}>
            <div style={{ height: '100%', width: `${Math.min(100, pct)}%`, background: color, borderRadius: 999 }} />
          </div>
        </div>
      ))}

      {/* 查看完整用量入口（跳转至「设置 → 资源用量 Tab」） */}
      <div style={{ height: 1, background: '#F2F2F2', margin: '14px -16px 10px' }} />
      <div style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        fontSize: 13, fontWeight: 500, color: P, cursor: 'pointer',
      }}>
        <span>查看完整用量</span>
        <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke={P} strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
          <path d="M5 3.5 8.5 7 5 10.5" />
        </svg>
      </div>
    </div>
  );
}

/* ---- 主内容区（数据分析空态背景） ---- */
function AnalysisPlaceholder() {
  const P = '#8E6BF2';
  return (
    <div style={{
      flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden',
      background: 'linear-gradient(180deg, rgba(142,107,242,0.04) 0%, #fff 50%)',
    }}>
      <div style={{
        flex: 1, display: 'flex', flexDirection: 'column',
        alignItems: 'center', justifyContent: 'center', gap: 14,
        padding: '0 56px',
      }}>
        {/* 主标题 + 副标题 */}
        <div style={{ fontSize: 26, fontWeight: 700, color: '#0E121B', textAlign: 'center' }}>上传数据文件</div>
        <div style={{ fontSize: 24, fontWeight: 700, color: P, textAlign: 'center', marginTop: -4 }}>快速生成图表与洞察结论</div>

        {/* 浣熊吉祥物 */}
        <div style={{ fontSize: 48, marginTop: 2 }}>🦝</div>

        {/* 输入框（对齐 HomeInput：rounded-[1.25rem]、白底、focus 紫色 ring） */}
        <div style={{
          width: '100%', maxWidth: 560,
          border: '1px solid #CCCCCC', borderRadius: 20,
          padding: '14px 14px 12px', marginTop: 6, background: '#fff',
        }}>
          {/* 占位文字 */}
          <div style={{ fontSize: 14, color: '#AAAAAA', minHeight: 24, padding: '2px 2px 14px' }}>
            有什么好想法？
          </div>

          {/* Action bar：左 上传/cube；右 快速 chip + 圆形 send */}
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
              {/* 上传 */}
              <button style={{
                width: 32, height: 32, borderRadius: '50%',
                border: '1px solid #E5E5E5', background: '#fff',
                display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer',
              }}>
                <svg width="15" height="15" viewBox="0 0 16 16" fill="none" stroke="#555" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
                  <path d="M10.5 5.5 6.2 9.8a2 2 0 0 0 2.83 2.83l5-5a3.5 3.5 0 0 0-4.95-4.95l-5 5a5 5 0 0 0 7.07 7.07L13.5 12" />
                </svg>
              </button>
              {/* 知识库 / cube */}
              <button style={{
                width: 32, height: 32, borderRadius: '50%',
                border: '1px solid #E5E5E5', background: '#fff',
                display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer',
              }}>
                <svg width="15" height="15" viewBox="0 0 16 16" fill="none" stroke="#555" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round">
                  <path d="M8 2 2.5 5v6L8 14l5.5-3V5L8 2Z" />
                  <path d="M2.5 5 8 8l5.5-3M8 8v6" />
                </svg>
              </button>
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
              {/* 快速 模式 chip（紫色描边底，对齐 ThinkMode） */}
              <div style={{
                display: 'flex', alignItems: 'center', gap: 4,
                height: 28, padding: '0 12px', borderRadius: 999,
                border: '1px solid rgba(142,107,242,0.3)',
                background: 'rgba(142,107,242,0.15)',
                color: P, fontSize: 12.5, fontWeight: 500, cursor: 'pointer',
              }}>
                <span>快速</span>
                <svg width="11" height="11" viewBox="0 0 12 12" fill="none" stroke={P} strokeWidth="1.5" strokeLinecap="round">
                  <path d="M3 4.5 6 7.5 9 4.5" />
                </svg>
              </div>
              {/* 圆形 send */}
              <div style={{
                width: 32, height: 32, borderRadius: '50%', background: P,
                display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer',
              }}>
                <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                  <path d="M8 12V4M4.5 7.5 8 4l3.5 3.5" />
                </svg>
              </div>
            </div>
          </div>
        </div>

        {/* 4 个示例 chip：数据清洗 / 数据解读 / 数据可视化 / 趋势预测 */}
        <div style={{ display: 'flex', justifyContent: 'center', gap: 10, marginTop: 2, flexWrap: 'wrap' }}>
          {['数据清洗', '数据解读', '数据可视化', '趋势预测'].map((label) => (
            <div key={label} style={{
              display: 'flex', alignItems: 'center', gap: 5,
              padding: '6px 12px', borderRadius: 999,
              border: '1px solid #E6E6E6', background: '#fff',
              color: '#212121', fontSize: 13, cursor: 'pointer',
            }}>
              <svg width="13" height="13" viewBox="0 0 16 16" fill="none" stroke={P} strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
                <path d="M3 11.5 6 7.5l2.5 2L13 4.5" />
                <path d="M9.5 4.5H13v3.5" />
              </svg>
              {label}
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

/* ===== 导出屏幕 ===== */

function PR_MenuFreeCollapsed() {
  return (
    <AppShell activeNav="analysis"
      overlayMenu={<ProfileMenu isPro={false} expanded={false} identityOpen={true} />}
    >
      <AnalysisPlaceholder />
    </AppShell>
  );
}

function PR_MenuFreeExpanded() {
  return (
    <AppShell activeNav="analysis"
      overlayMenu={<ProfileMenu isPro={false} expanded={true} resourceCard={<ResourceFlyout isPro={false} />} />}
    >
      <AnalysisPlaceholder />
    </AppShell>
  );
}

function PR_MenuProExpanded() {
  return (
    <AppShell activeNav="analysis" isPro={true}
      overlayMenu={<ProfileMenu isPro={true} expanded={true} resourceCard={<ResourceFlyout isPro={true} subscription="renewing" />} />}
    >
      <AnalysisPlaceholder />
    </AppShell>
  );
}

function PR_MenuProCancelledExpanded() {
  return (
    <AppShell activeNav="analysis" isPro={true}
      overlayMenu={<ProfileMenu isPro={true} expanded={true} resourceCard={<ResourceFlyout isPro={true} subscription="cancelled" />} />}
    >
      <AnalysisPlaceholder />
    </AppShell>
  );
}

function PR_MenuProOneoffExpanded() {
  return (
    <AppShell activeNav="analysis" isPro={true}
      overlayMenu={<ProfileMenu isPro={true} expanded={true} resourceCard={<ResourceFlyout isPro={true} subscription="oneoff" />} />}
    >
      <AnalysisPlaceholder />
    </AppShell>
  );
}