import React, { useState } from 'react';
import { Link, useNavigate } from 'umi';
import { Card, Button, Typography, Divider, Radio, Row, Col, Tag, Alert } from 'antd';
import { CheckCircleOutlined, CloseCircleOutlined, ArrowRightOutlined, DollarOutlined, UsersOutlined, ShieldOutlined, BarChartOutlined, ZapOutlined, GlobeOutlined, StarOutlined } from '@ant-design/icons';
import Navbar from '@/components/Navbar';

const { Title, Paragraph, Text } = Typography;

const Pricing: React.FC = () => {
  const navigate = useNavigate();
  const [billingCycle, setBillingCycle] = useState<'monthly' | 'yearly'>('monthly');

  const plans = [
    {
      name: '免费版',
      price: 0,
      billing: '永久免费',
      features: [
        '基础功能',
        '最多1个店铺',
        '500条商品数据',
        '邮件支持',
        '基础报表',
        '手动操作',
      ],
      cta: '开始免费使用',
      popular: false,
      buttonType: 'primary',
      onClick: () => navigate('/auth/register'),
    },
    {
      name: '专业版',
      price: billingCycle === 'monthly' ? 999 : 9990,
      billing: billingCycle === 'monthly' ? '每月' : '每年',
      features: [
        '所有核心功能',
        '最多10个店铺',
        '5000条商品数据',
        '优先邮件支持',
        '高级报表',
        'AI智能选品',
        '自动上架',
        '动态定价',
        '跨平台套利',
      ],
      cta: '选择专业版',
      popular: true,
      buttonType: 'primary',
      onClick: () => navigate('/checkout?plan=professional'),
    },
    {
      name: '企业版',
      price: 0,
      billing: '定制',
      features: [
        '完整功能',
        '无限店铺',
        '无限商品数据',
        '24/7专属支持',
        '定制化报表',
        'AI店铺托管',
        '定制化开发',
        'API接入',
        '专属客户经理',
      ],
      cta: '联系销售',
      popular: false,
      buttonType: 'default',
      onClick: () => navigate('/contact'),
    },
  ];

  const compareFeatures = [
    { feature: '核心功能', free: true, professional: true, enterprise: true },
    { feature: '店铺数量', free: '1个', professional: '10个', enterprise: '无限' },
    { feature: '商品数据', free: '500条', professional: '5000条', enterprise: '无限' },
    { feature: 'AI智能选品', free: false, professional: true, enterprise: true },
    { feature: '自动上架', free: false, professional: true, enterprise: true },
    { feature: '动态定价', free: false, professional: true, enterprise: true },
    { feature: '跨平台套利', free: false, professional: true, enterprise: true },
    { feature: 'AI店铺托管', free: false, professional: false, enterprise: true },
    { feature: '技术支持', free: '邮件', professional: '优先邮件', enterprise: '24/7专属' },
    { feature: '定制化开发', free: false, professional: false, enterprise: true },
    { feature: 'API接入', free: false, professional: false, enterprise: true },
  ];

  return (
    <div className="pricing-page">
      <Navbar />
      {/* 页面头部 */}
      <section className="pricing-header">
        <div className="container">
          <Title level={1}>选择适合您的方案</Title>
          <Paragraph className="subtitle">
            无论您是个人卖家还是大型企业，我们都有适合您的解决方案
          </Paragraph>
          <div className="billing-cycle">
            <Text>月付</Text>
            <Radio.Group value={billingCycle} onChange={(e) => setBillingCycle(e.target.value)}>
              <Radio.Button value="monthly">月付</Radio.Button>
              <Radio.Button value="yearly">年付 <Tag color="green">省16%</Tag></Radio.Button>
            </Radio.Group>
            <Text>年付</Text>
          </div>
        </div>
      </section>

      {/* 定价方案 */}
      <section className="pricing-plans">
        <div className="container">
          <Row gutter={[32, 32]}>
            {plans.map((plan, index) => (
              <Col key={index} xs={24} md={8}>
                <Card className={`plan-card ${plan.popular ? 'popular' : ''}`}>
                  {plan.popular && (
                    <div className="popular-badge">
                      <StarOutlined /> 推荐
                    </div>
                  )}
                  <div className="plan-header">
                    <Title level={3}>{plan.name}</Title>
                    <div className="price">
                      <DollarOutlined />
                      <span className="price-value">{plan.price}</span>
                      <span className="price-unit">/{plan.billing === '永久免费' ? '' : plan.billing === '每月' ? '月' : '年'}</span>
                    </div>
                    {plan.billing === '永久免费' && (
                      <Text type="secondary">{plan.billing}</Text>
                    )}
                  </div>
                  <Divider />
                  <div className="plan-features">
                    {plan.features.map((feature, idx) => (
                      <div key={idx} className="feature-item">
                        <CheckCircleOutlined className="feature-icon" />
                        <Text>{feature}</Text>
                      </div>
                    ))}
                  </div>
                  <Button 
                    type={plan.buttonType as any} 
                    size="large" 
                    className="plan-button" 
                    onClick={plan.onClick}
                  >
                    {plan.cta}
                  </Button>
                </Card>
              </Col>
            ))}
          </Row>
        </div>
      </section>

      {/* 功能对比 */}
      <section className="feature-comparison">
        <div className="container">
          <Title level={2}>功能对比</Title>
          <div className="comparison-table">
            <div className="table-header">
              <div className="feature-cell">功能</div>
              <div className="plan-cell">免费版</div>
              <div className="plan-cell">专业版</div>
              <div className="plan-cell">企业版</div>
            </div>
            {compareFeatures.map((item, index) => (
              <div key={index} className="table-row">
                <div className="feature-cell">{item.feature}</div>
                <div className="plan-cell">
                  {typeof item.free === 'boolean' ? (
                    item.free ? 
                      <CheckCircleOutlined className="check-icon" /> : 
                      <CloseCircleOutlined className="close-icon" />
                  ) : (
                    <Text>{item.free}</Text>
                  )}
                </div>
                <div className="plan-cell">
                  {typeof item.professional === 'boolean' ? (
                    item.professional ? 
                      <CheckCircleOutlined className="check-icon" /> : 
                      <CloseCircleOutlined className="close-icon" />
                  ) : (
                    <Text>{item.professional}</Text>
                  )}
                </div>
                <div className="plan-cell">
                  {typeof item.enterprise === 'boolean' ? (
                    item.enterprise ? 
                      <CheckCircleOutlined className="check-icon" /> : 
                      <CloseCircleOutlined className="close-icon" />
                  ) : (
                    <Text>{item.enterprise}</Text>
                  )}
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* 常见问题 */}
      <section className="faq">
        <div className="container">
          <Title level={2}>常见问题</Title>
          <Row gutter={[32, 32]}>
            <Col xs={24} md={12}>
              <Card className="faq-card">
                <Title level={4}>如何选择适合我的方案？</Title>
                <Paragraph>
                  根据您的店铺数量、商品数据量和功能需求来选择。如果您是个人卖家或刚刚起步，免费版是个不错的选择。如果您有多个店铺需要管理，专业版会更适合您。如果您是大型企业，需要定制化解决方案，建议选择企业版。
                </Paragraph>
              </Card>
              <Card className="faq-card">
                <Title level={4}>可以随时升级或降级方案吗？</Title>
                <Paragraph>
                  是的，您可以随时升级或降级您的方案。升级会立即生效，降级会在下一个 billing cycle 开始时生效。
                </Paragraph>
              </Card>
              <Card className="faq-card">
                <Title level={4}>如何取消订阅？</Title>
                <Paragraph>
                  您可以在账户设置中取消订阅。取消后，您的服务会持续到当前 billing cycle 结束，之后不会再收费。
                </Paragraph>
              </Card>
            </Col>
            <Col xs={24} md={12}>
              <Card className="faq-card">
                <Title level={4}>年付和月付有什么区别？</Title>
                <Paragraph>
                  年付可以享受16%的折扣，相当于免费使用2个月。其他功能和服务都是一样的。
                </Paragraph>
              </Card>
              <Card className="faq-card">
                <Title level={4}>提供发票吗？</Title>
                <Paragraph>
                  是的，我们会为所有付费用户提供正规发票。您可以在账户设置中下载发票。
                </Paragraph>
              </Card>
              <Card className="faq-card">
                <Title level={4}>有试用期吗？</Title>
                <Paragraph>
                  是的，专业版和企业版都提供14天的免费试用期。试用期内您可以体验所有功能，无需信用卡。
                </Paragraph>
              </Card>
            </Col>
          </Row>
        </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>{`
        .pricing-page {
          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
        }

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

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

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

        .billing-cycle {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 16px;
          margin-top: 32px;
        }

        .pricing-plans {
          padding: 60px 0;
          background: #fff;
        }

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

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

        .plan-card.popular {
          border: 2px solid #1890ff;
          transform: scale(1.05);
        }

        .plan-card.popular:hover {
          transform: scale(1.05) translateY(-8px);
        }

        .popular-badge {
          position: absolute;
          top: 0;
          right: 0;
          background: #1890ff;
          color: #fff;
          padding: 4px 16px;
          border-radius: 0 8px 0 8px;
          font-size: 12px;
          font-weight: bold;
          display: flex;
          align-items: center;
          gap: 4px;
        }

        .plan-header {
          text-align: center;
          margin-bottom: 24px;
        }

        .price {
          display: flex;
          align-items: baseline;
          justify-content: center;
          margin: 16px 0;
        }

        .price-value {
          font-size: 36px;
          font-weight: bold;
          color: #1890ff;
          margin: 0 4px;
        }

        .price-unit {
          font-size: 16px;
          color: #666;
        }

        .plan-features {
          margin: 24px 0;
        }

        .feature-item {
          display: flex;
          align-items: center;
          gap: 8px;
          margin-bottom: 12px;
        }

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

        .plan-button {
          width: 100%;
          margin-top: 24px;
        }

        .feature-comparison {
          padding: 80px 0;
          background: #f5f7fa;
        }

        .comparison-table {
          background: #fff;
          border-radius: 8px;
          overflow: hidden;
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        }

        .table-header {
          display: grid;
          grid-template-columns: 1fr 1fr 1fr 1fr;
          background: #f0f2f5;
          padding: 16px;
          font-weight: bold;
          border-bottom: 1px solid #e8e8e8;
        }

        .table-row {
          display: grid;
          grid-template-columns: 1fr 1fr 1fr 1fr;
          padding: 16px;
          border-bottom: 1px solid #e8e8e8;
        }

        .table-row:last-child {
          border-bottom: none;
        }

        .feature-cell {
          font-weight: 500;
        }

        .plan-cell {
          text-align: center;
        }

        .check-icon {
          color: #52c41a;
          font-size: 18px;
        }

        .close-icon {
          color: #ff4d4f;
          font-size: 18px;
        }

        .faq {
          padding: 80px 0;
          background: #fff;
        }

        .faq-card {
          padding: 24px;
          border-radius: 8px;
          transition: all 0.3s ease;
        }

        .faq-card:hover {
          box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
        }

        .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) {
          .pricing-header {
            padding: 60px 0 30px;
          }

          .pricing-plans {
            padding: 40px 0;
          }

          .feature-comparison {
            padding: 60px 0;
          }

          .table-header,
          .table-row {
            grid-template-columns: 1fr;
            gap: 8px;
          }

          .plan-cell {
            text-align: left;
            display: flex;
            align-items: center;
            gap: 8px;
          }

          .faq {
            padding: 60px 0;
          }

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

export default Pricing;