CBS-Mobile-App/src/modules/agent/screens/CollectionReceiptScreen.tsx

import React from 'react';
import { View, Text, StyleSheet, ScrollView, Pressable } from 'react-native';
import { NativeStackScreenProps } from '@react-navigation/native-stack';
import Ionicons from '@react-native-vector-icons/ionicons';
import Animated, { FadeIn, SlideInUp } from 'react-native-reanimated';

import { ScreenShell, Button } from '../../../components';
import { useTheme, fontFamily } from '../../../theme';
import type { AgentCollectionsStackParamList } from '../navigation/agentNavigationTypes';
import { formatFullCurrency, formatDateTime } from '../utils/agentFormatters';

// Since this is a mock receipt screen, we will just simulate receipt data based on the entry ID
// In a real app, we would fetch the receipt details from the API

type Props = NativeStackScreenProps<AgentCollectionsStackParamList, 'CollectionReceipt'>;

export default function CollectionReceiptScreen({ route, navigation }: Props) {
  const { entryId } = route.params;
  const theme = useTheme();

  const receipt = {
    receiptNo: entryId,
    customerName: 'Customer',
    accountNumber: 'CBS00000000',
    amount: 500,
    date: new Date().toISOString(),
    mode: 'cash',
    agentName: 'Rajesh Kumar',
    agentCode: 'AGT-2024-0147',
  };

  const InfoRow = ({ label, value, strong = false }: { label: string, value: string, strong?: boolean }) => (
    <View style={styles.infoRow}>
      <Text style={[styles.infoLabel, { color: theme.colors.textMuted }]}>{label}</Text>
      <Text style={[
        styles.infoValue, 
        { 
          color: strong ? theme.colors.textPrimary : theme.colors.textSecondary,
          fontFamily: strong ? fontFamily.bold : fontFamily.medium
        }
      ]}>
        {value}
      </Text>
    </View>
  );

  return (
    <ScreenShell title="Receipt" scrollable={false}>
      <ScrollView contentContainerStyle={styles.scrollContent}>
        
        <Animated.View entering={SlideInUp.springify()} style={[styles.receiptCard, { backgroundColor: theme.colors.surface, borderColor: theme.colors.cardBorder }]}>
          
          <View style={styles.successHeader}>
            <View style={[styles.successIcon, { backgroundColor: `${theme.colors.success}15` }]}>
              <Ionicons name="checkmark" size={32} color={theme.colors.success} />
            </View>
            <Text style={[styles.successTitle, { color: theme.colors.success }]}>Payment Successful</Text>
            <Text style={[styles.successAmount, { color: theme.colors.textPrimary }]}>{formatFullCurrency(receipt.amount)}</Text>
          </View>

          <View style={styles.dividerContainer}>
            <View style={[styles.circleCutout, styles.leftCutout, { backgroundColor: theme.colors.background }]} />
            <View style={[styles.dashedLine, { borderColor: theme.colors.cardBorder }]} />
            <View style={[styles.circleCutout, styles.rightCutout, { backgroundColor: theme.colors.background }]} />
          </View>

          <View style={styles.detailsSection}>
            <InfoRow label="Receipt No" value={receipt.receiptNo} strong />
            <InfoRow label="Date & Time" value={formatDateTime(receipt.date)} />
            <InfoRow label="Customer Name" value={receipt.customerName} strong />
            <InfoRow label="Account Number" value={receipt.accountNumber} />
            <InfoRow label="Payment Mode" value={receipt.mode.toUpperCase()} />
            
            <View style={[styles.solidDivider, { backgroundColor: theme.colors.cardBorder }]} />
            
            <InfoRow label="Agent Name" value={receipt.agentName} />
            <InfoRow label="Agent Code" value={receipt.agentCode} />
          </View>
          
        </Animated.View>

        <Animated.View entering={FadeIn.delay(300)} style={styles.actionsRow}>
          <Pressable style={[styles.actionBtn, { backgroundColor: theme.colors.surface, borderColor: theme.colors.cardBorder }]}>
            <Ionicons name="share-outline" size={20} color={theme.colors.primary} />
            <Text style={[styles.actionBtnText, { color: theme.colors.primary }]}>Share PDF</Text>
          </Pressable>
          
          <Pressable style={[styles.actionBtn, { backgroundColor: theme.colors.surface, borderColor: theme.colors.cardBorder }]}>
            <Ionicons name="print-outline" size={20} color={theme.colors.primary} />
            <Text style={[styles.actionBtnText, { color: theme.colors.primary }]}>Print</Text>
          </Pressable>
        </Animated.View>

        <Button 
          title="Done" 
          onPress={() => navigation.navigate('DailyCollection')} 
          style={{ marginTop: 24 }}
        />

      </ScrollView>
    </ScreenShell>
  );
}

const styles = StyleSheet.create({
  scrollContent: {
    padding: 16,
  },
  receiptCard: {
    borderRadius: 16,
    borderWidth: 1,
    overflow: 'hidden',
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 4 },
    shadowOpacity: 0.05,
    shadowRadius: 12,
    elevation: 3,
  },
  successHeader: {
    alignItems: 'center',
    padding: 24,
  },
  successIcon: {
    width: 64,
    height: 64,
    borderRadius: 32,
    alignItems: 'center',
    justifyContent: 'center',
    marginBottom: 16,
  },
  successTitle: {
    fontSize: 16,
    fontFamily: fontFamily.bold,
    marginBottom: 8,
  },
  successAmount: {
    fontSize: 32,
    fontFamily: fontFamily.bold,
  },
  dividerContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    height: 24,
    position: 'relative',
  },
  dashedLine: {
    flex: 1,
    height: 1,
    borderWidth: 1,
    borderStyle: 'dashed',
    marginHorizontal: 12,
  },
  circleCutout: {
    width: 24,
    height: 24,
    borderRadius: 12,
    position: 'absolute',
    top: 0,
  },
  leftCutout: {
    left: -12,
  },
  rightCutout: {
    right: -12,
  },
  detailsSection: {
    padding: 24,
  },
  infoRow: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    paddingVertical: 8,
  },
  infoLabel: {
    fontSize: 13,
  },
  infoValue: {
    fontSize: 14,
  },
  solidDivider: {
    height: 1,
    width: '100%',
    marginVertical: 16,
  },
  actionsRow: {
    flexDirection: 'row',
    gap: 16,
    marginTop: 24,
  },
  actionBtn: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    paddingVertical: 14,
    borderRadius: 12,
    borderWidth: 1,
    gap: 8,
  },
  actionBtnText: {
    fontSize: 14,
    fontFamily: fontFamily.semibold,
  },
});