bedolaga-cabinet/src/pages/AdminBroadcasts.tsx

import { useState, useRef, useMemo } from 'react';
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import { useTranslation } from 'react-i18next';
import { Link } from 'react-router-dom';
import {
  adminBroadcastsApi,
  Broadcast,
  BroadcastFilter,
  TariffFilter,
  BroadcastCreateRequest,
} from '../api/adminBroadcasts';

// Icons
const BackIcon = () => (
  <svg
    className="h-5 w-5 text-dark-400"
    fill="none"
    viewBox="0 0 24 24"
    stroke="currentColor"
    strokeWidth={2}
  >
    <path strokeLinecap="round" strokeLinejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" />
  </svg>
);

const BroadcastIcon = () => (
  <svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
    <path
      strokeLinecap="round"
      strokeLinejoin="round"
      d="M10.34 15.84c-.688-.06-1.386-.09-2.09-.09H7.5a4.5 4.5 0 110-9h.75c.704 0 1.402-.03 2.09-.09m0 9.18c.253.962.584 1.892.985 2.783.247.55.06 1.21-.463 1.511l-.657.38c-.551.318-1.26.117-1.527-.461a20.845 20.845 0 01-1.44-4.282m3.102.069a18.03 18.03 0 01-.59-4.59c0-1.586.205-3.124.59-4.59m0 9.18a23.848 23.848 0 018.835 2.535M10.34 6.66a23.847 23.847 0 008.835-2.535m0 0A23.74 23.74 0 0018.795 3m.38 1.125a23.91 23.91 0 011.014 5.395m-1.014 8.855c-.118.38-.245.754-.38 1.125m.38-1.125a23.91 23.91 0 001.014-5.395m0-3.46c.495.413.811 1.035.811 1.73 0 .695-.316 1.317-.811 1.73m0-3.46a24.347 24.347 0 010 3.46"
    />
  </svg>
);

const PlusIcon = () => (
  <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
    <path strokeLinecap="round" strokeLinejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
  </svg>
);

const XIcon = () => (
  <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
    <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
  </svg>
);

const RefreshIcon = () => (
  <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
    <path
      strokeLinecap="round"
      strokeLinejoin="round"
      d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99"
    />
  </svg>
);

const StopIcon = () => (
  <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
    <path
      strokeLinecap="round"
      strokeLinejoin="round"
      d="M5.25 7.5A2.25 2.25 0 017.5 5.25h9a2.25 2.25 0 012.25 2.25v9a2.25 2.25 0 01-2.25 2.25h-9a2.25 2.25 0 01-2.25-2.25v-9z"
    />
  </svg>
);

const PhotoIcon = () => (
  <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
    <path
      strokeLinecap="round"
      strokeLinejoin="round"
      d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 001.5-1.5V6a1.5 1.5 0 00-1.5-1.5H3.75A1.5 1.5 0 002.25 6v12a1.5 1.5 0 001.5 1.5zm10.5-11.25h.008v.008h-.008V8.25zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z"
    />
  </svg>
);

const VideoIcon = () => (
  <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
    <path
      strokeLinecap="round"
      strokeLinejoin="round"
      d="M15.75 10.5l4.72-4.72a.75.75 0 011.28.53v11.38a.75.75 0 01-1.28.53l-4.72-4.72M4.5 18.75h9a2.25 2.25 0 002.25-2.25v-9a2.25 2.25 0 00-2.25-2.25h-9A2.25 2.25 0 002.25 7.5v9a2.25 2.25 0 002.25 2.25z"
    />
  </svg>
);

const DocumentIcon = () => (
  <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
    <path
      strokeLinecap="round"
      strokeLinejoin="round"
      d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z"
    />
  </svg>
);

const UsersIcon = () => (
  <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
    <path
      strokeLinecap="round"
      strokeLinejoin="round"
      d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z"
    />
  </svg>
);

const ChevronDownIcon = () => (
  <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
    <path strokeLinecap="round" strokeLinejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
  </svg>
);

