'use client'

import { useUserProfile } from '@nextsparkjs/core/hooks/useUserProfile'
import { useAuth } from '@nextsparkjs/core/hooks/useAuth'
import { setUserLocaleClient } from '@nextsparkjs/core/lib/locale-client'
import { I18N_CONFIG } from '@nextsparkjs/core/lib/config'
import { useEffect, useState, useCallback } from 'react'
import { useForm } from 'react-hook-form'
import { zodResolver } from '@hookform/resolvers/zod'
import { useMutation, useQueryClient } from '@tanstack/react-query'
import { Button } from '@nextsparkjs/core/components/ui/button'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@nextsparkjs/core/components/ui/card'
import { Input } from '@nextsparkjs/core/components/ui/input'
import { Label } from '@nextsparkjs/core/components/ui/label'
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@nextsparkjs/core/components/ui/select'
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from '@nextsparkjs/core/components/ui/popover'
import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
} from '@nextsparkjs/core/components/ui/command'
import { Separator } from '@nextsparkjs/core/components/ui/separator'
import { Alert, AlertDescription } from '@nextsparkjs/core/components/ui/alert'
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from '@nextsparkjs/core/components/ui/dialog'
import {
  Loader2, 
  User, 
  Mail, 
  Calendar,
  Globe,
  Clock,
  Languages,
  CheckCircle2,
  AlertCircle,
  ChevronDown,
  ChevronRight,
  Trash2,
  Check,
  ChevronsUpDown
} from 'lucide-react'
import { profileSchema, ProfileFormData } from '@nextsparkjs/core/lib/validation'
import { countries, timezones } from '@nextsparkjs/core/lib/countries-timezones'
import { sel } from '@nextsparkjs/core/selectors'
import { useTranslations } from 'next-intl'
import { getTemplateOrDefaultClient } from '@nextsparkjs/registries/template-registry.client'

// Language options
const languages = [
  { value: 'en', label: 'English' },
  { value: 'es', label: 'Español' },
] as const

