import { useMemo, useState } from 'react';
import { useQuery } from '@tanstack/react-query';
import { router } from 'expo-router';
import { MaterialCommunityIcons } from '@expo/vector-icons';
import { useEffect } from 'react';
import { ActivityIndicator, Pressable, RefreshControl, ScrollView, StyleSheet, Text, TextInput, View } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { ScreenHeader } from '../../src/components/ScreenHeader';
import { api } from '../../src/lib/api';
import { getCustomer } from '../../src/lib/session';

function money(value: number) {
  return `₦${Number(value || 0).toLocaleString()}`;
}

function iconFor(source: string) {
  if (source === 'purchase') return { name: 'solar-power', color: '#16A34A', bg: '#ECFDF3', label: 'Solar' };
  if (source === 'airtime') return { name: 'cellphone', color: '#7C3AED', bg: '#F3E8FF', label: 'Airtime' };
  if (source === 'data') return { name: 'wifi', color: '#2563EB', bg: '#DBEAFE', label: 'Data' };
  if (source === 'funding') return { name: 'wallet', color: '#D97706', bg: '#FEF3C7', label: 'Funding' };
  if (source === 'withdrawal') return { name: 'cash-minus', color: '#0891B2', bg: '#CFFAFE', label: 'Withdrawal' };
  return { name: 'receipt-text', color: '#475569', bg: '#E2E8F0', label: String(source ?? 'Transaction') };
}

function statusLabel(status?: string) {
  const value = String(status ?? '').toLowerCase();
  if (value === 'success') return 'SUCCESS';
  if (value === 'processing') return 'PROCESSING';
  if (value === 'failed') return 'FAILED';
  return value ? value.toUpperCase() : 'UNKNOWN';
}

function statusColor(status?: string) {
  const value = String(status ?? '').toLowerCase();
  if (value === 'success') return '#16A34A';
  if (value === 'processing') return '#D97706';
  if (value === 'failed') return '#DC2626';
  return '#64748B';
}

const filters = ['All', 'purchase', 'airtime', 'data', 'funding', 'withdrawal'] as const;
type FilterValue = (typeof filters)[number];