// Status badge component
const statusConfig: Record<string, { bg: string; text: string; labelKey: string }> = {
  queued: {
    bg: 'bg-yellow-500/20',
    text: 'text-yellow-400',
    labelKey: 'admin.broadcasts.status.queued',
  },
  in_progress: {
    bg: 'bg-blue-500/20',
    text: 'text-blue-400',
    labelKey: 'admin.broadcasts.status.inProgress',
  },
  completed: {
    bg: 'bg-green-500/20',
    text: 'text-green-400',
    labelKey: 'admin.broadcasts.status.completed',
  },
  partial: {
    bg: 'bg-orange-500/20',
    text: 'text-orange-400',
    labelKey: 'admin.broadcasts.status.partial',
  },
  failed: { bg: 'bg-red-500/20', text: 'text-red-400', labelKey: 'admin.broadcasts.status.failed' },
  cancelled: {
    bg: 'bg-gray-500/20',
    text: 'text-gray-400',
    labelKey: 'admin.broadcasts.status.cancelled',
  },
  cancelling: {
    bg: 'bg-yellow-500/20',
    text: 'text-yellow-400',
    labelKey: 'admin.broadcasts.status.cancelling',
  },
};

function StatusBadge({ status }: { status: string }) {
  const { t } = useTranslation();
  const config = statusConfig[status] || statusConfig.queued;
  return (
    <span className={`rounded-full px-2 py-1 text-xs font-medium ${config.bg} ${config.text}`}>
      {t(config.labelKey)}
    </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',
  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',
};

// Create broadcast modal
interface CreateModalProps {
  onClose: () => void;
  onSuccess: () => void;
}

function CreateBroadcastModal({ onClose, onSuccess }: CreateModalProps) {
  const { t } = useTranslation();
  const queryClient = useQueryClient();
  const fileInputRef = useRef<HTMLInputElement>(null);

  const [target, setTarget] = useState('');
  const [messageText, setMessageText] = useState('');
  const [selectedButtons, setSelectedButtons] = useState<string[]>(['home']);
  const [mediaFile, setMediaFile] = useState<File | null>(null);
  const [mediaType, setMediaType] = useState<'photo' | 'video' | 'document'>('photo');
  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
  const { data: filtersData, isLoading: filtersLoading } = useQuery({
    queryKey: ['admin', 'broadcasts', 'filters'],
    queryFn: adminBroadcastsApi.getFilters,
  });

  // Fetch buttons
  const { data: buttonsData } = useQuery({
    queryKey: ['admin', 'broadcasts', 'buttons'],
    queryFn: adminBroadcastsApi.getButtons,
  });

  // Preview mutation
  const previewMutation = useMutation({
    mutationFn: adminBroadcastsApi.preview,
  });

  // Create mutation
  const createMutation = useMutation({
    mutationFn: adminBroadcastsApi.create,
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['admin', 'broadcasts'] });
      onSuccess();
      onClose();
    },
  });

  // Group filters
  const groupedFilters = useMemo(() => {
    if (!filtersData) return {};
    const groups: Record<string, (BroadcastFilter | TariffFilter)[]> = {};

    // Basic filters
    filtersData.filters.forEach((f) => {
      const group = f.group || 'basic';
      if (!groups[group]) groups[group] = [];
      groups[group].push(f);
    });

    // Tariff filters
    if (filtersData.tariff_filters.length > 0) {
      groups['tariff'] = filtersData.tariff_filters;
    }

    // Custom filters
    filtersData.custom_filters.forEach((f) => {
      const group = f.group || 'custom';
      if (!groups[group]) groups[group] = [];
      groups[group].push(f);
    });

    return groups;
  }, [filtersData]);

  // Selected filter info
  const selectedFilter = useMemo(() => {
    if (!target || !filtersData) return null;
    const all = [
      ...filtersData.filters,
      ...filtersData.tariff_filters,
      ...filtersData.custom_filters,
    ];
    return all.find((f) => f.key === target);
  }, [target, filtersData]);

  // Handle file selection
  const handleFileSelect = async (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (!file) return;

    setMediaFile(file);

    // Determine media type
    if (file.type.startsWith('image/')) {
      setMediaType('photo');
      setMediaPreview(URL.createObjectURL(file));
    } else if (file.type.startsWith('video/')) {
      setMediaType('video');
      setMediaPreview(null);
    } else {
      setMediaType('document');
      setMediaPreview(null);
    }

    // Upload file
    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 = () => {
    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],
    );
  };

  // Submit
  const handleSubmit = () => {
    if (!target || !messageText.trim()) return;

    const data: BroadcastCreateRequest = {
      target,
      message_text: messageText,
      selected_buttons: selectedButtons,
    };

    if (uploadedFileId) {
      data.media = {
        type: mediaType,
        file_id: uploadedFileId,
      };
    }

    createMutation.mutate(data);
  };

  const recipientsCount = previewMutation.data?.count ?? selectedFilter?.count ?? null;

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center overflow-y-auto 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">
          <div className="flex items-center gap-3">
            <div className="rounded-lg bg-accent-500/20 p-2 text-accent-400">
              <BroadcastIcon />
            </div>
            <h2 className="text-lg font-semibold text-dark-100">{t('admin.broadcasts.create')}</h2>
          </div>
          <button onClick={onClose} className="rounded-lg p-2 transition-colors hover:bg-dark-700">
            <XIcon />
          </button>
        </div>

        {/* Content */}
        <div className="max-h-[70vh] space-y-4 overflow-y-auto p-4">
          {/* 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>
                  {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 />
              </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>

          {/* 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"
                />
                <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>

        {/* Footer */}
        <div className="flex items-center justify-between border-t border-dark-700 p-4">
          <div className="text-sm text-dark-400">
            {recipientsCount !== null && (
              <span>
                {t('admin.broadcasts.willBeSent')}:{' '}
                <strong className="text-accent-400">{recipientsCount}</strong>{' '}
                {t('admin.broadcasts.users')}
              </span>
            )}
          </div>
          <div className="flex gap-2">
            <button
              onClick={onClose}
              className="rounded-lg bg-dark-700 px-4 py-2 text-dark-300 transition-colors hover:bg-dark-600"
            >
              {t('common.cancel')}
            </button>
            <button
              onClick={handleSubmit}
              disabled={!target || !messageText.trim() || createMutation.isPending || isUploading}
              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 />}
              {t('admin.broadcasts.send')}
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}

