import { useTheme } from '@/components/ThemeContext';
import { Ionicons } from '@expo/vector-icons';
import { LinearGradient } from 'expo-linear-gradient';
import React from 'react';
import { ActivityIndicator, StyleSheet, Text, TouchableOpacity, View } from 'react-native';

type Props = {
  title?: string;
  description?: string;
  onRefresh?: () => void;
  isRefreshing?: boolean;
};

export default function EmptyState({
  title = 'Maʼlumot topilmadi',
  description = 'Hozircha hech qanday eʼlon mavjud emas',
  onRefresh,
  isRefreshing = false,
}: Props) {
  const { isDark } = useTheme();

  const theme = {
    gradientColors: isDark
      ? (['#1e293b', '#334155'] as [string, string])
      : (['#EEF2FF', '#E0E7FF'] as [string, string]),
    iconColor: '#6366F1',
    title: isDark ? '#f8fafc' : '#1F2937',
    description: isDark ? '#94a3b8' : '#6B7280',
    buttonBg: '#6366F1',
    buttonText: '#ffffff',
    dotColor: '#6366F1',
  };

  return (
    <View style={emptyStyles.container}>
      <LinearGradient colors={theme.gradientColors} style={emptyStyles.iconContainer}>
        <Ionicons name="megaphone-outline" size={64} color={theme.iconColor} />
      </LinearGradient>

      <Text style={[emptyStyles.title, { color: theme.title }]}>{title}</Text>
      <Text style={[emptyStyles.description, { color: theme.description }]}>{description}</Text>

      {onRefresh && (
        <TouchableOpacity
          style={[emptyStyles.refreshBtn, { backgroundColor: theme.buttonBg }]}
          onPress={onRefresh}
          disabled={isRefreshing}
          activeOpacity={0.8}
        >
          {isRefreshing ? (
            <ActivityIndicator color={theme.buttonText} size="small" />
          ) : (
            <>
              <Ionicons name="refresh" size={20} color={theme.buttonText} />
              <Text style={[emptyStyles.refreshText, { color: theme.buttonText }]}>Yangilash</Text>
            </>
          )}
        </TouchableOpacity>
      )}

      <View style={emptyStyles.decoration}>
        <View style={[emptyStyles.dot, { backgroundColor: theme.dotColor }]} />
        <View
          style={[emptyStyles.dot, emptyStyles.dotMedium, { backgroundColor: theme.dotColor }]}
        />
        <View
          style={[emptyStyles.dot, emptyStyles.dotSmall, { backgroundColor: theme.dotColor }]}
        />
      </View>
    </View>
  );
}

const emptyStyles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    paddingHorizontal: 32,
  },
  iconContainer: {
    width: 120,
    height: 120,
    borderRadius: 60,
    justifyContent: 'center',
    alignItems: 'center',
    marginBottom: 24,
  },
  title: {
    fontSize: 20,
    fontWeight: '700',
    textAlign: 'center',
    marginBottom: 8,
  },
  description: {
    fontSize: 15,
    textAlign: 'center',
    lineHeight: 22,
    marginBottom: 24,
  },
  refreshBtn: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 8,
    paddingVertical: 12,
    paddingHorizontal: 24,
    borderRadius: 12,
    shadowColor: '#6366F1',
    shadowOffset: { width: 0, height: 4 },
    shadowOpacity: 0.3,
    shadowRadius: 8,
    elevation: 5,
    minWidth: 140,
    justifyContent: 'center',
  },
  refreshText: {
    fontSize: 16,
    fontWeight: '600',
  },
  decoration: {
    flexDirection: 'row',
    gap: 8,
    marginTop: 32,
  },
  dot: {
    width: 8,
    height: 8,
    borderRadius: 4,
  },
  dotMedium: {
    opacity: 0.6,
  },
  dotSmall: {
    opacity: 0.3,
  },
});