'use client'; import { useState, useCallback, useEffect, useRef } from 'react'; import { useToast } from './ToastProvider'; import ApiErrorAlert from './ApiErrorAlert'; import { getResponseErrorTextWithRequestId } from '@/lib/api-client'; import { datetimeLocalToIso, formatForDatetimeLocalInput } from '@/lib/datetime-local'; import { getRuntimeClientConfig } from '@/lib/runtime-client-config'; import type { PlanFeatures } from '@/lib/plans/types'; interface LinkEditModalProps { link: { id: string; shortUrl: string; longUrl: string; title: string | null; description: string | null; ogTitle: string | null; ogDescription: string | null; ogImage: string | null; expiresAt?: string | null; clickLimit?: number | null; hasPassword?: boolean; }; planFeatures?: PlanFeatures; onClose: () => void; onSave: () => void; } const DEFAULT_PLAN_FEATURES: PlanFeatures = { customSlug: false, password: false, expiresAt: false, clickLimit: false, telegramClickNotifications: false, bulkActions: false, csvExport: false, pdfExport: false, manualOgEditing: false, }; export default function LinkEditModal({ link, planFeatures = DEFAULT_PLAN_FEATURES, onClose, onSave }: LinkEditModalProps) { const toast = useToast(); const [title, setTitle] = useState(link.title || ''); const [description, setDescription] = useState(link.description || ''); const [ogTitle, setOgTitle] = useState(link.ogTitle || ''); const [ogDescription, setOgDescription] = useState(link.ogDescription || ''); const [ogImage, setOgImage] = useState(link.ogImage || ''); const projectTimeZone = getRuntimeClientConfig().timeZone; const initialExpiresAt = formatForDatetimeLocalInput(link.expiresAt ?? null, projectTimeZone); const [expiresAt, setExpiresAt] = useState(initialExpiresAt); const [hasInvalidExpiresAt, setHasInvalidExpiresAt] = useState(Boolean(link.expiresAt) && !initialExpiresAt); const [clickLimit, setClickLimit] = useState( typeof link.clickLimit === 'number' && link.clickLimit > 0 ? String(link.clickLimit) : '' ); const [password, setPassword] = useState(''); const [clearPassword, setClearPassword] = useState(false); const [isUploading, setIsUploading] = useState(false); const [isSaving, setIsSaving] = useState(false); const [error, setError] = useState(''); const [localPreviewImage, setLocalPreviewImage] = useState(''); const localPreviewRef = useRef(null); const clearLocalPreview = useCallback(() => { if (localPreviewRef.current) { URL.revokeObjectURL(localPreviewRef.current); localPreviewRef.current = null; } setLocalPreviewImage(''); }, []); useEffect(() => { return () => { if (localPreviewRef.current) { URL.revokeObjectURL(localPreviewRef.current); } }; }, []); const handleImageUpload = useCallback(async (e: React.ChangeEvent) => { const file = e.target.files?.[0]; if (!file) return; if (!file.type.startsWith('image/')) { toast.error('Пожалуйста, выберите изображение'); return; } const maxSize = 5 * 1024 * 1024; if (file.size > maxSize) { toast.error('Размер файла не должен превышать 5MB'); return; } clearLocalPreview(); const objectUrl = URL.createObjectURL(file); localPreviewRef.current = objectUrl; setLocalPreviewImage(objectUrl); setIsUploading(true); try { const formData = new FormData(); formData.append('image', file); const response = await fetch('/api/og-image', { method: 'POST', body: formData, }); if (!response.ok) { throw new Error(await getResponseErrorTextWithRequestId(response, 'Ошибка загрузки')); } const data = await response.json(); setOgImage(data.url); toast.success('Изображение загружено'); } catch (err: unknown) { clearLocalPreview(); const message = err instanceof Error ? err.message : 'Не удалось загрузить изображение'; toast.error(message); } finally { setIsUploading(false); e.target.value = ''; } }, [clearLocalPreview, toast]); const previewImage = localPreviewImage || ogImage; const handleSave = async () => { setIsSaving(true); setError(''); try { const payload: Record = { title: title || null, description: description || null, }; if (planFeatures.manualOgEditing) { payload.ogTitle = ogTitle || null; payload.ogDescription = ogDescription || null; payload.ogImage = ogImage || null; } if (planFeatures.expiresAt) { if (hasInvalidExpiresAt && !expiresAt.trim()) { throw new Error('Текущий срок действия ссылки некорректен. Укажите дату заново.'); } payload.expiresAt = datetimeLocalToIso(expiresAt, projectTimeZone); } if (planFeatures.clickLimit) { payload.clickLimit = clickLimit ? Number(clickLimit) : null; } if (planFeatures.password) { payload.password = clearPassword ? null : (password ? password : undefined); } const response = await fetch(`/api/links/${link.id}`, { method: 'PATCH', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(payload), }); if (!response.ok) { throw new Error(await getResponseErrorTextWithRequestId(response, 'Ошибка сохранения')); } const data = await response.json(); toast.success('Ссылка обновлена'); onSave(); } catch (err: unknown) { const message = err instanceof Error ? err.message : 'Ошибка при сохранении'; setError(message); } finally { setIsSaving(false); } }; return (