// Broadcast detail modal
interface DetailModalProps {
  broadcast: Broadcast;
  onClose: () => void;
  onStop: () => void;
  isStopping: boolean;
}

function BroadcastDetailModal({ broadcast, onClose, onStop, isStopping }: DetailModalProps) {
  const { t } = useTranslation();
  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="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} />
            <span className="text-dark-400">#{broadcast.id}</span>
          </div>
          <button onClick={onClose} className="rounded-lg p-2 transition-colors hover:bg-dark-700">
            <XIcon />
          </button>
        </div>

        {/* Content */}
        <div className="space-y-4 p-4">
          {/* Progress */}
          {isRunning && (
            <div>
              <div className="mb-1 flex justify-between text-sm">
                <span className="text-dark-400">{t('admin.broadcasts.progress')}</span>
                <span className="text-dark-100">{broadcast.progress_percent.toFixed(1)}%</span>
              </div>
              <div className="h-2 overflow-hidden rounded-full bg-dark-700">
                <div
                  className="h-full bg-accent-500 transition-all duration-300"
                  style={{ width: `${broadcast.progress_percent}%` }}
                />
              </div>
            </div>
          )}

          {/* Stats */}
          <div className="grid grid-cols-3 gap-3">
            <div className="rounded-lg bg-dark-700 p-3 text-center">
              <p className="text-2xl font-bold text-dark-100">{broadcast.total_count}</p>
              <p className="text-xs text-dark-400">{t('admin.broadcasts.total')}</p>
            </div>
            <div className="rounded-lg bg-dark-700 p-3 text-center">
              <p className="text-2xl font-bold text-green-400">{broadcast.sent_count}</p>
              <p className="text-xs text-dark-400">{t('admin.broadcasts.sent')}</p>
            </div>
            <div className="rounded-lg bg-dark-700 p-3 text-center">
              <p className="text-2xl font-bold text-red-400">{broadcast.failed_count}</p>
              <p className="text-xs text-dark-400">{t('admin.broadcasts.failed')}</p>
            </div>
          </div>

          {/* Target */}
          <div>
            <p className="mb-1 text-sm text-dark-400">{t('admin.broadcasts.filter')}</p>
            <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}
            </div>
          </div>

          {/* Media */}
          {broadcast.has_media && (
            <div>
              <p className="mb-1 text-sm text-dark-400">{t('admin.broadcasts.media')}</p>
              <div className="flex items-center gap-2 text-dark-100">
                {broadcast.media_type === 'photo' && <PhotoIcon />}
                {broadcast.media_type === 'video' && <VideoIcon />}
                {broadcast.media_type === 'document' && <DocumentIcon />}
                <span className="capitalize">{broadcast.media_type}</span>
              </div>
            </div>
          )}

          {/* Admin & Time */}
          <div className="flex justify-between text-sm text-dark-400">
            <span>{broadcast.admin_name || t('admin.broadcasts.unknownAdmin')}</span>
            <span>{new Date(broadcast.created_at).toLocaleString()}</span>
          </div>
        </div>

        {/* Footer */}
        {isRunning && broadcast.status !== 'cancelling' && (
          <div className="border-t border-dark-700 p-4">
            <button
              onClick={onStop}
              disabled={isStopping}
              className="flex w-full items-center justify-center gap-2 rounded-lg bg-red-500/20 py-2 text-red-400 transition-colors hover:bg-red-500/30 disabled:opacity-50"
            >
              <StopIcon />
              {t('admin.broadcasts.stop')}
            </button>
          </div>
        )}
      </div>
    </div>
  );
}

