import { useState, useRef, useEffect } from 'react'
import { useForm } from 'react-hook-form'
import { zodResolver } from '@hookform/resolvers/zod'
import { z } from 'zod'
import { marathonsApi } from '@/api'
import type { Marathon, GameProposalMode } from '@/types'
import { NeonButton, Input } from '@/components/ui'
import { useToast } from '@/store/toast'
import {
  X, Camera, Trash2, Loader2, Save, Globe, Lock, Users, UserCog, Sparkles, Zap
} from 'lucide-react'

const settingsSchema = z.object({
  title: z.string().min(1, 'Название обязательно').max(100, 'Максимум 100 символов'),
  description: z.string().optional(),
  start_date: z.string().min(1, 'Дата начала обязательна'),
  is_public: z.boolean(),
  game_proposal_mode: z.enum(['all_participants', 'organizer_only']),
  auto_events_enabled: z.boolean(),
})

type SettingsForm = z.infer<typeof settingsSchema>

interface MarathonSettingsModalProps {
  marathon: Marathon
  isOpen: boolean
  onClose: () => void
  onUpdate: (marathon: Marathon) => void
}

export function MarathonSettingsModal({
  marathon,
  isOpen,
  onClose,
  onUpdate,
}: MarathonSettingsModalProps) {
  const toast = useToast()
  const fileInputRef = useRef<HTMLInputElement>(null)

  const [isUploading, setIsUploading] = useState(false)
  const [isDeleting, setIsDeleting] = useState(false)
  const [coverPreview, setCoverPreview] = useState<string | null>(null)

  const {
    register,
    handleSubmit,
    watch,
    setValue,
    reset,
    formState: { errors, isSubmitting, isDirty },
  } = useForm<SettingsForm>({
    resolver: zodResolver(settingsSchema),
    defaultValues: {
      title: marathon.title,
      description: marathon.description || '',
      start_date: marathon.start_date
        ? new Date(marathon.start_date).toISOString().slice(0, 16)
        : '',
      is_public: marathon.is_public,
      game_proposal_mode: marathon.game_proposal_mode as GameProposalMode,
      auto_events_enabled: marathon.auto_events_enabled,
    },
  })

  const isPublic = watch('is_public')
  const gameProposalMode = watch('game_proposal_mode')
  const autoEventsEnabled = watch('auto_events_enabled')

  // Reset form when marathon changes
  useEffect(() => {
    reset({
      title: marathon.title,
      description: marathon.description || '',
      start_date: marathon.start_date
        ? new Date(marathon.start_date).toISOString().slice(0, 16)
        : '',
      is_public: marathon.is_public,
      game_proposal_mode: marathon.game_proposal_mode as GameProposalMode,
      auto_events_enabled: marathon.auto_events_enabled,
    })
    setCoverPreview(null)
  }, [marathon, reset])

  // Handle escape key
  useEffect(() => {
    const handleKeyDown = (e: KeyboardEvent) => {
      if (e.key === 'Escape' && isOpen) {
        onClose()
      }
    }
    window.addEventListener('keydown', handleKeyDown)
    return () => window.removeEventListener('keydown', handleKeyDown)
  }, [isOpen, onClose])

  // Prevent body scroll when modal is open
  useEffect(() => {
    if (isOpen) {
      document.body.style.overflow = 'hidden'
    } else {
      document.body.style.overflow = ''
    }
    return () => {
      document.body.style.overflow = ''
    }
  }, [isOpen])

  const onSubmit = async (data: SettingsForm) => {
    try {
      const updated = await marathonsApi.update(marathon.id, {
        title: data.title,
        description: data.description || undefined,
        start_date: new Date(data.start_date).toISOString(),
        is_public: data.is_public,
        game_proposal_mode: data.game_proposal_mode,
        auto_events_enabled: data.auto_events_enabled,
      })
      onUpdate(updated)
      toast.success('Настройки сохранены')
      onClose()
    } catch (err: unknown) {
      const error = err as { response?: { data?: { detail?: string } } }
      toast.error(error.response?.data?.detail || 'Не удалось сохранить настройки')
    }
  }

  const handleCoverClick = () => {
    fileInputRef.current?.click()
  }

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

    if (!file.type.startsWith('image/')) {
      toast.error('Файл должен быть изображением')
      return
    }
    if (file.size > 5 * 1024 * 1024) {
      toast.error('Максимальный размер файла 5 МБ')
      return
    }

    // Show preview immediately
    const previewUrl = URL.createObjectURL(file)
    setCoverPreview(previewUrl)

    setIsUploading(true)
    try {
      const updated = await marathonsApi.uploadCover(marathon.id, file)
      onUpdate(updated)
      toast.success('Обложка загружена')
    } catch (err: unknown) {
      const error = err as { response?: { data?: { detail?: string } } }
      toast.error(error.response?.data?.detail || 'Не удалось загрузить обложку')
      setCoverPreview(null)
    } finally {
      setIsUploading(false)
      // Reset input
      if (fileInputRef.current) {
        fileInputRef.current.value = ''
      }
    }
  }

  const handleDeleteCover = async () => {
    setIsDeleting(true)
    try {
      const updated = await marathonsApi.deleteCover(marathon.id)
      onUpdate(updated)
      setCoverPreview(null)
      toast.success('Обложка удалена')
    } catch (err: unknown) {
      const error = err as { response?: { data?: { detail?: string } } }
      toast.error(error.response?.data?.detail || 'Не удалось удалить обложку')
    } finally {
      setIsDeleting(false)
    }
  }

  if (!isOpen) return null

  const displayCover = coverPreview || marathon.cover_url

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
      {/* Backdrop */}
      <div
        className="absolute inset-0 bg-black/70 backdrop-blur-sm animate-in fade-in duration-200"
        onClick={onClose}
      />

      {/* Modal */}
      <div className="relative glass rounded-xl shadow-2xl max-w-2xl w-full max-h-[90vh] overflow-y-auto animate-in zoom-in-95 fade-in duration-200 border border-dark-600 custom-scrollbar">
        {/* Header */}
        <div className="sticky top-0 z-10 bg-dark-800/95 backdrop-blur-sm border-b border-dark-600 px-6 py-4 flex items-center justify-between">
          <h2 className="text-xl font-bold text-white">Настройки марафона</h2>
          <button
            onClick={onClose}
            className="text-gray-400 hover:text-white transition-colors p-1"
          >
            <X className="w-5 h-5" />
          </button>
        </div>

        <div className="p-6 space-y-6">
          {/* Cover Image */}
          <div>
            <label className="block text-sm font-medium text-gray-300 mb-3">
              Обложка марафона
            </label>
            <div className="relative group">
              <button
                type="button"
                onClick={handleCoverClick}
                disabled={isUploading || isDeleting}
                className="relative w-full h-48 rounded-xl overflow-hidden bg-dark-700 border-2 border-dashed border-dark-500 hover:border-neon-500/50 transition-all"
              >
                {displayCover ? (
                  <img
                    src={displayCover}
                    alt="Обложка марафона"
                    className="w-full h-full object-cover"
                  />
                ) : (
                  <div className="w-full h-full flex flex-col items-center justify-center text-gray-500">
                    <Camera className="w-10 h-10 mb-2" />
                    <span className="text-sm">Нажмите для загрузки</span>
                    <span className="text-xs text-gray-600 mt-1">JPG, PNG до 5 МБ</span>
                  </div>
                )}
                {(isUploading || isDeleting) && (
                  <div className="absolute inset-0 bg-dark-900/80 flex items-center justify-center">
                    <Loader2 className="w-8 h-8 text-neon-500 animate-spin" />
                  </div>
                )}
                {displayCover && !isUploading && !isDeleting && (
                  <div className="absolute inset-0 bg-dark-900/70 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
                    <Camera className="w-8 h-8 text-neon-500" />
                    <span className="ml-2 text-white">Изменить</span>
                  </div>
                )}
              </button>
              {displayCover && !isUploading && !isDeleting && (
                <button
                  type="button"
                  onClick={handleDeleteCover}
                  className="absolute top-2 right-2 p-2 rounded-lg bg-red-500/20 text-red-400 hover:bg-red-500/30 transition-colors"
                >
                  <Trash2 className="w-4 h-4" />
                </button>
              )}
            </div>
            <input
              ref={fileInputRef}
              type="file"
              accept="image/*"
              onChange={handleCoverChange}
              className="hidden"
            />
          </div>

          <form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
            {/* Title */}
            <Input
              label="Название"
              placeholder="Введите название марафона"
              error={errors.title?.message}
              {...register('title')}
            />

            {/* Description */}
            <div>
              <label className="block text-sm font-medium text-gray-300 mb-2">
                Описание (необязательно)
              </label>
              <textarea
                className="input min-h-[100px] resize-none w-full"
                placeholder="Расскажите о вашем марафоне..."
                {...register('description')}
              />
            </div>

            {/* Start date */}
            <div>
              <label className="block text-sm font-medium text-gray-300 mb-2">
                Дата начала
              </label>
              <input
                type="datetime-local"
                className="input w-full"
                {...register('start_date')}
              />
              {errors.start_date && (
                <p className="text-red-400 text-xs mt-1">{errors.start_date.message}</p>
              )}
            </div>

            {/* Marathon type */}
            <div>
              <label className="block text-sm font-medium text-gray-300 mb-3">
                Тип марафона
              </label>
              <div className="grid grid-cols-2 gap-3">
                <button
                  type="button"
                  onClick={() => setValue('is_public', false, { shouldDirty: true })}
                  className={`
                    relative p-4 rounded-xl border-2 transition-all duration-300 text-left group
                    ${!isPublic
                      ? 'border-neon-500/50 bg-neon-500/10 shadow-[0_0_14px_rgba(34,211,238,0.08)]'
                      : 'border-dark-600 bg-dark-700/50 hover:border-dark-500'
                    }
                  `}
                >
                  <div className={`
                    w-10 h-10 rounded-xl mb-3 flex items-center justify-center transition-colors
                    ${!isPublic ? 'bg-neon-500/20' : 'bg-dark-600'}
                  `}>
                    <Lock className={`w-5 h-5 ${!isPublic ? 'text-neon-400' : 'text-gray-400'}`} />
                  </div>
                  <div className={`font-semibold mb-1 ${!isPublic ? 'text-white' : 'text-gray-300'}`}>
                    Закрытый
                  </div>
                  <div className="text-xs text-gray-500">
                    Вход только по коду приглашения
                  </div>
                  {!isPublic && (
                    <div className="absolute top-3 right-3">
                      <Sparkles className="w-4 h-4 text-neon-400" />
                    </div>
                  )}
                </button>

                <button
                  type="button"
                  onClick={() => setValue('is_public', true, { shouldDirty: true })}
                  className={`
                    relative p-4 rounded-xl border-2 transition-all duration-300 text-left group
                    ${isPublic
                      ? 'border-accent-500/50 bg-accent-500/10 shadow-[0_0_14px_rgba(139,92,246,0.08)]'
                      : 'border-dark-600 bg-dark-700/50 hover:border-dark-500'
                    }
                  `}
                >
                  <div className={`
                    w-10 h-10 rounded-xl mb-3 flex items-center justify-center transition-colors
                    ${isPublic ? 'bg-accent-500/20' : 'bg-dark-600'}
                  `}>
                    <Globe className={`w-5 h-5 ${isPublic ? 'text-accent-400' : 'text-gray-400'}`} />
                  </div>
                  <div className={`font-semibold mb-1 ${isPublic ? 'text-white' : 'text-gray-300'}`}>
                    Открытый
                  </div>
                  <div className="text-xs text-gray-500">
                    Виден всем пользователям
                  </div>
                  {isPublic && (
                    <div className="absolute top-3 right-3">
                      <Sparkles className="w-4 h-4 text-accent-400" />
                    </div>
                  )}
                </button>
              </div>
            </div>

            {/* Game proposal mode */}
            <div>
              <label className="block text-sm font-medium text-gray-300 mb-3">
                Кто может предлагать игры
              </label>
              <div className="grid grid-cols-2 gap-3">
                <button
                  type="button"
                  onClick={() => setValue('game_proposal_mode', 'all_participants', { shouldDirty: true })}
                  className={`
                    relative p-4 rounded-xl border-2 transition-all duration-300 text-left
                    ${gameProposalMode === 'all_participants'
                      ? 'border-neon-500/50 bg-neon-500/10 shadow-[0_0_14px_rgba(34,211,238,0.08)]'
                      : 'border-dark-600 bg-dark-700/50 hover:border-dark-500'
                    }
                  `}
                >
                  <div className={`
                    w-10 h-10 rounded-xl mb-3 flex items-center justify-center transition-colors
                    ${gameProposalMode === 'all_participants' ? 'bg-neon-500/20' : 'bg-dark-600'}
                  `}>
                    <Users className={`w-5 h-5 ${gameProposalMode === 'all_participants' ? 'text-neon-400' : 'text-gray-400'}`} />
                  </div>
                  <div className={`font-semibold mb-1 ${gameProposalMode === 'all_participants' ? 'text-white' : 'text-gray-300'}`}>
                    Все участники
                  </div>
                  <div className="text-xs text-gray-500">
                    С модерацией организатором
                  </div>
                  {gameProposalMode === 'all_participants' && (
                    <div className="absolute top-3 right-3">
                      <Sparkles className="w-4 h-4 text-neon-400" />
                    </div>
                  )}
                </button>

                <button
                  type="button"
                  onClick={() => setValue('game_proposal_mode', 'organizer_only', { shouldDirty: true })}
                  className={`
                    relative p-4 rounded-xl border-2 transition-all duration-300 text-left
                    ${gameProposalMode === 'organizer_only'
                      ? 'border-accent-500/50 bg-accent-500/10 shadow-[0_0_14px_rgba(139,92,246,0.08)]'
                      : 'border-dark-600 bg-dark-700/50 hover:border-dark-500'
                    }
                  `}
                >
                  <div className={`
                    w-10 h-10 rounded-xl mb-3 flex items-center justify-center transition-colors
                    ${gameProposalMode === 'organizer_only' ? 'bg-accent-500/20' : 'bg-dark-600'}
                  `}>
                    <UserCog className={`w-5 h-5 ${gameProposalMode === 'organizer_only' ? 'text-accent-400' : 'text-gray-400'}`} />
                  </div>
                  <div className={`font-semibold mb-1 ${gameProposalMode === 'organizer_only' ? 'text-white' : 'text-gray-300'}`}>
                    Только организатор
                  </div>
                  <div className="text-xs text-gray-500">
                    Без модерации
                  </div>
                  {gameProposalMode === 'organizer_only' && (
                    <div className="absolute top-3 right-3">
                      <Sparkles className="w-4 h-4 text-accent-400" />
                    </div>
                  )}
                </button>
              </div>
            </div>

            {/* Auto events toggle */}
            <div>
              <label className="block text-sm font-medium text-gray-300 mb-3">
                Автоматические события
              </label>
              <button
                type="button"
                onClick={() => setValue('auto_events_enabled', !autoEventsEnabled, { shouldDirty: true })}
                className={`
                  w-full p-4 rounded-xl border-2 transition-all duration-300 text-left flex items-center gap-4
                  ${autoEventsEnabled
                    ? 'border-yellow-500/50 bg-yellow-500/10'
                    : 'border-dark-600 bg-dark-700/50 hover:border-dark-500'
                  }
                `}
              >
                <div className={`
                  w-10 h-10 rounded-xl flex items-center justify-center transition-colors flex-shrink-0
                  ${autoEventsEnabled ? 'bg-yellow-500/20' : 'bg-dark-600'}
                `}>
                  <Zap className={`w-5 h-5 ${autoEventsEnabled ? 'text-yellow-400' : 'text-gray-400'}`} />
                </div>
                <div className="flex-1">
                  <div className={`font-semibold ${autoEventsEnabled ? 'text-white' : 'text-gray-300'}`}>
                    {autoEventsEnabled ? 'Включены' : 'Выключены'}
                  </div>
                  <div className="text-xs text-gray-500">
                    Случайные бонусные события во время марафона
                  </div>
                </div>
                <div className={`
                  w-12 h-7 rounded-full transition-colors relative flex-shrink-0
                  ${autoEventsEnabled ? 'bg-yellow-500' : 'bg-dark-600'}
                `}>
                  <div className={`
                    absolute top-1 w-5 h-5 rounded-full bg-white shadow transition-transform
                    ${autoEventsEnabled ? 'left-6' : 'left-1'}
                  `} />
                </div>
              </button>
            </div>

            {/* Actions */}
            <div className="flex gap-3 pt-4 border-t border-dark-600">
              <NeonButton
                type="button"
                variant="outline"
                className="flex-1"
                onClick={onClose}
              >
                Отмена
              </NeonButton>
              <NeonButton
                type="submit"
                className="flex-1"
                isLoading={isSubmitting}
                disabled={!isDirty}
                icon={<Save className="w-4 h-4" />}
              >
                Сохранить
              </NeonButton>
            </div>
          </form>
        </div>
      </div>
    </div>
  )
}