game-marathon/frontend/src/pages/ProfilePage.tsx

import { useState, useEffect, useRef } from 'react'
import { useForm } from 'react-hook-form'
import { zodResolver } from '@hookform/resolvers/zod'
import { z } from 'zod'
import { Link } from 'react-router-dom'
import { useAuthStore } from '@/store/auth'
import { useShopStore } from '@/store/shop'
import { usersApi, telegramApi, authApi, promoApi } from '@/api'
import type { UserStats, ShopItemPublic } from '@/types'
import { useToast } from '@/store/toast'
import {
  NeonButton, Input, GlassCard, StatsCard, clearAvatarCache
} from '@/components/ui'
import {
  User, Camera, Trophy, Target, CheckCircle, Flame,
  Loader2, MessageCircle, Link2, Link2Off, ExternalLink,
  Eye, EyeOff, Save, KeyRound, Shield, Bell, Sparkles,
  AlertTriangle, FileCheck, Backpack, Edit3, Gift
} from 'lucide-react'
import clsx from 'clsx'

// Schemas
const nicknameSchema = z.object({
  nickname: z.string().min(2, 'Минимум 2 символа').max(50, 'Максимум 50 символов'),
})

const passwordSchema = z.object({
  current_password: z.string().min(6, 'Минимум 6 символов'),
  new_password: z.string().min(6, 'Минимум 6 символов').max(100, 'Максимум 100 символов'),
  confirm_password: z.string(),
}).refine((data) => data.new_password === data.confirm_password, {
  message: 'Пароли не совпадают',
  path: ['confirm_password'],
})

type NicknameForm = z.infer<typeof nicknameSchema>
type PasswordForm = z.infer<typeof passwordSchema>

// ============ COSMETICS HELPERS ============

// Background asset_data structure:
// - type: 'solid' | 'gradient' | 'pattern' | 'animated'
// - color: '#1a1a2e' (for solid)
// - gradient: ['#1a1a2e', '#4a0080'] (for gradient)
// - pattern: 'stars' | 'gaming-icons' (for pattern)
// - animation: 'fire-particles' (for animated)
// - animated: boolean (for animated patterns)

interface BackgroundResult {
  styles: React.CSSProperties
  className: string
}

function getBackgroundData(background: ShopItemPublic | null): BackgroundResult {
  if (!background?.asset_data) {
    return { styles: {}, className: '' }
  }

  const data = background.asset_data as {
    type?: string
    gradient?: string[]
    pattern?: string
    color?: string
    animation?: string
    animated?: boolean
  }

  const styles: React.CSSProperties = {}
  let className = ''

  switch (data.type) {
    case 'solid':
      if (data.color) {
        styles.backgroundColor = data.color
      }
      break
    case 'gradient':
      if (data.gradient && data.gradient.length > 0) {
        styles.background = `linear-gradient(135deg, ${data.gradient.join(', ')})`
      }
      break
    case 'pattern':
      // Pattern backgrounds - use CSS classes for animated stars
      if (data.pattern === 'stars') {
        // Use CSS class for twinkling stars effect
        className = 'bg-stars-animated'
      } else if (data.pattern === 'gaming-icons') {
        styles.background = `
          linear-gradient(45deg, rgba(34,211,238,0.1) 25%, transparent 25%),
          linear-gradient(-45deg, rgba(34,211,238,0.1) 25%, transparent 25%),
          linear-gradient(45deg, transparent 75%, rgba(168,85,247,0.1) 75%),
          linear-gradient(-45deg, transparent 75%, rgba(168,85,247,0.1) 75%),
          linear-gradient(135deg, #0f172a 0%, #1e1b4b 100%)
        `
        styles.backgroundSize = '40px 40px, 40px 40px, 40px 40px, 40px 40px, 100% 100%'
      }
      break
    case 'animated':
      // Animated backgrounds
      if (data.animation === 'fire-particles') {
        styles.background = `
          radial-gradient(circle at 50% 100%, rgba(255,100,0,0.4) 0%, transparent 50%),
          radial-gradient(circle at 30% 80%, rgba(255,50,0,0.3) 0%, transparent 40%),
          radial-gradient(circle at 70% 90%, rgba(255,150,0,0.3) 0%, transparent 45%),
          linear-gradient(to top, #1a0a00 0%, #0d0d0d 60%, #1a1a2e 100%)
        `
        className = 'animate-fire-pulse'
      }
      break
  }

  return { styles, className }
}

// Name color asset_data structure:
// - style: 'solid' | 'gradient' | 'animated'
// - color: '#FF4444' (for solid)
// - gradient: ['#FF6B6B', '#FFE66D'] (for gradient)
// - animation: 'rainbow-shift' (for animated)

