import { useState, useEffect } from 'react'
import { contentApi } from '@/api/admin'
import { Megaphone, X } from 'lucide-react'

const STORAGE_KEY = 'announcement_dismissed'

export function AnnouncementBanner() {
  const [content, setContent] = useState<string | null>(null)
  const [title, setTitle] = useState<string | null>(null)
  const [updatedAt, setUpdatedAt] = useState<string | null>(null)
  const [isLoading, setIsLoading] = useState(true)

  useEffect(() => {
    const loadAnnouncement = async () => {
      try {
        const data = await contentApi.getPublicContent('announcement')
        // Check if this announcement was already dismissed (by updated_at)
        const dismissedAt = localStorage.getItem(STORAGE_KEY)
        if (dismissedAt === data.updated_at) {
          setContent(null)
        } else {
          setContent(data.content)
          setTitle(data.title)
          setUpdatedAt(data.updated_at)
        }
      } catch {
        // No announcement or error - don't show
        setContent(null)
      } finally {
        setIsLoading(false)
      }
    }

    loadAnnouncement()
  }, [])

  const handleDismiss = () => {
    if (updatedAt) {
      // Store the updated_at to know which announcement was dismissed
      // When admin updates announcement, updated_at changes and banner shows again
      localStorage.setItem(STORAGE_KEY, updatedAt)
      setContent(null)
    }
  }

  if (isLoading || !content) {
    return null
  }

  return (
    <div className="relative rounded-xl overflow-hidden bg-gradient-to-r from-accent-500/20 via-purple-500/20 to-pink-500/20 border border-accent-500/30">
      {/* Close button */}
      <button
        onClick={handleDismiss}
        className="absolute top-3 right-3 p-1.5 text-white bg-dark-700/70 hover:bg-dark-600 rounded-lg transition-colors z-10"
        title="Скрыть"
      >
        <X className="w-4 h-4" />
      </button>

      {/* Content */}
      <div className="p-4 pr-12 flex items-start gap-3">
        <div className="w-10 h-10 rounded-xl bg-accent-500/20 border border-accent-500/30 flex items-center justify-center flex-shrink-0">
          <Megaphone className="w-5 h-5 text-accent-400" />
        </div>
        <div>
          {title && (
            <h3 className="font-semibold text-white mb-1">{title}</h3>
          )}
          <div
            className="text-sm text-gray-300"
            dangerouslySetInnerHTML={{ __html: content }}
          />
        </div>
      </div>
    </div>
  )
}