function ProfilePage() {
  const { profile, isLoading, error } = useUserProfile()
  const { signOut } = useAuth()
  const queryClient = useQueryClient()
  const [updateSuccess, setUpdateSuccess] = useState(false)
  const [advancedOpen, setAdvancedOpen] = useState(false)
  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false)
  const [statusMessage, setStatusMessage] = useState('')
  const [timezoneOpen, setTimezoneOpen] = useState(false)
  const [countryOpen, setCountryOpen] = useState(false)
  const t = useTranslations('settings')

  // Form setup
  const {
    register,
    handleSubmit,
    formState: { errors, isSubmitting },
    setValue,
    watch,
    reset
  } = useForm<ProfileFormData>({
    resolver: zodResolver(profileSchema),
    defaultValues: {
      firstName: '',
      lastName: '',
      country: '',
      timezone: '',
      language: I18N_CONFIG.defaultLocale,
    },
  })

  // Update form when profile data loads
  useEffect(() => {
    if (profile) {
      reset({
        firstName: profile.firstName || '',
        lastName: profile.lastName || '',
        country: profile.country || '',
        timezone: profile.timezone || '',
        language: profile.language || I18N_CONFIG.defaultLocale,
      })
    }
  }, [profile, reset])

  // Update profile mutation
  const updateProfileMutation = useMutation({
    mutationFn: async (data: ProfileFormData) => {
      const response = await fetch('/api/user/profile', {
        method: 'PATCH',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(data),
      })

      if (!response.ok) {
        const errorData = await response.json()
        throw new Error(errorData.error || 'Failed to update profile')
      }

      return response.json()
    },
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['user-profile'] })
      setUpdateSuccess(true)
      setStatusMessage(t('profile.messages.updateSuccess'))
      setTimeout(() => {
        setUpdateSuccess(false)
        setStatusMessage('')
      }, 3000)
    },
    onError: (error) => {
      setStatusMessage(t('profile.messages.updateError', { error: error.message }))
    },
  })

  // Delete account mutation
  const deleteAccountMutation = useMutation({
    mutationFn: async () => {
      const response = await fetch('/api/user/delete-account', {
        method: 'DELETE',
        headers: {
          'Content-Type': 'application/json',
        },
      })

      if (!response.ok) {
        const errorData = await response.json()
        throw new Error(errorData.error || 'Failed to delete account')
      }

      return response.json()
    },
    onSuccess: async () => {
      setStatusMessage(t('profile.messages.deleteSuccess'))
      // Clear all query data and sign out the user
      queryClient.clear()
      await signOut()
      // Redirect will happen automatically after signOut
    },
    onError: (error) => {
      setStatusMessage(t('profile.messages.deleteError', { error: error.message }))
    },
  })

  const onSubmit = useCallback(async (data: ProfileFormData) => {
    setStatusMessage(t('profile.messages.updating'))
    
    // Check if language changed
    const languageChanged = profile?.language !== data.language
    
    try {
      // Update profile with ALL fields (including language)
      await updateProfileMutation.mutateAsync(data)
      
      // If language changed, update app language after successful profile update
      if (languageChanged) {
        try {
          // Update cookie and reload to apply new language
          setUserLocaleClient(data.language)
          window.location.reload()
        } catch (error) {
          console.error('Error updating app language:', error)
        }
      }
    } catch {
      // Error handled by mutation onError
    }
  }, [updateProfileMutation, t, profile?.language])

  const handleDeleteAccount = useCallback(() => {
    setStatusMessage(t('profile.messages.deleting'))
    deleteAccountMutation.mutate()
    setDeleteDialogOpen(false)
  }, [deleteAccountMutation, t])

  const handleAdvancedToggle = useCallback(() => {
    const newState = !advancedOpen
    setAdvancedOpen(newState)
    setStatusMessage(newState ? t('profile.messages.advancedOpen') : t('profile.messages.advancedClosed'))
  }, [advancedOpen, t])



  const countryValue = watch('country')
  const timezoneValue = watch('timezone')
  const languageValue = watch('language')

  if (isLoading) {
    return (
      <div
        className="flex items-center justify-center py-12"
        role="status"
        aria-label={t('profile.loading.aria')}
      >
        <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" aria-hidden="true" />
        <span className="sr-only">{t('profile.loading.text')}</span>
      </div>
    )
  }

  if (error) {
    return (
      <Alert
        className="max-w-md"
        variant="destructive"
        role="alert"
      >
        <AlertCircle className="h-4 w-4" aria-hidden="true" />
        <AlertDescription>
          {t('profile.error.message')}
        </AlertDescription>
      </Alert>
    )
  }

  return (
    <>
      {/* MANDATORY: Screen reader announcements */}
      <div
        aria-live="polite"
        aria-atomic="true"
        className="sr-only"
      >
        {statusMessage}
      </div>

      <div
        className="max-w-4xl space-y-6"
        data-cy={sel('settings.profile.container')}
      >
        {/* Header */}
        <header>
          <h1
            className="text-2xl font-bold"
            id="profile-heading"
          >
            {t('profile.title')}
          </h1>
          <p className="text-muted-foreground mt-1">
            {t('profile.description')}
          </p>
        </header>

        {/* Success Alert */}
        {updateSuccess && (
          <Alert
            className="border-green-200 bg-green-50 text-green-800"
            role="status"
            aria-live="polite"
            data-cy={sel('settings.profile.successMessage')}
          >
            <CheckCircle2 className="h-4 w-4 text-green-600" aria-hidden="true" />
            <AlertDescription>
              {t('profile.success.message')}
            </AlertDescription>
          </Alert>
        )}

        {/* Error Alert */}
        {updateProfileMutation.error && (
          <Alert
            variant="destructive"
            role="alert"
            aria-live="assertive"
          >
            <AlertCircle className="h-4 w-4" aria-hidden="true" />
            <AlertDescription>
              {updateProfileMutation.error.message}
            </AlertDescription>
          </Alert>
        )}

        {/* Single Column Layout */}
        <Card
          className="max-w-4xl"
          data-cy={sel('settings.profile.form')}
        >
            <CardHeader>
              <CardTitle
                className="flex items-center gap-2"
                id="profile-form-title"
              >
                <User className="h-5 w-5" aria-hidden="true" />
                {t('profile.form.title')}
              </CardTitle>
              <CardDescription>
                {t('profile.form.description')}
              </CardDescription>
            </CardHeader>
            <CardContent>
              <form
                onSubmit={handleSubmit(onSubmit)}
                className="space-y-6"
                aria-labelledby="profile-form-title"
              >
              <div className="grid gap-4 sm:grid-cols-2">
                <div className="space-y-2">
                  <Label htmlFor="firstName">{t('profile.form.firstName')}</Label>
                  <Input
                    id="firstName"
                    {...register('firstName')}
                    placeholder={t('profile.form.firstNamePlaceholder')}
                  />
                  {errors.firstName && (
                    <p className="text-sm text-destructive">{errors.firstName.message}</p>
                  )}
                </div>

                <div className="space-y-2">
                  <Label htmlFor="lastName">{t('profile.form.lastName')}</Label>
                  <Input
                    id="lastName"
                    {...register('lastName')}
                    placeholder={t('profile.form.lastNamePlaceholder')}
                  />
                  {errors.lastName && (
                    <p className="text-sm text-destructive">{errors.lastName.message}</p>
                  )}
                </div>
              </div>

              {/* Email, Auth and Verification - 50%, 25%, 25% Layout */}
              <div className="grid gap-4 grid-cols-1 md:grid-cols-4">
                <div className="space-y-2 md:col-span-2">
                  <Label>{t('profile.form.email')}</Label>
                  <div className="relative">
                    <Mail className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
                    <Input
                      value={profile?.email || ''}
                      disabled
                      className="pl-10 bg-muted"
                    />
                  </div>
                  <p className="text-xs text-muted-foreground">
                    {t('profile.form.emailNote')}
                  </p>
                </div>

                <div className="space-y-2">
                  <Label>{t('profile.form.authMethod')}</Label>
                  <div className="flex items-center gap-3 py-2">
                    {profile?.authMethod === 'Google' ? (
                      <svg className="h-4 w-4" viewBox="0 0 24 24">
                        <path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/>
                        <path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/>
                        <path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/>
                        <path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/>
                      </svg>
                    ) : (
                      <Mail className="h-4 w-4 text-muted-foreground" />
                    )}
                    <span className="text-sm font-medium">{profile?.authMethod}</span>
                  </div>
                </div>
                
                <div className="space-y-2">
                  <Label>{t('profile.form.verificationStatus')}</Label>
                  <div className="flex items-center gap-3 py-2">
                    <CheckCircle2 className={`h-4 w-4 ${profile?.emailVerified ? 'text-green-600' : 'text-muted-foreground'}`} />
                    <span className="text-sm font-medium">
                      {profile?.emailVerified ? t('profile.form.verified') : t('profile.form.notVerified')}
                    </span>
                  </div>
                </div>
              </div>

              {/* Location and Preferences - 20%, 30%, 50% Layout */}
              <div className="grid gap-4 grid-cols-1 md:grid-cols-10">
                <div className="space-y-2 md:col-span-2">
                  <Label htmlFor="language">{t('profile.form.language')}</Label>
                  <Select
                    value={languageValue || ''}
                    onValueChange={(value: string) => {
                      if (value) {
                        setValue('language', value)
                      }
                    }}
                  >
                    <SelectTrigger>
                      <div className="flex items-center gap-2">
                        <Languages className="h-4 w-4 text-muted-foreground" aria-hidden="true" />
                        <SelectValue placeholder={t('profile.form.languagePlaceholder')} />
                      </div>
                    </SelectTrigger>
                    <SelectContent>
                      {languages.map((language) => (
                        <SelectItem key={language.value} value={language.value}>
                          {language.label}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                  {errors.language && (
                    <p className="text-sm text-destructive">{errors.language.message}</p>
                  )}
                </div>

                <div className="space-y-2 md:col-span-3">
                  <Label htmlFor="country">{t('profile.form.country')}</Label>
                  <Popover open={countryOpen} onOpenChange={setCountryOpen}>
                    <PopoverTrigger asChild>
                      <Button
                        variant="outline"
                        role="combobox"
                        aria-expanded={countryOpen}
                        className="w-full justify-between"
                      >
                        <div className="flex items-center gap-2">
                          <Globe className="h-4 w-4 text-muted-foreground" aria-hidden="true" />
                          {countryValue
                            ? countries.find((country) => country.value === countryValue)?.label
                            : t('profile.form.countryPlaceholder')}
                        </div>
                        <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
                      </Button>
                    </PopoverTrigger>
                    <PopoverContent className="w-[400px] p-0">
                      <Command>
                        <CommandInput placeholder="Buscar país..." className="h-9" />
                        <CommandList>
                          <CommandEmpty>No se encontraron países.</CommandEmpty>
                          <CommandGroup>
                            {countries.map((country) => (
                              <CommandItem
                                key={country.value}
                                value={country.label}
                                onSelect={() => {
                                  setValue('country', country.value === countryValue ? '' : country.value)
                                  setCountryOpen(false)
                                }}
                              >
                                {country.label}
                                <Check
                                  className={`ml-auto h-4 w-4 ${
                                    countryValue === country.value ? "opacity-100" : "opacity-0"
                                  }`}
                                />
                              </CommandItem>
                            ))}
                          </CommandGroup>
                        </CommandList>
                      </Command>
                    </PopoverContent>
                  </Popover>
                  {errors.country && (
                    <p className="text-sm text-destructive">{errors.country.message}</p>
                  )}
                </div>

                <div className="space-y-2 md:col-span-5">
                  <Label htmlFor="timezone">{t('profile.form.timezone')}</Label>
                  <Popover open={timezoneOpen} onOpenChange={setTimezoneOpen}>
                    <PopoverTrigger asChild>
                      <Button
                        variant="outline"
                        role="combobox"
                        aria-expanded={timezoneOpen}
                        className="w-full justify-between"
                      >
                        <div className="flex items-center gap-2">
                          <Clock className="h-4 w-4 text-muted-foreground" aria-hidden="true" />
                          {timezoneValue
                            ? timezones.find((timezone) => timezone.value === timezoneValue)?.label
                            : t('profile.form.timezonePlaceholder')}
                        </div>
                        <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
                      </Button>
                    </PopoverTrigger>
                    <PopoverContent className="w-[400px] p-0">
                      <Command>
                        <CommandInput placeholder="Buscar timezone..." className="h-9" />
                        <CommandList>
                          <CommandEmpty>No se encontraron timezones.</CommandEmpty>
                          <CommandGroup>
                            {timezones.map((timezone) => (
                              <CommandItem
                                key={timezone.value}
                                value={timezone.label}
                                onSelect={() => {
                                  setValue('timezone', timezone.value === timezoneValue ? '' : timezone.value)
                                  setTimezoneOpen(false)
                                }}
                              >
                                {timezone.label}
                                <Check
                                  className={`ml-auto h-4 w-4 ${
                                    timezoneValue === timezone.value ? "opacity-100" : "opacity-0"
                                  }`}
                                />
                              </CommandItem>
                            ))}
                          </CommandGroup>
                        </CommandList>
                      </Command>
                    </PopoverContent>
                  </Popover>
                  {errors.timezone && (
                    <p className="text-sm text-destructive">{errors.timezone.message}</p>
                  )}
                </div>
              </div>

              {/* Action Section - Button and Member Info */}
              <div className="flex flex-col md:flex-row md:justify-between md:items-center gap-4 pt-2">
                <div className="flex items-center gap-2 text-sm text-muted-foreground">
                  <Calendar className="h-4 w-4" />
                  <span className="font-medium">{t('profile.form.memberSince')}:</span>
                  <span>
                    {profile && new Date(profile.createdAt).toLocaleDateString('es-ES', {
                      month: 'long',
                      day: 'numeric',
                      year: 'numeric'
                    })}
                  </span>
                </div>

                <Button
                  type="submit"
                  disabled={isSubmitting || updateProfileMutation.isPending}
                  aria-describedby="submit-help"
                  className="w-full md:w-auto"
                  data-cy={sel('settings.profile.submitButton')}
                >
                  {(isSubmitting || updateProfileMutation.isPending) ? (
                    <>
                      <Loader2 className="mr-2 h-4 w-4 animate-spin" aria-hidden="true" />
                      {t('profile.form.updating')}
                    </>
                  ) : (
                    t('profile.form.updateButton')
                  )}
                </Button>
                <div id="submit-help" className="sr-only">
                  {(isSubmitting || updateProfileMutation.isPending) 
                    ? t('profile.form.submitHelpUpdating')
                    : t('profile.form.submitHelp')
                  }
                </div>
              </div>

              {/* Advanced Section */}
              <div className="mt-6">
                <Separator />
                <div className="mt-4">
                    <Button
                      type="button"
                      variant="ghost"
                      onClick={handleAdvancedToggle}
                      className="w-full justify-between text-muted-foreground hover:text-foreground"
                      aria-expanded={advancedOpen}
                      aria-controls="advanced-options"
                      aria-label={advancedOpen ? t('profile.advanced.closeLabel') : t('profile.advanced.openLabel')}
                    >
                      {t('profile.advanced.title')}
                      {advancedOpen ? (
                        <ChevronDown className="h-4 w-4" aria-hidden="true" />
                      ) : (
                        <ChevronRight className="h-4 w-4" aria-hidden="true" />
                      )}
                    </Button>
                  
                    {advancedOpen && (
                      <div
                        id="advanced-options"
                        className="mt-4 space-y-4 border-t pt-4"
                      >
                        <div className="space-y-2">
                          <h4
                            className="text-sm font-medium text-destructive"
                            id="danger-zone-heading"
                          >
                            {t('profile.danger.title')}
                          </h4>
                          <p className="text-xs text-muted-foreground">
                            {t('profile.danger.warning')}
                          </p>
                        
                        <Dialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
                            <DialogTrigger asChild>
                              <Button
                                variant="destructive"
                                className="w-full gap-2"
                                disabled={deleteAccountMutation.isPending}
                                aria-describedby="danger-zone-heading"
                              >
                                <Trash2 className="h-4 w-4" aria-hidden="true" />
                                {t('profile.danger.deleteButton')}
                              </Button>
                            </DialogTrigger>
                          <DialogContent>
                            <DialogHeader>
                              <DialogTitle className="flex items-center gap-2 text-destructive">
                                <AlertCircle className="h-5 w-5" />
                                {t('profile.danger.dialogTitle')}
                              </DialogTitle>
                              <DialogDescription asChild>
                                <div className="space-y-2">
                                  <div>
                                    {t('profile.danger.dialogDescription')}
                                  </div>
                                  <div className="font-medium text-foreground">
                                    {t('profile.danger.dialogWarning')}
                                  </div>
                                  <div>
                                    {t('profile.danger.dialogDetail')}
                                  </div>
                                </div>
                              </DialogDescription>
                            </DialogHeader>
                            <DialogFooter className="gap-2">
                              <Button
                                variant="outline"
                                onClick={() => setDeleteDialogOpen(false)}
                                disabled={deleteAccountMutation.isPending}
                              >
                                {t('profile.actions.cancel')}
                              </Button>
                              <Button
                                variant="destructive"
                                onClick={handleDeleteAccount}
                                disabled={deleteAccountMutation.isPending}
                                className="gap-2"
                              >
                                {deleteAccountMutation.isPending ? (
                                  <>
                                    <Loader2 className="h-4 w-4 animate-spin" />
                                    {t('profile.danger.deleting')}
                                  </>
                                ) : (
                                  <>
                                    <Trash2 className="h-4 w-4" />
                                    {t('profile.danger.confirmDelete')}
                                  </>
                                )}
                              </Button>
                            </DialogFooter>
                          </DialogContent>
                        </Dialog>
                      </div>
                    </div>
                  )}
                </div>
              </div>
            </form>
          </CardContent>
        </Card>
      </div>
    </>
  )
}

export default getTemplateOrDefaultClient('app/dashboard/settings/profile/page.tsx', ProfilePage)