"use client"

import { useState } from "react"
import Link from "next/link"
import { useRouter } from "next/navigation"
import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { 
  Zap, 
  User, 
  Building2, 
  CircleDollarSign, 
  ArrowRight, 
  ArrowLeft,
  Check,
  Sparkles
} from "lucide-react"
import Image from "next/image"
import { useSelector } from "react-redux"

const BASE_URL = process.env.NEXT_PUBLIC_BASE_URL

const userTypes = [
  {
    id: "individual",
    title: "Individual",
    description: "Students, professionals, or anyone with creative business ideas",
    icon: User,
    color: "bg-primary/10 border-primary/30 hover:bg-primary/20",
    activeColor: "bg-primary/20 border-primary ring-2 ring-primary/30",
    iconColor: "text-primary",
  },
  {
    id: "business",
    title: "Business",
    description: "Companies looking for innovative ideas and partnerships",
    icon: Building2,
    color: "bg-amber-500/10 border-amber-500/30 hover:bg-amber-500/20",
    activeColor: "bg-amber-500/20 border-amber-500 ring-2 ring-amber-500/30",
    iconColor: "text-amber-400",
  },
  {
    id: "investor",
    title: "Investor",
    description: "Angel investors and VCs looking to fund promising ideas",
    icon: CircleDollarSign,
    color: "bg-emerald-500/10 border-emerald-500/30 hover:bg-emerald-500/20",
    activeColor: "bg-emerald-500/20 border-emerald-500 ring-2 ring-emerald-500/30",
    iconColor: "text-emerald-400",
  },
]

const industries = [
  "Technology & Software",
  "E-commerce & Retail",
  "Healthcare & Wellness",
  "Finance & Fintech",
  "Education & EdTech",
  "Food & Beverage",
  "Real Estate",
  "Travel & Hospitality",
  "Manufacturing",
  "Media & Entertainment",
  "Agriculture & AgriTech",
  "Transportation & Logistics",
  "Fashion & Lifestyle",
  "Energy & CleanTech",
  "Sports & Fitness",
  "Social Impact & NGO",
  "AI & Machine Learning",
  "Blockchain & Web3",
  "Gaming",
  "SaaS & B2B Services",
]

