import { useState, useRef } from 'react'
import { useNavigate, Link } from 'react-router-dom'
import { useForm } from 'react-hook-form'
import { zodResolver } from '@hookform/resolvers/zod'
import { z } from 'zod'
import { marathonsApi } from '@/api'
import { NeonButton, Input, GlassCard } from '@/components/ui'
import { Globe, Lock, Users, UserCog, ArrowLeft, Gamepad2, AlertCircle, Sparkles, Calendar, Clock, Camera, Trash2 } from 'lucide-react'
import type { GameProposalMode } from '@/types'
import { useToast } from '@/store/toast'

const createSchema = z.object({
  title: z.string().min(1, 'Название обязательно').max(100),
  description: z.string().optional(),
  start_date: z.string().min(1, 'Дата начала обязательна'),
  duration_days: z.number().min(1).max(365).default(30),
  is_public: z.boolean().default(false),
  game_proposal_mode: z.enum(['all_participants', 'organizer_only']).default('all_participants'),
})

type CreateForm = z.infer<typeof createSchema>

export function CreateMarathonPage() {
  const navigate = useNavigate()
  const toast = useToast()
  const [isLoading, setIsLoading] = useState(false)
  const [error, setError] = useState<string | null>(null)
  const [coverFile, setCoverFile] = useState<File | null>(null)
  const [coverPreview, setCoverPreview] = useState<string | null>(null)
  const fileInputRef = useRef<HTMLInputElement>(null)

  const {
    register,
    handleSubmit,
    watch,
    setValue,
    formState: { errors },
  } = useForm<CreateForm>({
    resolver: zodResolver(createSchema),
    defaultValues: {
      duration_days: 30,
      is_public: false,
      game_proposal_mode: 'all_participants',
    },
  })

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

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

  const handleCoverChange = (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
    }

    setCoverFile(file)
    setCoverPreview(URL.createObjectURL(file))
  }

  const handleRemoveCover = () => {
    setCoverFile(null)
    if (coverPreview) {
      URL.revokeObjectURL(coverPreview)
    }
    setCoverPreview(null)
    if (fileInputRef.current) {
      fileInputRef.current.value = ''
    }
  }

  const onSubmit = async (data: CreateForm) => {
    setIsLoading(true)
    setError(null)
    try {
      const marathon = await marathonsApi.create({
        title: data.title,
        description: data.description,
        start_date: new Date(data.start_date).toISOString(),
        duration_days: data.duration_days,
        is_public: data.is_public,
        game_proposal_mode: data.game_proposal_mode as GameProposalMode,
      })

      // Upload cover if selected
      if (coverFile) {
        try {
          await marathonsApi.uploadCover(marathon.id, coverFile)
        } catch {
          toast.warning('Марафон создан, но не удалось загрузить обложку')
        }
      }

      navigate(`/marathons/${marathon.id}/lobby`)
    } catch (err: unknown) {
      const apiError = err as { response?: { data?: { detail?: string } } }
      setError(apiError.response?.data?.detail || 'Не удалось создать марафон')
    } finally {
      setIsLoading(false)
    }
  }

  return (
    <div className="max-w-xl mx-auto">
      {/* Back button */}
      <Link
        to="/marathons"
        className="inline-flex items-center gap-2 text-gray-400 hover:text-neon-400 mb-6 transition-colors group"
      >
        <ArrowLeft className="w-4 h-4 group-hover:-translate-x-1 transition-transform" />
        К списку марафонов
      </Link>

      <GlassCard variant="neon">
        {/* Header */}
        <div className="flex items-center gap-4 mb-8">
          <div className="w-14 h-14 rounded-2xl bg-gradient-to-br from-neon-500/20 to-accent-500/20 flex items-center justify-center border border-neon-500/30">
            <Gamepad2 className="w-7 h-7 text-neon-400" />
          </div>
          <div>
            <h1 className="text-2xl font-bold text-white">Создать марафон</h1>
            <p className="text-gray-400 text-sm">Настройте свой игровой марафон</p>
          </div>
        </div>

        <form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
          {error && (
            <div className="flex items-center gap-3 p-4 bg-red-500/10 border border-red-500/30 rounded-xl text-red-400 text-sm animate-shake">
              <AlertCircle className="w-5 h-5 flex-shrink-0" />
              <span>{error}</span>
            </div>
          )}

          {/* 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={isLoading}
                className="relative w-full h-40 rounded-xl overflow-hidden bg-dark-700 border-2 border-dashed border-dark-500 hover:border-neon-500/50 transition-all"
              >
                {coverPreview ? (
                  <img
                    src={coverPreview}
                    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-8 h-8 mb-2" />
                    <span className="text-sm">Нажмите для загрузки</span>
                    <span className="text-xs text-gray-600 mt-1">JPG, PNG до 5 МБ</span>
                  </div>
                )}
                {coverPreview && (
                  <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-6 h-6 text-neon-500" />
                    <span className="ml-2 text-white text-sm">Изменить</span>
                  </div>
                )}
              </button>
              {coverPreview && (
                <button
                  type="button"
                  onClick={handleRemoveCover}
                  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>

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

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

          {/* Date and duration */}
          <div className="grid grid-cols-2 gap-4">
            <div>
              <label className="flex items-center gap-2 text-sm font-medium text-gray-300 mb-2">
                <Calendar className="w-4 h-4 text-neon-400" />
                Дата начала
              </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>

            <div>
              <label className="flex items-center gap-2 text-sm font-medium text-gray-300 mb-2">
                <Clock className="w-4 h-4 text-accent-400" />
                Длительность (дней)
              </label>
              <input
                type="number"
                className="input w-full"
                min={1}
                max={365}
                {...register('duration_days', { valueAsNumber: true })}
              />
              {errors.duration_days && (
                <p className="text-red-400 text-xs mt-1">{errors.duration_days.message}</p>
              )}
            </div>
          </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)}
                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)}
                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')}
                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')}
                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>

          {/* Actions */}
          <div className="flex gap-3 pt-4 border-t border-dark-600">
            <NeonButton
              type="button"
              variant="outline"
              className="flex-1"
              onClick={() => navigate('/marathons')}
            >
              Отмена
            </NeonButton>
            <NeonButton
              type="submit"
              className="flex-1"
              isLoading={isLoading}
              icon={<Sparkles className="w-4 h-4" />}
            >
              Создать
            </NeonButton>
          </div>
        </form>
      </GlassCard>
    </div>
  )
}
