import React, { useEffect, useState } from 'react';
import { View, Text, StyleSheet, ActivityIndicator, TouchableOpacity, Alert, ScrollView, SafeAreaView } 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';

// Helper formatters
const formatDate = (dateStr) => {
  if (!dateStr) return '';
  const d = new Date(dateStr);
  if (isNaN(d)) return dateStr;
  return d.toLocaleDateString('tk-TM');
};

const formatDateTime = (dateStr) => {
  if (!dateStr) return '';
  const d = new Date(dateStr);
  if (isNaN(d)) return dateStr;
  return d.toLocaleString('tk-TM', {
    hour: '2-digit',
    minute: '2-digit',
    day: '2-digit',
    month: '2-digit',
    year: 'numeric',
  });
};

// Key/value row
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 LoanOrderDetailsScreen = () => {
  const navigation = useNavigation();
  const route = useRoute();
  const { orderId } = route.params || {};

  const [loading, setLoading] = useState(true);
  const [order, setOrder] = useState(null);

  const fetchDetails = async () => {
    setLoading(true);
    const res = await apiService.getLoanOrder(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('Tassykla', 'Bu sargydy pozmak isleýärsiňizmi?', [
      { text: 'Goýbolsun', style: 'cancel' },
      { text: 'Poz', style: 'destructive', onPress: deleteOrder },
    ]);
  };

  const deleteOrder = async () => {
    const res = await apiService.deleteLoanOrder(orderId);
    if (res.success) {
      Alert.alert('Pozuldy', res.message || 'Sargyt pozuldy', [
        { text: 'Bolýar', onPress: () => navigation.goBack() },
      ]);
    } else {
      Alert.alert('Ýalňyşlyk', res.error || 'Pozup bolmady');
    }
  };

  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>
    );
  }

  // Pre-computed helpers
  const fullName = `${order.customer_name ?? ''} ${order.customer_surname ?? ''} ${order.customer_patronic_name ?? ''}`.trim();
  const guarantorFullName = `${order.guarantor_name ?? ''} ${order.guarantor_surname ?? ''} ${order.guarantor_patronic_name ?? ''}`.trim();
  const guarantor2FullName = `${order.guarantor_2_name ?? ''} ${order.guarantor_2_surname ?? ''} ${order.guarantor_2_patronic_name ?? ''}`.trim();

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

      {/* Ensure enough bottom padding so content is not hidden behind the tab bar */}
      <ScrollView contentContainerStyle={{ paddingBottom: 120, paddingRight: 16, paddingLeft: 16 }}>
        <Text style={styles.title}>Karz sargyt: {order.unique_id}</Text>

        {/* Basic order info */}
        <View style={styles.detailCard}>
          {order.unique_id && <DetailRow label="ID" value={order.unique_id} />}
          {order.created_at && <DetailRow label="Döredilen wagty" value={formatDateTime(order.created_at)} />}
          {order.updated_at && <DetailRow label="Täzelenen wagty" value={formatDateTime(order.updated_at)} />}
          {order.status && <DetailRow label="Status" value={order.status} />}
          <DetailRow label="Bellik" value={order.notes ?? '-'} showBorder={false} />
        </View>

        {/* Loan details */}
        <Text style={styles.sectionTitle}>Karz barada maglumatlar</Text>
        <View style={styles.detailCard}>
          {order.loan_amount && <DetailRow label="Karzyň möçberi" value={order.loan_amount} />}
          {order.loan_type && <DetailRow label="Karzyň görnüşi" value={order.loan_type} showBorder={order.satisfiable ? true : false} />}
          {order.satisfiable && <DetailRow label="Ýerine ýetirme ýagdaýy" value={order.satisfiable} showBorder={false} />}
        </View>

        {/* Location */}
        {(order.region || order.branch) && (
          <>
            <Text style={styles.sectionTitle}>Lokasiýa</Text>
            <View style={styles.detailCard}>
              {order.region && <DetailRow label="Welaýat" value={order.region} />}
              {order.branch && <DetailRow label="Şahamça" value={order.branch} showBorder={false} />}
            </View>
          </>
        )}

        {/* Personal information */}
        <Text style={styles.sectionTitle}>Şahsy maglumatlar</Text>
        <View style={styles.detailCard}>
          <DetailRow label="Doly ady" value={fullName} />
          {order.born_at && <DetailRow label="Doglan güni" value={formatDate(order.born_at)} />}
          {order.born_place && <DetailRow label="Doglan ýeri" value={order.born_place} />}
          {order.marriage_status && <DetailRow label="Maşgala ýagdaýy" value={order.marriage_status} />}
          {order.education && <DetailRow label="Bilimi" value={order.education} />}
          {order.phone && <DetailRow label="Telefon" value={`+993 ${order.phone}`} />}
          {order.phone_additional && <DetailRow label="Goşmaça telefon" value={order.phone_additional} />}
          {order.phone_home && <DetailRow label="Öý telefon" value={order.phone_home} />}
          {order.email && <DetailRow label="E-poçta" value={order.email} />}
          {order.passport_serie && order.passport_id && <DetailRow label="Pasport" value={`${order.passport_serie} ${order.passport_id}`} />}
          {order.passport_given_at && <DetailRow label="Pasport berlen senesi" value={formatDate(order.passport_given_at)} />}
          {order.passport_given_by && <DetailRow label="Pasport beren gurama" value={order.passport_given_by} />}
          {order.passport_address && <DetailRow label="Ýaşaýan salgysy" value={order.passport_address} showBorder={false} />}
        </View>

        {/* Work info */}
        {(order.work_company || order.work_position) && (
          <>
            <Text style={styles.sectionTitle}>Iş barada maglumatlar</Text>
            <View style={styles.detailCard}>
              {order.work_company && <DetailRow label="Işleýän ýeri" value={order.work_company} />}
              {order.work_position && <DetailRow label="Wezipesi" value={order.work_position} />}
              {order.work_salary && <DetailRow label="Zähmet haky" value={order.work_salary} />}
              {order.work_started_at && <DetailRow label="Işe başlan senesi" value={formatDate(order.work_started_at)} />}
              {order.work_company_accountant_number && <DetailRow label="Işgärler bölüminiň iş belgisi" value={order.work_company_accountant_number} />}
              {order.work_region && <DetailRow label="Iş ýeriniň etraby" value={order.work_region} />}
              {order.work_province && <DetailRow label="Iş ýeriniň welaýaty" value={order.work_province} showBorder={false} />}
            </View>
          </>
        )}

        {/* Applicant card info */}
        {order.card_number && (
          <>
            <Text style={styles.sectionTitle}>Kart maglumatlary (Arza beriji)</Text>
            <View style={styles.detailCard}>
              {order.card_name && <DetailRow label="Kartdaky ady" value={order.card_name} />}
              <DetailRow label="Kart belgisi" value={order.card_number} />
              {order.card_month && order.card_year && <DetailRow label="Kart möhleti" value={`${order.card_month}/${order.card_year}`} showBorder={false} />}
            </View>
          </>
        )}

        {/* Guarantor 1 */}
        {guarantorFullName.trim() && (
          <>
            <Text style={styles.sectionTitle}>Zamun (1)</Text>
            <View style={styles.detailCard}>
              <DetailRow label="Doly ady" value={guarantorFullName} />
              {order.guarantor_card_name && <DetailRow label="Kartdaky ady" value={order.guarantor_card_name} />}
              {order.guarantor_card_number && <DetailRow label="Kart belgisi" value={order.guarantor_card_number} />}
              {order.guarantor_card_month && order.guarantor_card_year && <DetailRow label="Kart möhleti" value={`${order.guarantor_card_month}/${order.guarantor_card_year}`} showBorder={false} />}
            </View>
          </>
        )}

        {/* Guarantor 2 */}
        {guarantor2FullName.trim() && (
          <>
            <Text style={styles.sectionTitle}>Zamun (2)</Text>
            <View style={styles.detailCard}>
              <DetailRow label="Doly ady" value={guarantor2FullName} />
              {order.guarantor_2_card_name && <DetailRow label="Kartdaky ady" value={order.guarantor_2_card_name} />}
              {order.guarantor_2_card_number && <DetailRow label="Kart belgisi" value={order.guarantor_2_card_number} />}
              {order.guarantor_2_card_month && order.guarantor_2_card_year && <DetailRow label="Kart möhleti" value={`${order.guarantor_2_card_month}/${order.guarantor_2_card_year}`} showBorder={false} />}
            </View>
          </>
        )}

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

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: COLORS.backgroundSecondary,
    paddingHorizontal: 24,
    paddingTop: 40,
  },
  centered: { flex: 1, alignItems: 'center', justifyContent: 'center' },
  backBtn: { alignSelf: 'flex-end', marginBottom: 16, marginRight: 24 },
  title: { fontSize: 24, fontWeight: 'bold', color: COLORS.textPrimary, marginBottom: 24 },
  sectionTitle: { fontSize: 18, fontWeight: '700', color: COLORS.textPrimary, marginBottom: 12 },
  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, maxWidth: '60%', textAlign: 'right' },
  deleteBtn: { backgroundColor: COLORS.error, paddingVertical: 14, borderRadius: 8, alignItems: 'center' },
  deleteText: { color: COLORS.white, fontSize: 16, fontWeight: '600' },
});

export default LoanOrderDetailsScreen;