'use client';

import { useState } from 'react';
import { Header } from '@/components/header';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { 
  Check, 
  X, 
  Zap, 
  Crown, 
  Gift,
  Upload,
  Clock,
  Shield,
  Users,
  Mail,
  Settings,
  Infinity
} from 'lucide-react';

interface PricingTier {
  name: string;
  price: string;
  period: string;
  description: string;
  icon: React.ComponentType<any>;
  popular?: boolean;
  features: {
    name: string;
    included: boolean;
    value?: string;
  }[];
  cta: string;
  color: string;
}

export default function PricingPage() {
  const [isAnnual, setIsAnnual] = useState(false);

  const tiers: PricingTier[] = [
    {
      name: 'Free',
      price: '$0',
      period: 'forever',
      description: 'Perfect for personal use and trying out Transfer Tribe',
      icon: Gift,
      color: 'from-slate-500 to-slate-600',
      cta: 'Get Started Free',
      features: [
        { name: 'File size limit', included: true, value: '2GB per transfer' },
        { name: 'Monthly transfers', included: true, value: '10 transfers' },
        { name: 'Transfer expiration', included: true, value: '48 hours' },
        { name: 'Password protection', included: true },
        { name: 'Email notifications', included: true },
        { name: 'Basic support', included: true },
        { name: 'Custom branding', included: false },
        { name: 'Extended expiration', included: false },
        { name: 'Priority support', included: false },
        { name: 'Advanced analytics', included: false },
      ],
    },
    {
      name: 'Rookie',
      price: isAnnual ? '$8' : '$10',
      period: isAnnual ? 'per month (billed annually)' : 'per month',
      description: 'Ideal for professionals and small teams who need more flexibility',
      icon: Zap,
      popular: true,
      color: 'from-blue-500 to-indigo-600',
      cta: 'Start Free Trial',
      features: [
        { name: 'File size limit', included: true, value: '10GB per transfer' },
        { name: 'Monthly transfers', included: true, value: '100 transfers' },
        { name: 'Transfer expiration', included: true, value: 'Up to 7 days' },
        { name: 'Password protection', included: true },
        { name: 'Email notifications', included: true },
        { name: 'Priority support', included: true },
        { name: 'Download tracking', included: true },
        { name: 'Transfer history', included: true, value: '6 months' },
        { name: 'Custom branding', included: false },
        { name: 'Advanced analytics', included: false },
      ],
    },
    {
      name: 'Pro',
      price: isAnnual ? '$20' : '$25',
      period: isAnnual ? 'per month (billed annually)' : 'per month',
      description: 'For businesses and power users who need maximum control',
      icon: Crown,
      color: 'from-purple-500 to-pink-600',
      cta: 'Start Free Trial',
      features: [
        { name: 'File size limit', included: true, value: 'Unlimited' },
        { name: 'Monthly transfers', included: true, value: 'Unlimited' },
        { name: 'Transfer expiration', included: true, value: 'Custom (1-30 days)' },
        { name: 'Password protection', included: true },
        { name: 'Email notifications', included: true },
        { name: 'Priority support', included: true },
        { name: 'Download tracking', included: true },
        { name: 'Transfer history', included: true, value: 'Unlimited' },
        { name: 'Custom branding', included: true },
        { name: 'Advanced analytics', included: true },
      ],
    },
  ];

  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-100 dark:from-slate-900 dark:via-slate-800 dark:to-slate-900">
      <Header />
      
      <main className="container mx-auto px-4 py-12">
        <div className="text-center mb-12">
          <h1 className="text-4xl md:text-5xl font-bold bg-gradient-to-r from-slate-900 via-blue-600 to-indigo-600 dark:from-slate-100 dark:via-blue-400 dark:to-indigo-400 bg-clip-text text-transparent mb-4">
            Choose Your Plan
          </h1>
          <p className="text-xl text-slate-600 dark:text-slate-400 max-w-2xl mx-auto mb-8">
            Start free and upgrade as you grow. All plans include our core security features and 99.9% uptime guarantee.
          </p>
          
          <div className="flex items-center justify-center gap-4 mb-8">
            <span className={`text-sm font-medium ${!isAnnual ? 'text-slate-900 dark:text-slate-100' : 'text-slate-500 dark:text-slate-400'}`}>
              Monthly
            </span>
            <button
              onClick={() => setIsAnnual(!isAnnual)}
              className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${
                isAnnual ? 'bg-blue-600' : 'bg-slate-200 dark:bg-slate-700'
              }`}
            >
              <span
                className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
                  isAnnual ? 'translate-x-6' : 'translate-x-1'
                }`}
              />
            </button>
            <span className={`text-sm font-medium ${isAnnual ? 'text-slate-900 dark:text-slate-100' : 'text-slate-500 dark:text-slate-400'}`}>
              Annual
            </span>
            {isAnnual && (
              <Badge className="bg-green-100 text-green-800 dark:bg-green-900/20 dark:text-green-400">
                Save 20%
              </Badge>
            )}
          </div>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-7xl mx-auto">
          {tiers.map((tier, index) => {
            const IconComponent = tier.icon;
            return (
              <Card
                key={tier.name}
                className={`relative bg-white/80 dark:bg-slate-800/80 backdrop-blur-sm border-white/20 dark:border-slate-700/20 hover:bg-white/90 dark:hover:bg-slate-800/90 transition-all ${
                  tier.popular ? 'ring-2 ring-blue-500 scale-105' : ''
                }`}
              >
                {tier.popular && (
                  <div className="absolute -top-4 left-1/2 transform -translate-x-1/2">
                    <Badge className="bg-gradient-to-r from-blue-500 to-indigo-600 text-white px-4 py-1">
                      Most Popular
                    </Badge>
                  </div>
                )}
                
                <CardHeader className="text-center pb-8">
                  <div className={`w-16 h-16 bg-gradient-to-br ${tier.color} rounded-full flex items-center justify-center mx-auto mb-4`}>
                    <IconComponent className="w-8 h-8 text-white" />
                  </div>
                  <CardTitle className="text-2xl font-bold text-slate-900 dark:text-slate-100">
                    {tier.name}
                  </CardTitle>
                  <div className="mt-4">
                    <span className="text-4xl font-bold text-slate-900 dark:text-slate-100">
                      {tier.price}
                    </span>
                    <span className="text-slate-500 dark:text-slate-400 ml-2">
                      {tier.period}
                    </span>
                  </div>
                  <p className="text-slate-600 dark:text-slate-400 mt-4">
                    {tier.description}
                  </p>
                </CardHeader>
                
                <CardContent className="space-y-6">
                  <Button 
                    className={`w-full ${
                      tier.popular 
                        ? 'bg-gradient-to-r from-blue-500 to-indigo-600 hover:from-blue-600 hover:to-indigo-700' 
                        : 'bg-gradient-to-r from-slate-600 to-slate-700 hover:from-slate-700 hover:to-slate-800'
                    }`}
                    size="lg"
                  >
                    {tier.cta}
                  </Button>
                  
                  <div className="space-y-4">
                    <h4 className="font-semibold text-slate-900 dark:text-slate-100">
                      What's included:
                    </h4>
                    <ul className="space-y-3">
                      {tier.features.map((feature, featureIndex) => (
                        <li key={featureIndex} className="flex items-start gap-3">
                          {feature.included ? (
                            <Check className="w-5 h-5 text-green-500 mt-0.5 flex-shrink-0" />
                          ) : (
                            <X className="w-5 h-5 text-slate-400 mt-0.5 flex-shrink-0" />
                          )}
                          <div className="flex-1">
                            <span className={`text-sm ${
                              feature.included 
                                ? 'text-slate-700 dark:text-slate-300' 
                                : 'text-slate-400 dark:text-slate-500'
                            }`}>
                              {feature.name}
                            </span>
                            {feature.value && (
                              <span className={`block text-xs ${
                                feature.included 
                                  ? 'text-slate-500 dark:text-slate-400' 
                                  : 'text-slate-400 dark:text-slate-500'
                              }`}>
                                {feature.value}
                              </span>
                            )}
                          </div>
                        </li>
                      ))}
                    </ul>
                  </div>
                </CardContent>
              </Card>
            );
          })}
        </div>

        <div className="mt-16 text-center">
          <h2 className="text-2xl font-bold text-slate-900 dark:text-slate-100 mb-8">
            Why Choose Transfer Tribe?
          </h2>
          <div className="grid grid-cols-1 md:grid-cols-4 gap-8 max-w-4xl mx-auto">
            <div className="flex flex-col items-center space-y-3">
              <div className="w-12 h-12 bg-gradient-to-br from-green-400 to-emerald-600 rounded-full flex items-center justify-center">
                <Shield className="w-6 h-6 text-white" />
              </div>
              <h3 className="font-semibold text-slate-900 dark:text-slate-100">Enterprise Security</h3>
              <p className="text-sm text-slate-600 dark:text-slate-400 text-center">
                Bank-level encryption and security protocols
              </p>
            </div>
            
            <div className="flex flex-col items-center space-y-3">
              <div className="w-12 h-12 bg-gradient-to-br from-blue-400 to-blue-600 rounded-full flex items-center justify-center">
                <Upload className="w-6 h-6 text-white" />
              </div>
              <h3 className="font-semibold text-slate-900 dark:text-slate-100">Lightning Fast</h3>
              <p className="text-sm text-slate-600 dark:text-slate-400 text-center">
                Powered by Google Cloud for maximum speed
              </p>
            </div>
            
            <div className="flex flex-col items-center space-y-3">
              <div className="w-12 h-12 bg-gradient-to-br from-purple-400 to-purple-600 rounded-full flex items-center justify-center">
                <Users className="w-6 h-6 text-white" />
              </div>
              <h3 className="font-semibold text-slate-900 dark:text-slate-100">Team Friendly</h3>
              <p className="text-sm text-slate-600 dark:text-slate-400 text-center">
                Perfect for individuals and teams of any size
              </p>
            </div>
            
            <div className="flex flex-col items-center space-y-3">
              <div className="w-12 h-12 bg-gradient-to-br from-orange-400 to-red-600 rounded-full flex items-center justify-center">
                <Mail className="w-6 h-6 text-white" />
              </div>
              <h3 className="font-semibold text-slate-900 dark:text-slate-100">Email Integration</h3>
              <p className="text-sm text-slate-600 dark:text-slate-400 text-center">
                Seamless email delivery and notifications
              </p>
            </div>
          </div>
        </div>

        <div className="mt-16 bg-white/60 dark:bg-slate-800/60 backdrop-blur-sm rounded-2xl p-8 text-center border border-white/20 dark:border-slate-700/20">
          <h2 className="text-2xl font-bold text-slate-900 dark:text-slate-100 mb-4">
            Need a Custom Solution?
          </h2>
          <p className="text-slate-600 dark:text-slate-400 mb-6 max-w-2xl mx-auto">
            For enterprise customers with specific requirements, we offer custom plans with dedicated support, 
            advanced integrations, and tailored features.
          </p>
          <Button variant="outline" size="lg" className="mr-4">
            Contact Sales
          </Button>
          <Button variant="outline" size="lg">
            View Enterprise Features
          </Button>
        </div>

        <div className="mt-12 text-center">
          <p className="text-sm text-slate-500 dark:text-slate-400">
            All plans include a 14-day free trial. No credit card required. Cancel anytime.
          </p>
        </div>
      </main>
    </div>
  );
}