import React, { useState } from 'react';
import { 
  Card, Typography, Button, Space, Tag, Table, List, Avatar, 
  Row, Col, Divider, Tabs, Progress, Badge, Rate, Timeline,
  Statistic, Switch, Alert, Empty
} from 'antd';
import { 
  UserOutlined, StarOutlined, LikeOutlined, MessageOutlined,
  EyeOutlined, HeartOutlined, ShoppingCartOutlined,
  CalendarOutlined, ClockCircleOutlined, CheckCircleOutlined
} from '@ant-design/icons';

const { Title, Paragraph, Text } = Typography;
const { TabPane } = Tabs;

/**
 * 布局样式预览页面
 * 展示各种常见UI布局类型及其适用场景
 */

const LayoutShowcase: React.FC = () => {
  const [isMobile, setIsMobile] = useState(window.innerWidth <= 768);

  // 模拟数据
  const listData = [
    { id: 1, title: '项目A - 博纳斯线路改造', status: 'active', progress: 75, manager: '张三' },
    { id: 2, title: '项目B - 变压器安装工程', status: 'pending', progress: 0, manager: '李四' },
    { id: 3, title: '项目C - 电缆敷设施工', status: 'completed', progress: 100, manager: '王五' },
  ];

  const tableColumns = [
    { title: '项目名称', dataIndex: 'title', key: 'title' },
    { title: '负责人', dataIndex: 'manager', key: 'manager' },
    { title: '进度', dataIndex: 'progress', key: 'progress', render: (v: number) => `${v}%` },
    { 
      title: '状态', 
      dataIndex: 'status', 
      key: 'status',
      render: (v: string) => {
        const colors: Record<string, string> = { active: 'processing', pending: 'default', completed: 'success' };
        const texts: Record<string, string> = { active: '进行中', pending: '待开始', completed: '已完成' };
        return <Tag color={colors[v]}>{texts[v]}</Tag>;
      }
    },
  ];

  // ============ 布局类型1: 卡片列表 ============
  const CardListDemo = () => (
    <div>
      <Alert 
        message="卡片列表布局" 
        description="适用于：项目列表、任务列表、产品展示。特点：信息层次清晰、视觉分隔明确、适合移动端"
        type="info"
        showIcon
        style={{ marginBottom: 16 }}
      />
      
      {listData.map(item => (
        <Card 
          key={item.id}
          style={{ marginBottom: 16, borderRadius: 12 }}
          hoverable
        >
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
            <div style={{ flex: 1 }}>
              <Text strong style={{ fontSize: 16 }}>{item.title}</Text>
              <br />
              <Text type="secondary">负责人: {item.manager}</Text>
            </div>
            <Tag color={item.status === 'active' ? 'processing' : item.status === 'completed' ? 'success' : 'default'}>
              {item.status === 'active' ? '进行中' : item.status === 'completed' ? '已完成' : '待开始'}
            </Tag>
          </div>
          <Divider style={{ margin: '12px 0' }} />
          <Progress percent={item.progress} showInfo={false} />
          <div style={{ marginTop: 8, display: 'flex', gap: 8 }}>
            <Button size="small" type="primary">查看详情</Button>
            <Button size="small">编辑</Button>
          </div>
        </Card>
      ))}
    </div>
  );

  // ============ 布局类型2: 表格布局 ============
  const TableDemo = () => (
    <div>
      <Alert 
        message="表格布局" 
        description="适用于：数据管理、批量操作、对比分析。特点：信息密集、支持排序筛选、适合桌面端大量数据"
        type="info"
        showIcon
        style={{ marginBottom: 16 }}
      />
      
      <Table 
        dataSource={listData} 
        columns={tableColumns}
        rowKey="id"
        pagination={false}
      />
    </div>
  );

  // ============ 布局类型3: 网格卡片 ============
  const GridCardDemo = () => (
    <div>
      <Alert 
        message="网格卡片布局" 
        description="适用于：仪表板、快捷入口、统计展示。特点：空间利用率高、视觉均衡、适合展示统计信息"
        type="info"
        showIcon
        style={{ marginBottom: 16 }}
      />
      
      <Row gutter={[16, 16]}>
        <Col xs={24} sm={12} md={8} lg={6}>
          <Card hoverable style={{ borderRadius: 12, textAlign: 'center' }}>
            <Statistic title="进行中项目" value={12} suffix="个" />
            <Progress percent={60} showInfo={false} style={{ marginTop: 8 }} />
          </Card>
        </Col>
        <Col xs={24} sm={12} md={8} lg={6}>
          <Card hoverable style={{ borderRadius: 12, textAlign: 'center' }}>
            <Statistic title="待处理任务" value={5} suffix="项" valueStyle={{ color: '#cf1322' }} />
            <Progress percent={25} showInfo={false} strokeColor="#cf1322" style={{ marginTop: 8 }} />
          </Card>
        </Col>
        <Col xs={24} sm={12} md={8} lg={6}>
          <Card hoverable style={{ borderRadius: 12, textAlign: 'center' }}>
            <Statistic title="本月完成" value={28} suffix="个" valueStyle={{ color: '#3f8600' }} />
            <Progress percent={85} showInfo={false} strokeColor="#3f8600" style={{ marginTop: 8 }} />
          </Card>
        </Col>
        <Col xs={24} sm={12} md={8} lg={6}>
          <Card hoverable style={{ borderRadius: 12, textAlign: 'center' }}>
            <Statistic title="团队成员" value={8} suffix="人" />
            <Progress percent={100} showInfo={false} style={{ marginTop: 8 }} />
          </Card>
        </Col>
      </Row>
    </div>
  );

  // ============ 布局类型4: 时间线布局 ============
  const TimelineDemo = () => (
    <div>
      <Alert 
        message="时间线布局" 
        description="适用于：审批流程、施工进度、操作日志。特点：顺序清晰、时间节点明确、适合流程展示"
        type="info"
        showIcon
        style={{ marginBottom: 16 }}
      />
      
      <Timeline
        items={[
          {
            color: 'green',
            children: (
              <>
                <Text strong>项目启动</Text>
                <br />
                <Text type="secondary">2026-03-01 - 确定项目范围和团队</Text>
              </>
            ),
          },
          {
            color: 'blue',
            children: (
              <>
                <Text strong>施工准备</Text>
                <br />
                <Text type="secondary">2026-03-05 - 材料采购、人员调配</Text>
              </>
            ),
          },
          {
            color: 'blue',
            children: (
              <>
                <Text strong>施工进行中</Text>
                <br />
                <Text type="secondary">2026-03-10 - 开始现场施工</Text>
              </>
            ),
          },
          {
            color: 'gray',
            children: (
              <>
                <Text strong>竣工验收</Text>
                <br />
                <Text type="secondary">预计 2026-04-01</Text>
              </>
            ),
          },
        ]}
      />
    </div>
  );

  // ============ 布局类型5: 瀑布流/Feed布局 ============
  const FeedDemo = () => (
    <div>
      <Alert 
        message="Feed流布局" 
        description="适用于：动态消息、施工日志、社交媒体风格。特点：沉浸式阅读、时间倒序、适合移动端滑动"
        type="info"
        showIcon
        style={{ marginBottom: 16 }}
      />
      
      <List
        itemLayout="vertical"
        dataSource={[
          {
            title: '今日施工进展',
            description: '完成了3号杆塔的基础浇筑工作，混凝土养护中。',
            author: '张三',
            date: '今天 14:30',
            avatar: '👨‍🔧',
          },
          {
            title: '材料到货通知',
            description: '电缆材料已到货，存放在仓库A区，请施工组负责人安排领取。',
            author: '李四',
            date: '今天 10:15',
            avatar: '📦',
          },
          {
            title: '安全检查完成',
            description: '本周安全检查已完成，未发现重大隐患。',
            author: '王五',
            date: '昨天 16:00',
            avatar: '✅',
          },
        ]}
        renderItem={(item: any) => (
          <List.Item>
            <Card style={{ width: '100%', marginBottom: 12, borderRadius: 12 }}>
              <div style={{ display: 'flex', alignItems: 'flex-start', gap: 12 }}>
                <div style={{ fontSize: 32 }}>{item.avatar}</div>
                <div style={{ flex: 1 }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                    <Text strong>{item.author}</Text>
                    <Text type="secondary" style={{ fontSize: 12 }}>{item.date}</Text>
                  </div>
                  <Text strong style={{ fontSize: 15, display: 'block', marginTop: 4 }}>{item.title}</Text>
                  <Text type="secondary">{item.description}</Text>
                  <div style={{ marginTop: 12, display: 'flex', gap: 16 }}>
                    <Space>
                      <LikeOutlined /> 赞
                    </Space>
                    <Space>
                      <MessageOutlined /> 评论
                    </Space>
                  </div>
                </div>
              </div>
            </Card>
          </List.Item>
        )}
      />
    </div>
  );

  // ============ 布局类型6: 详情页布局 ============
  const DetailDemo = () => (
    <div>
      <Alert 
        message="详情页布局" 
        description="适用于：项目详情、订单详情、用户档案。特点：信息分组明确、主次分明、适合深度阅读"
        type="info"
        showIcon
        style={{ marginBottom: 16 }}
      />
      
      <Card style={{ borderRadius: 12 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 }}>
          <Title level={4} style={{ margin: 0 }}>项目详情</Title>
          <Tag color="processing">进行中</Tag>
        </div>
        
        <Row gutter={[24, 16]}>
          <Col xs={24} sm={12} md={8}>
            <Text type="secondary">项目名称</Text>
            <br />
            <Text strong>博纳斯线路改造工程</Text>
          </Col>
          <Col xs={24} sm={12} md={8}>
            <Text type="secondary">客户</Text>
            <br />
            <Text strong>博纳斯稀土开采公司</Text>
          </Col>
          <Col xs={24} sm={12} md={8}>
            <Text type="secondary">项目经理</Text>
            <br />
            <Text strong>罗仕林</Text>
          </Col>
          <Col xs={24} sm={12} md={8}>
            <Text type="secondary">合同金额</Text>
            <br />
            <Text strong>¥1,250,000</Text>
          </Col>
          <Col xs={24} sm={12} md={8}>
            <Text type="secondary">开工日期</Text>
            <br />
            <Text strong>2026-03-01</Text>
          </Col>
          <Col xs={24} sm={12} md={8}>
            <Text type="secondary">预计完工</Text>
            <br />
            <Text strong>2026-05-30</Text>
          </Col>
        </Row>
        
        <Divider />
        
        <Text type="secondary">项目描述</Text>
        <Paragraph>
          本项目包括7公里22kV高压线路改造，以及1250kVA变压器安装工程。
          施工地点位于老挝博纳斯矿区，需考虑当地气候条件。
        </Paragraph>
        
        <Divider />
        
        <div style={{ marginBottom: 8 }}>
          <Text type="secondary">施工进度</Text>
        </div>
        <Progress percent={65} status="active" />
      </Card>
    </div>
  );

  // ============ 布局对比总结 ============
  const ComparisonTable = () => (
    <Card title="布局类型对比" style={{ marginTop: 24, borderRadius: 12 }}>
      <Table 
        dataSource={[
          {
            key: '1',
            layout: '卡片列表',
            bestFor: '项目/任务列表',
            mobile: '⭐⭐⭐⭐⭐',
            desktop: '⭐⭐⭐⭐',
            dataDensity: '中',
          },
          {
            key: '2',
            layout: '表格',
            bestFor: '数据管理/分析',
            mobile: '⭐⭐',
            desktop: '⭐⭐⭐⭐⭐',
            dataDensity: '高',
          },
          {
            key: '3',
            layout: '网格卡片',
            bestFor: '仪表板/统计',
            mobile: '⭐⭐⭐⭐',
            desktop: '⭐⭐⭐⭐⭐',
            dataDensity: '中',
          },
          {
            key: '4',
            layout: '时间线',
            bestFor: '流程/进度',
            mobile: '⭐⭐⭐⭐',
            desktop: '⭐⭐⭐',
            dataDensity: '低',
          },
          {
            key: '5',
            layout: 'Feed流',
            bestFor: '动态/日志',
            mobile: '⭐⭐⭐⭐⭐',
            desktop: '⭐⭐⭐',
            dataDensity: '低',
          },
          {
            key: '6',
            layout: '详情页',
            bestFor: '深度信息',
            mobile: '⭐⭐⭐',
            desktop: '⭐⭐⭐⭐⭐',
            dataDensity: '中',
          },
        ]}
        columns={[
          { title: '布局类型', dataIndex: 'layout', key: 'layout' },
          { title: '适用场景', dataIndex: 'bestFor', key: 'bestFor' },
          { title: '移动端', dataIndex: 'mobile', key: 'mobile' },
          { title: '桌面端', dataIndex: 'desktop', key: 'desktop' },
          { title: '数据密度', dataIndex: 'dataDensity', key: 'dataDensity' },
        ]}
        pagination={false}
        size="small"
      />
    </Card>
  );

  return (
    <div style={{ padding: isMobile ? 12 : 24, maxWidth: 1200, margin: '0 auto' }}>
      <Title level={2}>布局样式预览</Title>
      <Paragraph type="secondary">
        此页面展示各种常见UI布局类型，帮助开发者选择合适的布局方式
      </Paragraph>
      
      <Divider />
      
      <Tabs defaultActiveKey="1" tabPosition="top">
        <TabPane tab="📋 卡片列表" key="1">
          <CardListDemo />
        </TabPane>
        <TabPane tab="📊 表格布局" key="2">
          <TableDemo />
        </TabPane>
        <TabPane tab="🔲 网格卡片" key="3">
          <GridCardDemo />
        </TabPane>
        <TabPane tab="⏱️ 时间线" key="4">
          <TimelineDemo />
        </TabPane>
        <TabPane tab="📝 Feed流" key="5">
          <FeedDemo />
        </TabPane>
        <TabPane tab="📄 详情页" key="6">
          <DetailDemo />
        </TabPane>
      </Tabs>
      
      <ComparisonTable />
    </div>
  );
};

export default LayoutShowcase;