import React, { useState, useEffect, useMemo } from 'react';
import {
  View,
  Text,
  StyleSheet,
  ScrollView,
  TouchableOpacity,
  RefreshControl,
  FlatList,
} from 'react-native';
import { useSelector, useDispatch } from 'react-redux';
import type { AppDispatch } from '@/store/store';
import Icon from 'react-native-vector-icons/MaterialIcons';
import { Container, LoadingSpinner, ErrorState } from '@/shared/components/ui';
import { useTheme } from '@/shared/styles/useTheme';
import { fetchZohoBooksData } from '../store/zohoBooksSlice';
import {
  selectZohoBooksLoading,
  selectZohoBooksError,
  selectZohoBooksContacts,
  selectZohoBooksInvoices,
  selectZohoBooksExpenses,
  selectZohoBooksSalesOrders,
  selectZohoBooksPurchaseOrders,
  selectZohoBooksBills,
  selectCustomers,
  selectVendors,
} from '../store/selectors';
import type { RootState } from '@/store/store';

const ZohoBooksDataScreen: React.FC = () => {
  const { colors, fonts, spacing, shadows } = useTheme();
  const dispatch = useDispatch<AppDispatch>();
  const [selectedTab, setSelectedTab] = useState<'contacts' | 'customers' | 'vendors' | 'invoices' | 'expenses' | 'salesOrders' | 'purchaseOrders' | 'bills'>('contacts');
  const [refreshing, setRefreshing] = useState(false);

  // Redux selectors
  const contacts = useSelector(selectZohoBooksContacts);
  const invoices = useSelector(selectZohoBooksInvoices);
  const expenses = useSelector(selectZohoBooksExpenses);
  const salesOrders = useSelector(selectZohoBooksSalesOrders);
  const purchaseOrders = useSelector(selectZohoBooksPurchaseOrders);
  const bills = useSelector(selectZohoBooksBills);
  const customers = useSelector(selectCustomers);
  const vendors = useSelector(selectVendors);
  const loading = useSelector(selectZohoBooksLoading);
  const error = useSelector(selectZohoBooksError);

  // Fetch data using Redux
  const fetchData = async (showRefresh = false) => {
    try {
      if (showRefresh) {
        setRefreshing(true);
      }

      await dispatch(fetchZohoBooksData()).unwrap();
    } catch (err) {
      console.error('Error fetching Zoho Books data:', err);
    } finally {
      setRefreshing(false);
    }
  };

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

  const handleRefresh = () => {
    fetchData(true);
  };

  const handleRetry = () => {
    fetchData();
  };

  const handleItemPress = (item: any, type: string) => {
    console.log(`Viewing ${type}:`, item);
  };

  // Loading state
  if (loading && !contacts.length && !invoices.length) {
    return <LoadingSpinner />;
  }

  // Error state
  if (error) {
    return <ErrorState onRetry={handleRetry} />;
  }

  // Tab configuration
  const tabs = [
    { key: 'contacts', label: 'All Contacts', icon: 'contacts', count: contacts.length },
    { key: 'customers', label: 'Customers', icon: 'person', count: customers.length },
    { key: 'vendors', label: 'Vendors', icon: 'business', count: vendors.length },
    { key: 'invoices', label: 'Invoices', icon: 'receipt', count: invoices.length },
    { key: 'expenses', label: 'Expenses', icon: 'money-off', count: expenses.length },
    { key: 'salesOrders', label: 'Sales Orders', icon: 'shopping-cart', count: salesOrders.length },
    { key: 'purchaseOrders', label: 'Purchase Orders', icon: 'add-shopping-cart', count: purchaseOrders.length },
    { key: 'bills', label: 'Bills', icon: 'description', count: bills.length },
  ] as const;

  const renderContactCard = (item: any) => (
    <View style={[styles.card, { backgroundColor: colors.surface, borderColor: colors.border }]}>
      <View style={styles.cardHeader}>
        <View style={styles.cardTitleContainer}>
          <Icon name="person" size={20} color={colors.primary} />
          <Text style={[styles.cardTitle, { color: colors.text, fontFamily: fonts.bold }]}>
            {item.contact_name}
          </Text>
        </View>
        <View style={[styles.statusBadge, { backgroundColor: item.status === 'active' ? '#E9FAF2' : '#FEF2F2' }]}>
          <Text style={[styles.statusText, { color: item.status === 'active' ? '#10B981' : '#EF4444', fontFamily: fonts.medium }]}>
            {item.status}
          </Text>
        </View>
      </View>
      
      <View style={styles.cardContent}>
        <View style={styles.infoRow}>
          <Text style={[styles.infoLabel, { color: colors.textLight, fontFamily: fonts.regular }]}>Type:</Text>
          <Text style={[styles.infoValue, { color: colors.text, fontFamily: fonts.medium }]}>
            {item.contact_type_formatted}
          </Text>
        </View>
        
        {item.email && (
          <View style={styles.infoRow}>
            <Text style={[styles.infoLabel, { color: colors.textLight, fontFamily: fonts.regular }]}>Email:</Text>
            <Text style={[styles.infoValue, { color: colors.text, fontFamily: fonts.medium }]}>{item.email}</Text>
          </View>
        )}
        
        {item.phone && (
          <View style={styles.infoRow}>
            <Text style={[styles.infoLabel, { color: colors.textLight, fontFamily: fonts.regular }]}>Phone:</Text>
            <Text style={[styles.infoValue, { color: colors.text, fontFamily: fonts.medium }]}>{item.phone}</Text>
          </View>
        )}
        
        <View style={styles.infoRow}>
          <Text style={[styles.infoLabel, { color: colors.textLight, fontFamily: fonts.regular }]}>Currency:</Text>
          <Text style={[styles.infoValue, { color: colors.text, fontFamily: fonts.medium }]}>{item.currency_code}</Text>
        </View>
        
        <View style={styles.amountRow}>
          <View style={styles.amountItem}>
            <Text style={[styles.amountLabel, { color: colors.textLight, fontFamily: fonts.regular }]}>Outstanding Receivable:</Text>
            <Text style={[styles.amountValue, { color: '#10B981', fontFamily: fonts.bold }]}>
              ₹{item.outstanding_receivable_amount.toLocaleString()}
            </Text>
          </View>
          <View style={styles.amountItem}>
            <Text style={[styles.amountLabel, { color: colors.textLight, fontFamily: fonts.regular }]}>Outstanding Payable:</Text>
            <Text style={[styles.amountValue, { color: '#EF4444', fontFamily: fonts.bold }]}>
              ₹{item.outstanding_payable_amount.toLocaleString()}
            </Text>
          </View>
        </View>
      </View>
    </View>
  );

  const renderInvoiceCard = (item: any) => (
    <View style={[styles.card, { backgroundColor: colors.surface, borderColor: colors.border }]}>
      <View style={styles.cardHeader}>
        <View style={styles.cardTitleContainer}>
          <Icon name="receipt" size={20} color={colors.primary} />
          <Text style={[styles.cardTitle, { color: colors.text, fontFamily: fonts.bold }]}>
            {item.invoice_number}
          </Text>
        </View>
        <View style={[styles.statusBadge, { backgroundColor: getStatusColor(item.status) }]}>
          <Text style={[styles.statusText, { color: colors.text, fontFamily: fonts.medium }]}>
            {item.status}
          </Text>
        </View>
      </View>
      
      <View style={styles.cardContent}>
        <View style={styles.infoRow}>
          <Text style={[styles.infoLabel, { color: colors.textLight, fontFamily: fonts.regular }]}>Customer:</Text>
          <Text style={[styles.infoValue, { color: colors.text, fontFamily: fonts.medium }]}>
            {item.customer_name}
          </Text>
        </View>
        
        <View style={styles.infoRow}>
          <Text style={[styles.infoLabel, { color: colors.textLight, fontFamily: fonts.regular }]}>Date:</Text>
          <Text style={[styles.infoValue, { color: colors.text, fontFamily: fonts.medium }]}>{item.date}</Text>
        </View>
        
        <View style={styles.infoRow}>
          <Text style={[styles.infoLabel, { color: colors.textLight, fontFamily: fonts.regular }]}>Due Date:</Text>
          <Text style={[styles.infoValue, { color: colors.text, fontFamily: fonts.medium }]}>{item.due_date}</Text>
        </View>
        
        <View style={styles.amountRow}>
          <View style={styles.amountItem}>
            <Text style={[styles.amountLabel, { color: colors.textLight, fontFamily: fonts.regular }]}>Total:</Text>
            <Text style={[styles.amountValue, { color: colors.primary, fontFamily: fonts.bold }]}>
              {item.currency_symbol}{item.total.toLocaleString()}
            </Text>
          </View>
          <View style={styles.amountItem}>
            <Text style={[styles.amountLabel, { color: colors.textLight, fontFamily: fonts.regular }]}>Balance:</Text>
            <Text style={[styles.amountValue, { color: item.balance > 0 ? '#EF4444' : '#10B981', fontFamily: fonts.bold }]}>
              {item.currency_symbol}{item.balance.toLocaleString()}
            </Text>
          </View>
        </View>
      </View>
    </View>
  );

  const renderExpenseCard = (item: any) => (
    <View style={[styles.card, { backgroundColor: colors.surface, borderColor: colors.border }]}>
      <View style={styles.cardHeader}>
        <View style={styles.cardTitleContainer}>
          <Icon name="money-off" size={20} color={colors.primary} />
          <Text style={[styles.cardTitle, { color: colors.text, fontFamily: fonts.bold }]}>
            {item.reference_number || 'Expense'}
          </Text>
        </View>
        <View style={[styles.statusBadge, { backgroundColor: item.is_billable ? '#E9FAF2' : '#FEF2F2' }]}>
          <Text style={[styles.statusText, { color: item.is_billable ? '#10B981' : '#EF4444', fontFamily: fonts.medium }]}>
            {item.status}
          </Text>
        </View>
      </View>
      
      <View style={styles.cardContent}>
        <View style={styles.infoRow}>
          <Text style={[styles.infoLabel, { color: colors.textLight, fontFamily: fonts.regular }]}>Account:</Text>
          <Text style={[styles.infoValue, { color: colors.text, fontFamily: fonts.medium }]}>
            {item.account_name}
          </Text>
        </View>
        
        <View style={styles.infoRow}>
          <Text style={[styles.infoLabel, { color: colors.textLight, fontFamily: fonts.regular }]}>Date:</Text>
          <Text style={[styles.infoValue, { color: colors.text, fontFamily: fonts.medium }]}>{item.date}</Text>
        </View>
        
        {item.vendor_name && (
          <View style={styles.infoRow}>
            <Text style={[styles.infoLabel, { color: colors.textLight, fontFamily: fonts.regular }]}>Vendor:</Text>
            <Text style={[styles.infoValue, { color: colors.text, fontFamily: fonts.medium }]}>{item.vendor_name}</Text>
          </View>
        )}
        
        <View style={styles.amountRow}>
          <View style={styles.amountItem}>
            <Text style={[styles.amountLabel, { color: colors.textLight, fontFamily: fonts.regular }]}>Total:</Text>
            <Text style={[styles.amountValue, { color: '#EF4444', fontFamily: fonts.bold }]}>
              {item.currency_code} {item.total.toLocaleString()}
            </Text>
          </View>
          <View style={styles.amountItem}>
            <Text style={[styles.amountLabel, { color: colors.textLight, fontFamily: fonts.regular }]}>Billable:</Text>
            <Text style={[styles.amountValue, { color: item.is_billable ? '#10B981' : '#6B7280', fontFamily: fonts.bold }]}>
              {item.is_billable ? 'Yes' : 'No'}
            </Text>
          </View>
        </View>
      </View>
    </View>
  );

  const renderSalesOrderCard = (item: any) => (
    <View style={[styles.card, { backgroundColor: colors.surface, borderColor: colors.border }]}>
      <View style={styles.cardHeader}>
        <View style={styles.cardTitleContainer}>
          <Icon name="shopping-cart" size={20} color={colors.primary} />
          <Text style={[styles.cardTitle, { color: colors.text, fontFamily: fonts.bold }]}>
            {item.salesorder_number}
          </Text>
        </View>
        <View style={[styles.statusBadge, { backgroundColor: getStatusColor(item.status) }]}>
          <Text style={[styles.statusText, { color: colors.text, fontFamily: fonts.medium }]}>
            {item.status}
          </Text>
        </View>
      </View>
      
      <View style={styles.cardContent}>
        <View style={styles.infoRow}>
          <Text style={[styles.infoLabel, { color: colors.textLight, fontFamily: fonts.regular }]}>Customer:</Text>
          <Text style={[styles.infoValue, { color: colors.text, fontFamily: fonts.medium }]}>
            {item.customer_name}
          </Text>
        </View>
        
        <View style={styles.infoRow}>
          <Text style={[styles.infoLabel, { color: colors.textLight, fontFamily: fonts.regular }]}>Date:</Text>
          <Text style={[styles.infoValue, { color: colors.text, fontFamily: fonts.medium }]}>{item.date}</Text>
        </View>
        
        <View style={styles.infoRow}>
          <Text style={[styles.infoLabel, { color: colors.textLight, fontFamily: fonts.regular }]}>Shipment Date:</Text>
          <Text style={[styles.infoValue, { color: colors.text, fontFamily: fonts.medium }]}>{item.shipment_date}</Text>
        </View>
        
        <View style={styles.amountRow}>
          <View style={styles.amountItem}>
            <Text style={[styles.amountLabel, { color: colors.textLight, fontFamily: fonts.regular }]}>Total:</Text>
            <Text style={[styles.amountValue, { color: colors.primary, fontFamily: fonts.bold }]}>
              {item.currency_code} {item.total.toLocaleString()}
            </Text>
          </View>
          <View style={styles.amountItem}>
            <Text style={[styles.amountLabel, { color: colors.textLight, fontFamily: fonts.regular }]}>Invoiced:</Text>
            <Text style={[styles.amountValue, { color: '#10B981', fontFamily: fonts.bold }]}>
              {item.currency_code} {item.total_invoiced_amount.toLocaleString()}
            </Text>
          </View>
        </View>
      </View>
    </View>
  );

  const renderPurchaseOrderCard = (item: any) => (
    <View style={[styles.card, { backgroundColor: colors.surface, borderColor: colors.border }]}>
      <View style={styles.cardHeader}>
        <View style={styles.cardTitleContainer}>
          <Icon name="add-shopping-cart" size={20} color={colors.primary} />
          <Text style={[styles.cardTitle, { color: colors.text, fontFamily: fonts.bold }]}>
            {item.purchaseorder_number}
          </Text>
        </View>
        <View style={[styles.statusBadge, { backgroundColor: getStatusColor(item.status) }]}>
          <Text style={[styles.statusText, { color: colors.text, fontFamily: fonts.medium }]}>
            {item.status}
          </Text>
        </View>
      </View>
      
      <View style={styles.cardContent}>
        <View style={styles.infoRow}>
          <Text style={[styles.infoLabel, { color: colors.textLight, fontFamily: fonts.regular }]}>Vendor:</Text>
          <Text style={[styles.infoValue, { color: colors.text, fontFamily: fonts.medium }]}>
            {item.vendor_name}
          </Text>
        </View>
        
        <View style={styles.infoRow}>
          <Text style={[styles.infoLabel, { color: colors.textLight, fontFamily: fonts.regular }]}>Date:</Text>
          <Text style={[styles.infoValue, { color: colors.text, fontFamily: fonts.medium }]}>{item.date}</Text>
        </View>
        
        <View style={styles.infoRow}>
          <Text style={[styles.infoLabel, { color: colors.textLight, fontFamily: fonts.regular }]}>Delivery Date:</Text>
          <Text style={[styles.infoValue, { color: colors.text, fontFamily: fonts.medium }]}>{item.delivery_date}</Text>
        </View>
        
        <View style={styles.amountRow}>
          <View style={styles.amountItem}>
            <Text style={[styles.amountLabel, { color: colors.textLight, fontFamily: fonts.regular }]}>Total:</Text>
            <Text style={[styles.amountValue, { color: colors.primary, fontFamily: fonts.bold }]}>
              {item.currency_code} {item.total.toLocaleString()}
            </Text>
          </View>
          <View style={styles.amountItem}>
            <Text style={[styles.amountLabel, { color: colors.textLight, fontFamily: fonts.regular }]}>Quantity:</Text>
            <Text style={[styles.amountValue, { color: '#10B981', fontFamily: fonts.bold }]}>
              {item.quantity_yet_to_receive}
            </Text>
          </View>
        </View>
      </View>
    </View>
  );

  const renderBillCard = (item: any) => (
    <View style={[styles.card, { backgroundColor: colors.surface, borderColor: colors.border }]}>
      <View style={styles.cardHeader}>
        <View style={styles.cardTitleContainer}>
          <Icon name="description" size={20} color={colors.primary} />
          <Text style={[styles.cardTitle, { color: colors.text, fontFamily: fonts.bold }]}>
            {item.bill_number}
          </Text>
        </View>
        <View style={[styles.statusBadge, { backgroundColor: getStatusColor(item.status) }]}>
          <Text style={[styles.statusText, { color: colors.text, fontFamily: fonts.medium }]}>
            {item.status}
          </Text>
        </View>
      </View>
      
      <View style={styles.cardContent}>
        <View style={styles.infoRow}>
          <Text style={[styles.infoLabel, { color: colors.textLight, fontFamily: fonts.regular }]}>Vendor:</Text>
          <Text style={[styles.infoValue, { color: colors.text, fontFamily: fonts.medium }]}>
            {item.vendor_name}
          </Text>
        </View>
        
        <View style={styles.infoRow}>
          <Text style={[styles.infoLabel, { color: colors.textLight, fontFamily: fonts.regular }]}>Date:</Text>
          <Text style={[styles.infoValue, { color: colors.text, fontFamily: fonts.medium }]}>{item.date}</Text>
        </View>
        
        <View style={styles.infoRow}>
          <Text style={[styles.infoLabel, { color: colors.textLight, fontFamily: fonts.regular }]}>Due Date:</Text>
          <Text style={[styles.infoValue, { color: colors.text, fontFamily: fonts.medium }]}>{item.due_date}</Text>
        </View>
        
        <View style={styles.amountRow}>
          <View style={styles.amountItem}>
            <Text style={[styles.amountLabel, { color: colors.textLight, fontFamily: fonts.regular }]}>Total:</Text>
            <Text style={[styles.amountValue, { color: colors.primary, fontFamily: fonts.bold }]}>
              {item.currency_code} {item.total.toLocaleString()}
            </Text>
          </View>
          <View style={styles.amountItem}>
            <Text style={[styles.amountLabel, { color: colors.textLight, fontFamily: fonts.regular }]}>Balance:</Text>
            <Text style={[styles.amountValue, { color: item.balance > 0 ? '#EF4444' : '#10B981', fontFamily: fonts.bold }]}>
              {item.currency_code} {item.balance.toLocaleString()}
            </Text>
          </View>
        </View>
      </View>
    </View>
  );

  const renderTabContent = () => {
    const commonFlatListProps = {
      showsVerticalScrollIndicator: false,
      contentContainerStyle: styles.listContainer,
      refreshControl: (
        <RefreshControl refreshing={refreshing} onRefresh={handleRefresh} />
      ),
    };

    switch (selectedTab) {
      case 'contacts':
        return (
          <FlatList
            data={contacts}
            renderItem={({ item }) => renderContactCard(item)}
            keyExtractor={(item) => item.contact_id}
            {...commonFlatListProps}
          />
        );
      case 'customers':
        return (
          <FlatList
            data={customers}
            renderItem={({ item }) => renderContactCard(item)}
            keyExtractor={(item) => item.contact_id}
            {...commonFlatListProps}
          />
        );
      case 'vendors':
        return (
          <FlatList
            data={vendors}
            renderItem={({ item }) => renderContactCard(item)}
            keyExtractor={(item) => item.contact_id}
            {...commonFlatListProps}
          />
        );
      case 'invoices':
        return (
          <FlatList
            data={invoices}
            renderItem={({ item }) => renderInvoiceCard(item)}
            keyExtractor={(item) => item.invoice_id}
            {...commonFlatListProps}
          />
        );
      case 'expenses':
        return (
          <FlatList
            data={expenses}
            renderItem={({ item }) => renderExpenseCard(item)}
            keyExtractor={(item) => item.expense_id}
            {...commonFlatListProps}
          />
        );
      case 'salesOrders':
        return (
          <FlatList
            data={salesOrders}
            renderItem={({ item }) => renderSalesOrderCard(item)}
            keyExtractor={(item) => item.salesorder_id}
            {...commonFlatListProps}
          />
        );
      case 'purchaseOrders':
        return (
          <FlatList
            data={purchaseOrders}
            renderItem={({ item }) => renderPurchaseOrderCard(item)}
            keyExtractor={(item) => item.purchaseorder_id}
            {...commonFlatListProps}
          />
        );
      case 'bills':
        return (
          <FlatList
            data={bills}
            renderItem={({ item }) => renderBillCard(item)}
            keyExtractor={(item) => item.bill_id}
            {...commonFlatListProps}
          />
        );
      default:
        return null;
    }
  };

  return (
      <View style={[styles.container, { backgroundColor: colors.background }]}>
        {/* Fixed Header */}
        <View style={styles.header}>
          <Text style={[styles.title, { color: colors.text, fontFamily: fonts.bold }]}>
            Zoho Books Data
          </Text>
          <TouchableOpacity onPress={handleRefresh} disabled={refreshing}>
            <Icon name="refresh" size={24} color={colors.primary} />
          </TouchableOpacity>
        </View>

        {/* Fixed Tabs */}
        <View style={styles.tabsContainer}>
          <ScrollView horizontal showsHorizontalScrollIndicator={false}>
            <View style={styles.tabs}>
              {tabs.map((tab) => (
                <TouchableOpacity
                  key={tab.key}
                  style={[
                    styles.tab,
                    selectedTab === tab.key && { backgroundColor: colors.primary },
                  ]}
                  onPress={() => setSelectedTab(tab.key)}
                  activeOpacity={0.8}
                >
                  <Icon
                    name={tab.icon}
                    size={20}
                    color={selectedTab === tab.key ? colors.surface : colors.textLight}
                  />
                  <Text
                    style={[
                      styles.tabText,
                      {
                        color: selectedTab === tab.key ? colors.surface : colors.textLight,
                        fontFamily: fonts.medium,
                      },
                    ]}
                  >
                    {tab.label}
                  </Text>
                  <View
                    style={[
                      styles.countBadge,
                      { backgroundColor: selectedTab === tab.key ? colors.surface : colors.primary },
                    ]}
                  >
                    <Text
                      style={[
                        styles.countText,
                        {
                          color: selectedTab === tab.key ? colors.primary : colors.surface,
                          fontFamily: fonts.bold,
                        },
                      ]}
                    >
                      {tab.count}
                    </Text>
                  </View>
                </TouchableOpacity>
              ))}
            </View>
          </ScrollView>
        </View>

        {/* Scrollable Content */}
        <View style={styles.content}>
          {renderTabContent()}
        </View>
      </View>
  );
};

