import { useState, useEffect, useMemo, useRef, useCallback } from 'react'
import { adminApi } from '@/api'
import type { AdminMarathon } from '@/types'
import { useToast } from '@/store/toast'
import { NeonButton } from '@/components/ui'
import { Send, Users, Trophy, AlertTriangle, Search, Eye, MessageSquare, ChevronDown, X, Image, Film, Trash2, Plus } from 'lucide-react'

interface MediaItem {
  file: File
  preview: string
  type: 'photo' | 'video'
}

// Telegram supported tags for reference
const TELEGRAM_TAGS = [
  { tag: '<b>', description: 'Жирный текст', example: '<b>жирный</b>' },
  { tag: '<i>', description: 'Курсив', example: '<i>курсив</i>' },
  { tag: '<u>', description: 'Подчёркнутый', example: '<u>подчёркнутый</u>' },
  { tag: '<s>', description: 'Зачёркнутый', example: '<s>зачёркнутый</s>' },
  { tag: '<code>', description: 'Моноширинный', example: '<code>код</code>' },
  { tag: '<pre>', description: 'Блок кода', example: '<pre>блок кода</pre>' },
  { tag: '<a>', description: 'Ссылка', example: '<a href="url">текст</a>' },
  { tag: '<tg-spoiler>', description: 'Спойлер', example: '<tg-spoiler>скрытый текст</tg-spoiler>' },
  { tag: '<blockquote>', description: 'Цитата', example: '<blockquote>цитата</blockquote>' },
]

// Convert Telegram HTML to web-safe HTML for preview
function telegramToHtml(text: string): string {
  let html = text
    // Convert tg-spoiler to span with blur effect
    .replace(/<tg-spoiler>/g, '<span class="tg-spoiler">')
    .replace(/<\/tg-spoiler>/g, '</span>')
    // Convert newlines to <br> tags (but not inside <pre> blocks)
    .replace(/\n/g, '<br>')

  return html
}

