'use client';

import { useState, useEffect } from 'react';
import Link from 'next/link';
import { useRouter, useSearchParams } from 'next/navigation';
import { motion, AnimatePresence, useReducedMotion } from 'framer-motion';
import {
  Gamepad2,
  Flag,
  ArrowRight,
  Shield,
  Link as LinkIcon,
  User,
  Trophy,
  BarChart3,
  CheckCircle2,
} from 'lucide-react';

import Card from '@/components/ui/Card';
import Button from '@/components/ui/Button';
import Heading from '@/components/ui/Heading';
import { useAuth } from '@/lib/auth/AuthContext';

interface ConnectionStep {
  id: number;
  icon: typeof Gamepad2;
  title: string;
  description: string;
}

const CONNECTION_STEPS: ConnectionStep[] = [
  {
    id: 1,
    icon: Gamepad2,
    title: 'Connect iRacing',
    description: 'Authorize GridPilot to access your profile',
  },
  {
    id: 2,
    icon: User,
    title: 'Import Profile',
    description: 'We fetch your racing stats and history',
  },
  {
    id: 3,
    icon: Trophy,
    title: 'Sync Achievements',
    description: 'Your licenses, iRating, and results',
  },
  {
    id: 4,
    icon: BarChart3,
    title: 'Ready to Race',
    description: 'Access full GridPilot features',
  },
];

const BENEFITS = [
  'Automatic profile creation with your iRacing data',
  'Real-time stats sync including iRating and Safety Rating',
  'Import your racing history and achievements',
  'No manual data entry required',
  'Verified driver identity in leagues',
];

