import { useState, useRef, useMemo, useEffect } from 'react'; import { useNavigate } from 'react-router'; import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'; import { useTranslation } from 'react-i18next'; import { adminBroadcastsApi, BroadcastFilter, TariffFilter, CombinedBroadcastCreateRequest, } from '../api/adminBroadcasts'; import { AdminBackButton } from '../components/admin'; // Icons const BroadcastIcon = () => ( ); const XIcon = () => ( ); const RefreshIcon = () => ( ); const PhotoIcon = () => ( ); const VideoIcon = () => ( ); const DocumentIcon = () => ( ); const UsersIcon = () => ( ); const ChevronDownIcon = () => ( ); const TelegramIcon = () => ( ); const EmailIcon = () => ( ); // Filter labels const FILTER_GROUP_LABEL_KEYS: Record = { basic: 'admin.broadcasts.filterGroups.basic', subscription: 'admin.broadcasts.filterGroups.subscription', traffic: 'admin.broadcasts.filterGroups.traffic', registration: 'admin.broadcasts.filterGroups.registration', activity: 'admin.broadcasts.filterGroups.activity', source: 'admin.broadcasts.filterGroups.source', tariff: 'admin.broadcasts.filterGroups.tariff', email: 'admin.broadcasts.filterGroups.email', }; export default function AdminBroadcastCreate() { const { t } = useTranslation(); const navigate = useNavigate(); const queryClient = useQueryClient(); const fileInputRef = useRef(null); // Channel toggles (both can be enabled) const [telegramEnabled, setTelegramEnabled] = useState(true); const [emailEnabled, setEmailEnabled] = useState(false); // Separate targets per channel const [telegramTarget, setTelegramTarget] = useState(''); const [emailTarget, setEmailTarget] = useState(''); const [showTelegramFilters, setShowTelegramFilters] = useState(false); const [showEmailFilters, setShowEmailFilters] = useState(false); // Telegram-specific state const [messageText, setMessageText] = useState(''); const [selectedButtons, setSelectedButtons] = useState(['home']); const [mediaFile, setMediaFile] = useState(null); const [mediaType, setMediaType] = useState<'photo' | 'video' | 'document'>('photo'); const [mediaPreview, setMediaPreview] = useState(null); const [uploadedFileId, setUploadedFileId] = useState(null); const [isUploading, setIsUploading] = useState(false); const mediaPreviewRef = useRef(null); // Revoke blob URLs on unmount to prevent memory leaks useEffect(() => { return () => { if (mediaPreviewRef.current) URL.revokeObjectURL(mediaPreviewRef.current); }; }, []); // Email-specific state const [emailSubject, setEmailSubject] = useState(''); const [emailContent, setEmailContent] = useState(''); // Submitting state for dual send const [isSubmitting, setIsSubmitting] = useState(false); // Fetch Telegram filters const { data: filtersData, isLoading: filtersLoading } = useQuery({ queryKey: ['admin', 'broadcasts', 'filters'], queryFn: adminBroadcastsApi.getFilters, enabled: telegramEnabled, }); // Fetch Email filters const { data: emailFiltersData, isLoading: emailFiltersLoading } = useQuery({ queryKey: ['admin', 'broadcasts', 'email-filters'], queryFn: adminBroadcastsApi.getEmailFilters, enabled: emailEnabled, }); // Fetch buttons const { data: buttonsData } = useQuery({ queryKey: ['admin', 'broadcasts', 'buttons'], queryFn: adminBroadcastsApi.getButtons, enabled: telegramEnabled, }); // Preview mutations — separate for each channel const telegramPreviewMutation = useMutation({ mutationFn: adminBroadcastsApi.preview, }); const emailPreviewMutation = useMutation({ mutationFn: adminBroadcastsApi.previewEmail, }); // Create mutation (used for single-channel sends) const createMutation = useMutation({ mutationFn: adminBroadcastsApi.createCombined, onSuccess: (data) => { queryClient.invalidateQueries({ queryKey: ['admin', 'broadcasts'] }); navigate(`/admin/broadcasts/${data.id}`); }, }); // Group Telegram filters const groupedTelegramFilters = useMemo(() => { if (!filtersData) return {}; const groups: Record = {}; filtersData.filters.forEach((f) => { const group = f.group || 'basic'; if (!groups[group]) groups[group] = []; groups[group].push(f); }); if (filtersData.tariff_filters.length > 0) { groups['tariff'] = filtersData.tariff_filters; } filtersData.custom_filters.forEach((f) => { const group = f.group || 'custom'; if (!groups[group]) groups[group] = []; groups[group].push(f); }); return groups; }, [filtersData]); // Group Email filters const groupedEmailFilters = useMemo(() => { if (!emailFiltersData) return {}; const groups: Record = {}; emailFiltersData.filters.forEach((f) => { const group = f.group || 'email'; if (!groups[group]) groups[group] = []; groups[group].push(f); }); return groups; }, [emailFiltersData]); // Selected filter info for each channel const selectedTelegramFilter = useMemo(() => { if (!telegramTarget || !filtersData) return null; const all = [ ...filtersData.filters, ...filtersData.tariff_filters, ...filtersData.custom_filters, ]; return all.find((f) => f.key === telegramTarget) ?? null; }, [telegramTarget, filtersData]); const selectedEmailFilter = useMemo(() => { if (!emailTarget || !emailFiltersData) return null; return emailFiltersData.filters.find((f) => f.key === emailTarget) ?? null; }, [emailTarget, emailFiltersData]); // Handle toggling channels const handleToggleTelegram = () => { setTelegramEnabled((prev) => !prev); setTelegramTarget(''); telegramPreviewMutation.reset(); }; const handleToggleEmail = () => { setEmailEnabled((prev) => !prev); setEmailTarget(''); emailPreviewMutation.reset(); }; // Handle filter selection per channel const handleTelegramFilterSelect = (filterKey: string) => { setTelegramTarget(filterKey); setShowTelegramFilters(false); telegramPreviewMutation.mutate(filterKey); }; const handleEmailFilterSelect = (filterKey: string) => { setEmailTarget(filterKey); setShowEmailFilters(false); emailPreviewMutation.mutate(filterKey); }; // Handle file selection const handleFileSelect = async (e: React.ChangeEvent) => { const file = e.target.files?.[0]; if (!file) return; setMediaFile(file); if (file.type.startsWith('image/')) { setMediaType('photo'); if (mediaPreviewRef.current) URL.revokeObjectURL(mediaPreviewRef.current); const url = URL.createObjectURL(file); mediaPreviewRef.current = url; setMediaPreview(url); } else if (file.type.startsWith('video/')) { setMediaType('video'); setMediaPreview(null); } else { setMediaType('document'); setMediaPreview(null); } setIsUploading(true); try { const result = await adminBroadcastsApi.uploadMedia(file, mediaType); setUploadedFileId(result.file_id); } catch (err) { console.error('Upload failed:', err); setMediaFile(null); setMediaPreview(null); } finally { setIsUploading(false); } }; // Remove media const handleRemoveMedia = () => { if (mediaPreviewRef.current) { URL.revokeObjectURL(mediaPreviewRef.current); mediaPreviewRef.current = null; } setMediaFile(null); setMediaPreview(null); setUploadedFileId(null); if (fileInputRef.current) { fileInputRef.current.value = ''; } }; // Toggle button const toggleButton = (key: string) => { setSelectedButtons((prev) => prev.includes(key) ? prev.filter((b) => b !== key) : [...prev, key], ); }; // Validate form const isTelegramValid = telegramEnabled && telegramTarget && messageText.trim().length > 0; const isEmailValid = emailEnabled && emailTarget && emailSubject.trim().length > 0 && emailContent.trim().length > 0; const isValid = useMemo(() => { if (!telegramEnabled && !emailEnabled) return false; if (telegramEnabled && !isTelegramValid) return false; if (emailEnabled && !isEmailValid) return false; return true; }, [telegramEnabled, emailEnabled, isTelegramValid, isEmailValid]); const bothChannels = telegramEnabled && emailEnabled; // Submit const handleSubmit = async () => { if (!isValid) return; // Single channel — use existing createMutation with navigation to detail if (telegramEnabled && !emailEnabled) { const data: CombinedBroadcastCreateRequest = { channel: 'telegram', target: telegramTarget, message_text: messageText, selected_buttons: selectedButtons, }; if (uploadedFileId) { data.media = { type: mediaType, file_id: uploadedFileId }; } createMutation.mutate(data); return; } if (emailEnabled && !telegramEnabled) { const data: CombinedBroadcastCreateRequest = { channel: 'email', target: emailTarget, email_subject: emailSubject, email_html_content: emailContent, }; createMutation.mutate(data); return; } // Both channels — two sequential requests, navigate to list setIsSubmitting(true); try { const telegramData: CombinedBroadcastCreateRequest = { channel: 'telegram', target: telegramTarget, message_text: messageText, selected_buttons: selectedButtons, }; if (uploadedFileId) { telegramData.media = { type: mediaType, file_id: uploadedFileId }; } const emailData: CombinedBroadcastCreateRequest = { channel: 'email', target: emailTarget, email_subject: emailSubject, email_html_content: emailContent, }; await adminBroadcastsApi.createCombined(telegramData); await adminBroadcastsApi.createCombined(emailData); queryClient.invalidateQueries({ queryKey: ['admin', 'broadcasts'] }); navigate('/admin/broadcasts'); } finally { setIsSubmitting(false); } }; // Recipients counts per channel const telegramRecipientsCount = telegramEnabled ? (telegramPreviewMutation.data?.count ?? selectedTelegramFilter?.count ?? null) : null; const emailRecipientsCount = emailEnabled ? (emailPreviewMutation.data?.count ?? selectedEmailFilter?.count ?? null) : null; const isPending = createMutation.isPending || isSubmitting; // Render filter dropdown const renderFilterDropdown = ( channelType: 'telegram' | 'email', target: string, selectedFilter: BroadcastFilter | TariffFilter | null, recipientsCount: number | null, showFilters: boolean, setShowFilters: (v: boolean) => void, handleFilterSelect: (key: string) => void, groupedFilters: Record, isLoading: boolean, ) => (
{showFilters && (
{isLoading ? (
{t('common.loading')}
) : ( Object.entries(groupedFilters).map(([group, filters]) => (
{FILTER_GROUP_LABEL_KEYS[group] ? t(FILTER_GROUP_LABEL_KEYS[group]) : group}
{filters.map((filter) => ( ))}
)) )}
)}
); return (
{/* Header */}

{t('admin.broadcasts.create')}

{t('admin.broadcasts.subtitle')}

{/* Channel toggles */}
{!telegramEnabled && !emailEnabled && (

{t('admin.broadcasts.atLeastOneChannel')}

)} {bothChannels && (

{t('admin.broadcasts.sendingBoth')}

)}
{/* Telegram section */} {telegramEnabled && (

{t('admin.broadcasts.telegramSection')}

{/* Telegram filter selection */} {renderFilterDropdown( 'telegram', telegramTarget, selectedTelegramFilter, telegramRecipientsCount, showTelegramFilters, setShowTelegramFilters, handleTelegramFilterSelect, groupedTelegramFilters, filtersLoading, )} {/* Message text */}