'use client'

import { motion } from 'motion/react'
import { Waves, Rocket, GraduationCap, type LucideIcon } from 'lucide-react'
import { cn } from '@/lib/utils'
import { WizardStepContent } from '@/components/forms/form-wizard'
import { type DropdownOption, type WelcomeMessage, DEFAULT_COMPETITION_CATEGORIES } from '@/types/wizard-config'

const ICON_MAP: Record<string, LucideIcon> = {
  GraduationCap,
  Rocket,
}

interface StepWelcomeProps {
  programName: string
  programYear: number
  value: string | null
  onChange: (value: string) => void
  categories?: DropdownOption[]
  welcomeMessage?: WelcomeMessage
}

export function StepWelcome({ programName, programYear, value, onChange, categories, welcomeMessage }: StepWelcomeProps) {
  const categoryOptions = categories ?? DEFAULT_COMPETITION_CATEGORIES

  return (
    <WizardStepContent>
      <div className="flex flex-col items-center text-center">
        {/* Logo/Icon */}
        <motion.div
          initial={{ scale: 0, rotate: -180 }}
          animate={{ scale: 1, rotate: 0 }}
          transition={{ type: 'spring', duration: 0.8 }}
          className="mb-8"
        >
          <div className="flex h-20 w-20 items-center justify-center rounded-full bg-primary/10">
            <Waves className="h-10 w-10 text-primary" />
          </div>
        </motion.div>

        {/* Welcome text */}
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ delay: 0.2 }}
        >
          <h1 className="text-3xl font-bold tracking-tight text-foreground md:text-4xl">
            {welcomeMessage?.title ?? programName}
          </h1>
          <p className="mt-2 text-xl text-primary font-semibold">
            {programYear} Application
          </p>
          <p className="mt-4 max-w-md text-muted-foreground">
            {welcomeMessage?.description ?? 'Join us in protecting our oceans. Select your category to begin.'}
          </p>
        </motion.div>

        {/* Category selection */}
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ delay: 0.4 }}
          className="mt-10 grid w-full max-w-2xl gap-4 md:grid-cols-2"
        >
          {categoryOptions.map((category) => {
            const Icon = (category.icon ? ICON_MAP[category.icon] : undefined) ?? Waves
            const isSelected = value === category.value

            return (
              <button
                key={category.value}
                type="button"
                onClick={() => onChange(category.value)}
                className={cn(
                  'relative flex flex-col items-center rounded-xl border-2 p-6 text-center transition-all hover:border-primary/50 hover:shadow-md',
                  isSelected
                    ? 'border-primary bg-primary/5 shadow-md'
                    : 'border-border bg-background'
                )}
              >
                <div
                  className={cn(
                    'mb-4 flex h-14 w-14 items-center justify-center rounded-full transition-colors',
                    isSelected ? 'bg-primary text-primary-foreground' : 'bg-muted'
                  )}
                >
                  <Icon className="h-7 w-7" />
                </div>
                <h3 className="text-lg font-semibold">{category.label}</h3>
                <p className="mt-2 text-sm text-muted-foreground">
                  {category.description}
                </p>
                {isSelected && (
                  <motion.div
                    layoutId="selected-indicator"
                    className="absolute -top-2 -right-2 flex h-6 w-6 items-center justify-center rounded-full bg-primary text-primary-foreground"
                  >
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      className="h-4 w-4"
                      viewBox="0 0 20 20"
                      fill="currentColor"
                    >
                      <path
                        fillRule="evenodd"
                        d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
                        clipRule="evenodd"
                      />
                    </svg>
                  </motion.div>
                )}
              </button>
            )
          })}
        </motion.div>
      </div>
    </WizardStepContent>
  )
}
