Update AdminBroadcasts.tsx

src/pages/AdminBroadcasts.tsx

@@ -7,7 +7,8 @@ import {
   Broadcast,
   BroadcastFilter,
   TariffFilter,
-  BroadcastCreateRequest,
+  BroadcastChannel,
+  CombinedBroadcastCreateRequest,
 } from '../api/adminBroadcasts';
 
 // Icons
@@ -111,6 +112,22 @@ const ChevronDownIcon = () => (
   </svg>
 );
 
+const TelegramIcon = () => (
+  <svg className="h-5 w-5" viewBox="0 0 24 24" fill="currentColor">
+    <path d="M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z" />
+  </svg>
+);
+
+const EmailIcon = () => (
+  <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75"
+    />
+  </svg>
+);
+
 // Status badge component
 const statusConfig: Record<string, { bg: string; text: string; labelKey: string }> = {
   queued: {
@@ -156,6 +173,38 @@ function StatusBadge({ status }: { status: string }) {
   );
 }
 
+// Channel badge component
+function ChannelBadge({ channel }: { channel?: BroadcastChannel }) {
+  const { t } = useTranslation();
+
+  if (!channel || channel === 'telegram') {
+    return (
+      <span className="flex items-center gap-1 rounded-full bg-blue-500/20 px-2 py-0.5 text-xs text-blue-400">
+        <TelegramIcon />
+        <span className="hidden sm:inline">Telegram</span>
+      </span>
+    );
+  }
+
+  if (channel === 'email') {
+    return (
+      <span className="flex items-center gap-1 rounded-full bg-purple-500/20 px-2 py-0.5 text-xs text-purple-400">
+        <EmailIcon />
+        <span className="hidden sm:inline">Email</span>
+      </span>
+    );
+  }
+
+  return (
+    <span className="flex items-center gap-1 rounded-full bg-green-500/20 px-2 py-0.5 text-xs text-green-400">
+      <TelegramIcon />
+      <span className="mx-0.5">+</span>
+      <EmailIcon />
+      <span className="hidden sm:inline">{t('admin.broadcasts.channel.both')}</span>
+    </span>
+  );
+}
+
 // Filter labels (labelKey pattern: store i18n keys, resolve at render time with t())
 const FILTER_GROUP_LABEL_KEYS: Record<string, string> = {
   basic: 'admin.broadcasts.filterGroups.basic',
@@ -165,6 +214,7 @@ const FILTER_GROUP_LABEL_KEYS: Record<string, string> = {
   activity: 'admin.broadcasts.filterGroups.activity',
   source: 'admin.broadcasts.filterGroups.source',
   tariff: 'admin.broadcasts.filterGroups.tariff',
+  email: 'admin.broadcasts.filterGroups.email',
 };
 
 // Create broadcast modal
@@ -178,7 +228,14 @@ function CreateBroadcastModal({ onClose, onSuccess }: CreateModalProps) {
   const queryClient = useQueryClient();
   const fileInputRef = useRef<HTMLInputElement>(null);
 
+  // Channel selection
+  const [channel, setChannel] = useState<BroadcastChannel>('telegram');
+
+  // Common fields
   const [target, setTarget] = useState('');
+  const [emailTarget, setEmailTarget] = useState('');
+
+  // Telegram fields
   const [messageText, setMessageText] = useState('');
   const [selectedButtons, setSelectedButtons] = useState<string[]>(['home']);
   const [mediaFile, setMediaFile] = useState<File | null>(null);
@@ -186,28 +243,48 @@ function CreateBroadcastModal({ onClose, onSuccess }: CreateModalProps) {
   const [mediaPreview, setMediaPreview] = useState<string | null>(null);
   const [uploadedFileId, setUploadedFileId] = useState<string | null>(null);
   const [isUploading, setIsUploading] = useState(false);
-  const [showFilters, setShowFilters] = useState(false);
 
-  // Fetch filters
+  // Email fields
+  const [emailSubject, setEmailSubject] = useState('');
+  const [emailHtmlContent, setEmailHtmlContent] = useState('');
+
+  // UI state
+  const [showFilters, setShowFilters] = useState(false);
+  const [showEmailFilters, setShowEmailFilters] = useState(false);
+
+  // Fetch Telegram filters
   const { data: filtersData, isLoading: filtersLoading } = useQuery({
     queryKey: ['admin', 'broadcasts', 'filters'],
     queryFn: adminBroadcastsApi.getFilters,
+    enabled: channel === 'telegram' || channel === 'both',
+  });
+
+  // Fetch Email filters
+  const { data: emailFiltersData, isLoading: emailFiltersLoading } = useQuery({
+    queryKey: ['admin', 'broadcasts', 'email-filters'],
+    queryFn: adminBroadcastsApi.getEmailFilters,
+    enabled: channel === 'email' || channel === 'both',
   });
 
   // Fetch buttons
   const { data: buttonsData } = useQuery({
     queryKey: ['admin', 'broadcasts', 'buttons'],
     queryFn: adminBroadcastsApi.getButtons,
+    enabled: channel === 'telegram' || channel === 'both',
   });
 
-  // Preview mutation
+  // Preview mutations
   const previewMutation = useMutation({
     mutationFn: adminBroadcastsApi.preview,
   });
 
+  const previewEmailMutation = useMutation({
+    mutationFn: adminBroadcastsApi.previewEmail,
+  });
+
   // Create mutation
   const createMutation = useMutation({
-    mutationFn: adminBroadcastsApi.create,
+    mutationFn: adminBroadcastsApi.createCombined,
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ['admin', 'broadcasts'] });
       onSuccess();
@@ -242,6 +319,20 @@ function CreateBroadcastModal({ onClose, onSuccess }: CreateModalProps) {
     return groups;
   }, [filtersData]);
 
+  // Group email filters
+  const groupedEmailFilters = useMemo(() => {
+    if (!emailFiltersData) return {};
+    const groups: Record<string, BroadcastFilter[]> = {};
+
+    emailFiltersData.filters.forEach((f) => {
+      const group = f.group || 'email';
+      if (!groups[group]) groups[group] = [];
+      groups[group].push(f);
+    });
+
+    return groups;
+  }, [emailFiltersData]);
+
   // Selected filter info
   const selectedFilter = useMemo(() => {
     if (!target || !filtersData) return null;
@@ -253,6 +344,11 @@ function CreateBroadcastModal({ onClose, onSuccess }: CreateModalProps) {
     return all.find((f) => f.key === target);
   }, [target, filtersData]);
 
+  const selectedEmailFilter = useMemo(() => {
+    if (!emailTarget || !emailFiltersData) return null;
+    return emailFiltersData.filters.find((f) => f.key === emailTarget);
+  }, [emailTarget, emailFiltersData]);
+
   // Handle file selection
   const handleFileSelect = async (e: React.ChangeEvent<HTMLInputElement>) => {
     const file = e.target.files?.[0];
@@ -303,30 +399,77 @@ function CreateBroadcastModal({ onClose, onSuccess }: CreateModalProps) {
     );
   };
 
+  // Validation
+  const canSubmit = useMemo(() => {
+    if (createMutation.isPending || isUploading) return false;
+
+    if (channel === 'telegram') {
+      return !!target && !!messageText.trim();
+    }
+
+    if (channel === 'email') {
+      return !!emailTarget && !!emailSubject.trim() && !!emailHtmlContent.trim();
+    }
+
+    // Both
+    return (
+      !!target &&
+      !!messageText.trim() &&
+      !!emailTarget &&
+      !!emailSubject.trim() &&
+      !!emailHtmlContent.trim()
+    );
+  }, [
+    channel,
+    target,
+    messageText,
+    emailTarget,
+    emailSubject,
+    emailHtmlContent,
+    createMutation.isPending,
+    isUploading,
+  ]);
+
   // Submit
   const handleSubmit = () => {
-    if (!target || !messageText.trim()) return;
+    if (!canSubmit) return;
 
-    const data: BroadcastCreateRequest = {
-      target,
-      message_text: messageText,
-      selected_buttons: selectedButtons,
+    const data: CombinedBroadcastCreateRequest = {
+      channel,
+      target: channel === 'email' ? emailTarget : target,
     };
 
-    if (uploadedFileId) {
-      data.media = {
-        type: mediaType,
-        file_id: uploadedFileId,
-      };
+    // Telegram data
+    if (channel === 'telegram' || channel === 'both') {
+      data.message_text = messageText;
+      data.selected_buttons = selectedButtons;
+
+      if (uploadedFileId) {
+        data.media = {
+          type: mediaType,
+          file_id: uploadedFileId,
+        };
+      }
+    }
+
+    // Email data
+    if (channel === 'email' || channel === 'both') {
+      data.email_subject = emailSubject;
+      data.email_html_content = emailHtmlContent;
+      if (channel === 'both') {
+        data.target = target; // Use Telegram target as primary
+      }
     }
 
     createMutation.mutate(data);
   };
 
-  const recipientsCount = previewMutation.data?.count ?? selectedFilter?.count ?? null;
+  const telegramRecipientsCount = previewMutation.data?.count ?? selectedFilter?.count ?? null;
+  const emailRecipientsCount =
+    previewEmailMutation.data?.count ?? selectedEmailFilter?.count ?? null;
 
   return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center overflow-y-auto p-4">
+    <div className="fixed inset-0 z-50 flex items-center justify-center overflow-y-auto bg-black/50 p-4">
       <div className="my-4 w-full max-w-2xl rounded-xl bg-dark-800">
         {/* Header */}
         <div className="flex items-center justify-between border-b border-dark-700 p-4">
@@ -343,177 +486,346 @@ function CreateBroadcastModal({ onClose, onSuccess }: CreateModalProps) {
 
         {/* Content */}
         <div className="max-h-[70vh] space-y-4 overflow-y-auto p-4">
-          {/* Filter selection */}
+          {/* Channel selection */}
           <div>
             <label className="mb-2 block text-sm font-medium text-dark-300">
-              {t('admin.broadcasts.selectFilter')}
+              {t('admin.broadcasts.selectChannel')}
             </label>
-            <div className="relative">
+            <div className="flex gap-2">
               <button
-                onClick={() => setShowFilters(!showFilters)}
-                className="flex w-full items-center justify-between rounded-lg bg-dark-700 p-3 text-left transition-colors hover:bg-dark-600"
+                onClick={() => setChannel('telegram')}
+                className={`flex flex-1 items-center justify-center gap-2 rounded-lg px-4 py-3 transition-colors ${
+                  channel === 'telegram'
+                    ? 'bg-blue-500 text-white'
+                    : 'bg-dark-700 text-dark-300 hover:bg-dark-600'
+                }`}
               >
-                <div className="flex items-center gap-2">
-                  <UsersIcon />
-                  <span className={selectedFilter ? 'text-dark-100' : 'text-dark-400'}>
-                    {selectedFilter
-                      ? selectedFilter.label
-                      : t('admin.broadcasts.selectFilterPlaceholder')}
-                  </span>
-                  {recipientsCount !== null && (
-                    <span className="rounded-full bg-accent-500/20 px-2 py-0.5 text-xs text-accent-400">
-                      {recipientsCount} {t('admin.broadcasts.recipients')}
-                    </span>
-                  )}
-                </div>
-                <ChevronDownIcon />
+                <TelegramIcon />
+                <span>Telegram</span>
               </button>
+              <button
+                onClick={() => setChannel('email')}
+                className={`flex flex-1 items-center justify-center gap-2 rounded-lg px-4 py-3 transition-colors ${
+                  channel === 'email'
+                    ? 'bg-purple-500 text-white'
+                    : 'bg-dark-700 text-dark-300 hover:bg-dark-600'
+                }`}
+              >
+                <EmailIcon />
+                <span>Email</span>
+              </button>
+              <button
+                onClick={() => setChannel('both')}
+                className={`flex flex-1 items-center justify-center gap-2 rounded-lg px-4 py-3 transition-colors ${
+                  channel === 'both'
+                    ? 'bg-green-500 text-white'
+                    : 'bg-dark-700 text-dark-300 hover:bg-dark-600'
+                }`}
+              >
+                <TelegramIcon />
+                <span>+</span>
+                <EmailIcon />
+              </button>
+            </div>
+          </div>
 
-              {showFilters && (
-                <div className="absolute left-0 right-0 top-full z-10 mt-1 max-h-64 overflow-y-auto rounded-lg bg-dark-700 shadow-xl">
-                  {filtersLoading ? (
-                    <div className="p-4 text-center text-dark-400">Loading...</div>
-                  ) : (
-                    Object.entries(groupedFilters).map(([group, filters]) => (
-                      <div key={group}>
-                        <div className="sticky top-0 bg-dark-800 px-3 py-2 text-xs font-medium text-dark-400">
-                          {FILTER_GROUP_LABEL_KEYS[group]
-                            ? t(FILTER_GROUP_LABEL_KEYS[group])
-                            : group}
-                        </div>
-                        {filters.map((filter) => (
-                          <button
-                            key={filter.key}
-                            onClick={() => {
-                              setTarget(filter.key);
-                              setShowFilters(false);
-                              previewMutation.mutate(filter.key);
-                            }}
-                            className={`flex w-full items-center justify-between px-3 py-2 text-left transition-colors hover:bg-dark-600 ${
-                              target === filter.key ? 'bg-accent-500/20' : ''
-                            }`}
-                          >
-                            <span className="text-dark-100">{filter.label}</span>
-                            {filter.count !== null && filter.count !== undefined && (
-                              <span className="text-xs text-dark-400">{filter.count}</span>
-                            )}
-                          </button>
-                        ))}
-                      </div>
-                    ))
+          {/* Telegram Section */}
+          {(channel === 'telegram' || channel === 'both') && (
+            <div className="space-y-4 rounded-lg border border-blue-500/30 bg-blue-500/5 p-4">
+              <div className="flex items-center gap-2 text-blue-400">
+                <TelegramIcon />
+                <span className="font-medium">{t('admin.broadcasts.telegramSection')}</span>
+              </div>
+
+              {/* Filter selection */}
+              <div>
+                <label className="mb-2 block text-sm font-medium text-dark-300">
+                  {t('admin.broadcasts.selectFilter')}
+                </label>
+                <div className="relative">
+                  <button
+                    onClick={() => setShowFilters(!showFilters)}
+                    className="flex w-full items-center justify-between rounded-lg bg-dark-700 p-3 text-left transition-colors hover:bg-dark-600"
+                  >
+                    <div className="flex items-center gap-2">
+                      <UsersIcon />
+                      <span className={selectedFilter ? 'text-dark-100' : 'text-dark-400'}>
+                        {selectedFilter
+                          ? selectedFilter.label
+                          : t('admin.broadcasts.selectFilterPlaceholder')}
+                      </span>
+                      {telegramRecipientsCount !== null && (
+                        <span className="rounded-full bg-accent-500/20 px-2 py-0.5 text-xs text-accent-400">
+                          {telegramRecipientsCount} {t('admin.broadcasts.recipients')}
+                        </span>
+                      )}
+                    </div>
+                    <ChevronDownIcon />
+                  </button>
+
+                  {showFilters && (
+                    <div className="absolute left-0 right-0 top-full z-10 mt-1 max-h-64 overflow-y-auto rounded-lg bg-dark-700 shadow-xl">
+                      {filtersLoading ? (
+                        <div className="p-4 text-center text-dark-400">Loading...</div>
+                      ) : (
+                        Object.entries(groupedFilters).map(([group, filters]) => (
+                          <div key={group}>
+                            <div className="sticky top-0 bg-dark-800 px-3 py-2 text-xs font-medium text-dark-400">
+                              {FILTER_GROUP_LABEL_KEYS[group]
+                                ? t(FILTER_GROUP_LABEL_KEYS[group])
+                                : group}
+                            </div>
+                            {filters.map((filter) => (
+                              <button
+                                key={filter.key}
+                                onClick={() => {
+                                  setTarget(filter.key);
+                                  setShowFilters(false);
+                                  previewMutation.mutate(filter.key);
+                                }}
+                                className={`flex w-full items-center justify-between px-3 py-2 text-left transition-colors hover:bg-dark-600 ${
+                                  target === filter.key ? 'bg-accent-500/20' : ''
+                                }`}
+                              >
+                                <span className="text-dark-100">{filter.label}</span>
+                                {filter.count !== null && filter.count !== undefined && (
+                                  <span className="text-xs text-dark-400">{filter.count}</span>
+                                )}
+                              </button>
+                            ))}
+                          </div>
+                        ))
+                      )}
+                    </div>
                   )}
                 </div>
-              )}
-            </div>
-          </div>
-
-          {/* Message text */}
-          <div>
-            <label className="mb-2 block text-sm font-medium text-dark-300">
-              {t('admin.broadcasts.messageText')}
-            </label>
-            <textarea
-              value={messageText}
-              onChange={(e) => setMessageText(e.target.value)}
-              placeholder={t('admin.broadcasts.messageTextPlaceholder')}
-              rows={5}
-              maxLength={4000}
-              className="w-full resize-none rounded-lg bg-dark-700 p-3 text-dark-100 placeholder-dark-400 focus:outline-none focus:ring-2 focus:ring-accent-500"
-            />
-            <div className="mt-1 text-right text-xs text-dark-400">{messageText.length}/4000</div>
-          </div>
-
-          {/* Media upload */}
-          <div>
-            <label className="mb-2 block text-sm font-medium text-dark-300">
-              {t('admin.broadcasts.media')}
-            </label>
-            {mediaFile ? (
-              <div className="rounded-lg bg-dark-700 p-3">
-                <div className="flex items-center justify-between">
-                  <div className="flex items-center gap-3">
-                    {mediaType === 'photo' && <PhotoIcon />}
-                    {mediaType === 'video' && <VideoIcon />}
-                    {mediaType === 'document' && <DocumentIcon />}
-                    <div>
-                      <p className="text-sm text-dark-100">{mediaFile.name}</p>
-                      <p className="text-xs text-dark-400">
-                        {(mediaFile.size / 1024 / 1024).toFixed(2)} MB
-                      </p>
-                    </div>
-                  </div>
-                  <button
-                    onClick={handleRemoveMedia}
-                    className="rounded-lg p-2 text-dark-400 hover:bg-dark-600 hover:text-red-400"
-                    disabled={isUploading}
-                  >
-                    <XIcon />
-                  </button>
-                </div>
-                {mediaPreview && (
-                  <img
-                    src={mediaPreview}
-                    alt="Preview"
-                    className="mt-3 max-h-40 rounded-lg object-cover"
-                  />
-                )}
-                {isUploading && (
-                  <div className="mt-2 text-sm text-accent-400">
-                    {t('admin.broadcasts.uploading')}
-                  </div>
-                )}
               </div>
-            ) : (
-              <div className="flex gap-2">
-                <input
-                  ref={fileInputRef}
-                  type="file"
-                  accept="image/*,video/*,application/*"
-                  onChange={handleFileSelect}
-                  className="hidden"
+
+              {/* Message text */}
+              <div>
+                <label className="mb-2 block text-sm font-medium text-dark-300">
+                  {t('admin.broadcasts.messageText')}
+                </label>
+                <textarea
+                  value={messageText}
+                  onChange={(e) => setMessageText(e.target.value)}
+                  placeholder={t('admin.broadcasts.messageTextPlaceholder')}
+                  rows={5}
+                  maxLength={4000}
+                  className="w-full resize-none rounded-lg bg-dark-700 p-3 text-dark-100 placeholder-dark-400 focus:outline-none focus:ring-2 focus:ring-accent-500"
                 />
-                <button
-                  onClick={() => fileInputRef.current?.click()}
-                  className="flex flex-1 items-center justify-center gap-2 rounded-lg bg-dark-700 p-3 text-dark-400 transition-colors hover:bg-dark-600 hover:text-dark-100"
-                >
-                  <PhotoIcon />
-                  <span>{t('admin.broadcasts.addMedia')}</span>
-                </button>
+                <div className="mt-1 text-right text-xs text-dark-400">
+                  {messageText.length}/4000
+                </div>
               </div>
-            )}
-          </div>
 
-          {/* Buttons selection */}
-          <div>
-            <label className="mb-2 block text-sm font-medium text-dark-300">
-              {t('admin.broadcasts.buttons')}
-            </label>
-            <div className="flex flex-wrap gap-2">
-              {buttonsData?.buttons.map((button) => (
-                <button
-                  key={button.key}
-                  onClick={() => toggleButton(button.key)}
-                  className={`rounded-lg px-3 py-2 text-sm transition-colors ${
-                    selectedButtons.includes(button.key)
-                      ? 'bg-accent-500 text-white'
-                      : 'bg-dark-700 text-dark-300 hover:bg-dark-600'
-                  }`}
-                >
-                  {button.label}
-                </button>
-              ))}
+              {/* Media upload */}
+              <div>
+                <label className="mb-2 block text-sm font-medium text-dark-300">
+                  {t('admin.broadcasts.media')}
+                </label>
+                {mediaFile ? (
+                  <div className="rounded-lg bg-dark-700 p-3">
+                    <div className="flex items-center justify-between">
+                      <div className="flex items-center gap-3">
+                        {mediaType === 'photo' && <PhotoIcon />}
+                        {mediaType === 'video' && <VideoIcon />}
+                        {mediaType === 'document' && <DocumentIcon />}
+                        <div>
+                          <p className="text-sm text-dark-100">{mediaFile.name}</p>
+                          <p className="text-xs text-dark-400">
+                            {(mediaFile.size / 1024 / 1024).toFixed(2)} MB
+                          </p>
+                        </div>
+                      </div>
+                      <button
+                        onClick={handleRemoveMedia}
+                        className="rounded-lg p-2 text-dark-400 hover:bg-dark-600 hover:text-red-400"
+                        disabled={isUploading}
+                      >
+                        <XIcon />
+                      </button>
+                    </div>
+                    {mediaPreview && (
+                      <img
+                        src={mediaPreview}
+                        alt="Preview"
+                        className="mt-3 max-h-40 rounded-lg object-cover"
+                      />
+                    )}
+                    {isUploading && (
+                      <div className="mt-2 text-sm text-accent-400">
+                        {t('admin.broadcasts.uploading')}
+                      </div>
+                    )}
+                  </div>
+                ) : (
+                  <div className="flex gap-2">
+                    <input
+                      ref={fileInputRef}
+                      type="file"
+                      accept="image/*,video/*,application/*"
+                      onChange={handleFileSelect}
+                      className="hidden"
+                    />
+                    <button
+                      onClick={() => fileInputRef.current?.click()}
+                      className="flex flex-1 items-center justify-center gap-2 rounded-lg bg-dark-700 p-3 text-dark-400 transition-colors hover:bg-dark-600 hover:text-dark-100"
+                    >
+                      <PhotoIcon />
+                      <span>{t('admin.broadcasts.addMedia')}</span>
+                    </button>
+                  </div>
+                )}
+              </div>
+
+              {/* Buttons selection */}
+              <div>
+                <label className="mb-2 block text-sm font-medium text-dark-300">
+                  {t('admin.broadcasts.buttons')}
+                </label>
+                <div className="flex flex-wrap gap-2">
+                  {buttonsData?.buttons.map((button) => (
+                    <button
+                      key={button.key}
+                      onClick={() => toggleButton(button.key)}
+                      className={`rounded-lg px-3 py-2 text-sm transition-colors ${
+                        selectedButtons.includes(button.key)
+                          ? 'bg-accent-500 text-white'
+                          : 'bg-dark-700 text-dark-300 hover:bg-dark-600'
+                      }`}
+                    >
+                      {button.label}
+                    </button>
+                  ))}
+                </div>
+              </div>
             </div>
-          </div>
+          )}
+
+          {/* Email Section */}
+          {(channel === 'email' || channel === 'both') && (
+            <div className="space-y-4 rounded-lg border border-purple-500/30 bg-purple-500/5 p-4">
+              <div className="flex items-center gap-2 text-purple-400">
+                <EmailIcon />
+                <span className="font-medium">{t('admin.broadcasts.emailSection')}</span>
+              </div>
+
+              {/* Email filter selection */}
+              <div>
+                <label className="mb-2 block text-sm font-medium text-dark-300">
+                  {t('admin.broadcasts.selectEmailFilter')}
+                </label>
+                <div className="relative">
+                  <button
+                    onClick={() => setShowEmailFilters(!showEmailFilters)}
+                    className="flex w-full items-center justify-between rounded-lg bg-dark-700 p-3 text-left transition-colors hover:bg-dark-600"
+                  >
+                    <div className="flex items-center gap-2">
+                      <UsersIcon />
+                      <span className={selectedEmailFilter ? 'text-dark-100' : 'text-dark-400'}>
+                        {selectedEmailFilter
+                          ? selectedEmailFilter.label
+                          : t('admin.broadcasts.selectEmailFilterPlaceholder')}
+                      </span>
+                      {emailRecipientsCount !== null && (
+                        <span className="rounded-full bg-purple-500/20 px-2 py-0.5 text-xs text-purple-400">
+                          {emailRecipientsCount} {t('admin.broadcasts.recipients')}
+                        </span>
+                      )}
+                    </div>
+                    <ChevronDownIcon />
+                  </button>
+
+                  {showEmailFilters && (
+                    <div className="absolute left-0 right-0 top-full z-10 mt-1 max-h-64 overflow-y-auto rounded-lg bg-dark-700 shadow-xl">
+                      {emailFiltersLoading ? (
+                        <div className="p-4 text-center text-dark-400">Loading...</div>
+                      ) : (
+                        Object.entries(groupedEmailFilters).map(([group, filters]) => (
+                          <div key={group}>
+                            <div className="sticky top-0 bg-dark-800 px-3 py-2 text-xs font-medium text-dark-400">
+                              {FILTER_GROUP_LABEL_KEYS[group]
+                                ? t(FILTER_GROUP_LABEL_KEYS[group])
+                                : group}
+                            </div>
+                            {filters.map((filter) => (
+                              <button
+                                key={filter.key}
+                                onClick={() => {
+                                  setEmailTarget(filter.key);
+                                  setShowEmailFilters(false);
+                                  previewEmailMutation.mutate(filter.key);
+                                }}
+                                className={`flex w-full items-center justify-between px-3 py-2 text-left transition-colors hover:bg-dark-600 ${
+                                  emailTarget === filter.key ? 'bg-purple-500/20' : ''
+                                }`}
+                              >
+                                <span className="text-dark-100">{filter.label}</span>
+                                {filter.count !== null && filter.count !== undefined && (
+                                  <span className="text-xs text-dark-400">{filter.count}</span>
+                                )}
+                              </button>
+                            ))}
+                          </div>
+                        ))
+                      )}
+                    </div>
+                  )}
+                </div>
+              </div>
+
+              {/* Email subject */}
+              <div>
+                <label className="mb-2 block text-sm font-medium text-dark-300">
+                  {t('admin.broadcasts.emailSubject')}
+                </label>
+                <input
+                  type="text"
+                  value={emailSubject}
+                  onChange={(e) => setEmailSubject(e.target.value)}
+                  placeholder={t('admin.broadcasts.emailSubjectPlaceholder')}
+                  maxLength={200}
+                  className="w-full rounded-lg bg-dark-700 p-3 text-dark-100 placeholder-dark-400 focus:outline-none focus:ring-2 focus:ring-purple-500"
+                />
+              </div>
+
+              {/* Email HTML content */}
+              <div>
+                <label className="mb-2 block text-sm font-medium text-dark-300">
+                  {t('admin.broadcasts.emailContent')}
+                  <span className="ml-2 text-xs text-dark-400">
+                    {t('admin.broadcasts.emailContentHint')}
+                  </span>
+                </label>
+                <textarea
+                  value={emailHtmlContent}
+                  onChange={(e) => setEmailHtmlContent(e.target.value)}
+                  placeholder={t('admin.broadcasts.emailContentPlaceholder')}
+                  rows={8}
+                  className="w-full resize-none rounded-lg bg-dark-700 p-3 font-mono text-sm text-dark-100 placeholder-dark-400 focus:outline-none focus:ring-2 focus:ring-purple-500"
+                />
+                <div className="mt-2 text-xs text-dark-400">
+                  {t('admin.broadcasts.emailVariables')}: {'{{user_name}}, {{email}}'}
+                </div>
+              </div>
+            </div>
+          )}
         </div>
 
         {/* Footer */}
         <div className="flex items-center justify-between border-t border-dark-700 p-4">
           <div className="text-sm text-dark-400">
-            {recipientsCount !== null && (
+            {(channel === 'telegram' || channel === 'both') && telegramRecipientsCount !== null && (
+              <span className="mr-4">
+                <TelegramIcon className="mr-1 inline h-4 w-4" />
+                <strong className="text-blue-400">{telegramRecipientsCount}</strong>
+              </span>
+            )}
+            {(channel === 'email' || channel === 'both') && emailRecipientsCount !== null && (
               <span>
-                {t('admin.broadcasts.willBeSent')}:{' '}
-                <strong className="text-accent-400">{recipientsCount}</strong>{' '}
-                {t('admin.broadcasts.users')}
+                <EmailIcon className="mr-1 inline h-4 w-4" />
+                <strong className="text-purple-400">{emailRecipientsCount}</strong>
               </span>
             )}
           </div>
@@ -526,7 +838,7 @@ function CreateBroadcastModal({ onClose, onSuccess }: CreateModalProps) {
             </button>
             <button
               onClick={handleSubmit}
-              disabled={!target || !messageText.trim() || createMutation.isPending || isUploading}
+              disabled={!canSubmit}
               className="flex items-center gap-2 rounded-lg bg-accent-500 px-4 py-2 text-white transition-colors hover:bg-accent-600 disabled:cursor-not-allowed disabled:opacity-50"
             >
               {createMutation.isPending ? <RefreshIcon /> : <BroadcastIcon />}
@@ -552,12 +864,13 @@ function BroadcastDetailModal({ broadcast, onClose, onStop, isStopping }: Detail
   const isRunning = ['queued', 'in_progress', 'cancelling'].includes(broadcast.status);
 
   return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4">
       <div className="w-full max-w-lg rounded-xl bg-dark-800">
         {/* Header */}
         <div className="flex items-center justify-between border-b border-dark-700 p-4">
           <div className="flex items-center gap-3">
             <StatusBadge status={broadcast.status} />
+            <ChannelBadge channel={broadcast.channel} />
             <span className="text-dark-400">#{broadcast.id}</span>
           </div>
           <button onClick={onClose} className="rounded-lg p-2 transition-colors hover:bg-dark-700">
@@ -566,7 +879,7 @@ function BroadcastDetailModal({ broadcast, onClose, onStop, isStopping }: Detail
         </div>
 
         {/* Content */}
-        <div className="space-y-4 p-4">
+        <div className="max-h-[60vh] space-y-4 overflow-y-auto p-4">
           {/* Progress */}
           {isRunning && (
             <div>
@@ -605,13 +918,41 @@ function BroadcastDetailModal({ broadcast, onClose, onStop, isStopping }: Detail
             <p className="text-dark-100">{broadcast.target_type}</p>
           </div>
 
-          {/* Message */}
-          <div>
-            <p className="mb-1 text-sm text-dark-400">{t('admin.broadcasts.message')}</p>
-            <div className="max-h-40 overflow-y-auto whitespace-pre-wrap rounded-lg bg-dark-700 p-3 text-sm text-dark-100">
-              {broadcast.message_text}
+          {/* Telegram Message */}
+          {broadcast.message_text && (
+            <div>
+              <p className="mb-1 text-sm text-dark-400">
+                <TelegramIcon className="mr-1 inline h-4 w-4" />
+                {t('admin.broadcasts.message')}
+              </p>
+              <div className="max-h-40 overflow-y-auto whitespace-pre-wrap rounded-lg bg-dark-700 p-3 text-sm text-dark-100">
+                {broadcast.message_text}
+              </div>
             </div>
-          </div>
+          )}
+
+          {/* Email Subject */}
+          {broadcast.email_subject && (
+            <div>
+              <p className="mb-1 text-sm text-dark-400">
+                <EmailIcon className="mr-1 inline h-4 w-4" />
+                {t('admin.broadcasts.emailSubject')}
+              </p>
+              <div className="rounded-lg bg-dark-700 p-3 text-sm text-dark-100">
+                {broadcast.email_subject}
+              </div>
+            </div>
+          )}
+
+          {/* Email Content Preview */}
+          {broadcast.email_html_content && (
+            <div>
+              <p className="mb-1 text-sm text-dark-400">{t('admin.broadcasts.emailContent')}</p>
+              <div className="max-h-40 overflow-y-auto whitespace-pre-wrap rounded-lg bg-dark-700 p-3 font-mono text-xs text-dark-100">
+                {broadcast.email_html_content}
+              </div>
+            </div>
+          )}
 
           {/* Media */}
           {broadcast.has_media && (
@@ -737,8 +1078,9 @@ export default function AdminBroadcasts() {
                 >
                   <div className="flex items-start justify-between gap-4">
                     <div className="min-w-0 flex-1">
-                      <div className="mb-1 flex items-center gap-2">
+                      <div className="mb-1 flex flex-wrap items-center gap-2">
                         <StatusBadge status={broadcast.status} />
+                        <ChannelBadge channel={broadcast.channel} />
                         <span className="text-xs text-dark-400">#{broadcast.id}</span>
                         {broadcast.has_media && (
                           <span className="text-dark-400">
@@ -748,7 +1090,9 @@ export default function AdminBroadcasts() {
                           </span>
                         )}
                       </div>
-                      <p className="truncate text-sm text-dark-100">{broadcast.message_text}</p>
+                      <p className="truncate text-sm text-dark-100">
+                        {broadcast.message_text || broadcast.email_subject || '-'}
+                      </p>
                       <div className="mt-2 flex items-center gap-4 text-xs text-dark-400">
                         <span>{broadcast.target_type}</span>
                         <span>