"use client"

import { useState, useEffect } from "react"
import { useRouter, useSearchParams } from "next/navigation"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"
import { Label } from "@/components/ui/label"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Checkbox } from "@/components/ui/checkbox"
import { PhoneInput, isValidPhoneNumber, getCleanPhoneNumber } from "@/components/ui/phone-input"
import SmartAddressInput, { AddressResult } from "@/components/ui/smart-address-input"
import { ArrowLeft, ArrowRight, User, Camera, Phone, Mail, MapPin, Heart, CheckCircle, AlertCircle, Loader2, Upload, X } from "lucide-react"
import { Alert, AlertDescription } from "@/components/ui/alert"
import { useToast } from "@/components/ui/toast"
import { DataAPI } from "@/lib/data-api"
import { useAuth } from "@/hooks/use-auth"
import Image from "next/image"
import Link from "next/link"

const US_STATES = [
  "AL", "AK", "AZ", "AR", "CA", "CO", "CT", "DE", "FL", "GA",
  "HI", "ID", "IL", "IN", "IA", "KS", "KY", "LA", "ME", "MD",
  "MA", "MI", "MN", "MS", "MO", "MT", "NE", "NV", "NH", "NJ",
  "NM", "NY", "NC", "ND", "OH", "OK", "OR", "PA", "RI", "SC",
  "SD", "TN", "TX", "UT", "VT", "VA", "WA", "WV", "WI", "WY"
]

const CARE_TYPES = [
  "Assisted Living",
  "Memory Care",
  "Boarding Home",
  "Skilled Nursing"
]

const MOVE_IN_TIMEFRAMES = [
  "Immediately",
  "Within 1 month",
  "1-3 months",
  "3-6 months",
  "6-12 months",
  "More than 1 year",
  "Just researching"
]

interface FormData {
  // Optional
  phone: string

  // Optional Personal Info
  profilePicture: string
  gender: string
  dateOfBirth: string
  bio: string

  // Optional Address
  street: string
  city: string
  state: string
  zipCode: string

  // Optional Care Preferences
  careTypes: string[]
  budgetMin: string
  budgetMax: string
  preferredRadius: string
  preferredCity: string
  preferredState: string
  moveInTimeframe: string
  specialNeeds: string[]

  // Preferences
  notifications: boolean
  emailUpdates: boolean
  smsUpdates: boolean
  preferredContactMethod: string
}

