import { useState } 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 { Button, Input, Card, CardHeader, CardTitle, CardContent } from '@/components/ui'
import { Globe, Lock, Users, UserCog, ArrowLeft } from 'lucide-react'
import type { GameProposalMode } from '@/types'

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 [isLoading, setIsLoading] = useState(false)
  const [error, setError] = useState<string | null>(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 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,
      })
      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-lg mx-auto">
      {/* Back button */}
      <Link to="/marathons" className="inline-flex items-center gap-2 text-gray-400 hover:text-white mb-4 transition-colors">
        <ArrowLeft className="w-4 h-4" />
        К списку марафонов
      </Link>

      <Card>
        <CardHeader>
          <CardTitle>Создать марафон</CardTitle>
        </CardHeader>
        <CardContent>
          <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
            {error && (
              <div className="p-3 bg-red-500/20 border border-red-500 rounded-lg text-red-500 text-sm">
                {error}
              </div>
            )}

            <Input
              label="Название"
              placeholder="Введите название марафона"
              error={errors.title?.message}
              {...register('title')}
            />

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

            <Input
              label="Дата начала"
              type="datetime-local"
              error={errors.start_date?.message}
              {...register('start_date')}
            />

            <Input
              label="Длительность (дней)"
              type="number"
              error={errors.duration_days?.message}
              {...register('duration_days', { valueAsNumber: true })}
            />

            {/* Тип марафона */}
            <div>
              <label className="block text-sm font-medium text-gray-300 mb-2">
                Тип марафона
              </label>
              <div className="grid grid-cols-2 gap-3">
                <button
                  type="button"
                  onClick={() => setValue('is_public', false)}
                  className={`p-3 rounded-lg border-2 transition-all ${
                    !isPublic
                      ? 'border-primary-500 bg-primary-500/10'
                      : 'border-gray-700 bg-gray-800 hover:border-gray-600'
                  }`}
                >
                  <Lock className={`w-5 h-5 mx-auto mb-1 ${!isPublic ? 'text-primary-400' : 'text-gray-400'}`} />
                  <div className={`text-sm font-medium ${!isPublic ? 'text-white' : 'text-gray-300'}`}>
                    Закрытый
                  </div>
                  <div className="text-xs text-gray-500 mt-1">
                    Вход по коду
                  </div>
                </button>
                <button
                  type="button"
                  onClick={() => setValue('is_public', true)}
                  className={`p-3 rounded-lg border-2 transition-all ${
                    isPublic
                      ? 'border-primary-500 bg-primary-500/10'
                      : 'border-gray-700 bg-gray-800 hover:border-gray-600'
                  }`}
                >
                  <Globe className={`w-5 h-5 mx-auto mb-1 ${isPublic ? 'text-primary-400' : 'text-gray-400'}`} />
                  <div className={`text-sm font-medium ${isPublic ? 'text-white' : 'text-gray-300'}`}>
                    Открытый
                  </div>
                  <div className="text-xs text-gray-500 mt-1">
                    Виден всем
                  </div>
                </button>
              </div>
            </div>

            {/* Кто может предлагать игры */}
            <div>
              <label className="block text-sm font-medium text-gray-300 mb-2">
                Кто может предлагать игры
              </label>
              <div className="grid grid-cols-2 gap-3">
                <button
                  type="button"
                  onClick={() => setValue('game_proposal_mode', 'all_participants')}
                  className={`p-3 rounded-lg border-2 transition-all ${
                    gameProposalMode === 'all_participants'
                      ? 'border-primary-500 bg-primary-500/10'
                      : 'border-gray-700 bg-gray-800 hover:border-gray-600'
                  }`}
                >
                  <Users className={`w-5 h-5 mx-auto mb-1 ${gameProposalMode === 'all_participants' ? 'text-primary-400' : 'text-gray-400'}`} />
                  <div className={`text-sm font-medium ${gameProposalMode === 'all_participants' ? 'text-white' : 'text-gray-300'}`}>
                    Все участники
                  </div>
                  <div className="text-xs text-gray-500 mt-1">
                    С модерацией
                  </div>
                </button>
                <button
                  type="button"
                  onClick={() => setValue('game_proposal_mode', 'organizer_only')}
                  className={`p-3 rounded-lg border-2 transition-all ${
                    gameProposalMode === 'organizer_only'
                      ? 'border-primary-500 bg-primary-500/10'
                      : 'border-gray-700 bg-gray-800 hover:border-gray-600'
                  }`}
                >
                  <UserCog className={`w-5 h-5 mx-auto mb-1 ${gameProposalMode === 'organizer_only' ? 'text-primary-400' : 'text-gray-400'}`} />
                  <div className={`text-sm font-medium ${gameProposalMode === 'organizer_only' ? 'text-white' : 'text-gray-300'}`}>
                    Только организатор
                  </div>
                  <div className="text-xs text-gray-500 mt-1">
                    Без модерации
                  </div>
                </button>
              </div>
            </div>

            <div className="flex gap-3 pt-4">
              <Button
                type="button"
                variant="secondary"
                className="flex-1"
                onClick={() => navigate('/marathons')}
              >
                Отмена
              </Button>
              <Button type="submit" className="flex-1" isLoading={isLoading}>
                Создать
              </Button>
            </div>
          </form>
        </CardContent>
      </Card>
    </div>
  )
}
