import { observer } from 'mobx-react-lite'
import React, { useEffect, useState } from 'react'
import { Alert, ScrollView, Text, TouchableOpacity, View } from 'react-native'

import { videoUrlCache } from '@/utils/videoUrlCache'

interface CacheStats {
  totalCount: number
  expiredCount: number
  validCount: number
  cacheSize: string
}

const CacheManagementPage = observer(() => {
  const [stats, setStats] = useState<CacheStats | null>(null)
  const [isLoading, setIsLoading] = useState(false)

  const loadCacheStats = async () => {
    try {
      const cacheStats = await videoUrlCache.getStats()
      setStats(cacheStats)
    } catch (error) {
      console.warn('获取缓存统计失败:', error)
    }
  }

  const handleClearCache = () => {
    Alert.alert('清理缓存', '确定要清理所有视频URL缓存吗？此操作无法撤销。', [
      { text: '取消', style: 'cancel' },
      {
        text: '确定',
        style: 'destructive',
        onPress: async () => {
          setIsLoading(true)
          try {
            await videoUrlCache.clear()
            await loadCacheStats()
            Alert.alert('成功', '缓存已清理')
          } catch (error) {
            Alert.alert('失败', '清理缓存失败')
            console.warn('清理缓存失败:', error)
          } finally {
            setIsLoading(false)
          }
        },
      },
    ])
  }

  useEffect(() => {
    loadCacheStats()
  }, [])

  return (
    <ScrollView className="flex-1 bg-gray-50 p-4">
      <View className="mb-4 rounded-lg bg-white p-4">
        <Text className="mb-4 text-lg font-semibold text-gray-800">视频URL缓存统计</Text>

        {stats ? (
          <View className="space-y-3">
            <View className="flex-row justify-between">
              <Text className="text-gray-600">总缓存数</Text>
              <Text className="font-medium">{stats.totalCount}</Text>
            </View>

            <View className="flex-row justify-between">
              <Text className="text-green-600">有效缓存</Text>
              <Text className="font-medium text-green-600">{stats.validCount}</Text>
            </View>

            <View className="flex-row justify-between">
              <Text className="text-red-600">过期缓存</Text>
              <Text className="font-medium text-red-600">{stats.expiredCount}</Text>
            </View>

            <View className="flex-row justify-between">
              <Text className="text-gray-600">缓存大小</Text>
              <Text className="font-medium">{stats.cacheSize}</Text>
            </View>
          </View>
        ) : (
          <Text className="text-gray-500">加载中...</Text>
        )}
      </View>

      <View className="rounded-lg bg-white p-4">
        <Text className="mb-4 text-lg font-semibold text-gray-800">缓存管理</Text>

        <View className="space-y-3">
          <TouchableOpacity className="rounded-lg bg-blue-500 px-4 py-3" onPress={loadCacheStats} disabled={isLoading}>
            <Text className="text-center font-medium text-white">刷新统计</Text>
          </TouchableOpacity>

          <TouchableOpacity className="rounded-lg bg-red-500 px-4 py-3" onPress={handleClearCache} disabled={isLoading}>
            <Text className="text-center font-medium text-white">清理所有缓存</Text>
          </TouchableOpacity>
        </View>
      </View>

      <View className="mt-4 rounded-lg border border-yellow-200 bg-yellow-50 p-4">
        <Text className="text-sm text-yellow-800">
          💡 提示：缓存会自动清理过期数据，通常不需要手动清理。 缓存有效期为24小时，最多保存200条记录。
        </Text>
      </View>
    </ScrollView>
  )
})

export default CacheManagementPage