tbbank-react-native-mobile/src/screens/Card/CardTransactionOrderDetailsScreen.js

import React, { useEffect, useState } from 'react';
import { View, Text, StyleSheet, ActivityIndicator, TouchableOpacity, Alert, ScrollView, SafeAreaView, Modal } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { useNavigation, useRoute } from '@react-navigation/native';
import apiService from '../../services/apiService';
import { COLORS } from '../../constants/colors';
import { StatusBar } from 'expo-status-bar';
import DateInput from '../../components/DateInput';
import { Linking } from 'react-native';

const DetailRow = ({ label, value, showBorder = true }) => (
  <View style={[styles.detailRow, showBorder && styles.detailRowBorder]}> 
    <Text style={styles.detailKey}>{label}</Text>
    <Text style={styles.detailValue}>{String(value)}</Text>
  </View>
);

const CardTransactionOrderDetailsScreen = () => {
  const navigation = useNavigation();
  const route = useRoute();
  const { orderId } = route.params || {};

  const [loading, setLoading] = useState(true);
  const [order, setOrder] = useState(null);
  const [modalVisible, setModalVisible] = useState(false);
  const [startDate, setStartDate] = useState('');
  const [endDate, setEndDate] = useState('');
  const [downloading, setDownloading] = useState(false);

  const fetchDetails = async () => {
    setLoading(true);
    const res = await apiService.getCardTransactionOrder(orderId);
    if (res.success) {
      setOrder(res.data);
    } else {
      Alert.alert('Error', res.error || 'Could not fetch details');
    }
    setLoading(false);
  };

  useEffect(() => {
    fetchDetails();
  }, []);

  const handleDelete = () => {
    Alert.alert('Confirm', 'Are you sure you want to delete this order?', [
      { text: 'Cancel', style: 'cancel' },
      { text: 'Delete', style: 'destructive', onPress: deleteOrder },
    ]);
  };

  const deleteOrder = async () => {
    const res = await apiService.deleteCardTransactionOrder(orderId);
    if (res.success) {
      Alert.alert('Deleted', res.message || 'Order deleted', [
        { text: 'OK', onPress: () => navigation.goBack() },
      ]);
    } else {
      Alert.alert('Error', res.error || 'Could not delete');
    }
  };

  const openDownloadModal = () => {
    setStartDate('');
    setEndDate('');
    setModalVisible(true);
  };

  const handleDownload = async () => {
    if (!startDate || !endDate) {
      Alert.alert('Error', 'Select both dates');
      return;
    }
    setDownloading(true);
    const res = await apiService.downloadCardTransactions(orderId, startDate, endDate);
    setDownloading(false);
    if (res.success && res.data?.url) {
      Linking.openURL(res.data.url);
      setModalVisible(false);
    } else {
      Alert.alert('Ýalňyşlyk', res.data.message || 'Näsazlyk ýüze çykdy');
    }
  };

  if (loading) {
    return (
      <View style={styles.centered}>
        <ActivityIndicator size="large" color={COLORS.primary} />
      </View>
    );
  }

  if (!order) {
    return (
      <View style={styles.centered}>
        <Text>No data</Text>
      </View>
    );
  }

  return (
    <SafeAreaView style={styles.container}>
      <StatusBar style="dark" />
      <TouchableOpacity style={styles.backBtn} onPress={() => navigation.goBack()}>
        <Ionicons name="close" size={28} color={COLORS.textPrimary} />
      </TouchableOpacity>

      <ScrollView contentContainerStyle={{ paddingBottom: 40, paddingHorizontal: 24 }}>
        <Text style={styles.title}>Kart hereketleri</Text>

        <View style={styles.detailCard}>
          <DetailRow label="ID" value={order.id} />
          {order.card_number && <DetailRow label="Kart" value={order.card_number} />}
          {order.card_month && order.card_year && <DetailRow label="Kartyň möhleti" value={`${order.card_month}/${order.card_year}`} />}
          {order.passport_serie && order.passport_id && <DetailRow label="Pasport" value={`${order.passport_serie} ${order.passport_id}`} />}
        </View>

        <TouchableOpacity style={styles.actionBtn} onPress={openDownloadModal}>
          <Text style={styles.actionText}>Ýükle (PDF)</Text>
        </TouchableOpacity>

        <TouchableOpacity style={styles.deleteBtn} onPress={handleDelete}>
          <Text style={styles.deleteText}>Poz</Text>
        </TouchableOpacity>
      </ScrollView>

      {/* Download modal */}
      <Modal visible={modalVisible} transparent animationType="fade" onRequestClose={() => setModalVisible(false)}>
        <View style={styles.modalBackdrop}>
          <View style={styles.modalCard}>
            <Text style={styles.modalTitle}>Sene aralygy</Text>
            <DateInput label="*Başla" value={startDate} onChange={setStartDate} />
            <DateInput label="*Tamamla" value={endDate} onChange={setEndDate} />

            <TouchableOpacity style={styles.submitBtn} onPress={handleDownload} disabled={downloading}>
              {downloading ? (
                <ActivityIndicator color={COLORS.white} />
              ) : (
                <Text style={styles.submitText}>Ýükle</Text>
              )}
            </TouchableOpacity>

            <TouchableOpacity onPress={() => setModalVisible(false)} style={{ marginTop: 16, alignItems: 'center' }}>
              <Text style={{ color: COLORS.error }}>Ýap</Text>
            </TouchableOpacity>
          </View>
        </View>
      </Modal>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: COLORS.backgroundSecondary,
    paddingTop: 40,
  },
  centered: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  backBtn: {
    alignSelf: 'flex-end',
    marginRight: 24,
    marginBottom: 16,
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    color: COLORS.textPrimary,
    marginBottom: 24,
  },
  detailCard: {
    backgroundColor: COLORS.white,
    borderRadius: 12,
    padding: 20,
    marginBottom: 32,
  },
  detailRow: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    paddingVertical: 12,
  },
  detailRowBorder: {
    borderBottomWidth: 1,
    borderBottomColor: COLORS.border,
  },
  detailKey: {
    fontWeight: '600',
    color: COLORS.textSecondary,
  },
  detailValue: {
    color: COLORS.textPrimary,
  },
  actionBtn: {
    backgroundColor: COLORS.primary,
    paddingVertical: 16,
    borderRadius: 8,
    alignItems: 'center',
    marginBottom: 16,
  },
  actionText: {
    color: COLORS.white,
    fontSize: 16,
    fontWeight: '600',
  },
  deleteBtn: {
    backgroundColor: COLORS.error,
    paddingVertical: 16,
    borderRadius: 8,
    alignItems: 'center',
  },
  deleteText: {
    color: COLORS.white,
    fontSize: 16,
    fontWeight: '600',
  },
  modalBackdrop: {
    flex: 1,
    backgroundColor: 'rgba(0,0,0,0.25)',
    justifyContent: 'center',
    alignItems: 'center',
    paddingHorizontal: 24,
  },
  modalCard: {
    backgroundColor: COLORS.white,
    borderRadius: 12,
    width: '100%',
    padding: 24,
  },
  modalTitle: {
    fontSize: 18,
    fontWeight: 'bold',
    color: COLORS.textPrimary,
    marginBottom: 16,
  },
  submitBtn: {
    marginTop: 8,
    backgroundColor: COLORS.primary,
    paddingVertical: 14,
    borderRadius: 8,
    alignItems: 'center',
  },
  submitText: {
    color: COLORS.white,
    fontSize: 16,
    fontWeight: '600',
  },
});

export default CardTransactionOrderDetailsScreen;