export default function TransactionsScreen() {
  const customerQuery = useQuery({ queryKey: ['customer'], queryFn: getCustomer });
  const [query, setQuery] = useState('');
  const [filter, setFilter] = useState<FilterValue>('All');

  const transactionsQuery = useQuery({
    queryKey: ['transactions', customerQuery.data?.id],
    enabled: !!customerQuery.data?.id,
    queryFn: async () => {
      const response = await api.get('/transactions/index', { params: { customer_id: customerQuery.data?.id } });
      return response.data?.data?.transactions ?? [];
    },
  });

  useEffect(() => {
    if (!customerQuery.isLoading && !customerQuery.data) router.replace('/auth/login');
  }, [customerQuery.data, customerQuery.isLoading]);

  const filtered = useMemo(() => {
    const list = transactionsQuery.data ?? [];
    return list.filter((item: any) => {
      const matchesFilter = filter === 'All' || item.source === filter;
      const haystack = `${item.details ?? ''} ${item.reference ?? ''} ${item.source ?? ''}`.toLowerCase();
      const matchesQuery = query.trim() === '' || haystack.includes(query.trim().toLowerCase());
      return matchesFilter && matchesQuery;
    });
  }, [filter, query, transactionsQuery.data]);

  if (customerQuery.isLoading || transactionsQuery.isLoading) {
    return <View style={styles.loading}><ActivityIndicator size="large" color="#16A34A" /></View>;
  }

  return (
    <SafeAreaView style={styles.safeArea} edges={['top']}>
      <ScrollView
        style={styles.container}
        contentContainerStyle={styles.content}
        refreshControl={<RefreshControl refreshing={transactionsQuery.isFetching} onRefresh={() => transactionsQuery.refetch()} tintColor="#16A34A" />}
        showsVerticalScrollIndicator={false}
      >
        <ScreenHeader title="Transaction History" subtitle="Search and filter your wallet activity." onBack={() => router.back()} />

        <View style={styles.searchCard}>
          <TextInput
            value={query}
            onChangeText={setQuery}
            placeholder="Search reference, details or type"
            placeholderTextColor="#94A3B8"
            style={styles.searchInput}
          />
        </View>

        <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={styles.filterRow}>
          {filters.map((item) => (
            <Pressable
              key={item}
              onPress={() => setFilter(item)}
              style={[styles.filterChip, filter === item && styles.filterChipActive]}
            >
              <Text style={[styles.filterText, filter === item && styles.filterTextActive]}>{item === 'All' ? 'All' : item.toUpperCase()}</Text>
            </Pressable>
          ))}
        </ScrollView>

        {filtered.length ? (
          filtered.map((item: any, index: number) => {
            const icon = iconFor(item.source);
            return (
              <Pressable
                key={`${item.source}-${item.reference ?? index}-${item.created_at}`}
                style={styles.card}
                onPress={() =>
                  router.push({
                    pathname: '/(app)/transaction-details',
                    params: {
                      source: item.source ?? '',
                      reference: item.reference ?? '',
                      details: item.details ?? '',
                      amount: String(item.total_amount ?? 0),
                      status: item.status ?? '',
                      created_at: item.created_at ?? '',
                    },
                  })
                }
              >
                <View style={[styles.icon, { backgroundColor: icon.bg }]}>
                  <MaterialCommunityIcons name={icon.name as any} size={22} color={icon.color} />
                </View>
                <View style={styles.body}>
                  <View style={styles.row}>
                    <Text style={styles.title}>{icon.label}</Text>
                    <Text style={styles.time}>{String(item.created_at).replace('T', ' ').slice(0, 16)}</Text>
                  </View>
                  <Text style={styles.details} numberOfLines={1}>{item.details}</Text>
                  <View style={styles.rowBottom}>
                    <Text style={styles.amount}>{money(item.total_amount)}</Text>
                  <Text style={[styles.status, { color: statusColor(item.status) }]}>{statusLabel(item.status)}</Text>
                </View>
                  {item.reference ? <Text style={styles.reference}>Ref: {item.reference}</Text> : null}
                </View>
              </Pressable>
            );
          })
        ) : (
          <View style={styles.emptyCard}>
            <Text style={styles.emptyText}>No transactions found</Text>
          </View>
        )}
      </ScrollView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  safeArea: { flex: 1, backgroundColor: '#F4FAF7' },
  container: { flex: 1, backgroundColor: '#F4FAF7' },
  content: { padding: 20, paddingBottom: 40 },
  loading: { flex: 1, alignItems: 'center', justifyContent: 'center', backgroundColor: '#F4FAF7' },
  searchCard: { backgroundColor: '#FFFFFF', borderRadius: 18, padding: 12, borderWidth: 1, borderColor: '#D8E7DF' },
  searchInput: { color: '#062117', fontSize: 15, paddingVertical: 4 },
  filterRow: { gap: 10, paddingVertical: 14 },
  filterChip: { backgroundColor: '#FFFFFF', borderRadius: 999, paddingHorizontal: 14, paddingVertical: 10, borderWidth: 1, borderColor: '#D8E7DF' },
  filterChipActive: { backgroundColor: '#0F5132', borderColor: '#0F5132' },
  filterText: { color: '#0F5132', fontWeight: '800', fontSize: 12 },
  filterTextActive: { color: '#FFFFFF' },
  card: { flexDirection: 'row', gap: 12, backgroundColor: '#FFFFFF', borderRadius: 20, padding: 14, marginBottom: 12, borderWidth: 1, borderColor: '#E3EFE8' },
  icon: { width: 44, height: 44, borderRadius: 16, alignItems: 'center', justifyContent: 'center' },
  body: { flex: 1 },
  row: { flexDirection: 'row', justifyContent: 'space-between', gap: 12 },
  title: { color: '#062117', fontWeight: '900', flexShrink: 1 },
  time: { color: '#64748B', fontSize: 12 },
  details: { color: '#475569', marginTop: 6 },
  rowBottom: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', marginTop: 10 },
  amount: { color: '#0F5132', fontWeight: '900' },
  status: { color: '#64748B', fontSize: 12, fontWeight: '800' },
  reference: { marginTop: 6, color: '#0F5132', fontSize: 12, fontWeight: '700' },
  emptyCard: { backgroundColor: '#FFFFFF', borderRadius: 20, padding: 28, alignItems: 'center', borderWidth: 1, borderColor: '#D8E7DF' },
  emptyText: { color: '#64748B', fontWeight: '700' },
});