import { MaterialCommunityIcons } from '@expo/vector-icons';
import { router, useLocalSearchParams } from 'expo-router';
import { StyleSheet, Text, View } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { ScreenHeader } from '../../src/components/ScreenHeader';

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

function statusMeta(status?: string) {
  const value = String(status ?? '').toLowerCase();
  if (value === 'success') return { label: 'SUCCESS', color: '#16A34A', bg: '#ECFDF3', icon: 'check-circle' as const };
  if (value === 'processing') return { label: 'PROCESSING', color: '#D97706', bg: '#FEF3C7', icon: 'progress-clock' as const };
  if (value === 'failed') return { label: 'FAILED', color: '#DC2626', bg: '#FEF2F2', icon: 'close-circle' as const };
  return { label: value ? value.toUpperCase() : 'UNKNOWN', color: '#64748B', bg: '#E2E8F0', icon: 'alert-circle-outline' as const };
}

export default function TransactionDetailsScreen() {
  const params = useLocalSearchParams<{
    source?: string;
    reference?: string;
    details?: string;
    amount?: string;
    status?: string;
    created_at?: string;
  }>();
  const status = statusMeta(params.status);

  return (
    <SafeAreaView style={styles.safeArea} edges={['top']}>
      <View style={styles.container}>
        <ScreenHeader title="Transaction Details" subtitle="Review the selected wallet activity." onBack={() => router.back()} />

        <View style={styles.card}>
          <View style={[styles.iconWrap, { backgroundColor: status.bg }]}>
            <MaterialCommunityIcons name={status.icon} size={26} color={status.color} />
          </View>
          <Text style={styles.label}>Type</Text>
          <Text style={styles.value}>{params.source ?? 'Transaction'}</Text>
          <Text style={styles.label}>Amount</Text>
          <Text style={styles.value}>{money(Number(params.amount ?? 0))}</Text>
          <Text style={styles.label}>Status</Text>
          <Text style={[styles.value, { color: status.color }]}>{status.label}</Text>
          <Text style={styles.label}>Reference</Text>
          <Text style={styles.value}>{params.reference ?? '-'}</Text>
          <Text style={styles.label}>Details</Text>
          <Text style={styles.value}>{params.details ?? '-'}</Text>
          <Text style={styles.label}>Date</Text>
          <Text style={styles.value}>{params.created_at ? String(params.created_at).replace('T', ' ').slice(0, 19) : '-'}</Text>
        </View>
      </View>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  safeArea: { flex: 1, backgroundColor: '#F4FAF7' },
  container: { flex: 1, backgroundColor: '#F4FAF7', padding: 20 },
  card: { backgroundColor: '#FFFFFF', borderRadius: 24, padding: 20, borderWidth: 1, borderColor: '#D8E7DF' },
  iconWrap: { width: 56, height: 56, borderRadius: 18, alignItems: 'center', justifyContent: 'center', marginBottom: 16 },
  label: { color: '#64748B', fontSize: 12, fontWeight: '800', marginTop: 12 },
  value: { color: '#062117', fontSize: 16, fontWeight: '800', marginTop: 4, lineHeight: 22 },
});