// Profile Page

const { useState, useEffect } = React;

function ProfilePage() {
  const { navigate, showToast, currentUser, handleLogout } = useApp();
  const user = currentUser;
  const [myFeedsCount, setMyFeedsCount] = useState(0);
  const [myArticlesCount, setMyArticlesCount] = useState(0);
  const [favoritesCount, setFavoritesCount] = useState(0);
  const [archiveCount, setArchiveCount] = useState(0);

  useEffect(() => {
    if (!currentUser?.id) return;
    API.get('/feeds/mine').then(res => {
      if (res.success) setMyFeedsCount(res.data?.length || 0);
    }).catch(() => {});
    API.get('/articles').then(res => {
      if (res.success) {
        const userId = 1; // 当前用户ID
        const my = (res.data || []).filter(a => a.user_id === userId);
        setMyArticlesCount(my.length);
      }
    }).catch(() => {});
    API.get('/archive/files').then(res => {
      if (res.success) setArchiveCount(res.total || res.data?.length || 0);
    }).catch(() => {});
  }, []);

  const memberLevelLabel = (level) => {
    const map = { normal: '普通用户', bronze: '青铜会员', silver: '白银会员', gold: '黄金会员', diamond: '钻石会员' };
    return map[level] || '普通用户';
  };

  const memberLevelColor = (level) => {
    const map = { normal: '#9CA3AF', bronze: '#CD7F32', silver: '#C0C0C0', gold: '#FFD700', diamond: '#B9F2FF' };
    return map[level] || '#9CA3AF';
  };

  const menuItems = [
    { id: 'feeds', icon: '💭', label: '我的动态', desc: `${myFeedsCount} 条说说`, onClick: () => navigate('feed') },
    { id: 'articles', icon: '📝', label: '我的文章', desc: `${myArticlesCount} 篇文章`, onClick: () => navigate('my-articles') },
    { id: 'favorites', icon: '⭐', label: '我的收藏', desc: '收藏的内容', onClick: () => showToast('我的收藏') },
    { id: 'orders', icon: '📋', label: '我的订单', desc: '查看订单记录', onClick: () => navigate('orders') },
    { id: 'mall-orders', icon: '🛒', label: '商城订单', desc: '商城购物订单', onClick: () => navigate('mall-orders') },
    { id: 'member', icon: '👑', label: '会员中心', desc: memberLevelLabel(user?.member_level), onClick: () => navigate('member') },
    { id: 'pipe-income', icon: '🚀', label: '管道收益', desc: '分销+代理+第三方', onClick: () => navigate('pipe-income') },
    { id: 'archive', icon: '📦', label: '我的存档', desc: `${archiveCount} 个文件`, onClick: () => navigate('my-archive') },
    { id: 'credentials', icon: '🔒', label: '凭据保险箱', desc: '账号密码安全保管', onClick: () => navigate('credentials') },
    { id: 'settings', icon: '⚙️', label: '设置', desc: '账号与偏好', onClick: () => showToast('设置功能') },
  ];

  return (
    <PageWrapper>
      <AppHeader
        title="个人中心"
        subtitle={user?.jiuLiaoId ? `久聊号: ${user.jiuLiaoId}` : '久存网'}
        rightContent={
          <span
            style={{ fontSize: 20, cursor: 'pointer' }}
            onClick={() => showToast('扫一扫')}
          >📷</span>
        }
      />

      {/* 管理员入口 - 仅管理员可见 */}
      {user && (user.is_admin || user.role === 'admin' || user.username === 'admin') && (
        <div
          onClick={() => navigate('admin')}
          style={{
            margin: '12px 16px 0',
            padding: '12px 16px',
            background: 'linear-gradient(135deg, #ff4d4f 0%, #ff7875 100%)',
            borderRadius: 12,
            color: '#fff',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'space-between',
            cursor: 'pointer',
            boxShadow: '0 4px 12px rgba(255,77,79,0.25)',
          }}
        >
          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            <span style={{ fontSize: 20 }}>⚙️</span>
            <div>
              <div style={{ fontSize: 15, fontWeight: 700 }}>后台管理</div>
              <div style={{ fontSize: 11, opacity: 0.85 }}>进入久存网管理后台</div>
            </div>
          </div>
          <span style={{ fontSize: 18 }}>→</span>
        </div>
      )}

      {/* Profile Header Card */}
      <div style={{
        padding: 20,
        background: 'linear-gradient(135deg, var(--primary), #4080FF)',
        color: '#fff',
        position: 'relative',
        overflow: 'hidden',
      }}>
        <div style={{
          position: 'absolute', right: -20, top: -20,
          fontSize: 120, opacity: 0.1,
        }}>👤</div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 14, position: 'relative', zIndex: 1 }}>
          <div style={{
            width: 64, height: 64, borderRadius: '50%',
            background: 'rgba(255,255,255,0.25)',
            border: '2px solid rgba(255,255,255,0.4)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            fontSize: 28, fontWeight: 600,
          }}>
            {user?.nickname?.charAt(0) || 'U'}
          </div>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontSize: 18, fontWeight: 700, marginBottom: 4 }}>
              {user?.nickname || '久存用户'}
            </div>
            <div style={{
              fontSize: 11,
              opacity: 0.85,
              marginBottom: 6,
              letterSpacing: 0.5,
            }}>
              空间号：<span style={{ fontWeight: 600 }}>{user?.space_id || 'A10001'}</span>
            </div>
            <div style={{
              display: 'inline-flex', alignItems: 'center', gap: 4,
              padding: '2px 10px', borderRadius: 12,
              background: 'rgba(255,255,255,0.2)',
              fontSize: 11, fontWeight: 500,
            }}>
              <span>👑</span>
              <span>{memberLevelLabel(user?.member_level)}</span>
            </div>
          </div>
          <div
            style={{
              padding: '6px 12px',
              background: 'rgba(255,255,255,0.2)',
              borderRadius: 16,
              fontSize: 12,
              cursor: 'pointer',
              fontWeight: 500,
            }}
            onClick={() => navigate('space', { user_id: user?.id || 1 })}
          >
            我的空间
          </div>
        </div>
        {/* Stats row */}
        <div style={{
          display: 'flex',
          marginTop: 18,
          position: 'relative',
          zIndex: 1,
        }}>
          {[
            { label: '动态', val: myFeedsCount },
            { label: '关注', val: 12 },
            { label: '粉丝', val: 36 },
            { label: '获赞', val: 128 },
          ].map((s, i) => (
            <div key={i} style={{ flex: 1, textAlign: 'center' }}>
              <div style={{ fontSize: 18, fontWeight: 700 }}>{s.val}</div>
              <div style={{ fontSize: 11, opacity: 0.8, marginTop: 2 }}>{s.label}</div>
            </div>
          ))}
        </div>
      </div>

      {/* Menu List */}
      <div style={{ padding: '12px 0', background: 'var(--bg-page)' }}>
        <div style={{ background: 'var(--bg-card)' }}>
          {menuItems.map((item, idx) => (
            <div
              key={item.id}
              style={{
                display: 'flex',
                alignItems: 'center',
                gap: 12,
                padding: '14px 16px',
                borderBottom: idx < menuItems.length - 1 ? '1px solid var(--border-light, #f2f3f5)' : 'none',
                cursor: 'pointer',
              }}
              onClick={item.onClick}
            >
              <div style={{
                width: 36, height: 36, borderRadius: 10,
                background: 'var(--primary-light)',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontSize: 18,
              }}>
                {item.icon}
              </div>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 14, color: 'var(--text-primary)', fontWeight: 500 }}>
                  {item.label}
                </div>
                <div style={{ fontSize: 11, color: 'var(--text-tertiary)', marginTop: 2 }}>
                  {item.desc}
                </div>
              </div>
              <div style={{ fontSize: 16, color: 'var(--text-tertiary)' }}>›</div>
            </div>
          ))}
        </div>

        <div style={{
          marginTop: 12,
          background: 'var(--bg-card)',
          padding: '14px 16px',
          textAlign: 'center',
          color: 'var(--danger)',
          fontSize: 14,
          cursor: 'pointer',
        }} onClick={handleLogout}>
          退出登录
        </div>
      </div>
    </PageWrapper>
  );
}

Object.assign(window, { ProfilePage });