// Helper function to get status colors
const getStatusColor = (status: string): string => {
  const statusColors: Record<string, string> = {
    active: '#E9FAF2',
    inactive: '#FEF2F2',
    draft: '#F3F4F6',
    sent: '#E0F2FE',
    paid: '#E9FAF2',
    overdue: '#FEF2F2',
    open: '#E0F2FE',
    confirmed: '#E9FAF2',
    received: '#E9FAF2',
    cancelled: '#FEF2F2',
    billable: '#E9FAF2',
    nonbillable: '#FEF2F2',
  };
  return statusColors[status.toLowerCase()] || '#F3F4F6';
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  header: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    paddingHorizontal: 16,
    paddingVertical: 12,
  },
  title: {
    fontSize: 24,
  },
  tabsContainer: {
    backgroundColor: '#FFFFFF',
    paddingVertical: 12,
    borderBottomWidth: 1,
    borderBottomColor: '#E5E7EB',
  },
  tabs: {
    flexDirection: 'row',
    paddingHorizontal: 16,
  },
  tab: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingHorizontal: 16,
    paddingVertical: 10,
    marginRight: 8,
    borderRadius: 20,
    backgroundColor: '#F1F5F9',
  },
  tabText: {
    marginLeft: 6,
    fontSize: 14,
  },
  countBadge: {
    marginLeft: 6,
    paddingHorizontal: 8,
    paddingVertical: 2,
    borderRadius: 10,
    minWidth: 20,
    alignItems: 'center',
  },
  countText: {
    fontSize: 12,
  },
  content: {
    flex: 1,
  },
  listContainer: {
    paddingHorizontal: 16,
    paddingBottom: 20,
  },
  card: {
    borderRadius: 12,
    borderWidth: 1,
    padding: 16,
    marginBottom: 12,
    ...StyleSheet.flatten({
      shadowColor: '#000',
      shadowOffset: { width: 0, height: 2 },
      shadowOpacity: 0.1,
      shadowRadius: 4,
      elevation: 3,
    }),
  },
  cardHeader: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginBottom: 12,
  },
  cardTitleContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    flex: 1,
  },
  cardTitle: {
    fontSize: 16,
    marginLeft: 8,
  },
  statusBadge: {
    paddingHorizontal: 8,
    paddingVertical: 4,
    borderRadius: 12,
  },
  statusText: {
    fontSize: 12,
    textTransform: 'capitalize',
  },
  cardContent: {
    gap: 8,
  },
  infoRow: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  infoLabel: {
    fontSize: 14,
    flex: 1,
  },
  infoValue: {
    fontSize: 14,
    textAlign: 'right',
    flex: 1,
  },
  amountRow: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    marginTop: 8,
    paddingTop: 8,
    borderTopWidth: StyleSheet.hairlineWidth,
    borderTopColor: '#E5E7EB',
  },
  amountItem: {
    flex: 1,
    alignItems: 'center',
  },
  amountLabel: {
    fontSize: 12,
    marginBottom: 4,
  },
  amountValue: {
    fontSize: 16,
    fontWeight: 'bold',
  },
});

export default ZohoBooksDataScreen;