export default function IracingAuthPage() {
  const router = useRouter();
  const searchParams = useSearchParams();
  const { session } = useAuth();
  const returnTo = searchParams.get('returnTo') ?? '/dashboard';
  const startUrl = `/auth/iracing/start?returnTo=${encodeURIComponent(returnTo)}`;
  
  const shouldReduceMotion = useReducedMotion();
  const [isMounted, setIsMounted] = useState(false);
  const [activeStep, setActiveStep] = useState(0);
  const [isHovering, setIsHovering] = useState(false);

  // Check if user is already authenticated
  useEffect(() => {
    if (session) {
      router.replace('/dashboard');
    }
  }, [session, router]);

  useEffect(() => {
    setIsMounted(true);
  }, []);

  useEffect(() => {
    if (!isMounted || isHovering) return;
    
    const interval = setInterval(() => {
      setActiveStep((prev) => (prev + 1) % CONNECTION_STEPS.length);
    }, 2500);

    return () => clearInterval(interval);
  }, [isMounted, isHovering]);

  return (
    <main className="min-h-screen bg-deep-graphite flex items-center justify-center px-4 py-12">
      {/* Background Pattern */}
      <div className="absolute inset-0 bg-gradient-to-br from-primary-blue/5 via-transparent to-purple-600/5" />
      <div className="absolute inset-0 opacity-5">
        <div className="absolute inset-0" style={{
          backgroundImage: `url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.4'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")`,
        }} />
      </div>

      <div className="relative w-full max-w-2xl">
        {/* Header */}
        <div className="text-center mb-8">
          <div className="flex justify-center gap-4 mb-6">
            <motion.div 
              initial={{ scale: 0.8, opacity: 0 }}
              animate={{ scale: 1, opacity: 1 }}
              transition={{ delay: 0.1 }}
              className="flex h-14 w-14 items-center justify-center rounded-xl bg-gradient-to-br from-primary-blue/20 to-purple-600/10 border border-primary-blue/30"
            >
              <Flag className="w-7 h-7 text-primary-blue" />
            </motion.div>
            <motion.div
              initial={{ scale: 0, opacity: 0 }}
              animate={{ scale: 1, opacity: 1 }}
              transition={{ delay: 0.2 }}
              className="flex items-center"
            >
              <LinkIcon className="w-6 h-6 text-gray-500" />
            </motion.div>
            <motion.div 
              initial={{ scale: 0.8, opacity: 0 }}
              animate={{ scale: 1, opacity: 1 }}
              transition={{ delay: 0.3 }}
              className="flex h-14 w-14 items-center justify-center rounded-xl bg-gradient-to-br from-orange-500/20 to-red-600/10 border border-orange-500/30"
            >
              <Gamepad2 className="w-7 h-7 text-orange-400" />
            </motion.div>
          </div>
          <Heading level={1} className="mb-3">Connect Your iRacing Account</Heading>
          <p className="text-gray-400 text-lg max-w-md mx-auto">
            Link your iRacing profile for automatic stats sync and verified driver identity.
          </p>
        </div>

        <Card className="relative overflow-hidden">
          {/* Background accent */}
          <div className="absolute top-0 right-0 w-48 h-48 bg-gradient-to-bl from-primary-blue/5 to-transparent rounded-bl-full" />
          <div className="absolute bottom-0 left-0 w-32 h-32 bg-gradient-to-tr from-orange-500/5 to-transparent rounded-tr-full" />

          <div className="relative">
            {/* Connection Flow Animation */}
            <div 
              className="bg-iron-gray/50 rounded-xl border border-charcoal-outline p-6 mb-6"
              onMouseEnter={() => setIsHovering(true)}
              onMouseLeave={() => setIsHovering(false)}
            >
              <p className="text-xs text-gray-500 text-center mb-4">Connection Flow</p>
              
              {/* Steps */}
              <div className="flex justify-between items-start gap-2">
                {CONNECTION_STEPS.map((step, index) => {
                  const isActive = index === activeStep;
                  const isCompleted = index < activeStep;
                  const StepIcon = step.icon;

                  return (
                    <motion.button
                      key={step.id}
                      onClick={() => setActiveStep(index)}
                      className="flex flex-col items-center text-center flex-1 cursor-pointer"
                      whileHover={{ scale: 1.05 }}
                      whileTap={{ scale: 0.95 }}
                    >
                      <motion.div
                        className={`w-12 h-12 rounded-xl border flex items-center justify-center mb-2 transition-all duration-300 ${
                          isActive 
                            ? 'bg-primary-blue/20 border-primary-blue shadow-[0_0_15px_rgba(25,140,255,0.3)]' 
                            : isCompleted
                              ? 'bg-performance-green/20 border-performance-green/50'
                              : 'bg-deep-graphite border-charcoal-outline'
                        }`}
                        animate={isActive && !shouldReduceMotion ? {
                          scale: [1, 1.08, 1],
                          transition: { duration: 1, repeat: Infinity }
                        } : {}}
                      >
                        {isCompleted ? (
                          <CheckCircle2 className="w-5 h-5 text-performance-green" />
                        ) : (
                          <StepIcon className={`w-5 h-5 ${isActive ? 'text-primary-blue' : 'text-gray-500'}`} />
                        )}
                      </motion.div>
                      <h4 className={`text-xs font-medium transition-colors ${
                        isActive ? 'text-white' : 'text-gray-500'
                      }`}>
                        {step.title}
                      </h4>
                    </motion.button>
                  );
                })}
              </div>

              {/* Active Step Description */}
              <AnimatePresence mode="wait">
                <motion.div
                  key={activeStep}
                  initial={{ opacity: 0, y: 5 }}
                  animate={{ opacity: 1, y: 0 }}
                  exit={{ opacity: 0, y: -5 }}
                  transition={{ duration: 0.2 }}
                  className="mt-4 text-center"
                >
                  <p className="text-sm text-gray-400">
                    {CONNECTION_STEPS[activeStep]?.description}
                  </p>
                </motion.div>
              </AnimatePresence>
            </div>

            {/* Benefits List */}
            <div className="mb-6">
              <h3 className="text-sm font-medium text-gray-300 mb-3">What you'll get:</h3>
              <ul className="space-y-2">
                {BENEFITS.map((benefit, index) => (
                  <li
                    key={index}
                    className="flex items-start gap-2 text-sm text-gray-400"
                  >
                    <CheckCircle2 className="w-4 h-4 text-performance-green flex-shrink-0 mt-0.5" />
                    {benefit}
                  </li>
                ))}
              </ul>
            </div>

            {/* Connect Button */}
            <Link href={startUrl} className="block">
              <Button
                variant="primary"
                className="w-full flex items-center justify-center gap-3 py-4"
              >
                <Gamepad2 className="w-5 h-5" />
                <span>Connect iRacing Account</span>
                <ArrowRight className="w-4 h-4" />
              </Button>
            </Link>

            {/* Trust Indicators */}
            <div className="mt-6 pt-6 border-t border-charcoal-outline">
              <div className="flex items-center justify-center gap-6 text-xs text-gray-500">
                <div className="flex items-center gap-2">
                  <Shield className="w-4 h-4" />
                  <span>Secure OAuth connection</span>
                </div>
                <div className="flex items-center gap-2">
                  <LinkIcon className="w-4 h-4" />
                  <span>Read-only access</span>
                </div>
              </div>
            </div>

            {/* Alternative */}
            <p className="mt-6 text-center text-sm text-gray-500">
              Don't have iRacing?{' '}
              <Link href="/auth/signup" className="text-primary-blue hover:underline">
                Create account with email
              </Link>
            </p>
          </div>
        </Card>

        {/* Footer */}
        <p className="mt-6 text-center text-xs text-gray-500">
          GridPilot only requests read access to your iRacing profile.
          <br />
          We never access your payment info or modify your account.
        </p>
      </div>
    </main>
  );
}