502 lines
20 KiB
TypeScript
502 lines
20 KiB
TypeScript
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>
|
||
)
|
||
}
|