import { useState } from 'react';
import { Button } from '@/client/components/ui/button';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/client/components/ui/card';
import { Badge } from '@/client/components/ui/badge';
import { Check, Star } from 'lucide-react';
import { useNavigate } from 'react-router-dom';
import { useQuery } from '@tanstack/react-query';
import { membershipPlanClient } from '@/client/api';

export default function PricingPage() {
  const navigate = useNavigate();
  
  const { data: membershipPlans } = useQuery({
    queryKey: ['membership-plans-pricing'],
    queryFn: async () => {
      const response = await membershipPlanClient.$get();
      if (!response.ok) throw new Error('获取套餐失败');
      const data = await response.json();
      return data.data.filter((plan: any) => plan.isActive === 1).sort((a: any, b: any) => a.sortOrder - b.sortOrder);
    },
  });

  const getTypeLabel = (type: string) => {
    const labels = {
      single: '单次',
      monthly: '单月',
      yearly: '年',
      lifetime: '永久',
    };
    return labels[type as keyof typeof labels] || type;
  };

  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-50 via-white to-blue-50">
      {/* Header */}
      <header className="fixed top-0 left-0 right-0 z-50 bg-white/90 backdrop-blur-sm border-b">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between items-center h-16">
            <div className="flex items-center">
              <h1 className="text-xl font-bold text-gray-900">元亨Word - 收费标准</h1>
            </div>
            
            <nav className="hidden md:flex items-center space-x-8">
              <button 
                onClick={() => navigate('/')}
                className="text-gray-700 hover:text-blue-600 transition-colors font-medium"
              >
                首页
              </button>
              <button 
                onClick={() => navigate('/templates')}
                className="text-gray-700 hover:text-blue-600 transition-colors font-medium"
              >
                模板广场
              </button>
              <button 
                onClick={() => navigate('/login')}
                className="text-gray-700 hover:text-blue-600 transition-colors font-medium"
              >
                登录
              </button>
              <button 
                onClick={() => navigate('/register')}
                className="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors font-medium"
              >
                {/* 注册 */}
              </button>
            </nav>
          </div>
        </div>
      </header>

      {/* Hero Section */}
      <div className="pt-32 pb-16">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center">
            <h1 className="text-4xl md:text-5xl font-bold text-gray-900 mb-6">
              选择适合您的套餐
            </h1>
            <p className="text-xl text-gray-600 max-w-2xl mx-auto mb-8">
              灵活的价格方案，满足不同用户的需求。从个人用户到企业团队，总有一款适合您。
            </p>
            
            <div className="flex justify-center items-center space-x-4">
              <Badge variant="outline" className="text-lg px-4 py-2">
                新用户专享：首月立减50%
              </Badge>
            </div>
          </div>
        </div>
      </div>

      {/* Pricing Cards */}
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pb-20">
        <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
          {membershipPlans?.map((plan) => (
            <Card
              key={plan.id}
              className={`relative border-0 shadow-lg hover:shadow-xl transition-all duration-300 hover:-translate-y-1 ${
                plan.type === 'yearly' ? 'ring-2 ring-blue-500' : ''
              }`}
            >
              {plan.type === 'yearly' && (
                <Badge className="absolute -top-3 left-1/2 transform -translate-x-1/2 bg-gradient-to-r from-blue-600 to-purple-600 text-white">
                  <Star className="h-4 w-4 mr-1" />
                  推荐
                </Badge>
              )}
              
              <CardHeader>
                <div className="text-center">
                  <CardTitle className="text-2xl mb-2">{plan.name}</CardTitle>
                  <CardDescription className="text-sm">{plan.description}</CardDescription>
                  <div className="mt-4">
                    <span className="text-4xl font-bold text-gray-900">¥{plan.price}</span>
                  </div>
                  <p className="text-gray-600 text-sm mt-2">
                    {plan.durationDays === 0 ? '永久有效' :
                     plan.durationDays === 1 ? '24小时有效' :
                     `${plan.durationDays}天有效`}
                  </p>
                </div>
              </CardHeader>
              
              <CardContent>
                <ul className="space-y-2">
                  {plan.features?.map((feature: string, index: number) => (
                    <li key={index} className="flex items-start">
                      <Check className="h-4 w-4 text-green-500 mr-2 flex-shrink-0 mt-0.5" />
                      <span className="text-gray-700 text-sm">{feature}</span>
                    </li>
                  )) || (
                    <li className="flex items-start">
                      <Check className="h-4 w-4 text-green-500 mr-2 flex-shrink-0 mt-0.5" />
                      <span className="text-gray-700 text-sm">基础功能</span>
                    </li>
                  )}
                </ul>
                
                <Button
                  className="w-full mt-6 bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700"
                  onClick={() => navigate('/register')}
                >
                  立即选择
                </Button>
              </CardContent>
            </Card>
          ))}
        </div>
      </div>

      {/* FAQ Section */}
      <div className="bg-gray-50 py-20">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-16">
            <h2 className="text-3xl font-bold text-gray-900 mb-4">常见问题</h2>
            <p className="text-gray-600">关于收费标准的详细说明</p>
          </div>
          
          <div className="max-w-3xl mx-auto space-y-6">
            <div className="bg-white p-6 rounded-lg shadow-sm">
              <h3 className="font-semibold text-lg mb-2">如何计费？</h3>
              <p className="text-gray-600">按月订阅，从激活当天开始计算。</p>
            </div>
            
            <div className="bg-white p-6 rounded-lg shadow-sm">
              <h3 className="font-semibold text-lg mb-2">可以升级套餐吗？</h3>
              <p className="text-gray-600">随时可以升级套餐，差价按剩余天数折算。</p>
            </div>
                                
            <div className="bg-white p-6 rounded-lg shadow-sm">
              <h3 className="font-semibold text-lg mb-2">有免费试用吗？</h3>
              <p className="text-gray-600">可以跟管理员获取体验账号，体验全部功能。</p>
            </div>
             <div className="bg-white p-6 rounded-lg shadow-sm">
               <h3 className="font-semibold text-lg mb-2">如何付款？</h3>
               <p className="text-gray-600 mb-4">扫描下方二维码完成付款后，将付款截图发送给管理员确认：</p>
               <div className="flex flex-col items-center">
                 <div className="grid grid-cols-2 gap-8 mb-6">
                   <div className="bg-green-50 p-4 rounded-lg">
                     <p className="text-center text-sm mb-2">付款二维码</p>
                     <img src="/二维收款码.jpg" alt="微信支付二维码" className="w-48 h-48 object-contain mx-auto" />
                   </div>
                   <div className="bg-blue-50 p-4 rounded-lg">
                     <p className="text-center text-sm mb-2">管理员微信</p>
                     <img src="/管理员微信.jpg" alt="管理员微信二维码" className="w-48 h-48 object-contain mx-auto" />
                   </div>
                 </div>
                 <p className="text-gray-600 mb-2">管理员微信：<span className="font-medium">andree123654</span></p>
                 <p className="text-gray-500 text-sm">请在工作日9:00-18:00联系管理员进行确认，通常10分钟内可完成处理</p>
               </div>
             </div>
          </div>
        </div>
      </div>

      {/* Footer */}
      <footer className="bg-gray-900 text-white py-12">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center">
            <h3 className="text-2xl font-bold mb-4">元亨Word批量处理工具</h3>
            <p className="text-gray-400 mb-6">
              让每一份文档都充满个性，让批量处理变得简单
            </p>
            <div className="flex justify-center space-x-6">
              <Button 
                variant="ghost" 
                className="text-white hover:text-blue-400"
                onClick={() => navigate('/')}
              >
                返回首页
              </Button>
            </div>
          </div>
        </div>
      </footer>
    </div>
  );
}