import React, { useState } from 'react';
import { Link, useNavigate } from 'umi';
import { Card, Button, Typography, Row, Col, Tag, Carousel, Pagination } from 'antd';
import { ArrowRightOutlined, CheckCircleOutlined, DollarOutlined, BarChartOutlined, ZapOutlined, GlobeOutlined, StarOutlined, UserOutlined, CompanyOutlined, TrendingUpOutlined } from '@ant-design/icons';
import Navbar from '@/components/Navbar';

const { Title, Paragraph, Text } = Typography;

const CaseStudy: React.FC = () => {
  const navigate = useNavigate();
  const [activeCategory, setActiveCategory] = useState('all');
  const [currentPage, setCurrentPage] = useState(1);

  const caseStudies = [
    {
      id: 1,
      title: '中小商户案例：月销售额提升45%',
      category: 'small',
      company: '广州某跨境电商公司',
      industry: '电子产品',
      challenge: '手动选品效率低，定价策略单一，运营成本高',
      solution: '使用智能选品系统和AI动态定价，实现自动化运营',
      results: [
        '月销售额提升45%',
        '运营成本降低30%',
        '选品效率提升60%',
      ],
      testimonial: '"Crawlful Hub帮助我们实现了店铺的自动化运营，节省了大量人力成本，销售额提升了40%。"',
      author: '张总',
      position: 'CEO',
      image: 'data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27600%27 height=%27400%27 viewBox=%270 0 600 400%27%3E%3Crect width=%27600%27 height=%27400%27 fill=%27%23f0f2f5%27/%3E%3Ctext x=%2750%25%27 y=%2750%25%27 dominant-baseline=%27middle%27 text-anchor=%27middle%27 font-family=%27Arial%27 font-size=%2716%27 fill=%27%231890ff%27%3E成功案例展示%3C/text%3E%3C/svg%3E',
    },
    {
      id: 2,
      title: '大型企业案例：多店铺管理效率提升60%',
      category: 'enterprise',
      company: '深圳某品牌电商',
      industry: '服装行业',
      challenge: '多店铺管理复杂，数据分散，难以统一运营',
      solution: '使用多店铺管理系统，实现数据集中管理和统一运营',
      results: [
        '管理效率提升60%',
        '数据处理时间减少70%',
        '运营成本降低25%',
      ],
      testimonial: '"多店铺管理功能让我们能够集中管理所有店铺，数据一目了然，大大提高了管理效率。"',
      author: '李经理',
      position: '运营总监',
      image: 'data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27600%27 height=%27400%27 viewBox=%270 0 600 400%27%3E%3Crect width=%27600%27 height=%27400%27 fill=%27%23f0f2f5%27/%3E%3Ctext x=%2750%25%27 y=%2750%25%27 dominant-baseline=%27middle%27 text-anchor=%27middle%27 font-family=%27Arial%27 font-size=%2716%27 fill=%27%231890ff%27%3E成功案例展示%3C/text%3E%3C/svg%3E',
    },
    {
      id: 3,
      title: '跨境电商案例：利润率提升30%',
      category: 'crossborder',
      company: '杭州某跨境电商平台',
      industry: '家居用品',
      challenge: '跨平台价格差异难以把握，利润空间小',
      solution: '使用跨平台套利系统，发现价格差异，优化定价策略',
      results: [
        '利润率提升30%',
        '价格优化效率提升80%',
        '市场竞争力增强',
      ],
      testimonial: '"跨平台套利系统帮助我们发现了很多价格差异，利润率提高了30%，市场竞争力大大增强。"',
      author: '王女士',
      position: '业务经理',
      image: 'data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27600%27 height=%27400%27 viewBox=%270 0 600 400%27%3E%3Crect width=%27600%27 height=%27400%27 fill=%27%23f0f2f5%27/%3E%3Ctext x=%2750%25%27 y=%2750%25%27 dominant-baseline=%27middle%27 text-anchor=%27middle%27 font-family=%27Arial%27 font-size=%2716%27 fill=%27%231890ff%27%3E成功案例展示%3C/text%3E%3C/svg%3E',
    },
    {
      id: 4,
      title: '新手卖家案例：快速启动电商业务',
      category: 'small',
      company: '上海某个人卖家',
      industry: '美妆产品',
      challenge: '缺乏电商运营经验，选品困难，运营成本高',
      solution: '使用智能选品系统和自动上架功能，快速启动业务',
      results: [
        '业务启动时间缩短50%',
        '选品准确率提升70%',
        '首月销售额达到预期目标',
      ],
      testimonial: '"作为新手卖家，Crawlful Hub帮助我快速启动了电商业务，选品和上架都变得非常简单。"',
      author: '陈先生',
      position: '个人卖家',
      image: 'data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27600%27 height=%27400%27 viewBox=%270 0 600 400%27%3E%3Crect width=%27600%27 height=%27400%27 fill=%27%23f0f2f5%27/%3E%3Ctext x=%2750%25%27 y=%2750%25%27 dominant-baseline=%27middle%27 text-anchor=%27middle%27 font-family=%27Arial%27 font-size=%2716%27 fill=%27%231890ff%27%3E成功案例展示%3C/text%3E%3C/svg%3E',
    },
    {
      id: 5,
      title: '传统企业转型案例：线上销售额占比提升至60%',
      category: 'enterprise',
      company: '北京某传统制造企业',
      industry: '机械设备',
      challenge: '线上业务占比低，数字化转型困难',
      solution: '使用全功能电商管理系统，实现线上线下一体化运营',
      results: [
        '线上销售额占比提升至60%',
        '客户获取成本降低40%',
        '品牌知名度提升',
      ],
      testimonial: '"Crawlful Hub帮助我们成功实现了数字化转型，线上销售额占比从10%提升到了60%。"',
      author: '赵总',
      position: '总经理',
      image: 'data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27600%27 height=%27400%27 viewBox=%270 0 600 400%27%3E%3Crect width=%27600%27 height=%27400%27 fill=%27%23f0f2f5%27/%3E%3Ctext x=%2750%25%27 y=%2750%25%27 dominant-baseline=%27middle%27 text-anchor=%27middle%27 font-family=%27Arial%27 font-size=%2716%27 fill=%27%231890ff%27%3E成功案例展示%3C/text%3E%3C/svg%3E',
    },
    {
      id: 6,
      title: '多平台运营案例：管理效率提升70%',
      category: 'crossborder',
      company: '厦门某跨境电商公司',
      industry: '玩具产品',
      challenge: '多平台运营管理复杂，数据不同步，运营效率低',
      solution: '使用多平台集成管理系统，实现数据同步和统一运营',
      results: [
        '管理效率提升70%',
        '数据同步时间减少90%',
        '运营成本降低35%',
      ],
      testimonial: '"多平台集成管理系统让我们能够统一管理所有平台的店铺，效率大大提升。"',
      author: '刘经理',
      position: '运营主管',
      image: 'data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27600%27 height=%27400%27 viewBox=%270 0 600 400%27%3E%3Crect width=%27600%27 height=%27400%27 fill=%27%23f0f2f5%27/%3E%3Ctext x=%2750%25%27 y=%2750%25%27 dominant-baseline=%27middle%27 text-anchor=%27middle%27 font-family=%27Arial%27 font-size=%2716%27 fill=%27%231890ff%27%3E成功案例展示%3C/text%3E%3C/svg%3E',
    },
  ];

  const filteredCases = activeCategory === 'all' 
    ? caseStudies 
    : caseStudies.filter(caseStudy => caseStudy.category === activeCategory);

  const itemsPerPage = 3;
  const totalPages = Math.ceil(filteredCases.length / itemsPerPage);
  const currentCases = filteredCases.slice(
    (currentPage - 1) * itemsPerPage,
    currentPage * itemsPerPage
  );

  const categories = [
    { value: 'all', label: '全部案例' },
    { value: 'small', label: '中小商户' },
    { value: 'enterprise', label: '大型企业' },
    { value: 'crossborder', label: '跨境电商' },
  ];

  return (
    <div className="case-study-page">
      <Navbar />
      {/* 页面头部 */}
      <section className="case-header">
        <div className="container">
          <Title level={1}>成功案例</Title>
          <Paragraph className="subtitle">
            看看我们如何帮助客户实现业务增长
          </Paragraph>
        </div>
      </section>

      {/* 分类筛选 */}
      <section className="category-filter">
        <div className="container">
          <div className="categories">
            {categories.map(category => (
              <Button
                key={category.value}
                type={activeCategory === category.value ? 'primary' : 'default'}
                onClick={() => {
                  setActiveCategory(category.value);
                  setCurrentPage(1);
                }}
              >
                {category.label}
              </Button>
            ))}
          </div>
        </div>
      </section>

      {/* 案例列表 */}
      <section className="case-list">
        <div className="container">
          <Row gutter={[32, 32]}>
            {currentCases.map(caseStudy => (
              <Col key={caseStudy.id} xs={24} md={8}>
                <Card hoverable className="case-card">
                  <div className="case-image">
                    <img src={caseStudy.image} alt={caseStudy.title} />
                  </div>
                  <div className="case-content">
                    <div className="case-meta">
                      <Tag color="blue">{caseStudy.industry}</Tag>
                      <Tag color="green">{caseStudy.company}</Tag>
                    </div>
                    <Title level={4}>{caseStudy.title}</Title>
                    <Paragraph className="case-challenge">
                      <Text strong>挑战：</Text>{caseStudy.challenge}
                    </Paragraph>
                    <Paragraph className="case-solution">
                      <Text strong>解决方案：</Text>{caseStudy.solution}
                    </Paragraph>
                    <div className="case-results">
                      <Title level={5}>成果：</Title>
                      <ul>
                        {caseStudy.results.map((result, index) => (
                          <li key={index}>
                            <CheckCircleOutlined className="result-icon" />
                            {result}
                          </li>
                        ))}
                      </ul>
                    </div>
                    <div className="case-testimonial">
                      <div className="testimonial-content">
                        <StarOutlined className="star" />
                        <StarOutlined className="star" />
                        <StarOutlined className="star" />
                        <StarOutlined className="star" />
                        <StarOutlined className="star" />
                        <Paragraph>{caseStudy.testimonial}</Paragraph>
                      </div>
                      <div className="testimonial-author">
                        <UserOutlined className="author-icon" />
                        <div>
                          <Text strong>{caseStudy.author}</Text>
                          <Text type="secondary">{caseStudy.position}</Text>
                        </div>
                      </div>
                    </div>
                    <Button type="primary" className="case-button" onClick={() => navigate(`/case-study/${caseStudy.id}`)}>
                      查看详情
                      <ArrowRightOutlined />
                    </Button>
                  </div>
                </Card>
              </Col>
            ))}
          </Row>
          
          {/* 分页 */}
          {totalPages > 1 && (
            <div className="pagination">
              <Pagination
                current={currentPage}
                total={filteredCases.length}
                pageSize={itemsPerPage}
                onChange={setCurrentPage}
                showSizeChanger={false}
              />
            </div>
          )}
        </div>
      </section>

      {/* 客户评价轮播 */}
      <section className="testimonial-carousel">
        <div className="container">
          <Title level={2}>客户评价</Title>
          <Carousel autoplay className="carousel">
            {caseStudies.map(caseStudy => (
              <div key={caseStudy.id} className="carousel-item">
                <Card className="testimonial-card">
                  <div className="testimonial-rating">
                    {[1, 2, 3, 4, 5].map(star => (
                      <StarOutlined key={star} className="star" />
                    ))}
                  </div>
                  <Paragraph>{caseStudy.testimonial}</Paragraph>
                  <div className="testimonial-author">
                    <UserOutlined className="author-icon" />
                    <div>
                      <Text strong>{caseStudy.author}</Text>
                      <Text type="secondary">{caseStudy.position}，{caseStudy.company}</Text>
                    </div>
                  </div>
                </Card>
              </div>
            ))}
          </Carousel>
        </div>
      </section>

      {/* 行动召唤 */}
      <section className="cta">
        <div className="container">
          <Title level={2}>准备好实现您的业务增长了吗？</Title>
          <Paragraph>加入我们的成功客户行列，开始您的电商增长之旅</Paragraph>
          <Button type="primary" size="large" onClick={() => navigate('/auth/register')}>
            免费注册
          </Button>
        </div>
      </section>

      <style jsx>{`
        .case-study-page {
          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
        }

        .case-header {
          padding: 140px 0 40px;
          background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
          text-align: center;
        }

        @media (max-width: 768px) {
          .case-header {
            padding: 120px 0 30px;
          }
        }

        .subtitle {
          font-size: 18px;
          color: #666;
          margin: 16px 0;
        }

        .category-filter {
          padding: 40px 0;
          background: #fff;
        }

        .categories {
          display: flex;
          gap: 12px;
          justify-content: center;
          flex-wrap: wrap;
        }

        .case-list {
          padding: 40px 0 80px;
          background: #f5f7fa;
        }

        .case-card {
          border-radius: 8px;
          overflow: hidden;
          transition: all 0.3s ease;
        }

        .case-card:hover {
          transform: translateY(-8px);
          box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
        }

        .case-image {
          height: 200px;
          overflow: hidden;
        }

        .case-image img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          transition: transform 0.3s ease;
        }

        .case-card:hover .case-image img {
          transform: scale(1.05);
        }

        .case-content {
          padding: 24px;
        }

        .case-meta {
          margin-bottom: 16px;
        }

        .case-challenge,
        .case-solution {
          margin: 12px 0;
        }

        .case-results {
          margin: 24px 0;
        }

        .case-results ul {
          list-style: none;
          padding: 0;
          margin: 0;
        }

        .case-results li {
          display: flex;
          align-items: center;
          gap: 8px;
          margin-bottom: 8px;
        }

        .result-icon {
          color: #52c41a;
        }

        .case-testimonial {
          margin: 24px 0;
          padding: 16px;
          background: #f0f2f5;
          border-radius: 8px;
        }

        .testimonial-rating {
          color: #faad14;
          margin-bottom: 16px;
        }

        .testimonial-author {
          display: flex;
          align-items: center;
          gap: 8px;
          margin-top: 16px;
        }

        .author-icon {
          font-size: 24px;
          color: #1890ff;
        }

        .case-button {
          margin-top: 16px;
        }

        .pagination {
          margin-top: 40px;
          display: flex;
          justify-content: center;
        }

        .testimonial-carousel {
          padding: 80px 0;
          background: #fff;
        }

        .carousel {
          margin-top: 40px;
        }

        .carousel-item {
          padding: 0 16px;
        }

        .testimonial-card {
          padding: 32px;
          border-radius: 8px;
          text-align: center;
        }

        .star {
          color: #faad14;
          margin-right: 4px;
        }

        .cta {
          padding: 80px 0;
          background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
          color: #fff;
          text-align: center;
        }

        .cta .ant-btn {
          margin-top: 24px;
        }

        @media (max-width: 768px) {
          .case-header {
            padding: 60px 0 30px;
          }

          .category-filter {
            padding: 30px 0;
          }

          .case-list {
            padding: 30px 0 60px;
          }

          .testimonial-carousel {
            padding: 60px 0;
          }

          .cta {
            padding: 60px 0;
          }
        }
      `}</style>
    </div>
  );
};

export default CaseStudy;