export function AdminBroadcastPage() {
  const [message, setMessage] = useState('')
  const [targetType, setTargetType] = useState<'all' | 'marathon'>('all')
  const [marathonId, setMarathonId] = useState<number | null>(null)
  const [marathons, setMarathons] = useState<AdminMarathon[]>([])
  const [sending, setSending] = useState(false)
  const [loadingMarathons, setLoadingMarathons] = useState(false)
  const [marathonSearch, setMarathonSearch] = useState('')
  const [statusFilter, setStatusFilter] = useState<'all' | 'active' | 'preparing' | 'finished'>('all')
  const [showTagsHelp, setShowTagsHelp] = useState(false)
  const [mediaItems, setMediaItems] = useState<MediaItem[]>([])
  const fileInputRef = useRef<HTMLInputElement>(null)

  // Undo/Redo history
  const [history, setHistory] = useState<string[]>([''])
  const [historyIndex, setHistoryIndex] = useState(0)
  const isUndoRedo = useRef(false)
  const textareaRef = useRef<HTMLTextAreaElement>(null)

  const toast = useToast()

  // Load marathons on mount and when switching to marathon target
  useEffect(() => {
    // Always load marathons on mount so they're ready when user switches
    loadMarathons()
  }, [])

  useEffect(() => {
    if (targetType === 'marathon' && marathons.length === 0) {
      loadMarathons()
    }
  }, [targetType])

  const loadMarathons = async () => {
    setLoadingMarathons(true)
    try {
      const data = await adminApi.listMarathons(0, 200)
      console.log('Loaded marathons:', data)
      setMarathons(data)
    } catch (err) {
      console.error('Failed to load marathons:', err)
      toast.error('Ошибка загрузки марафонов')
    } finally {
      setLoadingMarathons(false)
    }
  }

  // Handle message change with history
  const handleMessageChange = useCallback((newValue: string) => {
    if (isUndoRedo.current) {
      isUndoRedo.current = false
      return
    }

    setMessage(newValue)

    // Add to history (debounced - only if different from last entry)
    setHistory(prev => {
      const newHistory = prev.slice(0, historyIndex + 1)
      if (newHistory[newHistory.length - 1] !== newValue) {
        return [...newHistory, newValue]
      }
      return newHistory
    })
    setHistoryIndex(prev => prev + 1)
  }, [historyIndex])

  // Undo function
  const undo = useCallback(() => {
    if (historyIndex > 0) {
      isUndoRedo.current = true
      const newIndex = historyIndex - 1
      setHistoryIndex(newIndex)
      setMessage(history[newIndex])
    }
  }, [history, historyIndex])

  // Redo function
  const redo = useCallback(() => {
    if (historyIndex < history.length - 1) {
      isUndoRedo.current = true
      const newIndex = historyIndex + 1
      setHistoryIndex(newIndex)
      setMessage(history[newIndex])
    }
  }, [history, historyIndex])

  // Handle keyboard shortcuts
  const handleKeyDown = useCallback((e: React.KeyboardEvent<HTMLTextAreaElement>) => {
    if (e.ctrlKey || e.metaKey) {
      if (e.key === 'z') {
        e.preventDefault()
        if (e.shiftKey) {
          redo()
        } else {
          undo()
        }
      } else if (e.key === 'y') {
        e.preventDefault()
        redo()
      }
    }
  }, [undo, redo])

  // Handle media file selection (multiple)
  const handleMediaSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
    const files = e.target.files
    if (!files || files.length === 0) return

    // Check max limit (10 files for Telegram media group)
    if (mediaItems.length + files.length > 10) {
      toast.error('Максимум 10 файлов')
      return
    }

    const newItems: MediaItem[] = []

    for (const file of Array.from(files)) {
      // Validate file type
      const isImage = file.type.startsWith('image/')
      const isVideo = file.type.startsWith('video/')
      if (!isImage && !isVideo) {
        toast.error(`${file.name}: поддерживаются только изображения и видео`)
        continue
      }

      // Validate file size (20MB for images, 50MB for videos)
      const maxSize = isImage ? 20 * 1024 * 1024 : 50 * 1024 * 1024
      if (file.size > maxSize) {
        toast.error(`${file.name}: файл слишком большой. Максимум: ${isImage ? '20MB' : '50MB'}`)
        continue
      }

      newItems.push({
        file,
        preview: URL.createObjectURL(file),
        type: isImage ? 'photo' : 'video'
      })
    }

    if (newItems.length > 0) {
      setMediaItems(prev => [...prev, ...newItems])
    }

    // Reset input
    if (fileInputRef.current) {
      fileInputRef.current.value = ''
    }
  }

  // Remove single media item
  const removeMediaItem = (index: number) => {
    setMediaItems(prev => {
      const item = prev[index]
      if (item) {
        URL.revokeObjectURL(item.preview)
      }
      return prev.filter((_, i) => i !== index)
    })
  }

  // Clear all media
  const clearAllMedia = () => {
    mediaItems.forEach(item => URL.revokeObjectURL(item.preview))
    setMediaItems([])
    if (fileInputRef.current) {
      fileInputRef.current.value = ''
    }
  }

  // Filter marathons based on search and status
  const filteredMarathons = useMemo(() => {
    return marathons.filter(m => {
      const matchesSearch = !marathonSearch ||
        m.title.toLowerCase().includes(marathonSearch.toLowerCase())
      const matchesStatus = statusFilter === 'all' || m.status === statusFilter
      return matchesSearch && matchesStatus
    })
  }, [marathons, marathonSearch, statusFilter])

  const selectedMarathon = marathons.find(m => m.id === marathonId)

  const handleSend = async () => {
    if (!message.trim() && mediaItems.length === 0) {
      toast.error('Введите сообщение или прикрепите медиа')
      return
    }

    if (targetType === 'marathon' && !marathonId) {
      toast.error('Выберите марафон')
      return
    }

    setSending(true)
    try {
      const files = mediaItems.map(item => item.file)
      let result
      if (targetType === 'all') {
        result = await adminApi.broadcastToAll(message, files.length > 0 ? files : undefined)
      } else {
        result = await adminApi.broadcastToMarathon(marathonId!, message, files.length > 0 ? files : undefined)
      }

      toast.success(`Отправлено ${result.sent_count} из ${result.total_count} сообщений`)
      setMessage('')
      clearAllMedia()
    } catch (err) {
      console.error('Failed to send broadcast:', err)
      toast.error('Ошибка отправки')
    } finally {
      setSending(false)
    }
  }

  const getStatusBadge = (status: string) => {
    const config = {
      active: { label: 'Активен', class: 'bg-green-500/20 text-green-400 border-green-500/30' },
      preparing: { label: 'Подготовка', class: 'bg-yellow-500/20 text-yellow-400 border-yellow-500/30' },
      finished: { label: 'Завершён', class: 'bg-gray-500/20 text-gray-400 border-gray-500/30' },
    }
    const c = config[status as keyof typeof config] || config.finished
    return (
      <span className={`text-xs px-2 py-0.5 rounded border ${c.class}`}>
        {c.label}
      </span>
    )
  }

  const insertTag = (openTag: string, closeTag: string) => {
    const textarea = textareaRef.current
    if (!textarea) return

    const start = textarea.selectionStart
    const end = textarea.selectionEnd
    const selectedText = message.substring(start, end)
    const newText = message.substring(0, start) + openTag + selectedText + closeTag + message.substring(end)

    handleMessageChange(newText)

    // Restore cursor position
    setTimeout(() => {
      textarea.focus()
      const newCursorPos = start + openTag.length + selectedText.length
      textarea.setSelectionRange(newCursorPos, newCursorPos)
    }, 0)
  }

  return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex items-center gap-3">
        <div className="p-2 rounded-lg bg-pink-500/20 border border-pink-500/30">
          <Send className="w-6 h-6 text-pink-400" />
        </div>
        <h1 className="text-2xl font-bold text-white">Рассылка уведомлений</h1>
      </div>

      <div className="flex gap-6">
        {/* Left Column - Editor */}
        <div className="flex-1 space-y-6">
          {/* Target Selection */}
          <div className="space-y-3">
            <label className="block text-sm font-medium text-gray-300">
              Кому отправить
            </label>
            <div className="flex gap-4">
              <button
                onClick={() => {
                  setTargetType('all')
                  setMarathonId(null)
                }}
                className={`flex-1 flex items-center justify-center gap-3 p-4 rounded-xl border transition-all duration-200 ${
                  targetType === 'all'
                    ? 'bg-accent-500/20 border-accent-500/50 text-accent-400 shadow-[0_0_15px_rgba(139,92,246,0.15)]'
                    : 'bg-dark-700/50 border-dark-600 text-gray-400 hover:border-dark-500 hover:text-gray-300'
                }`}
              >
                <Users className="w-5 h-5" />
                <span className="font-medium">Всем пользователям</span>
              </button>
              <button
                onClick={() => setTargetType('marathon')}
                className={`flex-1 flex items-center justify-center gap-3 p-4 rounded-xl border transition-all duration-200 ${
                  targetType === 'marathon'
                    ? 'bg-accent-500/20 border-accent-500/50 text-accent-400 shadow-[0_0_15px_rgba(139,92,246,0.15)]'
                    : 'bg-dark-700/50 border-dark-600 text-gray-400 hover:border-dark-500 hover:text-gray-300'
                }`}
              >
                <Trophy className="w-5 h-5" />
                <span className="font-medium">Участникам марафона</span>
              </button>
            </div>
          </div>

          {/* Marathon Selection */}
          {targetType === 'marathon' && (
            <div className="space-y-3">
              <label className="block text-sm font-medium text-gray-300">
                Выберите марафон
              </label>

              {/* Search and Filter */}
              <div className="flex gap-3">
                <div className="relative flex-1">
                  <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-500" />
                  <input
                    type="text"
                    placeholder="Поиск по названию..."
                    value={marathonSearch}
                    onChange={(e) => setMarathonSearch(e.target.value)}
                    className="w-full bg-dark-700/50 border border-dark-600 rounded-lg pl-9 pr-3 py-2 text-sm text-white placeholder:text-gray-500 focus:outline-none focus:border-accent-500/50 transition-colors"
                  />
                </div>
                <select
                  value={statusFilter}
                  onChange={(e) => setStatusFilter(e.target.value as typeof statusFilter)}
                  className="bg-dark-700/50 border border-dark-600 rounded-lg px-3 py-2 text-sm text-white focus:outline-none focus:border-accent-500/50 transition-colors"
                >
                  <option value="all">Все статусы</option>
                  <option value="active">Активные</option>
                  <option value="preparing">Подготовка</option>
                  <option value="finished">Завершённые</option>
                </select>
              </div>

              {/* Marathon List */}
              {loadingMarathons ? (
                <div className="animate-pulse bg-dark-700 h-32 rounded-xl" />
              ) : (
                <div className="max-h-48 overflow-y-auto rounded-xl border border-dark-600 bg-dark-800/50">
                  {filteredMarathons.length === 0 ? (
                    <div className="p-4 text-center text-gray-500 text-sm">
                      {marathons.length === 0 ? (
                        <div className="space-y-2">
                          <p>Не удалось загрузить марафоны</p>
                          <button
                            onClick={loadMarathons}
                            className="text-accent-400 hover:underline"
                          >
                            Повторить загрузку
                          </button>
                        </div>
                      ) : (
                        'Марафоны не найдены по фильтру'
                      )}
                    </div>
                  ) : (
                    filteredMarathons.map((m) => (
                      <button
                        key={m.id}
                        onClick={() => setMarathonId(marathonId === m.id ? null : m.id)}
                        className={`w-full flex items-center justify-between p-3 text-left border-b border-dark-600 last:border-b-0 transition-colors ${
                          marathonId === m.id
                            ? 'bg-accent-500/20 text-white'
                            : 'hover:bg-dark-700/50 text-gray-300'
                        }`}
                      >
                        <div className="flex items-center gap-3 min-w-0">
                          <span className="truncate font-medium">{m.title}</span>
                          {getStatusBadge(m.status)}
                        </div>
                        <span className="text-xs text-gray-500 flex-shrink-0 ml-2">
                          {m.participants_count} уч.
                        </span>
                      </button>
                    ))
                  )}
                </div>
              )}

              {/* Selected Marathon Info */}
              {selectedMarathon && (
                <div className="p-3 bg-accent-500/10 border border-accent-500/30 rounded-lg">
                  <div className="flex items-center justify-between">
                    <div className="flex items-center gap-2 text-accent-400">
                      <Trophy className="w-4 h-4" />
                      <span className="font-medium">{selectedMarathon.title}</span>
                      {getStatusBadge(selectedMarathon.status)}
                    </div>
                    <button
                      onClick={() => setMarathonId(null)}
                      className="p-1 text-gray-400 hover:text-white rounded hover:bg-dark-600/50 transition-colors"
                      title="Отменить выбор"
                    >
                      <X className="w-4 h-4" />
                    </button>
                  </div>
                  <p className="text-sm text-gray-400 mt-1">
                    {selectedMarathon.participants_count} участников получат сообщение
                  </p>
                </div>
              )}
            </div>
          )}

          {/* Message with Tag Toolbar */}
          <div className="space-y-2">
            <div className="flex items-center justify-between">
              <label className="block text-sm font-medium text-gray-300">
                Сообщение
              </label>
              <button
                onClick={() => setShowTagsHelp(!showTagsHelp)}
                className="text-xs text-gray-500 hover:text-accent-400 flex items-center gap-1 transition-colors"
              >
                <ChevronDown className={`w-3 h-3 transition-transform ${showTagsHelp ? 'rotate-180' : ''}`} />
                Справка по тегам
              </button>
            </div>

            {/* Quick Tag Buttons */}
            <div className="flex flex-wrap gap-1">
              <button
                onClick={() => insertTag('<b>', '</b>')}
                className="px-2 py-1 text-xs bg-dark-700 hover:bg-dark-600 text-gray-300 rounded font-bold transition-colors"
                title="Жирный"
              >
                B
              </button>
              <button
                onClick={() => insertTag('<i>', '</i>')}
                className="px-2 py-1 text-xs bg-dark-700 hover:bg-dark-600 text-gray-300 rounded italic transition-colors"
                title="Курсив"
              >
                I
              </button>
              <button
                onClick={() => insertTag('<u>', '</u>')}
                className="px-2 py-1 text-xs bg-dark-700 hover:bg-dark-600 text-gray-300 rounded underline transition-colors"
                title="Подчёркнутый"
              >
                U
              </button>
              <button
                onClick={() => insertTag('<s>', '</s>')}
                className="px-2 py-1 text-xs bg-dark-700 hover:bg-dark-600 text-gray-300 rounded line-through transition-colors"
                title="Зачёркнутый"
              >
                S
              </button>
              <button
                onClick={() => insertTag('<code>', '</code>')}
                className="px-2 py-1 text-xs bg-dark-700 hover:bg-dark-600 text-gray-300 rounded font-mono transition-colors"
                title="Код"
              >
                {'</>'}
              </button>
              <button
                onClick={() => insertTag('<pre>', '</pre>')}
                className="px-2 py-1 text-xs bg-dark-700 hover:bg-dark-600 text-gray-300 rounded font-mono transition-colors"
                title="Блок кода"
              >
                PRE
              </button>
              <button
                onClick={() => insertTag('<a href="URL">', '</a>')}
                className="px-2 py-1 text-xs bg-dark-700 hover:bg-dark-600 text-gray-300 rounded transition-colors"
                title="Ссылка"
              >
                🔗
              </button>
              <button
                onClick={() => insertTag('<tg-spoiler>', '</tg-spoiler>')}
                className="px-2 py-1 text-xs bg-dark-700 hover:bg-dark-600 text-gray-300 rounded transition-colors"
                title="Спойлер"
              >
                👁️
              </button>
              <button
                onClick={() => insertTag('<blockquote>', '</blockquote>')}
                className="px-2 py-1 text-xs bg-dark-700 hover:bg-dark-600 text-gray-300 rounded transition-colors"
                title="Цитата"
              >
                ❝
              </button>
            </div>

            {/* Tags Help */}
            {showTagsHelp && (
              <div className="p-3 bg-dark-800 border border-dark-600 rounded-lg text-xs space-y-2">
                <p className="text-gray-400 font-medium mb-2">Поддерживаемые теги Telegram:</p>
                <div className="grid grid-cols-2 gap-2">
                  {TELEGRAM_TAGS.map((t) => (
                    <div key={t.tag} className="flex items-center gap-2">
                      <code className="text-neon-400 bg-dark-700 px-1.5 py-0.5 rounded">{t.tag}</code>
                      <span className="text-gray-500">— {t.description}</span>
                    </div>
                  ))}
                </div>
              </div>
            )}

            <textarea
              ref={textareaRef}
              value={message}
              onChange={(e) => handleMessageChange(e.target.value)}
              onKeyDown={handleKeyDown}
              rows={8}
              placeholder="Введите текст сообщения..."
              className="w-full bg-dark-700/50 border border-dark-600 rounded-xl px-4 py-3 text-white placeholder:text-gray-500 focus:outline-none focus:border-accent-500/50 transition-colors resize-none font-mono text-sm"
            />
            <div className="flex items-center justify-between">
              <p className="text-xs text-gray-600">
                Ctrl+Z — отмена • Ctrl+Shift+Z — повтор
              </p>
              <p className={`text-xs ${message.length > 2000 ? 'text-red-400' : 'text-gray-500'}`}>
                {message.length} / 2000
              </p>
            </div>

            {/* Media Attachment */}
            <div className="space-y-3">
              <div className="flex items-center gap-2">
                <input
                  type="file"
                  ref={fileInputRef}
                  onChange={handleMediaSelect}
                  accept="image/*,video/*"
                  multiple
                  className="hidden"
                />
                <button
                  onClick={() => fileInputRef.current?.click()}
                  disabled={mediaItems.length >= 10}
                  className="flex items-center gap-2 px-3 py-2 text-sm bg-dark-700 hover:bg-dark-600 text-gray-300 rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
                >
                  <Image className="w-4 h-4" />
                  <Film className="w-4 h-4" />
                  <span>Прикрепить медиа</span>
                </button>
                {mediaItems.length > 0 && (
                  <>
                    <span className="text-sm text-gray-500">
                      {mediaItems.length}/10 файлов
                    </span>
                    <button
                      onClick={clearAllMedia}
                      className="flex items-center gap-1 px-2 py-1 text-xs text-red-400 hover:text-red-300 transition-colors"
                    >
                      <Trash2 className="w-3 h-3" />
                      Удалить все
                    </button>
                  </>
                )}
              </div>

              {/* Media Grid Preview */}
              {mediaItems.length > 0 && (
                <div className="grid grid-cols-5 gap-2">
                  {mediaItems.map((item, index) => (
                    <div
                      key={index}
                      className="relative aspect-square rounded-lg overflow-hidden border border-dark-600 bg-dark-800 group"
                    >
                      {item.type === 'photo' ? (
                        <img
                          src={item.preview}
                          alt={`Preview ${index + 1}`}
                          className="w-full h-full object-cover"
                        />
                      ) : (
                        <div className="relative w-full h-full">
                          <video
                            src={item.preview}
                            className="w-full h-full object-cover"
                          />
                          <div className="absolute inset-0 flex items-center justify-center bg-black/30">
                            <Film className="w-6 h-6 text-white" />
                          </div>
                        </div>
                      )}
                      <button
                        onClick={() => removeMediaItem(index)}
                        className="absolute top-1 right-1 p-1 bg-red-500/80 hover:bg-red-500 text-white rounded opacity-0 group-hover:opacity-100 transition-opacity"
                      >
                        <X className="w-3 h-3" />
                      </button>
                      <div className="absolute bottom-1 left-1 px-1.5 py-0.5 bg-black/60 rounded text-xs text-white">
                        {item.type === 'photo' ? 'IMG' : 'VID'}
                      </div>
                    </div>
                  ))}
                  {mediaItems.length < 10 && (
                    <button
                      onClick={() => fileInputRef.current?.click()}
                      className="aspect-square rounded-lg border-2 border-dashed border-dark-500 hover:border-accent-500/50 flex items-center justify-center text-gray-500 hover:text-accent-400 transition-colors"
                    >
                      <Plus className="w-6 h-6" />
                    </button>
                  )}
                </div>
              )}
            </div>
          </div>

          {/* Send Button */}
          <NeonButton
            size="lg"
            color="purple"
            onClick={handleSend}
            disabled={sending || (!message.trim() && mediaItems.length === 0) || message.length > 2000 || (targetType === 'marathon' && !marathonId)}
            isLoading={sending}
            icon={<Send className="w-5 h-5" />}
            className="w-full"
          >
            {sending ? 'Отправка...' : 'Отправить рассылку'}
          </NeonButton>

          {/* Warning */}
          <div className="glass rounded-xl p-4 border border-amber-500/20">
            <div className="flex items-start gap-3">
              <AlertTriangle className="w-5 h-5 text-amber-400 flex-shrink-0 mt-0.5" />
              <div>
                <p className="text-sm text-amber-400 font-medium mb-1">Обратите внимание</p>
                <p className="text-sm text-gray-400">
                  Сообщение будет отправлено только пользователям с привязанным Telegram.
                  Рассылка ограничена: 1 сообщение всем в минуту, 3 сообщения марафону в минуту.
                </p>
              </div>
            </div>
          </div>
        </div>

        {/* Right Column - Preview */}
        <div className="w-96 flex-shrink-0">
          <div className="sticky top-6 space-y-3">
            <div className="flex items-center gap-2 text-gray-400">
              <Eye className="w-4 h-4" />
              <span className="text-sm font-medium">Предпросмотр</span>
            </div>

            {/* Telegram-style Preview */}
            <div className="bg-[#0e1621] rounded-2xl p-4 border border-dark-600 shadow-xl">
              {/* Chat Header */}
              <div className="flex items-center gap-3 pb-3 border-b border-dark-600 mb-3">
                <div className="w-10 h-10 rounded-full bg-gradient-to-br from-accent-500 to-pink-500 flex items-center justify-center text-white font-bold">
                  M
                </div>
                <div>
                  <p className="text-white font-medium text-sm">Marathon Bot</p>
                  <p className="text-gray-500 text-xs">бот</p>
                </div>
              </div>

              {/* Message Bubble */}
              <div className="bg-[#182533] rounded-2xl rounded-tl-md overflow-hidden max-w-full">
                {/* Media Preview in Telegram style */}
                {mediaItems.length > 0 && (
                  <div className={`${mediaItems.length > 1 ? 'grid grid-cols-2 gap-0.5' : ''}`}>
                    {mediaItems.slice(0, 4).map((item, index) => (
                      <div key={index} className="relative">
                        {item.type === 'photo' ? (
                          <img
                            src={item.preview}
                            alt={`Preview ${index + 1}`}
                            className={`w-full object-cover ${mediaItems.length === 1 ? 'max-h-64' : 'h-24'}`}
                          />
                        ) : (
                          <div className="relative bg-black">
                            <video
                              src={item.preview}
                              className={`w-full object-cover ${mediaItems.length === 1 ? 'max-h-64' : 'h-24'}`}
                            />
                            <div className="absolute inset-0 flex items-center justify-center">
                              <div className="w-8 h-8 rounded-full bg-white/30 backdrop-blur flex items-center justify-center">
                                <Film className="w-4 h-4 text-white" />
                              </div>
                            </div>
                          </div>
                        )}
                        {/* Show +N indicator on last visible item if there are more */}
                        {index === 3 && mediaItems.length > 4 && (
                          <div className="absolute inset-0 bg-black/60 flex items-center justify-center">
                            <span className="text-white text-lg font-bold">+{mediaItems.length - 4}</span>
                          </div>
                        )}
                      </div>
                    ))}
                  </div>
                )}
                <div className="p-3">
                  {message.trim() ? (
                    <div
                      className="text-white text-sm break-words telegram-preview"
                      dangerouslySetInnerHTML={{ __html: telegramToHtml(message) }}
                    />
                  ) : mediaItems.length === 0 ? (
                    <p className="text-gray-500 text-sm italic">Введите сообщение...</p>
                  ) : null}
                  <p className="text-gray-500 text-xs text-right mt-2">
                    {new Date().toLocaleTimeString('ru-RU', { hour: '2-digit', minute: '2-digit' })}
                  </p>
                </div>
              </div>

              {/* Info */}
              <div className="mt-4 pt-3 border-t border-dark-600">
                <div className="flex items-center gap-2 text-gray-500 text-xs">
                  <MessageSquare className="w-3 h-3" />
                  <span>
                    Так будет выглядеть сообщение в Telegram
                  </span>
                </div>
              </div>
            </div>

            {/* Preview Notes */}
            <div className="text-xs text-gray-500 space-y-1">
              <p>• Спойлеры (<code className="text-gray-400">&lt;tg-spoiler&gt;</code>) показаны размытыми</p>
              <p>• Цитаты (<code className="text-gray-400">&lt;blockquote&gt;</code>) с вертикальной линией</p>
              <p>• Ссылки будут кликабельны в Telegram</p>
            </div>
          </div>
        </div>
      </div>

      {/* Custom styles for Telegram preview */}
      <style>{`
        .telegram-preview b, .telegram-preview strong {
          font-weight: 600;
        }
        .telegram-preview i, .telegram-preview em {
          font-style: italic;
        }
        .telegram-preview u {
          text-decoration: underline;
        }
        .telegram-preview s, .telegram-preview strike, .telegram-preview del {
          text-decoration: line-through;
        }
        .telegram-preview code {
          font-family: monospace;
          background: rgba(255,255,255,0.1);
          padding: 1px 4px;
          border-radius: 4px;
          font-size: 0.9em;
        }
        .telegram-preview pre {
          font-family: monospace;
          background: rgba(0,0,0,0.3);
          padding: 8px 12px;
          border-radius: 8px;
          overflow-x: auto;
          margin: 4px 0;
          font-size: 0.85em;
        }
        .telegram-preview a {
          color: #6ab2f2;
          text-decoration: none;
        }
        .telegram-preview a:hover {
          text-decoration: underline;
        }
        .telegram-preview .tg-spoiler {
          background: #333;
          color: transparent;
          border-radius: 4px;
          padding: 0 4px;
          cursor: pointer;
          transition: all 0.2s;
        }
        .telegram-preview .tg-spoiler:hover {
          color: white;
          background: transparent;
        }
        .telegram-preview blockquote {
          border-left: 3px solid #6ab2f2;
          padding-left: 12px;
          margin: 8px 0;
          color: #aaa;
        }
      `}</style>
    </div>
  )
}
