import { Ban, LogOut, Calendar, Clock, AlertTriangle, Sparkles } from 'lucide-react'
import { useAuthStore } from '@/store/auth'
import { NeonButton } from '@/components/ui'

interface BanInfo {
  banned_at: string | null
  banned_until: string | null
  reason: string | null
}

interface BannedScreenProps {
  banInfo: BanInfo
}

function formatDate(dateStr: string | null) {
  if (!dateStr) return null
  return new Date(dateStr).toLocaleString('ru-RU', {
    day: '2-digit',
    month: 'long',
    year: 'numeric',
    hour: '2-digit',
    minute: '2-digit',
    timeZone: 'Europe/Moscow',
  }) + ' (МСК)'
}

export function BannedScreen({ banInfo }: BannedScreenProps) {
  const logout = useAuthStore((state) => state.logout)

  const bannedAtFormatted = formatDate(banInfo.banned_at)
  const bannedUntilFormatted = formatDate(banInfo.banned_until)

  return (
    <div className="min-h-screen bg-dark-900 flex flex-col items-center justify-center text-center px-4">
      {/* Background effects */}
      <div className="fixed inset-0 overflow-hidden pointer-events-none">
        <div className="absolute top-1/4 -left-32 w-96 h-96 bg-red-500/5 rounded-full blur-[100px]" />
        <div className="absolute bottom-1/4 -right-32 w-96 h-96 bg-orange-500/5 rounded-full blur-[100px]" />
      </div>

      {/* Icon */}
      <div className="relative mb-8">
        <div className="w-32 h-32 rounded-3xl bg-dark-700/50 border-2 border-red-500/30 flex items-center justify-center shadow-[0_0_30px_rgba(239,68,68,0.2)]">
          <Ban className="w-16 h-16 text-red-400" />
        </div>
        <div className="absolute -bottom-2 -right-2 w-12 h-12 rounded-xl bg-red-500/20 border border-red-500/40 flex items-center justify-center animate-pulse">
          <AlertTriangle className="w-6 h-6 text-red-400" />
        </div>
        {/* Decorative dots */}
        <div className="absolute -top-2 -left-2 w-3 h-3 rounded-full bg-red-500/50 animate-pulse" />
        <div className="absolute top-4 -right-4 w-2 h-2 rounded-full bg-orange-500/50 animate-pulse" style={{ animationDelay: '0.5s' }} />
      </div>

      {/* Title with glow */}
      <div className="relative mb-4">
        <h1 className="text-4xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-red-400 via-orange-400 to-red-400">
          Аккаунт заблокирован
        </h1>
        <div className="absolute inset-0 text-4xl font-bold text-red-500/20 blur-xl">
          Аккаунт заблокирован
        </div>
      </div>

      <p className="text-gray-400 mb-8 max-w-md">
        Ваш доступ к платформе был ограничен администрацией.
      </p>

      {/* Ban Info Card */}
      <div className="glass rounded-2xl p-6 mb-8 max-w-md w-full border border-red-500/20 text-left space-y-4">
        {bannedAtFormatted && (
          <div className="flex items-center gap-3">
            <div className="p-2 rounded-lg bg-dark-700/50">
              <Calendar className="w-5 h-5 text-gray-500" />
            </div>
            <div>
              <p className="text-xs text-gray-500 uppercase tracking-wider">Дата блокировки</p>
              <p className="text-white font-medium">{bannedAtFormatted}</p>
            </div>
          </div>
        )}

        <div className="flex items-center gap-3">
          <div className="p-2 rounded-lg bg-dark-700/50">
            <Clock className="w-5 h-5 text-gray-500" />
          </div>
          <div>
            <p className="text-xs text-gray-500 uppercase tracking-wider">Срок</p>
            <p className={`font-medium ${bannedUntilFormatted ? 'text-amber-400' : 'text-red-400'}`}>
              {bannedUntilFormatted ? `до ${bannedUntilFormatted}` : 'Навсегда'}
            </p>
          </div>
        </div>

        {banInfo.reason && (
          <div className="pt-4 border-t border-dark-600">
            <p className="text-xs text-gray-500 uppercase tracking-wider mb-2">Причина</p>
            <p className="text-white bg-dark-700/50 rounded-xl p-4 border border-dark-600">
              {banInfo.reason}
            </p>
          </div>
        )}
      </div>

      {/* Info text */}
      <p className="text-gray-500 text-sm mb-8 max-w-md">
        {banInfo.banned_until
          ? 'Ваш аккаунт будет автоматически разблокирован по истечении срока.'
          : 'Если вы считаете, что блокировка ошибочна, обратитесь к администрации.'}
      </p>

      {/* Logout button */}
      <NeonButton
        variant="secondary"
        size="lg"
        onClick={logout}
        icon={<LogOut className="w-5 h-5" />}
      >
        Выйти из аккаунта
      </NeonButton>

      {/* Decorative sparkles */}
      <div className="absolute top-1/4 left-1/4 opacity-20">
        <Sparkles className="w-6 h-6 text-red-400 animate-pulse" />
      </div>
      <div className="absolute bottom-1/3 right-1/4 opacity-20">
        <Sparkles className="w-4 h-4 text-orange-400 animate-pulse" style={{ animationDelay: '1s' }} />
      </div>
    </div>
  )
}