import React from 'react';
import { Button, Card, message, Typography } from 'antd';
import {
  StarOutlined,
  CrownOutlined,
  LockOutlined,
  ThunderboltOutlined,
  GiftOutlined,
  BarChartOutlined,
  FireOutlined,
  TrophyOutlined,
} from '@ant-design/icons';

const PopularPage: React.FC = () => {
  const handleUnlock = () => {
    message.info('请联系客服开通');
  };

  return (
    <div style={{ padding: '20px 0' }}>
      <div style={{ marginBottom: 32 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 12 }}>
          <div style={{
            width: 48,
            height: 48,
            borderRadius: 14,
            background: 'linear-gradient(135deg, #f59e0b 0%, #d97706 100%)',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            boxShadow: '0 4px 16px rgba(245,158,11,0.3)',
          }}>
            <BarChartOutlined style={{ fontSize: 22, color: '#fff' }} />
          </div>
          <div>
            <Typography.Title level={2} style={{ margin: 0, color: '#1e293b', fontWeight: 700 }}>
              行业爆款大盘
              <span style={{ color: '#6366f1', fontSize: 14, fontWeight: 400, marginLeft: 8 }}>
                发现热门素材趋势
              </span>
            </Typography.Title>
          </div>
        </div>
        <Typography.Text style={{ color: '#64748b' }}>
          实时追踪各行业爆款素材，把握创作风向，打造热门内容
        </Typography.Text>
      </div>

      <Card
        bordered={false}
        style={{
          borderRadius: 20,
          background: 'linear-gradient(135deg, rgba(245,158,11,0.04) 0%, rgba(217,119,6,0.04) 100%)',
          border: '1px solid rgba(245,158,11,0.1)',
          padding: 10,
          marginBottom: 32,
        }}
      >
        <Typography.Title level={4} style={{ marginBottom: 20, color: '#1e293b' }}>
          <FireOutlined style={{ marginRight: 8, color: '#f59e0b' }} />
          行业热度排行
        </Typography.Title>
          <Card
          bordered={false}
          style={{
            borderRadius: 16,
            background: '#fafafa',
            padding: 40,
            textAlign: 'center',
          }}
        >
          <div style={{ color: '#94a3b8', fontSize: 14 }}>
            敬请期待行业热度排行
          </div>
        </Card>
      </Card>

      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 20 }}>
        <Typography.Title level={4} style={{ margin: 0, color: '#1e293b' }}>
          <TrophyOutlined style={{ marginRight: 8, color: '#6366f1' }} />
          爆款素材榜单
        </Typography.Title>
        <Button
          type="primary"
          size="middle"
          onClick={handleUnlock}
          style={{
            borderRadius: 10,
            background: 'linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%)',
            border: 'none',
          }}
        >
          <LockOutlined style={{ marginRight: 6 }} />
          立即解锁全部
        </Button>
      </div>

      <Card
        bordered={false}
        style={{
          borderRadius: 16,
          background: '#fafafa',
          padding: 40,
          textAlign: 'center',
        }}
      >
        <div style={{ color: '#94a3b8', fontSize: 14 }}>
          敬请期待更多爆款素材
        </div>
      </Card>
    </div>
  );
};

export default PopularPage;