interface NameColorResult {
  type: 'solid' | 'gradient' | 'animated'
  color?: string
  gradient?: string[]
  animation?: string
}

function getNameColorData(nameColor: ShopItemPublic | null): NameColorResult {
  if (!nameColor?.asset_data) {
    return { type: 'solid', color: '#ffffff' }
  }

  const data = nameColor.asset_data as {
    style?: string
    color?: string
    gradient?: string[]
    animation?: string
  }

  if (data.style === 'gradient' && data.gradient) {
    return { type: 'gradient', gradient: data.gradient }
  }
  if (data.style === 'animated') {
    return { type: 'animated', animation: data.animation }
  }
  return { type: 'solid', color: data.color || '#ffffff' }
}

// Get title from equipped_title
function getTitleData(title: ShopItemPublic | null): { text: string; color: string } | null {
  if (!title?.asset_data) return null
  const data = title.asset_data as { text?: string; color?: string }
  if (!data.text) return null
  return { text: data.text, color: data.color || '#ffffff' }
}

// Get frame styles from asset_data
function getFrameStyles(frame: ShopItemPublic | null): React.CSSProperties {
  if (!frame?.asset_data) return {}

  const data = frame.asset_data as {
    border_color?: string
    gradient?: string[]
    glow_color?: string
  }

  const styles: React.CSSProperties = {}

  if (data.gradient && data.gradient.length > 0) {
    styles.background = `linear-gradient(45deg, ${data.gradient.join(', ')})`
    styles.backgroundSize = '400% 400%'
  } else if (data.border_color) {
    styles.background = data.border_color
  }

  if (data.glow_color) {
    styles.boxShadow = `0 0 20px ${data.glow_color}, 0 0 40px ${data.glow_color}40`
  }

  return styles
}

// Get frame animation class
function getFrameAnimation(frame: ShopItemPublic | null): string {
  if (!frame?.asset_data) return ''
  const data = frame.asset_data as { animation?: string }
  if (data.animation === 'fire-pulse') return 'animate-fire-pulse'
  if (data.animation === 'rainbow-rotate') return 'animate-rainbow-rotate'
  return ''
}

// ============ HERO AVATAR COMPONENT ============

function HeroAvatar({
  avatarUrl,
  nickname,
  frame,
  onClick,
  isUploading,
  isLoading
}: {
  avatarUrl: string | null | undefined
  nickname: string | undefined
  frame: ShopItemPublic | null
  onClick: () => void
  isUploading: boolean
  isLoading: boolean
}) {
  if (isLoading) {
    return <div className="w-32 h-32 md:w-40 md:h-40 rounded-2xl bg-dark-700/50 skeleton" />
  }

  const avatarContent = (
    <div className="w-32 h-32 md:w-40 md:h-40 rounded-2xl overflow-hidden bg-dark-700/80 backdrop-blur-sm">
      {avatarUrl ? (
        <img
          src={avatarUrl}
          alt={nickname}
          className="w-full h-full object-cover"
        />
      ) : (
        <div className="w-full h-full flex items-center justify-center bg-gradient-to-br from-neon-500/20 to-accent-500/20">
          <User className="w-16 h-16 text-gray-500" />
        </div>
      )}
    </div>
  )

  const hoverOverlay = (
    <div className="absolute inset-0 bg-dark-900/70 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity rounded-2xl">
      {isUploading ? (
        <Loader2 className="w-10 h-10 text-neon-500 animate-spin" />
      ) : (
        <Camera className="w-10 h-10 text-neon-500" />
      )}
    </div>
  )

  if (!frame) {
    return (
      <button
        onClick={onClick}
        disabled={isUploading}
        className="relative rounded-2xl border-2 border-neon-500/50 hover:border-neon-500 transition-all shadow-[0_0_30px_rgba(34,211,238,0.15)] hover:shadow-[0_0_40px_rgba(34,211,238,0.3)] group"
      >
        {avatarContent}
        {hoverOverlay}
      </button>
    )
  }

  return (
    <button
      onClick={onClick}
      disabled={isUploading}
      className={clsx(
        'relative rounded-2xl p-1.5 transition-all group',
        getFrameAnimation(frame)
      )}
      style={getFrameStyles(frame)}
    >
      {avatarContent}
      {hoverOverlay}
    </button>
  )
}

