// Message Center Page

const { useState } = React;

function MessageCenterPage() {
  const { navigate, showToast } = useApp();
  const [activeTab, setActiveTab] = useState('all');
  const [messages, setMessages] = useState([]);
  const [loading, setLoading] = useState(true);

  const tabs = [
    { id: 'all', label: '全部', icon: '📬' },
    { id: 'im', label: '久聊消息', icon: '💬' },
    { id: 'comment', label: '评论@我', icon: '💭' },
    { id: 'system', label: '系统通知', icon: '🔔' },
  ];

  const mockMessages = {
    all: [
      { id: 1, type: 'im', avatar: '', nickname: '云淡风轻', content: '最近忙什么呢？好久没联系了', time: '刚刚', unread: true, badge: 2 },
      { id: 2, type: 'comment', avatar: '', nickname: '时光漫步', content: '评论了你的说说：说得真好，阳光明媚的日子总是让人心情愉悦！', time: '5分钟前', unread: true, badge: 1 },
      { id: 3, type: 'system', avatar: '', nickname: '系统通知', content: '恭喜您获得「久存新人」称号，点击查看详情', time: '1小时前', unread: true, badge: 1 },
      { id: 4, type: 'im', avatar: '', nickname: '星辰大海', content: '[图片]', time: '2小时前', unread: false },
      { id: 5, type: 'comment', avatar: '', nickname: '夏日阳光', content: '回复了你的评论：风景好美，是哪里拍的？', time: '昨天', unread: false },
      { id: 6, type: 'system', avatar: '', nickname: '会员中心', content: '您的会员还剩7天到期，点击续费享优惠', time: '昨天', unread: false },
      { id: 7, type: 'im', avatar: '', nickname: '月半小夜曲', content: '好的，那明天见~', time: '3天前', unread: false },
    ],
    im: [
      { id: 1, type: 'im', avatar: '', nickname: '云淡风轻', content: '最近忙什么呢？好久没联系了', time: '刚刚', unread: true, badge: 2 },
      { id: 4, type: 'im', avatar: '', nickname: '星辰大海', content: '[图片]', time: '2小时前', unread: false },
      { id: 7, type: 'im', avatar: '', nickname: '月半小夜曲', content: '好的，那明天见~', time: '3天前', unread: false },
    ],
    comment: [
      { id: 2, type: 'comment', avatar: '', nickname: '时光漫步', content: '评论了你的说说：说得真好，阳光明媚的日子总是让人心情愉悦！', time: '5分钟前', unread: true, badge: 1 },
      { id: 5, type: 'comment', avatar: '', nickname: '夏日阳光', content: '回复了你的评论：风景好美，是哪里拍的？', time: '昨天', unread: false },
    ],
    system: [
      { id: 3, type: 'system', avatar: '', nickname: '系统通知', content: '恭喜您获得「久存新人」称号，点击查看详情', time: '1小时前', unread: true, badge: 1 },
      { id: 6, type: 'system', avatar: '', nickname: '会员中心', content: '您的会员还剩7天到期，点击续费享优惠', time: '昨天', unread: false },
    ],
  };

  const getTypeIcon = (type) => {
    const icons = { im: '💬', comment: '💭', system: '🔔' };
    return icons[type] || '📩';
  };

  const getTypeLabel = (type) => {
    const labels = { im: '久聊', comment: '评论', system: '系统' };
    return labels[type] || '';
  };

  const handleMsgClick = (msg) => {
    if (msg.type === 'im') {
      navigate('im');
    } else if (msg.type === 'comment') {
      navigate('feed');
    } else {
      showToast('查看通知详情');
    }
  };

  const list = mockMessages[activeTab] || mockMessages.all;
  const unreadCount = mockMessages.all.filter(m => m.unread).reduce((s, m) => s + (m.badge || 1), 0);

  return (
    <PageWrapper>
      <AppHeader
        title="消息中心"
        subtitle={`${unreadCount} 条未读`}
        rightContent={
          <span
            style={{ fontSize: 14, color: 'var(--primary)', cursor: 'pointer' }}
            onClick={() => showToast('已全部标为已读')}
          >
            全部已读
          </span>
        }
      />

      {/* Tabs */}
      <div style={{
        display: 'flex',
        background: 'var(--bg-card)',
        borderBottom: '1px solid var(--border)',
        padding: '0 8px',
        position: 'sticky',
        top: 0,
        zIndex: 10,
      }}>
        {tabs.map(tab => (
          <div
            key={tab.id}
            style={{
              flex: 1,
              textAlign: 'center',
              padding: '12px 8px',
              fontSize: 13,
              color: activeTab === tab.id ? 'var(--primary)' : 'var(--text-secondary)',
              fontWeight: activeTab === tab.id ? 600 : 400,
              cursor: 'pointer',
              borderBottom: activeTab === tab.id ? '2px solid var(--primary)' : '2px solid transparent',
              position: 'relative',
            }}
            onClick={() => setActiveTab(tab.id)}
          >
            {tab.label}
          </div>
        ))}
      </div>

      {/* Message List */}
      <div style={{ padding: '8px 0' }}>
        {list.map(msg => (
          <div
            key={msg.id}
            style={{
              display: 'flex',
              alignItems: 'center',
              gap: 12,
              padding: '12px 16px',
              background: 'var(--bg-card)',
              borderBottom: '1px solid var(--border-light, #f2f3f5)',
              cursor: 'pointer',
              opacity: msg.unread ? 1 : 0.7,
            }}
            onClick={() => handleMsgClick(msg)}
          >
            <div style={{ position: 'relative', flexShrink: 0 }}>
              <div style={{
                width: 44, height: 44, borderRadius: '50%',
                background: 'linear-gradient(135deg, var(--primary), #4080FF)',
                color: '#fff', fontSize: 15, fontWeight: 600,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
              }}>
                {msg.nickname?.charAt(0) || '?'}
              </div>
              {msg.unread && msg.badge > 0 && (
                <span style={{
                  position: 'absolute', top: -2, right: -2,
                  minWidth: 18, height: 18,
                  background: 'var(--danger)', color: '#fff',
                  fontSize: 10, fontWeight: 600,
                  borderRadius: 9, padding: '0 5px',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  border: '2px solid var(--bg-card)',
                }}>
                  {msg.badge > 99 ? '99+' : msg.badge}
                </span>
              )}
            </div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{
                display: 'flex', alignItems: 'center',
                justifyContent: 'space-between', marginBottom: 4,
              }}>
                <div style={{
                  fontSize: 14, fontWeight: 600, color: 'var(--text-primary)',
                  display: 'flex', alignItems: 'center', gap: 6,
                }}>
                  {msg.nickname}
                  <span style={{
                    fontSize: 10, padding: '1px 6px',
                    background: 'var(--primary-light)', color: 'var(--primary)',
                    borderRadius: 8, fontWeight: 500,
                  }}>
                    {getTypeLabel(msg.type)}
                  </span>
                </div>
                <div style={{ fontSize: 11, color: 'var(--text-tertiary)', flexShrink: 0 }}>
                  {msg.time}
                </div>
              </div>
              <div style={{
                fontSize: 13, color: 'var(--text-secondary)',
                whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',
              }}>
                {msg.content}
              </div>
            </div>
          </div>
        ))}
      </div>

      {list.length === 0 && (
        <div style={{ padding: 60, textAlign: 'center', color: 'var(--text-tertiary)', fontSize: 13 }}>
          暂无消息
        </div>
      )}
    </PageWrapper>
  );
}

Object.assign(window, { MessageCenterPage });