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 { Input } from '@/client/components/ui/input';
import { Label } from '@/client/components/ui/label';
import { RadioGroup, RadioGroupItem } from '@/client/components/ui/radio-group';
import { Check, CreditCard, Wallet } from 'lucide-react';
import { useUser } from '../hooks/AuthProvider';
import { useNavigate } from 'react-router-dom';

interface RechargePlan {
  id: string;
  name: string;
  price: number;
  count: number;
  description: string;
  popular?: boolean;
}

export default function RechargePage() {
  const { user } = useUser();
  const navigate = useNavigate();
  const [selectedPlan, setSelectedPlan] = useState<string>('standard');
  const [paymentMethod, setPaymentMethod] = useState<string>('alipay');

  const rechargePlans: RechargePlan[] = [
    {
      id: 'basic',
      name: '基础套餐',
      price: 29.9,
      count: 100,
      description: '每份0.30元，适合轻度使用'
    },
    {
      id: 'standard',
      name: '标准套餐',
      price: 99.9,
      count: 500,
      description: '每份0.20元，性价比之选',
      popular: true
    },
    {
      id: 'professional',
      name: '专业套餐',
      price: 299.9,
      count: 2000,
      description: '每份0.15元，大量处理首选'
    },
    {
      id: 'enterprise',
      name: '企业套餐',
      price: 999.9,
      count: 10000,
      description: '每份0.10元，企业级服务'
    }
  ];

  const selectedPlanData = rechargePlans.find(plan => plan.id === selectedPlan);

  const handlePayment = () => {
    // 这里应该调用支付接口
    alert('支付功能开发中，请选择套餐后联系客服完成支付');
  };

  if (!user) {
    return (
      <div className="min-h-screen flex items-center justify-center">
        <Card>
          <CardContent className="pt-6">
            <p>请先登录</p>
          </CardContent>
        </Card>
      </div>
    );
  }

  return (
    <div className="max-w-4xl mx-auto p-6">
      <div className="mb-6">
        <h1 className="text-3xl font-bold text-gray-900 mb-2">充值中心</h1>
        <p className="text-gray-600">选择适合您的充值套餐，立即开始高效文档处理</p>
      </div>

      <div className="grid gap-6">
        {/* 当前账户状态 */}
        <Card>
          <CardHeader>
            <CardTitle>会员状态</CardTitle>
            <CardDescription>您的当前会员信息</CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="grid grid-cols-2 gap-4">
              <div>
                <Label>到期时间</Label>
                <p className="text-2xl font-bold text-blue-600">
                  {user.expireAt ? new Date(user.expireAt).toLocaleDateString('zh-CN') : '未开通'}
                </p>
              </div>
              <div>
                <Label>剩余次数</Label>
                <p className="text-lg font-semibold">{user.remainingCount || 0} 次</p>
              </div>
            </div>
            <div>
              <Label>会员等级</Label>
              <p className="text-lg font-semibold">
                {user.userType === 'premium' ? '高级会员' : '普通会员'}
              </p>
            </div>
          </CardContent>
        </Card>

        {/* 充值套餐选择 */}
        <Card>
          <CardHeader>
            <CardTitle>选择套餐</CardTitle>
            <CardDescription>选择适合您的文档处理套餐</CardDescription>
          </CardHeader>
          <CardContent>
            <RadioGroup value={selectedPlan} onValueChange={setSelectedPlan} className="grid gap-4">
              {rechargePlans.map((plan) => (
                <Card 
                  key={plan.id} 
                  className={`cursor-pointer transition-all ${selectedPlan === plan.id ? 'border-blue-500' : 'border-gray-200'}`}
                >
                  <CardContent className="p-4">
                    <RadioGroupItem value={plan.id} id={plan.id} className="sr-only" />
                    <div className="flex items-center justify-between">
                      <div className="flex items-center space-x-3">
                        <RadioGroupItem value={plan.id} id={plan.id} />
                        <div>
                          <div className="flex items-center space-x-2">
                            <h3 className="font-semibold">{plan.name}</h3>
                            {plan.popular && (
                              <Badge className="bg-blue-500">推荐</Badge>
                            )}
                          </div>
                          <p className="text-sm text-gray-600">{plan.description}</p>
                        </div>
                      </div>
                      <div className="text-right">
                        <p className="text-2xl font-bold text-gray-900">¥{plan.price}</p>
                        <p className="text-sm text-gray-600">{plan.count}份</p>
                      </div>
                    </div>
                  </CardContent>
                </Card>
              ))}
            </RadioGroup>
          </CardContent>
        </Card>

        {/* 套餐详情 */}
        {selectedPlanData && (
          <Card>
            <CardHeader>
              <CardTitle>套餐详情</CardTitle>
              <CardDescription>您选择的套餐内容</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                <div className="grid grid-cols-2 gap-4">
                  <div>
                    <Label>套餐名称</Label>
                    <p className="font-semibold">{selectedPlanData.name}</p>
                  </div>
                  <div>
                    <Label>处理份数</Label>
                    <p className="font-semibold text-blue-600">{selectedPlanData.count} 份</p>
                  </div>
                </div>
                
                <div className="border-t pt-4">
                  <Label>价格计算</Label>
                  <div className="space-y-1">
                    <div className="flex justify-between">
                      <span>套餐价格</span>
                      <span>¥{selectedPlanData.price}</span>
                    </div>
                    <div className="flex justify-between font-semibold text-lg">
                      <span>总计</span>
                      <span>¥{selectedPlanData.price}</span>
                    </div>
                  </div>
                </div>

                <div className="bg-blue-50 p-4 rounded-lg">
                  <p className="text-sm text-blue-800">
                    <Check className="h-4 w-4 inline mr-1" />
                    购买后立即到账，有效期为一年，支持随时使用
                  </p>
                </div>
              </div>
            </CardContent>
          </Card>
        )}

        {/* 支付方式 */}
        <Card>
          <CardHeader>
            <CardTitle>支付方式</CardTitle>
            <CardDescription>选择您的支付方式</CardDescription>
          </CardHeader>
          <CardContent>
            <RadioGroup value={paymentMethod} onValueChange={setPaymentMethod}>
              <div className="flex items-center space-x-2">
                <RadioGroupItem value="alipay" id="alipay" />
                <Label htmlFor="alipay" className="flex items-center gap-2 cursor-pointer">
                  <Wallet className="h-4 w-4" />
                  支付宝
                </Label>
              </div>
              <div className="flex items-center space-x-2">
                <RadioGroupItem value="wechat" id="wechat" />
                <Label htmlFor="wechat" className="flex items-center gap-2 cursor-pointer">
                  <CreditCard className="h-4 w-4" />
                  微信支付
                </Label>
              </div>
            </RadioGroup>
          </CardContent>
        </Card>

        {/* 支付按钮 */}
        <Card>
          <CardContent className="pt-6">
            <Button 
              className="w-full bg-blue-600 hover:bg-blue-700"
              onClick={handlePayment}
              disabled={!selectedPlanData}
            >
              立即支付 ¥{selectedPlanData?.price || 0}
            </Button>
            <p className="text-sm text-gray-600 text-center mt-2">
              支付成功后，文档处理次数将立即到账
            </p>
          </CardContent>
        </Card>

        {/* 客服支持 */}
        <Card>
          <CardHeader>
            <CardTitle>客服支持</CardTitle>
            <CardDescription>遇到问题？我们随时为您服务</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="space-y-2 text-sm">
              <p><strong>客服微信：</strong> yuanheng-word</p>
              <p><strong>客服邮箱：</strong> support@yuanheng-word.com</p>
              <p><strong>工作时间：</strong> 周一至周五 9:00-18:00</p>
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  );
}