import React, { useState, useEffect } from 'react';
import { Card, Button, Space, Typography, Tag, List, Badge, Empty, Skeleton } from 'antd';
import { 
  CloudOutlined, 
  PhoneOutlined, 
  DesktopOutlined, 
  AppleOutlined, 
  RobotOutlined,
  WindowsOutlined,
  RightOutlined
} from '@ant-design/icons';
import apiClient from '../utils/apiClient';
import { buildApiUrl, API_ENDPOINTS } from '../config/api';

const { Title, Text } = Typography;

const ClientDownloads = () => {
  const [clients, setClients] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetchClients();
  }, []);

  const fetchClients = async () => {
    try {
      const response = await apiClient.get(buildApiUrl(API_ENDPOINTS.CLIENT_DOWNLOADS.PUBLIC_LIST));
      setClients(response.data.clients || []);
    } catch (error) {
      console.error('获取下载列表失败:', error);
    } finally {
      setLoading(false);
    }
  };

  const getPlatformIcon = (platformCode) => {
    const code = platformCode.toLowerCase();
    if (code.includes('win')) return <WindowsOutlined />;
    if (code.includes('mac') || code.includes('ios')) return <AppleOutlined />;
    if (code.includes('android')) return <RobotOutlined />;
    return <DesktopOutlined />;
  };

  if (loading) return <Skeleton active />;

  return (
    <div className="client-downloads-modern">
      <Title level={4} style={{ marginBottom: 24 }}>
        <Space><CloudOutlined /> 客户端下载</Space>
      </Title>
      
      {clients.length === 0 ? (
        <Empty description="暂无可用下载版本" />
      ) : (
        <List
          grid={{ gutter: 16, xs: 1, sm: 2, md: 3 }}
          dataSource={clients}
          renderItem={client => (
            <List.Item>
              <Card hoverable style={{ borderRadius: 12 }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 }}>
                  <Space>
                    <div style={{ 
                      width: 40, height: 40, background: '#f0f7ff', 
                      borderRadius: 8, display: 'flex', alignItems: 'center', 
                      justifyContent: 'center', color: '#1677ff', fontSize: 20 
                    }}>
                      {getPlatformIcon(client.platform_code)}
                    </div>
                    <div>
                      <Text strong>{client.platform_name_cn || client.platform_code}</Text>
                      {client.is_latest && <Badge status="success" text="最新" style={{ marginLeft: 8 }} />}
                    </div>
                  </Space>
                </div>
                
                <div style={{ marginBottom: 16 }}>
                  <Text type="secondary" size="small">版本: </Text>
                  <Text strong>{client.version}</Text>
                </div>

                <Button 
                  type="primary" 
                  block 
                  icon={<CloudOutlined />} 
                  href={client.download_url} 
                  target="_blank"
                >
                  立即下载
                </Button>
              </Card>
            </List.Item>
          )}
        />
      )}
    </div>
  );
};

export default ClientDownloads;