export default function GetStartedPage() {
  const router = useRouter()
  const [step, setStep] = useState(1)
  const [userType, setUserType] = useState<string | null>(null)
  const [username, setUsername] = useState("")
  const [generatedUsername, setGeneratedUsername] = useState("user_" + Math.random().toString(36).substring(2, 10))
  const [selectedIndustries, setSelectedIndustries] = useState<string[]>([])
  const dynamicImages = useSelector((state:any) => state.user?.dynamicImages)


  const toggleIndustry = (industry: string) => {
    if (selectedIndustries.includes(industry)) {
      setSelectedIndustries(selectedIndustries.filter((i) => i !== industry))
    } else if (selectedIndustries.length < 5) {
      setSelectedIndustries([...selectedIndustries, industry])
    }
  }

  const handleComplete = () => {
    router.push("/")
  }

  return (
    <div className="min-h-screen bg-background flex">
      {/* Left Side - Branding */}
      <div className="hidden lg:flex lg:w-2/5 bg-card relative overflow-hidden items-center justify-center p-12">
        <div className="absolute inset-0 bg-gradient-to-br from-primary/5 via-transparent to-accent/5" />
        <div className="absolute top-1/4 -left-20 w-60 h-60 bg-primary/10 rounded-full blur-3xl" />
        <div className="absolute bottom-1/4 -right-20 w-60 h-60 bg-accent/10 rounded-full blur-3xl" />
        
        <div className="relative text-center">
          <div className="flex items-center justify-center gap-3 mb-8">
          <Image
    src={`${BASE_URL}/${dynamicImages?.headerLogo}`}
    alt={dynamicImages?.title || "CheckUrIdea"}
    width={56}
    height={56}
    className="h-14 w-auto object-contain dark:brightness-0 dark:invert"
    priority
  />

          </div>
          
          <h1 className="text-4xl font-bold text-foreground mb-4">
            Turn Ideas Into Reality
          </h1>
          <p className="text-lg text-muted-foreground max-w-md">
            Join thousands of entrepreneurs, businesses, and investors collaborating to build the future.
          </p>
          
          <div className="mt-12 flex items-center justify-center gap-6 text-sm text-muted-foreground">
            <div className="text-center">
              <div className="text-2xl font-bold text-foreground">50K+</div>
              <div>Ideas Shared</div>
            </div>
            <div className="h-8 w-px bg-border" />
            <div className="text-center">
              <div className="text-2xl font-bold text-foreground">12K+</div>
              <div>Members</div>
            </div>
            <div className="h-8 w-px bg-border" />
            <div className="text-center">
              <div className="text-2xl font-bold text-foreground">2K+</div>
              <div>Collaborations</div>
            </div>
          </div>
        </div>
      </div>

      {/* Right Side - Form */}
      <div className="flex-1 flex flex-col">
        {/* Header */}
        <div className="p-6 flex items-center justify-between border-b border-border/50">
          <Link href="/" className="flex items-center gap-2 lg:hidden">
            <div className="flex h-9 w-9 items-center justify-center rounded-lg bg-primary text-primary-foreground">
              <Zap className="h-5 w-5" />
            </div>
            <span className="font-bold text-gradient">CheckUrIdea</span>
          </Link>
          
          {/* Progress Steps */}
          <div className="flex items-center gap-2 ml-auto">
            {[1, 2, 3].map((s) => (
              <div key={s} className="flex items-center gap-2">
                <div
                  className={cn(
                    "flex h-8 w-8 items-center justify-center rounded-full text-sm font-medium transition-all",
                    step >= s
                      ? "bg-primary text-primary-foreground"
                      : "bg-secondary text-muted-foreground"
                  )}
                >
                  {step > s ? <Check className="h-4 w-4" /> : s}
                </div>
                {s < 3 && (
                  <div
                    className={cn(
                      "h-1 w-8 rounded-full transition-all",
                      step > s ? "bg-primary" : "bg-secondary"
                    )}
                  />
                )}
              </div>
            ))}
          </div>
        </div>

        {/* Content */}
        <div className="flex-1 overflow-y-auto p-6 lg:p-12">
          {/* Step 1: Choose User Type */}
          {step === 1 && (
            <div className="max-w-2xl mx-auto">
              <div className="text-center mb-8">
                <h2 className="text-2xl font-bold text-foreground mb-2">
                  How do you want to use CheckUrIdea?
                </h2>
                <p className="text-muted-foreground">
                  Choose the option that best describes you. You can always change this later.
                </p>
              </div>

              <div className="space-y-4">
                {userTypes.map((type) => (
                  <button
                    key={type.id}
                    onClick={() => setUserType(type.id)}
                    className={cn(
                      "w-full flex items-center gap-4 p-5 rounded-2xl border transition-all text-left",
                      userType === type.id ? type.activeColor : type.color
                    )}
                  >
                    <div className={cn("flex h-14 w-14 items-center justify-center rounded-xl bg-background/50", type.iconColor)}>
                      <type.icon className="h-7 w-7" />
                    </div>
                    <div className="flex-1">
                      <h3 className="text-lg font-semibold text-foreground">{type.title}</h3>
                      <p className="text-sm text-muted-foreground">{type.description}</p>
                    </div>
                    {userType === type.id && (
                      <div className="flex h-6 w-6 items-center justify-center rounded-full bg-primary text-primary-foreground">
                        <Check className="h-4 w-4" />
                      </div>
                    )}
                  </button>
                ))}
              </div>
            </div>
          )}

          {/* Step 2: Username */}
          {step === 2 && (
            <div className="max-w-md mx-auto">
              <div className="text-center mb-8">
                <h2 className="text-2xl font-bold text-foreground mb-2">
                  Choose Your Username
                </h2>
                <p className="text-muted-foreground">
                  This will be your public profile URL. You can edit it anytime.
                </p>
              </div>

              <div className="space-y-6">
                <div>
                  <label className="text-sm font-medium text-foreground mb-2 block">
                    Username
                  </label>
                  <div className="relative">
                    <span className="absolute left-4 top-1/2 -translate-y-1/2 text-muted-foreground text-sm">
                      checkuridea.com/
                    </span>
                    <Input
                      value={username || generatedUsername}
                      onChange={(e) => setUsername(e.target.value.toLowerCase().replace(/[^a-z0-9_]/g, ""))}
                      className="pl-36 h-12 bg-secondary/30 border-border/50"
                      placeholder="your_username"
                    />
                  </div>
                  <p className="text-xs text-muted-foreground mt-2">
                    Only lowercase letters, numbers, and underscores allowed.
                  </p>
                </div>

                <div className="rounded-xl bg-secondary/30 p-4 border border-border/50">
                  <div className="flex items-start gap-3">
                    <Sparkles className="h-5 w-5 text-accent mt-0.5" />
                    <div>
                      <p className="text-sm font-medium text-foreground">Auto-generated username</p>
                      <p className="text-xs text-muted-foreground mt-1">
                        We have generated <span className="text-foreground font-mono">{generatedUsername}</span> for you.
                        You can use it or create your own.
                      </p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          )}

          {/* Step 3: Choose Industries */}
          {step === 3 && (
            <div className="max-w-2xl mx-auto">
              <div className="text-center mb-8">
                <h2 className="text-2xl font-bold text-foreground mb-2">
                  Select Your Interests
                </h2>
                <p className="text-muted-foreground">
                  Choose up to 5 industries you are interested in. This helps us personalize your feed.
                </p>
                <div className="mt-3 inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-primary/10 text-primary text-sm">
                  <span className="font-semibold">{selectedIndustries.length}</span>
                  <span>/ 5 selected</span>
                </div>
              </div>

              <div className="flex flex-wrap gap-3 justify-center">
                {industries.map((industry) => {
                  const isSelected = selectedIndustries.includes(industry)
                  const isDisabled = !isSelected && selectedIndustries.length >= 5
                  
                  return (
                    <button
                      key={industry}
                      onClick={() => toggleIndustry(industry)}
                      disabled={isDisabled}
                      className={cn(
                        "px-4 py-2.5 rounded-xl text-sm font-medium transition-all border",
                        isSelected
                          ? "bg-primary text-primary-foreground border-primary"
                          : isDisabled
                          ? "bg-secondary/30 text-muted-foreground border-border/50 cursor-not-allowed opacity-50"
                          : "bg-secondary/50 text-foreground border-border/50 hover:bg-secondary hover:border-border"
                      )}
                    >
                      {isSelected && <Check className="inline h-4 w-4 mr-1.5 -ml-1" />}
                      {industry}
                    </button>
                  )
                })}
              </div>
            </div>
          )}
        </div>

        {/* Footer */}
        <div className="p-6 border-t border-border/50 flex items-center justify-between">
          {step > 1 ? (
            <Button
              variant="ghost"
              onClick={() => setStep(step - 1)}
              className="gap-2"
            >
              <ArrowLeft className="h-4 w-4" />
              Back
            </Button>
          ) : (
            <Link href="/">
              <Button variant="ghost" className="gap-2">
                Skip for now
              </Button>
            </Link>
          )}

          {step < 3 ? (
            <Button
              onClick={() => setStep(step + 1)}
              disabled={step === 1 && !userType}
              className="gap-2"
            >
              Continue
              <ArrowRight className="h-4 w-4" />
            </Button>
          ) : (
            <Button
              onClick={handleComplete}
              disabled={selectedIndustries.length === 0}
              className="gap-2"
            >
              Complete Setup
              <Check className="h-4 w-4" />
            </Button>
          )}
        </div>
      </div>
    </div>
  )
}