"use client"

import { Button } from './ui/button'
import { Download, Play, Target, Eye, Users, Zap, Gamepad2, Trophy, Star, User, MapPin, HelpCircle, LucideIcon } from 'lucide-react'
import { connectToGameServer } from '../lib/mtaServer'
import { useTranslations } from 'next-intl'

interface Step {
  number: number
  title: string
  description: string
  logos?: (LucideIcon | string)[]
  status?: string
  background: string
  icon: LucideIcon
  buttonText?: string
  buttonIcon?: LucideIcon
  character?: {
    hat: string
    shirt: string
    flag: string
  }
  helpText?: string
}

export default function HowToPlay() {
  const t = useTranslations('howToPlay')
  
  const steps: Step[] = [
    {
      number: 1,
      title: t('step1.title'),
      description: t('step1.description'),
      logos: ["sanlogo.webp", "rockstarlogo.webp", "steamlogo.webp"],
      status: t('loading'),
      background: "from-gray-900/80 to-black/80",
      icon: Target
    },
    {
      number: 2,
      title: t('step2.title'),
      description: t('step2.description'),
      buttonText: t('step2.button'),
      buttonIcon: Download,
      background: "from-gray-900/80 to-black/80",
      icon: Zap,
      character: {
        hat: "orange",
        shirt: "white",
        flag: "🇺🇸"
      }
    },
    /*
    {
      number: 3,
      title: t('step3.title'),
      description: t('step3.description'),
      buttonText: t('step3.button'),
      buttonIcon: Download,
      background: "from-gray-900/80 to-black/80",
      icon: Gamepad2
    },
    */
    {
      number: 3,
      title: t('step4.title'),
      description: t('step4.description'),
      buttonText: t('step4.button'),
      buttonIcon: Play,
      background: "from-gray-900/80 to-black/80",
      icon: Users,
      helpText: t('step4.helpText')
    }
  ]

  return (
    <section id="how-to-play" className="py-20 relative overflow-hidden">
      {/* Background Image */}
      <div 
        className="absolute inset-0 bg-cover bg-center bg-no-repeat opacity-20"
        style={{
          backgroundImage: 'url(/images/background2.webp)'
        }}
      />
      {/* Background Elements */}
      <div className="absolute inset-0 opacity-10">
        <div className="absolute top-20 left-10 w-32 h-32 bg-green-500 rounded-full blur-3xl"></div>
        <div className="absolute bottom-20 right-10 w-40 h-40 bg-blue-500 rounded-full blur-3xl"></div>
        <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-60 h-60 bg-purple-500 rounded-full blur-3xl"></div>
      </div>

      <div className="container mx-auto px-4 relative z-10">
        {/* Section Header */}
        <div className="text-center mb-16">
          <h2 className="text-5xl md:text-6xl font-bold text-white mb-6">
            {t('title', { brand: 'UrbanGamers' })}
          </h2>
          
          {/* Horizontal Line Separator */}
          <div className="w-full max-w-4xl mx-auto mb-8">
            <div className="h-px bg-gradient-to-r from-transparent via-[#0087FF]/40 to-transparent"></div>
          </div>
          <p className="text-xl text-gray-400 max-w-3xl mx-auto">
            {t('tagline')}
          </p>
        </div>

        {/* Steps Grid */}
        <div className="grid md:grid-cols-3 gap-8 max-w-7xl mx-auto">
          {steps.map((step, index) => (
            <div
              key={step.number}
              className={`relative group transition-all duration-500 hover:scale-105 ${
                index === 1 ? 'md:transform md:scale-105' : ''
              }`}
            >
              {/* Step Number */}
              <div className="absolute -top-4 -left-4 w-12 h-12 bg-[#0087FF]/15 text-[#8ab4ff] font-bold text-2xl rounded-xl flex items-center justify-center z-20 shadow-lg">
                {step.number}
              </div>

                              {/* Card */}
                <div className={`bg-[#0f1620]/70 backdrop-blur-sm rounded-2xl p-8 h-full relative overflow-hidden border border-[color:var(--border)] hover:border-[#0087FF]/40 transition-all duration-300 flex flex-col justify-between min-h-[420px] md:min-h-[460px]`}>
                  
                  {/* Background Image for Install SA-MP */}
                  {step.number === 2 && (
                    <div className="absolute inset-0">
                      <img 
                        src="/images/InstallMTAback.webp" 
                        alt="Install SA-MP Background" 
                        className="w-full h-full object-cover"
                      />
                      <div className="absolute inset-0 bg-black/40"></div>
                    </div>
                  )}
                  
                  {/* Background Image for Join the Server */}
                  {step.number === 3 && (
                    <div className="absolute inset-0">
                      <img 
                        src="/images/joinserver.webp" 
                        alt="Join Server Background" 
                        className="w-full h-full object-cover"
                      />
                      <div className="absolute inset-0 bg-black/40"></div>
                    </div>
                  )}
                  
                  {/* Background Pattern */}
                  <div className="absolute inset-0 opacity-20">
                    {step.number === 2 && (
                      <div className="absolute inset-0 bg-gradient-to-br from-[#002647] to-[#0087FF] opacity-20"></div>
                    )}
                  </div>

                {/* Content */}
                <div className="relative z-10 flex flex-col h-full">
                  <h3 className="text-2xl font-bold text-white mb-4">{step.title}</h3>
                  <p className="text-gray-300 mb-6 leading-relaxed">{step.description}</p>

                  {/* Step-specific content */}
                  {step.number === 1 && step.logos && (
                    <div className="relative h-full mt-auto">
                      <div className="flex justify-center space-x-4 mb-4">
                        {step.logos.map((logo, idx) => (
                          <div key={idx} className="w-12 h-12 bg-[#0f1620] rounded-xl flex items-center justify-center border border-[#0087FF]/10">
                            {typeof logo === 'string' ? (
                              <img 
                                src={`/images/${logo}`} 
                                alt={`Logo ${idx + 1}`} 
                                className="w-8 h-8 object-contain"
                              />
                            ) : (
                              <div className="w-6 h-6" style={{ color: '#8ab4ff' }}>
                                {/* Icon component would render here */}
                              </div>
                            )}
                          </div>
                        ))}
                      </div>
                      
                      {/* Large San Andreas Logo Below Icons */}
                      <div className="flex justify-center mb-4">
                        <img 
                          src="/images/sanlogo.webp" 
                          alt="Grand Theft Auto San Andreas" 
                          className="w-44 h-auto object-contain"
                        />
                      </div>
                      

                      
                      {/* Loading Image Below MTA Logo */}
                      <div className="flex justify-center">
                        <img 
                          src="/images/loading.webp" 
                          alt="Loading" 
                          className="w-40 h-auto object-contain"
                        />
                      </div>
                      


                    </div>
                  )}

                  {step.number === 2 && step.buttonIcon && step.buttonText && (
                    <div className="space-y-3 mt-auto">
                      {/* Download Button First */}
                      <Button 
                        size="lg" 
                        className="w-full bg-primary text-primary-foreground hover:bg-primary/90 font-bold py-3 px-6 rounded-xl transition-all duration-300 transform hover:scale-105 shadow-lg"
                        onClick={() => window.open('https://www.sa-mp.mp/downloads/', '_blank')}
                      >
                        <step.buttonIcon className="w-5 h-5 mr-2" />
                        {step.buttonText}
                      </Button>
                      
                      {/* SA-MP Logo Second */}
                      <div className="flex justify-center mb-4">
                        <img 
                          src="/images/mtalogo.webp" 
                          alt="San Andreas Multiplayer" 
                          className="w-44 h-auto object-contain"
                        />
                      </div>
                      
                      {/* Loading2 Image Below MTA Logo */}
                      <div className="flex justify-center">
                        <img 
                          src="/images/loading2.webp" 
                          alt="Loading" 
                          className="w-40 h-auto object-contain"
                        />
                      </div>
                      
                    </div>
                  )}

                  {/*
                  {step.number === 3 && step.buttonIcon && step.buttonText && (
                    <div className="space-y-6 mt-auto">
                      <Button 
                        size="lg" 
                        className="w-full bg-primary text-primary-foreground hover:bg-primary/90 font-bold py-3 px-6 rounded-xl transition-all duration-300 transform hover:scale-105 shadow-lg"
                        onClick={() => window.open('', '_blank')}
                      >
                        <step.buttonIcon className="w-5 h-5 mr-2" />
                        {step.buttonText}
                      </Button>
                      <div className="flex flex-col items-center space-y-3">
                        <img 
                          src="/images/logo.webp" 
                          alt="UrbanGamers Logo" 
                          className="w-28 h-auto object-contain"
                        />
                        <img 
                          src="/images/loading4.webp" 
                          alt="Loading" 
                          className="w-36 h-auto object-contain"
                        />
                      </div>
                    </div>
                  )}
                  */}

                  {step.number === 3 && step.buttonIcon && step.buttonText && step.helpText && (
                    <div className="space-y-6 mt-auto">
                      <Button 
                        size="lg" 
                        className="w-full bg-secondary text-secondary-foreground hover:bg-secondary/80 font-bold py-3 px-6 rounded-xl transition-all duration-200 transform hover:scale-105 shadow-lg"
                        onClick={() => connectToGameServer()}
                      >
                        <step.buttonIcon className="w-5 h-5 mr-2" />
                        {step.buttonText}
                      </Button>
                      
                      {/* Loading3 Image Below Button - Little More Down */}
                      <div className="flex justify-center">
                        <img 
                          src="/images/loading3.webp" 
                          alt="Loading" 
                          className="w-40 h-auto object-contain"
                        />
                      </div>
                    </div>
                  )}
                </div>
              </div>
            </div>
          ))}
        </div>


      </div>
    </section>
  )
}