// Main component
export default function AdminBroadcasts() {
  const { t } = useTranslation();
  const queryClient = useQueryClient();

  const [showCreateModal, setShowCreateModal] = useState(false);
  const [selectedBroadcast, setSelectedBroadcast] = useState<Broadcast | null>(null);
  const [page, setPage] = useState(0);
  const limit = 20;

  // Fetch broadcasts
  const { data, isLoading, refetch } = useQuery({
    queryKey: ['admin', 'broadcasts', 'list', page],
    queryFn: () => adminBroadcastsApi.list(limit, page * limit),
    refetchInterval: 5000, // Auto refresh every 5s
  });

  // Stop mutation
  const stopMutation = useMutation({
    mutationFn: adminBroadcastsApi.stop,
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['admin', 'broadcasts'] });
      setSelectedBroadcast(null);
    },
  });

  const broadcasts = data?.items || [];
  const total = data?.total || 0;
  const totalPages = Math.ceil(total / limit);

  return (
    <div className="min-h-screen bg-dark-900 p-4 pb-20 md:pb-4">
      <div className="mx-auto max-w-4xl">
        {/* Header */}
        <div className="mb-6 flex items-center justify-between">
          <div className="flex items-center gap-3">
            <Link
              to="/admin"
              className="flex h-10 w-10 items-center justify-center rounded-xl border border-dark-700 bg-dark-800 transition-colors hover:border-dark-600"
            >
              <BackIcon />
            </Link>
            <div>
              <h1 className="text-xl font-bold text-dark-100">{t('admin.broadcasts.title')}</h1>
              <p className="text-sm text-dark-400">{t('admin.broadcasts.subtitle')}</p>
            </div>
          </div>
          <div className="flex gap-2">
            <button
              onClick={() => refetch()}
              className="rounded-lg bg-dark-800 p-2 text-dark-400 transition-colors hover:text-dark-100"
            >
              <RefreshIcon />
            </button>
            <button
              onClick={() => setShowCreateModal(true)}
              className="flex items-center gap-2 rounded-lg bg-accent-500 px-4 py-2 text-white transition-colors hover:bg-accent-600"
            >
              <PlusIcon />
              <span className="hidden sm:inline">{t('admin.broadcasts.create')}</span>
            </button>
          </div>
        </div>

        {/* Broadcasts list */}
        <div className="overflow-hidden rounded-xl bg-dark-800">
          {isLoading ? (
            <div className="p-8 text-center text-dark-400">
              <RefreshIcon />
              <p className="mt-2">{t('common.loading')}</p>
            </div>
          ) : broadcasts.length === 0 ? (
            <div className="p-8 text-center text-dark-400">
              <BroadcastIcon />
              <p className="mt-2">{t('admin.broadcasts.empty')}</p>
            </div>
          ) : (
            <div className="divide-y divide-dark-700">
              {broadcasts.map((broadcast) => (
                <button
                  key={broadcast.id}
                  onClick={() => setSelectedBroadcast(broadcast)}
                  className="w-full p-4 text-left transition-colors hover:bg-dark-700/50"
                >
                  <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">
                        <StatusBadge status={broadcast.status} />
                        <span className="text-xs text-dark-400">#{broadcast.id}</span>
                        {broadcast.has_media && (
                          <span className="text-dark-400">
                            {broadcast.media_type === 'photo' && <PhotoIcon />}
                            {broadcast.media_type === 'video' && <VideoIcon />}
                            {broadcast.media_type === 'document' && <DocumentIcon />}
                          </span>
                        )}
                      </div>
                      <p className="truncate text-sm text-dark-100">{broadcast.message_text}</p>
                      <div className="mt-2 flex items-center gap-4 text-xs text-dark-400">
                        <span>{broadcast.target_type}</span>
                        <span>
                          {broadcast.sent_count}/{broadcast.total_count}
                        </span>
                        <span>{new Date(broadcast.created_at).toLocaleDateString()}</span>
                      </div>
                    </div>
                    {['queued', 'in_progress'].includes(broadcast.status) && (
                      <div className="w-16">
                        <div className="h-1.5 overflow-hidden rounded-full bg-dark-600">
                          <div
                            className="h-full bg-accent-500"
                            style={{ width: `${broadcast.progress_percent}%` }}
                          />
                        </div>
                        <p className="mt-1 text-center text-xs text-dark-400">
                          {broadcast.progress_percent.toFixed(0)}%
                        </p>
                      </div>
                    )}
                  </div>
                </button>
              ))}
            </div>
          )}

          {/* Pagination */}
          {totalPages > 1 && (
            <div className="flex items-center justify-center gap-2 border-t border-dark-700 p-4">
              <button
                onClick={() => setPage((p) => Math.max(0, p - 1))}
                disabled={page === 0}
                className="rounded-lg bg-dark-700 px-3 py-1 text-dark-300 hover:bg-dark-600 disabled:cursor-not-allowed disabled:opacity-50"
              >
                {t('admin.broadcasts.prev')}
              </button>
              <span className="text-dark-400">
                {page + 1} / {totalPages}
              </span>
              <button
                onClick={() => setPage((p) => Math.min(totalPages - 1, p + 1))}
                disabled={page >= totalPages - 1}
                className="rounded-lg bg-dark-700 px-3 py-1 text-dark-300 hover:bg-dark-600 disabled:cursor-not-allowed disabled:opacity-50"
              >
                {t('admin.broadcasts.next')}
              </button>
            </div>
          )}
        </div>
      </div>

      {/* Modals */}
      {showCreateModal && (
        <CreateBroadcastModal
          onClose={() => setShowCreateModal(false)}
          onSuccess={() => {
            refetch();
          }}
        />
      )}

      {selectedBroadcast && (
        <BroadcastDetailModal
          broadcast={selectedBroadcast}
          onClose={() => setSelectedBroadcast(null)}
          onStop={() => stopMutation.mutate(selectedBroadcast.id)}
          isStopping={stopMutation.isPending}
        />
      )}
    </div>
  );
}