export function ProfilePage() {
  const { user, updateUser, avatarVersion, bumpAvatarVersion } = useAuthStore()
  const toast = useToast()

  // State
  const [stats, setStats] = useState<UserStats | null>(null)
  const [isLoadingStats, setIsLoadingStats] = useState(true)
  const [isUploadingAvatar, setIsUploadingAvatar] = useState(false)
  const [showPasswordForm, setShowPasswordForm] = useState(false)
  const [showCurrentPassword, setShowCurrentPassword] = useState(false)
  const [showNewPassword, setShowNewPassword] = useState(false)
  const [avatarBlobUrl, setAvatarBlobUrl] = useState<string | null>(null)
  const [isLoadingAvatar, setIsLoadingAvatar] = useState(true)

  // Telegram state
  const [telegramLoading, setTelegramLoading] = useState(false)
  const [isPolling, setIsPolling] = useState(false)
  const pollingRef = useRef<ReturnType<typeof setInterval> | null>(null)

  // Notification settings state
  const [notifyEvents, setNotifyEvents] = useState(user?.notify_events ?? true)
  const [notifyDisputes, setNotifyDisputes] = useState(user?.notify_disputes ?? true)
  const [notifyModeration, setNotifyModeration] = useState(user?.notify_moderation ?? true)
  const [notificationUpdating, setNotificationUpdating] = useState<string | null>(null)

  // Promo code state
  const [promoCode, setPromoCode] = useState('')
  const [isRedeemingPromo, setIsRedeemingPromo] = useState(false)

  const fileInputRef = useRef<HTMLInputElement>(null)

  // Forms
  const nicknameForm = useForm<NicknameForm>({
    resolver: zodResolver(nicknameSchema),
    defaultValues: { nickname: user?.nickname || '' },
  })

  const passwordForm = useForm<PasswordForm>({
    resolver: zodResolver(passwordSchema),
    defaultValues: { current_password: '', new_password: '', confirm_password: '' },
  })

  // Load stats
  useEffect(() => {
    loadStats()
    return () => {
      if (pollingRef.current) clearInterval(pollingRef.current)
    }
  }, [])

  // Ref для отслеживания текущего blob URL
  const avatarBlobRef = useRef<string | null>(null)

  // Load avatar via API
  useEffect(() => {
    if (!user?.id || !user?.avatar_url) {
      setIsLoadingAvatar(false)
      return
    }

    let cancelled = false
    const bustCache = avatarVersion > 0

    setIsLoadingAvatar(true)
    usersApi.getAvatarUrl(user.id, bustCache)
      .then(url => {
        if (cancelled) {
          URL.revokeObjectURL(url)
          return
        }
        // Очищаем старый blob URL
        if (avatarBlobRef.current) {
          URL.revokeObjectURL(avatarBlobRef.current)
        }
        avatarBlobRef.current = url
        setAvatarBlobUrl(url)
      })
      .catch(() => {
        if (!cancelled) {
          setAvatarBlobUrl(null)
        }
      })
      .finally(() => {
        if (!cancelled) {
          setIsLoadingAvatar(false)
        }
      })

    return () => {
      cancelled = true
    }
  }, [user?.id, user?.avatar_url, avatarVersion])

  // Cleanup blob URL on unmount
  useEffect(() => {
    return () => {
      if (avatarBlobRef.current) {
        URL.revokeObjectURL(avatarBlobRef.current)
      }
    }
  }, [])

  // Update nickname form when user changes
  useEffect(() => {
    if (user?.nickname) {
      nicknameForm.reset({ nickname: user.nickname })
    }
  }, [user?.nickname])

  const loadStats = async () => {
    try {
      const data = await usersApi.getMyStats()
      setStats(data)
    } catch (error) {
      console.error('Failed to load stats:', error)
    } finally {
      setIsLoadingStats(false)
    }
  }

  // Update nickname
  const onNicknameSubmit = async (data: NicknameForm) => {
    try {
      const updatedUser = await usersApi.updateNickname(data)
      updateUser({ nickname: updatedUser.nickname })
      toast.success('Никнейм обновлен')
    } catch {
      toast.error('Не удалось обновить никнейм')
    }
  }

  // Upload avatar
  const handleAvatarClick = () => {
    fileInputRef.current?.click()
  }

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

    if (!file.type.startsWith('image/')) {
      toast.error('Файл должен быть изображением')
      return
    }
    if (file.size > 5 * 1024 * 1024) {
      toast.error('Максимальный размер файла 5 МБ')
      return
    }

    setIsUploadingAvatar(true)
    try {
      const updatedUser = await usersApi.uploadAvatar(file)
      updateUser({ avatar_url: updatedUser.avatar_url })
      if (user?.id) {
        clearAvatarCache(user.id)
      }
      // Bump version - это вызовет перезагрузку через useEffect
      bumpAvatarVersion()
      toast.success('Аватар обновлен')
    } catch {
      toast.error('Не удалось загрузить аватар')
    } finally {
      setIsUploadingAvatar(false)
    }
  }

  // Change password
  const onPasswordSubmit = async (data: PasswordForm) => {
    try {
      await usersApi.changePassword({
        current_password: data.current_password,
        new_password: data.new_password,
      })
      toast.success('Пароль успешно изменен')
      passwordForm.reset()
      setShowPasswordForm(false)
    } catch (error: unknown) {
      const err = error as { response?: { data?: { detail?: string } } }
      const message = err.response?.data?.detail || 'Не удалось сменить пароль'
      toast.error(message)
    }
  }

  // Telegram functions
  const startPolling = () => {
    setIsPolling(true)
    let attempts = 0
    pollingRef.current = setInterval(async () => {
      attempts++
      try {
        const userData = await authApi.me()
        if (userData.telegram_id) {
          updateUser({
            telegram_id: userData.telegram_id,
            telegram_username: userData.telegram_username,
            telegram_first_name: userData.telegram_first_name,
            telegram_last_name: userData.telegram_last_name,
            telegram_avatar_url: userData.telegram_avatar_url,
          })
          toast.success('Telegram привязан!')
          setIsPolling(false)
          if (pollingRef.current) clearInterval(pollingRef.current)
        }
      } catch { /* ignore */ }
      if (attempts >= 60) {
        setIsPolling(false)
        if (pollingRef.current) clearInterval(pollingRef.current)
      }
    }, 5000)
  }

  const handleLinkTelegram = async () => {
    setTelegramLoading(true)
    try {
      const { bot_url } = await telegramApi.generateLinkToken()
      window.open(bot_url, '_blank')
      startPolling()
    } catch {
      toast.error('Не удалось сгенерировать ссылку')
    } finally {
      setTelegramLoading(false)
    }
  }

  const handleUnlinkTelegram = async () => {
    setTelegramLoading(true)
    try {
      await telegramApi.unlinkTelegram()
      updateUser({
        telegram_id: null,
        telegram_username: null,
        telegram_first_name: null,
        telegram_last_name: null,
        telegram_avatar_url: null,
      })
      toast.success('Telegram отвязан')
    } catch {
      toast.error('Не удалось отвязать Telegram')
    } finally {
      setTelegramLoading(false)
    }
  }

  // Update notification setting
  const handleNotificationToggle = async (
    setting: 'notify_events' | 'notify_disputes' | 'notify_moderation',
    currentValue: boolean,
    setValue: (value: boolean) => void
  ) => {
    setNotificationUpdating(setting)
    const newValue = !currentValue
    setValue(newValue)

    try {
      await usersApi.updateNotificationSettings({ [setting]: newValue })
      updateUser({ [setting]: newValue })
      toast.success('Настройки сохранены')
    } catch {
      // Revert on error
      setValue(currentValue)
      toast.error('Не удалось сохранить настройки')
    } finally {
      setNotificationUpdating(null)
    }
  }

  // Redeem promo code
  const handleRedeemPromo = async (e: React.FormEvent) => {
    e.preventDefault()
    if (!promoCode.trim()) return

    setIsRedeemingPromo(true)
    try {
      const response = await promoApi.redeem(promoCode.trim())
      toast.success(response.data.message)
      setPromoCode('')
      // Update coin balance in store
      useShopStore.getState().updateBalance(response.data.new_balance)
    } catch (error: unknown) {
      const err = error as { response?: { data?: { detail?: string } } }
      const message = err.response?.data?.detail || 'Не удалось активировать промокод'
      toast.error(message)
    } finally {
      setIsRedeemingPromo(false)
    }
  }

  const isLinked = !!user?.telegram_id
  const displayAvatar = avatarBlobUrl || user?.telegram_avatar_url

  // Get cosmetics data
  const equippedFrame = user?.equipped_frame as ShopItemPublic | null
  const equippedTitle = user?.equipped_title as ShopItemPublic | null
  const equippedNameColor = user?.equipped_name_color as ShopItemPublic | null
  const equippedBackground = user?.equipped_background as ShopItemPublic | null

  const titleData = getTitleData(equippedTitle)
  const nameColorData = getNameColorData(equippedNameColor)

  // Get nickname styles based on color type
  const getNicknameStyles = (): React.CSSProperties => {
    if (nameColorData.type === 'solid') {
      return { color: nameColorData.color }
    }
    if (nameColorData.type === 'gradient' && nameColorData.gradient) {
      return {
        background: `linear-gradient(90deg, ${nameColorData.gradient.join(', ')})`,
        WebkitBackgroundClip: 'text',
        WebkitTextFillColor: 'transparent',
        backgroundClip: 'text',
      }
    }
    if (nameColorData.type === 'animated') {
      // Rainbow animated - uses CSS animation with background-position
      return {
        background: 'linear-gradient(90deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #9400d3, #ff0000)',
        backgroundSize: '400% 100%',
        WebkitBackgroundClip: 'text',
        WebkitTextFillColor: 'transparent',
        backgroundClip: 'text',
      }
    }
    return { color: '#ffffff' }
  }

  // Get nickname animation class
  const getNicknameAnimation = (): string => {
    if (nameColorData.type === 'animated' && nameColorData.animation === 'rainbow-shift') {
      return 'animate-rainbow-rotate'
    }
    return ''
  }

  // Get background data
  const backgroundData = getBackgroundData(equippedBackground)

  return (
    <div className="max-w-4xl mx-auto space-y-6">
      {/* ============ HERO SECTION ============ */}
      <div
        className={clsx(
          'relative rounded-3xl overflow-hidden',
          backgroundData.className
        )}
        style={backgroundData.styles}
      >
        {/* Default gradient background if no custom background */}
        {!equippedBackground && (
          <div className="absolute inset-0 bg-gradient-to-br from-dark-800 via-dark-900 to-neon-900/20" />
        )}

        {/* Overlay for readability */}
        <div className="absolute inset-0 bg-gradient-to-t from-dark-900/90 via-dark-900/40 to-transparent" />

        {/* Scan lines effect */}
        <div className="absolute inset-0 bg-[linear-gradient(transparent_50%,rgba(0,0,0,0.03)_50%)] bg-[length:100%_4px] pointer-events-none" />

        {/* Glow effects */}
        <div className="absolute top-0 left-1/4 w-96 h-96 bg-neon-500/10 rounded-full blur-3xl pointer-events-none" />
        <div className="absolute bottom-0 right-1/4 w-64 h-64 bg-accent-500/10 rounded-full blur-3xl pointer-events-none" />

        {/* Content */}
        <div className="relative z-10 px-6 py-10 md:px-10 md:py-14">
          <div className="flex flex-col md:flex-row items-center gap-6 md:gap-10">
            {/* Avatar with Frame */}
            <div className="flex-shrink-0">
              <HeroAvatar
                avatarUrl={displayAvatar}
                nickname={user?.nickname}
                frame={equippedFrame}
                onClick={handleAvatarClick}
                isUploading={isUploadingAvatar}
                isLoading={isLoadingAvatar}
              />
              <input
                ref={fileInputRef}
                type="file"
                accept="image/*"
                onChange={handleAvatarChange}
                className="hidden"
              />
            </div>

            {/* User Info */}
            <div className="flex-1 text-center md:text-left">
              {/* Nickname with color + Title badge */}
              <div className="flex flex-wrap items-center justify-center md:justify-start gap-3 mb-3">
                <h1
                  className={clsx(
                    'text-3xl md:text-4xl font-bold font-display tracking-wide drop-shadow-[0_0_10px_rgba(255,255,255,0.3)]',
                    getNicknameAnimation()
                  )}
                  style={getNicknameStyles()}
                >
                  {user?.nickname || 'Игрок'}
                </h1>

                {/* Title badge */}
                {titleData && (
                  <span
                    className="px-3 py-1 rounded-full text-sm font-semibold border backdrop-blur-sm"
                    style={{
                      color: titleData.color,
                      borderColor: `${titleData.color}50`,
                      backgroundColor: `${titleData.color}15`,
                      boxShadow: `0 0 15px ${titleData.color}30`
                    }}
                  >
                    {titleData.text}
                  </span>
                )}
              </div>

              {/* Role badge */}
              {user?.role === 'admin' && (
                <div className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-purple-500/20 border border-purple-500/30 text-purple-400 text-sm font-medium mb-4">
                  <Shield className="w-4 h-4" />
                  Администратор
                </div>
              )}

              {/* Quick stats preview */}
              {stats && (
                <div className="flex flex-wrap items-center justify-center md:justify-start gap-4 text-sm text-gray-300 mt-4">
                  <div className="flex items-center gap-1.5">
                    <Trophy className="w-4 h-4 text-yellow-500" />
                    <span>{stats.wins_count} побед</span>
                  </div>
                  <div className="flex items-center gap-1.5">
                    <Target className="w-4 h-4 text-neon-400" />
                    <span>{stats.marathons_count} марафонов</span>
                  </div>
                  <div className="flex items-center gap-1.5">
                    <Flame className="w-4 h-4 text-orange-400" />
                    <span>{stats.total_points_earned} очков</span>
                  </div>
                </div>
              )}

              {/* Inventory link */}
              <div className="mt-6">
                <Link
                  to="/inventory"
                  className="inline-flex items-center gap-2 px-4 py-2 rounded-xl bg-dark-700/50 hover:bg-dark-700 border border-dark-600 hover:border-neon-500/30 text-gray-300 hover:text-white transition-all"
                >
                  <Backpack className="w-4 h-4" />
                  Инвентарь
                </Link>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* ============ NICKNAME EDIT SECTION ============ */}
      <GlassCard>
        <div className="flex items-center gap-3 mb-4">
          <div className="w-10 h-10 rounded-xl bg-neon-500/20 flex items-center justify-center">
            <Edit3 className="w-5 h-5 text-neon-400" />
          </div>
          <div>
            <h2 className="text-lg font-semibold text-white">Изменить никнейм</h2>
            <p className="text-sm text-gray-400">Ваше игровое имя</p>
          </div>
        </div>
        <form onSubmit={nicknameForm.handleSubmit(onNicknameSubmit)} className="flex flex-col sm:flex-row gap-4">
          <div className="flex-1">
            <Input
              {...nicknameForm.register('nickname')}
              error={nicknameForm.formState.errors.nickname?.message}
              placeholder="Введите никнейм"
            />
          </div>
          <NeonButton
            type="submit"
            isLoading={nicknameForm.formState.isSubmitting}
            disabled={!nicknameForm.formState.isDirty}
            icon={<Save className="w-4 h-4" />}
          >
            Сохранить
          </NeonButton>
        </form>
      </GlassCard>

      {/* Stats */}
      <div>
        <h2 className="text-xl font-semibold text-white mb-4 flex items-center gap-2">
          <Trophy className="w-5 h-5 text-yellow-500" />
          Статистика
        </h2>
        {isLoadingStats ? (
          <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
            {[...Array(4)].map((_, i) => (
              <div key={i} className="glass rounded-xl p-4">
                <div className="w-12 h-12 bg-dark-700 rounded-lg mb-3 skeleton" />
                <div className="h-8 w-16 bg-dark-700 rounded mb-2 skeleton" />
                <div className="h-4 w-20 bg-dark-700 rounded skeleton" />
              </div>
            ))}
          </div>
        ) : stats ? (
          <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
            <StatsCard
              label="Марафонов"
              value={stats.marathons_count}
              icon={<Target className="w-6 h-6" />}
              color="neon"
            />
            <StatsCard
              label="Побед"
              value={stats.wins_count}
              icon={<Trophy className="w-6 h-6" />}
              color="purple"
            />
            <StatsCard
              label="Заданий"
              value={stats.completed_assignments}
              icon={<CheckCircle className="w-6 h-6" />}
              color="neon"
            />
            <StatsCard
              label="Очков"
              value={stats.total_points_earned}
              icon={<Flame className="w-6 h-6" />}
              color="pink"
            />
          </div>
        ) : (
          <GlassCard className="text-center py-8">
            <p className="text-gray-400">Не удалось загрузить статистику</p>
          </GlassCard>
        )}
      </div>

      {/* Promo Code */}
      <GlassCard>
        <div className="flex items-center gap-3 mb-4">
          <div className="w-10 h-10 rounded-xl bg-yellow-500/20 flex items-center justify-center">
            <Gift className="w-5 h-5 text-yellow-400" />
          </div>
          <div>
            <h2 className="text-lg font-semibold text-white">Промокод</h2>
            <p className="text-sm text-gray-400">Введите код для получения монет</p>
          </div>
        </div>
        <form onSubmit={handleRedeemPromo} className="flex flex-col sm:flex-row gap-4">
          <div className="flex-1">
            <Input
              placeholder="Введите промокод"
              value={promoCode}
              onChange={(e) => setPromoCode(e.target.value.toUpperCase())}
              maxLength={50}
            />
          </div>
          <NeonButton
            type="submit"
            isLoading={isRedeemingPromo}
            disabled={!promoCode.trim()}
            icon={<Gift className="w-4 h-4" />}
          >
            Активировать
          </NeonButton>
        </form>
      </GlassCard>

      {/* Telegram */}
      <GlassCard>
        <div className="flex items-center gap-3 mb-6">
          <div className="w-12 h-12 rounded-xl bg-blue-500/20 flex items-center justify-center">
            <MessageCircle className="w-6 h-6 text-blue-400" />
          </div>
          <div>
            <h2 className="text-lg font-semibold text-white">Telegram</h2>
            <p className="text-sm text-gray-400">
              {isLinked ? 'Аккаунт привязан' : 'Привяжите для уведомлений'}
            </p>
          </div>
        </div>

        {isLinked ? (
          <div className="space-y-4">
            <div className="flex items-center gap-4 p-4 bg-dark-700/50 rounded-xl border border-dark-600">
              <div className="w-14 h-14 rounded-xl bg-blue-500/20 flex items-center justify-center overflow-hidden border border-blue-500/30">
                {user?.telegram_avatar_url ? (
                  <img
                    src={user.telegram_avatar_url}
                    alt="Telegram avatar"
                    className="w-full h-full object-cover"
                  />
                ) : (
                  <Link2 className="w-7 h-7 text-blue-400" />
                )}
              </div>
              <div className="flex-1">
                <p className="text-white font-medium">
                  {user?.telegram_first_name} {user?.telegram_last_name}
                </p>
                {user?.telegram_username && (
                  <p className="text-blue-400 text-sm">@{user.telegram_username}</p>
                )}
              </div>
              <NeonButton
                variant="danger"
                size="sm"
                onClick={handleUnlinkTelegram}
                isLoading={telegramLoading}
                icon={<Link2Off className="w-4 h-4" />}
              >
                Отвязать
              </NeonButton>
            </div>
          </div>
        ) : (
          <div className="space-y-4">
            <p className="text-gray-400">
              Привяжите Telegram для получения уведомлений о событиях и марафонах.
            </p>
            {isPolling ? (
              <div className="p-4 bg-blue-500/10 border border-blue-500/30 rounded-xl">
                <div className="flex items-center gap-3">
                  <Loader2 className="w-5 h-5 text-blue-400 animate-spin" />
                  <p className="text-blue-400">Ожидание привязки...</p>
                </div>
              </div>
            ) : (
              <NeonButton
                onClick={handleLinkTelegram}
                isLoading={telegramLoading}
                icon={<ExternalLink className="w-4 h-4" />}
              >
                Привязать Telegram
              </NeonButton>
            )}
          </div>
        )}
      </GlassCard>

      {/* Security */}
      <GlassCard>
        <div className="flex items-center gap-3 mb-6">
          <div className="w-12 h-12 rounded-xl bg-accent-500/20 flex items-center justify-center">
            <Shield className="w-6 h-6 text-accent-400" />
          </div>
          <div>
            <h2 className="text-lg font-semibold text-white">Безопасность</h2>
            <p className="text-sm text-gray-400">Управление паролем</p>
          </div>
        </div>

        {!showPasswordForm ? (
          <NeonButton
            onClick={() => setShowPasswordForm(true)}
            icon={<KeyRound className="w-4 h-4" />}
          >
            Сменить пароль
          </NeonButton>
        ) : (
          <form onSubmit={passwordForm.handleSubmit(onPasswordSubmit)} className="space-y-4">
            <div className="relative">
              <Input
                label="Текущий пароль"
                type={showCurrentPassword ? 'text' : 'password'}
                {...passwordForm.register('current_password')}
                error={passwordForm.formState.errors.current_password?.message}
              />
              <button
                type="button"
                onClick={() => setShowCurrentPassword(!showCurrentPassword)}
                className="absolute right-3 top-9 text-gray-400 hover:text-white transition-colors"
              >
                {showCurrentPassword ? <EyeOff className="w-5 h-5" /> : <Eye className="w-5 h-5" />}
              </button>
            </div>

            <div className="relative">
              <Input
                label="Новый пароль"
                type={showNewPassword ? 'text' : 'password'}
                {...passwordForm.register('new_password')}
                error={passwordForm.formState.errors.new_password?.message}
              />
              <button
                type="button"
                onClick={() => setShowNewPassword(!showNewPassword)}
                className="absolute right-3 top-9 text-gray-400 hover:text-white transition-colors"
              >
                {showNewPassword ? <EyeOff className="w-5 h-5" /> : <Eye className="w-5 h-5" />}
              </button>
            </div>

            <Input
              label="Подтвердите новый пароль"
              type={showNewPassword ? 'text' : 'password'}
              {...passwordForm.register('confirm_password')}
              error={passwordForm.formState.errors.confirm_password?.message}
            />

            <div className="flex gap-3">
              <NeonButton
                type="submit"
                isLoading={passwordForm.formState.isSubmitting}
                icon={<Save className="w-4 h-4" />}
              >
                Сменить пароль
              </NeonButton>
              <NeonButton
                type="button"
                variant="ghost"
                onClick={() => {
                  setShowPasswordForm(false)
                  passwordForm.reset()
                }}
              >
                Отмена
              </NeonButton>
            </div>
          </form>
        )}
      </GlassCard>

      {/* Notifications */}
      {isLinked && (
        <GlassCard>
          <div className="flex items-center gap-3 mb-6">
            <div className="w-12 h-12 rounded-xl bg-neon-500/20 flex items-center justify-center">
              <Bell className="w-6 h-6 text-neon-400" />
            </div>
            <div>
              <h2 className="text-lg font-semibold text-white">Уведомления</h2>
              <p className="text-sm text-gray-400">Настройте типы уведомлений в Telegram</p>
            </div>
          </div>

          <div className="space-y-4">
            {/* Events toggle */}
            <button
              onClick={() => handleNotificationToggle('notify_events', notifyEvents, setNotifyEvents)}
              disabled={notificationUpdating !== null}
              className="w-full flex items-center justify-between p-4 bg-dark-700/50 rounded-xl border border-dark-600 hover:border-dark-500 transition-colors"
            >
              <div className="flex items-center gap-3">
                <div className="w-10 h-10 rounded-lg bg-yellow-500/20 flex items-center justify-center">
                  <Sparkles className="w-5 h-5 text-yellow-400" />
                </div>
                <div className="text-left">
                  <p className="text-white font-medium">События</p>
                  <p className="text-sm text-gray-400">Golden Hour, Jackpot, Double Risk и др.</p>
                </div>
              </div>
              <div className={`
                w-12 h-7 rounded-full transition-colors relative flex-shrink-0
                ${notifyEvents ? 'bg-neon-500' : 'bg-dark-600'}
                ${notificationUpdating === 'notify_events' ? 'opacity-50' : ''}
              `}>
                <div className={`
                  absolute top-1 w-5 h-5 rounded-full bg-white shadow transition-transform
                  ${notifyEvents ? 'left-6' : 'left-1'}
                `} />
              </div>
            </button>

            {/* Disputes toggle */}
            <button
              onClick={() => handleNotificationToggle('notify_disputes', notifyDisputes, setNotifyDisputes)}
              disabled={notificationUpdating !== null}
              className="w-full flex items-center justify-between p-4 bg-dark-700/50 rounded-xl border border-dark-600 hover:border-dark-500 transition-colors"
            >
              <div className="flex items-center gap-3">
                <div className="w-10 h-10 rounded-lg bg-orange-500/20 flex items-center justify-center">
                  <AlertTriangle className="w-5 h-5 text-orange-400" />
                </div>
                <div className="text-left">
                  <p className="text-white font-medium">Споры</p>
                  <p className="text-sm text-gray-400">Оспаривания заданий и их решения</p>
                </div>
              </div>
              <div className={`
                w-12 h-7 rounded-full transition-colors relative flex-shrink-0
                ${notifyDisputes ? 'bg-neon-500' : 'bg-dark-600'}
                ${notificationUpdating === 'notify_disputes' ? 'opacity-50' : ''}
              `}>
                <div className={`
                  absolute top-1 w-5 h-5 rounded-full bg-white shadow transition-transform
                  ${notifyDisputes ? 'left-6' : 'left-1'}
                `} />
              </div>
            </button>

            {/* Moderation toggle */}
            <button
              onClick={() => handleNotificationToggle('notify_moderation', notifyModeration, setNotifyModeration)}
              disabled={notificationUpdating !== null}
              className="w-full flex items-center justify-between p-4 bg-dark-700/50 rounded-xl border border-dark-600 hover:border-dark-500 transition-colors"
            >
              <div className="flex items-center gap-3">
                <div className="w-10 h-10 rounded-lg bg-green-500/20 flex items-center justify-center">
                  <FileCheck className="w-5 h-5 text-green-400" />
                </div>
                <div className="text-left">
                  <p className="text-white font-medium">Модерация</p>
                  <p className="text-sm text-gray-400">Одобрение/отклонение игр и челленджей</p>
                </div>
              </div>
              <div className={`
                w-12 h-7 rounded-full transition-colors relative flex-shrink-0
                ${notifyModeration ? 'bg-neon-500' : 'bg-dark-600'}
                ${notificationUpdating === 'notify_moderation' ? 'opacity-50' : ''}
              `}>
                <div className={`
                  absolute top-1 w-5 h-5 rounded-full bg-white shadow transition-transform
                  ${notifyModeration ? 'left-6' : 'left-1'}
                `} />
              </div>
            </button>

            {/* Info about mandatory notifications */}
            <p className="text-xs text-gray-500 mt-4">
              Уведомления о старте/финише марафонов и коды безопасности нельзя отключить.
            </p>
          </div>
        </GlassCard>
      )}
    </div>
  )
}