export default function UserCompleteProfilePage() {
  const router = useRouter()
  const searchParams = useSearchParams()
  const toast = useToast()
  const { refreshAuth } = useAuth()

  const [currentStep, setCurrentStep] = useState(1)
  const [isLoading, setIsLoading] = useState(false)
  const [errors, setErrors] = useState<Record<string, string>>({})

  const email = searchParams?.get('email') || ""
  const userId = searchParams?.get('userId') || ""

  console.log('Complete Profile Page - Email:', email, 'UserId:', userId)
  console.log('Complete Profile Page - Search Params:', searchParams?.toString())

  const [formData, setFormData] = useState<FormData>({
    // Required
    phone: "",

    // Optional Personal Info
    profilePicture: "",
    gender: "",
    dateOfBirth: "",
    bio: "",

    // Optional Address
    street: "",
    city: "",
    state: "",
    zipCode: "",

    // Optional Care Preferences
    careTypes: [],
    budgetMin: "",
    budgetMax: "",
    preferredRadius: "25",
    preferredCity: "",
    preferredState: "",
    moveInTimeframe: "",
    specialNeeds: [],

    // Preferences
    notifications: true,
    emailUpdates: true,
    smsUpdates: false,
    preferredContactMethod: "email"
  })

  // Redirect if no email or userId, and restore progress if available
  useEffect(() => {
    console.log('Complete Profile useEffect - Email:', email, 'UserId:', userId)
    if (!email || !userId) {
      console.log('Missing email or userId, redirecting to register')
      router.push('/register')
      return
    }

    // Try to restore previous progress
    try {
      const savedProgress = localStorage.getItem('profile_progress')
      if (savedProgress) {
        const progressData = JSON.parse(savedProgress)

        // Check if the progress is recent (within 24 hours)
        const isRecent = Date.now() - progressData.timestamp < 24 * 60 * 60 * 1000

        if (isRecent && progressData.formData && progressData.currentStep) {
          console.log('Restoring profile progress from localStorage')
          setFormData(progressData.formData)
          setCurrentStep(progressData.currentStep)

          // Clear the saved progress after restoring
          localStorage.removeItem('profile_progress')
        }
      }
    } catch (error) {
      console.error('Error restoring profile progress:', error)
      // Clear invalid data
      localStorage.removeItem('profile_progress')
    }
  }, [email, userId, router])

  const handleInputChange = (field: keyof FormData, value: any) => {
    setFormData(prev => ({ ...prev, [field]: value }))
    // Clear error when user starts typing
    if (errors[field]) {
      setErrors(prev => ({ ...prev, [field]: "" }))
    }
  }

  const handleArrayChange = (field: keyof FormData, value: string, checked: boolean) => {
    setFormData(prev => {
      const currentArray = prev[field] as string[]
      if (checked) {
        return { ...prev, [field]: [...currentArray, value] }
      } else {
        return { ...prev, [field]: currentArray.filter(item => item !== value) }
      }
    })
  }

  const handleProfilePictureChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    const file = event.target.files?.[0]
    if (!file) return

    // Validate file type
    const validTypes = ['image/jpeg', 'image/jpg', 'image/png', 'image/gif']
    if (!validTypes.includes(file.type)) {
      toast.error("Please select a JPG, PNG, or GIF image.", {
        title: "Invalid File Type"
      })
      return
    }

    // Validate file size (5MB limit)
    const maxSize = 5 * 1024 * 1024 // 5MB in bytes
    if (file.size > maxSize) {
      toast.error("Please select an image smaller than 5MB.", {
        title: "File Too Large"
      })
      return
    }

    // Create preview URL
    const reader = new FileReader()
    reader.onload = (e) => {
      const result = e.target?.result as string
      handleInputChange('profilePicture', result)
    }
    reader.readAsDataURL(file)
  }

  const handleAddressChange = (result: AddressResult) => {
    // Update all address fields when a place is selected
    setFormData(prev => ({
      ...prev,
      street: result.address,
      city: result.city,
      state: result.state,
      zipCode: result.zipCode
    }))

    // Clear any address-related errors
    setErrors(prev => ({
      ...prev,
      street: "",
      city: "",
      state: "",
      zipCode: ""
    }))
  }

  const handleBackToLogin = () => {
    // Save current progress to localStorage before navigating back
    const progressData = {
      formData,
      currentStep,
      timestamp: Date.now()
    }
    localStorage.setItem('profile_progress', JSON.stringify(progressData))

    // Navigate back to login
    router.push('/login')
  }

  const validateStep = (step: number): boolean => {
    const newErrors: Record<string, string> = {}

    if (step === 1) {
      // Optional: Phone validation only if provided
      if (formData.phone && !isValidPhoneNumber(formData.phone)) {
        newErrors.phone = "Please enter a valid phone number"
      }

      // Optional validations for step 1
      if (formData.dateOfBirth) {
        const dob = new Date(formData.dateOfBirth)
        const today = new Date()
        const age = today.getFullYear() - dob.getFullYear()

        if (age < 13 || age > 120) {
          newErrors.dateOfBirth = "Please enter a valid date of birth"
        }
      }

      if (formData.bio && formData.bio.length > 500) {
        newErrors.bio = "Bio cannot exceed 500 characters"
      }
    }

    if (step === 2) {
      // Optional validations for address
      if (formData.zipCode && !/^\d{5}(-\d{4})?$/.test(formData.zipCode)) {
        newErrors.zipCode = "Please enter a valid ZIP code"
      }
    }

    if (step === 3) {
      // Optional validations for care preferences
      if (formData.budgetMin && formData.budgetMax) {
        const min = parseInt(formData.budgetMin)
        const max = parseInt(formData.budgetMax)
        if (min >= max) {
          newErrors.budgetMax = "Maximum budget must be greater than minimum"
        }
      }

      if (formData.preferredRadius && (parseInt(formData.preferredRadius) < 1 || parseInt(formData.preferredRadius) > 500)) {
        newErrors.preferredRadius = "Radius must be between 1 and 500 miles"
      }
    }

    setErrors(newErrors)
    return Object.keys(newErrors).length === 0
  }

  const handleNext = () => {
    if (validateStep(currentStep)) {
      setCurrentStep(prev => Math.min(prev + 1, 4))
    }
  }

  const handlePrevious = () => {
    setCurrentStep(prev => Math.max(prev - 1, 1))
  }

  const handleSubmit = async () => {
    if (!validateStep(currentStep)) {
      return
    }

    setIsLoading(true)

    try {
      // Prepare submission data
      const submissionData: any = {
        userId
      }

      // Add phone only if provided
      if (formData.phone) {
        submissionData.phone = getCleanPhoneNumber(formData.phone)
      }

      // Add optional fields only if they have values
      if (formData.profilePicture) submissionData.profilePicture = formData.profilePicture
      if (formData.gender) submissionData.gender = formData.gender
      if (formData.dateOfBirth) submissionData.dateOfBirth = formData.dateOfBirth
      if (formData.bio) submissionData.bio = formData.bio

      // Mailing address
      if (formData.street || formData.city || formData.state || formData.zipCode) {
        submissionData.mailingAddress = {
          street: formData.street,
          city: formData.city,
          state: formData.state,
          zipCode: formData.zipCode
        }
      }

      // Care preferences
      const carePreferences: any = {}
      if (formData.careTypes.length > 0) carePreferences.careTypes = formData.careTypes
      if (formData.budgetMin || formData.budgetMax) {
        carePreferences.budgetRange = {
          min: formData.budgetMin ? parseInt(formData.budgetMin) : undefined,
          max: formData.budgetMax ? parseInt(formData.budgetMax) : undefined
        }
      }
      if (formData.preferredRadius || formData.preferredCity || formData.preferredState) {
        carePreferences.preferredLocation = {
          radius: formData.preferredRadius ? parseInt(formData.preferredRadius) : undefined,
          city: formData.preferredCity,
          state: formData.preferredState
        }
      }
      if (formData.moveInTimeframe) carePreferences.moveInTimeframe = formData.moveInTimeframe
      if (formData.specialNeeds.length > 0) carePreferences.specialNeeds = formData.specialNeeds

      if (Object.keys(carePreferences).length > 0) {
        submissionData.carePreferences = carePreferences
      }

      // Preferences
      submissionData.preferences = {
        notifications: formData.notifications,
        emailUpdates: formData.emailUpdates,
        smsUpdates: formData.smsUpdates,
        preferredContactMethod: formData.preferredContactMethod
      }

      const response = await DataAPI.auth.completeUserProfile(submissionData)

      if (response.success) {
        console.log('Profile completion successful:', response.data)

        // Refresh auth context to update user state
        console.log('Refreshing auth context after profile completion...')
        await refreshAuth()
        console.log('Auth context refreshed after profile completion')

        toast.success("Welcome to Geezer Guide! You can now start searching for facilities.", {
          title: "Profile Completed!"
        })

        // Redirect to dashboard
        router.push('/dashboard')
      } else {
        throw new Error(response.message || "Profile completion failed")
      }
    } catch (error: any) {
      console.error("Profile completion error:", error)
      toast.error(error.message || "An error occurred. Please try again.", {
        title: "Profile Completion Failed"
      })
    } finally {
      setIsLoading(false)
    }
  }

  const renderStep = () => {
    switch (currentStep) {
      case 1:
        return (
          <div className="space-y-6">
            <div className="text-center space-y-2">
              <User className="h-12 w-12 text-blue-600 mx-auto" />
              <h2 className="text-xl font-semibold">Personal Information</h2>
              <p className="text-gray-600">Tell us a bit about yourself</p>
            </div>

            {/* Phone (Optional) */}
            <div className="space-y-2">
              <Label htmlFor="phone" className="text-sm font-medium">
                Phone Number (Optional)
              </Label>
              <PhoneInput
                id="phone"
                value={formData.phone}
                onChange={(value) => handleInputChange('phone', value)}
                placeholder="Enter your phone number"
                className={errors.phone ? "border-red-500" : ""}
              />
              {errors.phone && (
                <p className="text-sm text-red-500">{errors.phone}</p>
              )}
            </div>

            {/* Profile Picture (Optional) */}
            <div className="space-y-2">
              <Label className="text-sm font-medium">Profile Picture (Optional)</Label>
              <div className="flex items-center gap-4">
                <div className="w-16 h-16 rounded-full bg-gray-100 flex items-center justify-center overflow-hidden">
                  {formData.profilePicture ? (
                    <Image
                      src={formData.profilePicture}
                      alt="Profile"
                      width={64}
                      height={64}
                      className="w-full h-full object-cover"
                    />
                  ) : (
                    <Camera className="h-6 w-6 text-gray-400" />
                  )}
                </div>
                <div className="flex items-center gap-2">
                  <input
                    type="file"
                    id="profilePictureInput"
                    accept="image/*"
                    onChange={handleProfilePictureChange}
                    className="hidden"
                  />
                  <Button
                    variant="outline"
                    size="sm"
                    onClick={() => document.getElementById('profilePictureInput')?.click()}
                    disabled={isLoading}
                  >
                    <Upload className="h-4 w-4 mr-2" />
                    Upload Photo
                  </Button>
                  {formData.profilePicture && (
                    <Button
                      variant="ghost"
                      size="sm"
                      onClick={() => handleInputChange('profilePicture', '')}
                      disabled={isLoading}
                    >
                      <X className="h-4 w-4" />
                    </Button>
                  )}
                </div>
              </div>
              <p className="text-xs text-gray-500">
                Supported formats: JPG, PNG, GIF. Max size: 5MB
              </p>
            </div>

            {/* Gender (Optional) */}
            <div className="space-y-2">
              <Label className="text-sm font-medium">Gender (Optional)</Label>
              <Select value={formData.gender} onValueChange={(value) => handleInputChange('gender', value)}>
                <SelectTrigger>
                  <SelectValue placeholder="Select gender" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="male">Male</SelectItem>
                  <SelectItem value="female">Female</SelectItem>
                  <SelectItem value="other">Other</SelectItem>
                  <SelectItem value="prefer_not_to_say">Prefer not to say</SelectItem>
                </SelectContent>
              </Select>
            </div>

            {/* Date of Birth (Optional) */}
            <div className="space-y-2">
              <Label htmlFor="dateOfBirth" className="text-sm font-medium">Date of Birth (Optional)</Label>
              <div className="max-w-xs">
                <Input
                  id="dateOfBirth"
                  type="date"
                  value={formData.dateOfBirth}
                  onChange={(e) => handleInputChange('dateOfBirth', e.target.value)}
                  className={errors.dateOfBirth ? "border-red-500" : ""}
                />
              </div>
              {errors.dateOfBirth && (
                <p className="text-sm text-red-500">{errors.dateOfBirth}</p>
              )}
            </div>

            {/* Bio (Optional) */}
            <div className="space-y-2">
              <Label htmlFor="bio" className="text-sm font-medium">
                About You (Optional)
                <span className="text-gray-500 font-normal ml-1">
                  ({formData.bio.length}/500)
                </span>
              </Label>
              <Textarea
                id="bio"
                value={formData.bio}
                onChange={(e) => handleInputChange('bio', e.target.value)}
                placeholder="Tell us a bit about yourself..."
                className={errors.bio ? "border-red-500" : ""}
                maxLength={500}
              />
              {errors.bio && (
                <p className="text-sm text-red-500">{errors.bio}</p>
              )}
            </div>
          </div>
        )

      case 2:
        return (
          <div className="space-y-6">
            <div className="text-center space-y-2">
              <MapPin className="h-12 w-12 text-blue-600 mx-auto" />
              <h2 className="text-xl font-semibold">Mailing Address</h2>
              <p className="text-gray-600">Where should we send important information? (Optional)</p>
            </div>

            <div className="grid grid-cols-1 gap-4">
              <div className="space-y-2">
                <Label htmlFor="street">Street Address</Label>
                <SmartAddressInput
                  value={formData.street}
                  placeholder="123 Main Street, City, State"
                  onChange={handleAddressChange}
                  onAddressChange={(address) => handleInputChange('street', address)}
                  className="w-full"
                />
              </div>

              <div className="grid grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label htmlFor="city">City</Label>
                  <Input
                    id="city"
                    value={formData.city}
                    onChange={(e) => handleInputChange('city', e.target.value)}
                    placeholder="Springfield"
                  />
                </div>

                <div className="space-y-2">
                  <Label htmlFor="state">State</Label>
                  <Select value={formData.state} onValueChange={(value) => handleInputChange('state', value)}>
                    <SelectTrigger>
                      <SelectValue placeholder="Select state" />
                    </SelectTrigger>
                    <SelectContent>
                      {US_STATES.map(state => (
                        <SelectItem key={state} value={state}>{state}</SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </div>
              </div>

              <div className="space-y-2">
                <Label htmlFor="zipCode">ZIP Code</Label>
                <Input
                  id="zipCode"
                  value={formData.zipCode}
                  onChange={(e) => handleInputChange('zipCode', e.target.value)}
                  placeholder="12345"
                  className={errors.zipCode ? "border-red-500" : ""}
                />
                {errors.zipCode && (
                  <p className="text-sm text-red-500">{errors.zipCode}</p>
                )}
              </div>
            </div>
          </div>
        )

      case 3:
        return (
          <div className="space-y-6">
            <div className="text-center space-y-2">
              <Heart className="h-12 w-12 text-blue-600 mx-auto" />
              <h2 className="text-xl font-semibold">Care Preferences</h2>
              <p className="text-gray-600">Help us find the right facilities for you (Optional)</p>
            </div>

            {/* Care Types */}
            <div className="space-y-3">
              <Label className="text-sm font-medium">Types of Care Interested In</Label>
              <div className="grid grid-cols-2 gap-3">
                {CARE_TYPES.map(type => (
                  <div key={type} className="flex items-center space-x-2">
                    <Checkbox
                      id={type}
                      checked={formData.careTypes.includes(type)}
                      onCheckedChange={(checked) => handleArrayChange('careTypes', type, checked as boolean)}
                    />
                    <Label htmlFor={type} className="text-sm">{type}</Label>
                  </div>
                ))}
              </div>
            </div>

            {/* Budget Range */}
            <div className="space-y-3">
              <Label className="text-sm font-medium">Monthly Budget Range</Label>
              <div className="grid grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label htmlFor="budgetMin" className="text-xs text-gray-600">Minimum ($)</Label>
                  <Input
                    id="budgetMin"
                    type="number"
                    value={formData.budgetMin}
                    onChange={(e) => handleInputChange('budgetMin', e.target.value)}
                    placeholder="2000"
                    min="0"
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="budgetMax" className="text-xs text-gray-600">Maximum ($)</Label>
                  <Input
                    id="budgetMax"
                    type="number"
                    value={formData.budgetMax}
                    onChange={(e) => handleInputChange('budgetMax', e.target.value)}
                    placeholder="5000"
                    min="0"
                    className={errors.budgetMax ? "border-red-500" : ""}
                  />
                  {errors.budgetMax && (
                    <p className="text-sm text-red-500">{errors.budgetMax}</p>
                  )}
                </div>
              </div>
            </div>

            {/* Preferred Location */}
            <div className="space-y-3">
              <Label className="text-sm font-medium">Preferred Location</Label>
              <div className="grid grid-cols-1 gap-4">
                <div className="space-y-2">
                  <Label htmlFor="preferredRadius" className="text-xs text-gray-600">Search Radius (miles)</Label>
                  <Input
                    id="preferredRadius"
                    type="number"
                    value={formData.preferredRadius}
                    onChange={(e) => handleInputChange('preferredRadius', e.target.value)}
                    placeholder="25"
                    min="1"
                    max="500"
                    className={errors.preferredRadius ? "border-red-500" : ""}
                  />
                  {errors.preferredRadius && (
                    <p className="text-sm text-red-500">{errors.preferredRadius}</p>
                  )}
                </div>
                <div className="grid grid-cols-2 gap-4">
                  <div className="space-y-2">
                    <Label htmlFor="preferredCity" className="text-xs text-gray-600">Preferred City</Label>
                    <Input
                      id="preferredCity"
                      value={formData.preferredCity}
                      onChange={(e) => handleInputChange('preferredCity', e.target.value)}
                      placeholder="Springfield"
                    />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="preferredState" className="text-xs text-gray-600">Preferred State</Label>
                    <Select value={formData.preferredState} onValueChange={(value) => handleInputChange('preferredState', value)}>
                      <SelectTrigger>
                        <SelectValue placeholder="Select state" />
                      </SelectTrigger>
                      <SelectContent>
                        {US_STATES.map(state => (
                          <SelectItem key={state} value={state}>{state}</SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                  </div>
                </div>
              </div>
            </div>

            {/* Move-in Timeframe */}
            <div className="space-y-2">
              <Label className="text-sm font-medium">Move-in Timeframe</Label>
              <Select value={formData.moveInTimeframe} onValueChange={(value) => handleInputChange('moveInTimeframe', value)}>
                <SelectTrigger>
                  <SelectValue placeholder="Select timeframe" />
                </SelectTrigger>
                <SelectContent>
                  {MOVE_IN_TIMEFRAMES.map(timeframe => (
                    <SelectItem key={timeframe} value={timeframe}>{timeframe}</SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>
          </div>
        )

      case 4:
        return (
          <div className="space-y-6">
            <div className="text-center space-y-2">
              <Mail className="h-12 w-12 text-blue-600 mx-auto" />
              <h2 className="text-xl font-semibold">Communication Preferences</h2>
              <p className="text-gray-600">How would you like to hear from us?</p>
            </div>

            <div className="space-y-4">
              <div className="flex items-center justify-between">
                <div className="space-y-1">
                  <Label className="text-sm font-medium">Email Notifications</Label>
                  <p className="text-xs text-gray-600">Receive updates about new facilities and features</p>
                </div>
                <Checkbox
                  checked={formData.notifications}
                  onCheckedChange={(checked) => handleInputChange('notifications', checked)}
                />
              </div>

              <div className="flex items-center justify-between">
                <div className="space-y-1">
                  <Label className="text-sm font-medium">Email Updates</Label>
                  <p className="text-xs text-gray-600">Important account and service updates</p>
                </div>
                <Checkbox
                  checked={formData.emailUpdates}
                  onCheckedChange={(checked) => handleInputChange('emailUpdates', checked)}
                />
              </div>

              <div className="flex items-center justify-between">
                <div className="space-y-1">
                  <Label className="text-sm font-medium">SMS Updates</Label>
                  <p className="text-xs text-gray-600">Receive text messages for urgent updates</p>
                </div>
                <Checkbox
                  checked={formData.smsUpdates}
                  onCheckedChange={(checked) => handleInputChange('smsUpdates', checked)}
                />
              </div>

              <div className="space-y-2">
                <Label className="text-sm font-medium">Preferred Contact Method</Label>
                <Select value={formData.preferredContactMethod} onValueChange={(value) => handleInputChange('preferredContactMethod', value)}>
                  <SelectTrigger>
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="email">Email</SelectItem>
                    <SelectItem value="phone">Phone</SelectItem>
                    <SelectItem value="sms">SMS</SelectItem>
                  </SelectContent>
                </Select>
              </div>
            </div>
          </div>
        )

      default:
        return null
    }
  }

  return (
    <div className="min-h-screen bg-gradient-to-b from-white to-muted/30 flex items-center justify-center p-4">
      <div className="w-full max-w-2xl space-y-6">
        {/* Header */}
        <div className="text-center space-y-2">
          <div className="flex justify-center mb-6">
            <Image
              src="/images/geezer-guide-logo.png"
              alt="Geezer Guide"
              width={220}
              height={110}
              className="h-16 lg:h-20 w-auto drop-shadow-sm"
            />
          </div>
          <h1 className="text-2xl font-bold text-gray-900">Complete Your Profile</h1>
          <p className="text-gray-600">
            Help us personalize your experience on Geezer Guide
          </p>
        </div>

        {/* Progress Steps */}
        <div className="flex justify-center mb-8">
          <div className="flex items-center space-x-4">
            {[1, 2, 3, 4].map((step) => (
              <div key={step} className="flex items-center">
                <div className={`
                  w-8 h-8 rounded-full flex items-center justify-center text-sm font-medium
                  ${step <= currentStep
                    ? 'bg-blue-600 text-white'
                    : 'bg-gray-200 text-gray-600'
                  }
                `}>
                  {step < currentStep ? (
                    <CheckCircle className="h-4 w-4" />
                  ) : (
                    step
                  )}
                </div>
                {step < 4 && (
                  <div className={`
                    w-12 h-0.5 mx-2
                    ${step < currentStep ? 'bg-blue-600' : 'bg-gray-200'}
                  `} />
                )}
              </div>
            ))}
          </div>
        </div>

        {/* Form Card */}
        <Card>
          <CardContent className="p-6">
            {renderStep()}
          </CardContent>
        </Card>

        {/* Navigation */}
        <div className="flex justify-between">
          <Button
            variant="outline"
            onClick={handlePrevious}
            disabled={currentStep === 1}
            className="flex items-center"
          >
            <ArrowLeft className="mr-2 h-4 w-4" />
            Previous
          </Button>

          {currentStep < 4 ? (
            <Button onClick={handleNext} className="flex items-center">
              Next
              <ArrowRight className="ml-2 h-4 w-4" />
            </Button>
          ) : (
            <Button
              onClick={handleSubmit}
              disabled={isLoading}
              className="flex items-center"
            >
              {isLoading ? (
                <>
                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                  Completing...
                </>
              ) : (
                <>
                  <CheckCircle className="mr-2 h-4 w-4" />
                  Complete Profile
                </>
              )}
            </Button>
          )}
        </div>

        {/* Skip Option */}
        {currentStep > 1 && (
          <div className="text-center">
            <Button
              variant="ghost"
              onClick={handleSubmit}
              disabled={isLoading}
              className="text-gray-600 hover:text-gray-900"
            >
              Skip remaining steps and continue
            </Button>
          </div>
        )}

        {/* Back Link */}
        <div className="text-center">
          <Button
            variant="ghost"
            onClick={handleBackToLogin}
            className="inline-flex items-center text-sm text-gray-600 hover:text-gray-900 transition-colors"
          >
            <ArrowLeft className="mr-1 h-4 w-4" />
            Back to Login
          </Button>
        </div>
      </div>
    </div>
  )
}