ProcureLinc-Mobile-App/src/Screens/Ragistration/PartnerShip.tsx

import {
  KeyboardAvoidingView,
  SafeAreaView,
  ScrollView,
  StyleSheet,
  TouchableOpacity,
  View,
  Platform,
} from 'react-native';
import React, { useMemo, useState } from 'react';
import { useNavigation, useRoute, RouteProp } from '@react-navigation/native';
import PrimaryButton from '../../components/PrimaryButton';
import MyInput from '../../components/MyInput';
import { showToast } from '../../Constant/ShowDailog';
import { usePartnerShipSubmit } from '../../Services/ApiCall/Hooks';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import NavigationString from '../../Constant/NavigationString';
import Animated, { FadeInUp } from 'react-native-reanimated';
import { useTheme } from '../../Hooks/useTheme';
import AppText from '../../components/AppText';
import { Trash2, UserPlus } from 'lucide-react-native';

type Partner = {
  partnerName: string;
  percentage: string;
  partnerPan: string;
  aadharNumber: string;
  mobileNumber: string;
};
type Navigation = {
  replace: (route: string) => void;
};
type PartnershipParams = {
  otherId: string | number;
};

const Partnership = () => {
  const route = useRoute<RouteProp<{ params: PartnershipParams }, 'params'>>();
  const { colors, spacing, typography, shadows } = useTheme();
  const navigation = useNavigation() as Navigation;
  const [partners, setPartners] = useState<Partner[]>([
    {
      partnerName: '',
      percentage: '',
      partnerPan: '',
      aadharNumber: '',
      mobileNumber: '',
    },
  ]);

  const [focusedField, setFocusedField] = useState<string>('');
  const [loading, setLoading] = useState(false);
  const { mutateAsync: partnerShipSubmit } = usePartnerShipSubmit();
  const insets = useSafeAreaInsets();
  const styles = useMemo(() => makeStyles(colors, spacing, shadows, typography), [colors, spacing, shadows, typography]);

  const handleChange = (index: number, name: keyof Partner, value: string) => {
    const updated = [...partners];
    updated[index][name] = value;
    setPartners(updated);
  };

  const handleAddMore = () => {
    setPartners(prev => [
      ...prev,
      {
        partnerName: '',
        percentage: '',
        partnerPan: '',
        aadharNumber: '',
        mobileNumber: '',
      },
    ]);
  };

  const handleRemove = (index: number) => {
    const updated = [...partners];
    updated.splice(index, 1);
    setPartners(
      updated.length > 0
        ? updated
        : [
          {
            partnerName: '',
            percentage: '',
            partnerPan: '',
            aadharNumber: '',
            mobileNumber: '',
          },
        ]
    );
  };

  const handleSubmit = async () => {
    setLoading(true);
    try {
      const payload = partners.map((p, i) => {
        const percentage = Number(p.percentage);

        if (isNaN(percentage) || percentage < 0 || percentage > 100) {
          throw new Error(`Invalid percentage value for partner ${p.partnerName}`);
        }

        return {
          contOtherId: route?.params?.otherId,
          ptnrAadharNo: p.aadharNumber,
          ptnrMobNo: p.mobileNumber,
          ptnrName: p.partnerName,
          ptnrPop: percentage,
          ptnrPANNo: p.partnerPan,
          ptnrNo: i,
        };
      });

      const totalPercentage = payload.reduce((sum, p) => sum + p.ptnrPop, 0);
      if (totalPercentage !== 100) {
        showToast(`Total percentage must equal 100% (currently ${totalPercentage}%)`);
        return;
      }

      const response = await partnerShipSubmit(payload);

      if (response?.statusCode === 200) {
        showToast(response.message || 'Submitted successfully!');
        navigation.replace(NavigationString.Home);
      }
    } catch (error: any) {
      console.error('❌ Submission failed:', error.message);
      showToast(error.message || 'Submission failed. Please check partner details.');
    } finally {
      setLoading(false);
    }
  };

  return (
    <View style={{ flex: 1, backgroundColor: colors.background }}>
      <View style={[styles.header, { paddingTop: insets.top + spacing.s }]}>
        <AppText variant="h3" color={colors.text} style={{ fontWeight: '700' }}>
          Partnership Details
        </AppText>
        <AppText variant="caption" color={colors.textSecondary}>
          Add all partners and their share percentages
        </AppText>
      </View>

      <SafeAreaView style={{ flex: 1 }}>
        <KeyboardAvoidingView
          style={{ flex: 1 }}
          behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
          keyboardVerticalOffset={40}
        >
          <ScrollView
            contentContainerStyle={styles.scrollContainer}
            keyboardShouldPersistTaps="handled"
            showsVerticalScrollIndicator={false}
          >
            {partners.map((partner, index) => (
              <Animated.View
                key={index}
                entering={FadeInUp.delay(index * 80).springify()}
                style={[styles.card, shadows.medium]}
              >
                <View style={styles.cardHeader}>
                  <AppText variant="bodySmall" color={colors.primary} style={{ fontWeight: '700' }}>
                    Partner {index + 1}
                  </AppText>
                  {partners.length > 1 && (
                    <TouchableOpacity onPress={() => handleRemove(index)} activeOpacity={0.7}>
                      <Trash2 size={18} color={colors.error} />
                    </TouchableOpacity>
                  )}
                </View>

                <MyInput
                  label="Partner Name"
                  placeholder="Enter Partner Name"
                  value={partner.partnerName}
                  onChangeText={text => handleChange(index, 'partnerName', text)}
                  onFocus={() => setFocusedField(`partnerName-${index}`)}
                  onBlur={() => setFocusedField('')}
                  focused={focusedField === `partnerName-${index}`}
                  containerStyle={{ marginBottom: spacing.s }}
                />

                <MyInput
                  label="Share Percentage"
                  placeholder="Enter Percentage"
                  value={partner.percentage}
                  onChangeText={text => handleChange(index, 'percentage', text)}
                  onFocus={() => setFocusedField(`percentage-${index}`)}
                  onBlur={() => setFocusedField('')}
                  focused={focusedField === `percentage-${index}`}
                  keyboardType="numeric"
                  maxLength={3}
                  containerStyle={{ marginBottom: spacing.s }}
                />

                <MyInput
                  label="PAN of Partner"
                  placeholder="Enter PAN Number"
                  value={partner.partnerPan}
                  onChangeText={text => handleChange(index, 'partnerPan', text)}
                  onFocus={() => setFocusedField(`partnerPan-${index}`)}
                  onBlur={() => setFocusedField('')}
                  focused={focusedField === `partnerPan-${index}`}
                  autoCapitalize="characters"
                  maxLength={10}
                  containerStyle={{ marginBottom: spacing.s }}
                />

                <MyInput
                  label="Aadhaar Number"
                  placeholder="Enter 12-digit Aadhaar"
                  value={partner.aadharNumber}
                  onChangeText={text => handleChange(index, 'aadharNumber', text)}
                  onFocus={() => setFocusedField(`aadharNumber-${index}`)}
                  onBlur={() => setFocusedField('')}
                  focused={focusedField === `aadharNumber-${index}`}
                  keyboardType="numeric"
                  maxLength={12}
                  containerStyle={{ marginBottom: spacing.s }}
                />

                <MyInput
                  label="Mobile Number"
                  placeholder="Enter Mobile Number"
                  value={partner.mobileNumber}
                  onChangeText={text => handleChange(index, 'mobileNumber', text)}
                  onFocus={() => setFocusedField(`mobileNumber-${index}`)}
                  onBlur={() => setFocusedField('')}
                  focused={focusedField === `mobileNumber-${index}`}
                  keyboardType="phone-pad"
                  maxLength={10}
                />
              </Animated.View>
            ))}

            <TouchableOpacity style={styles.addButton} onPress={handleAddMore} activeOpacity={0.8}>
              <UserPlus size={16} color={colors.buttonText} />
              <AppText variant="bodySmall" color={colors.buttonText} style={{ fontWeight: '700', marginLeft: 8 }}>
                Add Partner
              </AppText>
            </TouchableOpacity>
          </ScrollView>
        </KeyboardAvoidingView>
      </SafeAreaView>

      <View style={styles.footer}>
        <PrimaryButton title={loading ? 'Loading...' : 'Submit'} onPress={handleSubmit} style={{ marginBottom: 20 }} />
      </View>
    </View>
  );
};

export default Partnership;

const makeStyles = (colors: any, spacing: any, _shadows: any, _typography: any) => StyleSheet.create({
  header: {
    paddingHorizontal: spacing.m,
    paddingBottom: spacing.m,
    borderBottomWidth: 1,
    borderBottomColor: colors.border,
    backgroundColor: colors.surface,
  },
  scrollContainer: {
    flexGrow: 1,
    padding: spacing.m,
    paddingBottom: 30,
  },
  card: {
    backgroundColor: colors.surface,
    borderRadius: 14,
    padding: 14,
    marginBottom: spacing.m,
  },
  cardHeader: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginBottom: spacing.s,
    paddingBottom: spacing.xs,
    borderBottomWidth: StyleSheet.hairlineWidth,
    borderBottomColor: colors.border,
  },
  addButton: {
    backgroundColor: colors.primary,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    paddingVertical: 12,
    paddingHorizontal: 20,
    borderRadius: 12,
    alignSelf: 'flex-end',
  },
  footer: {
    padding: spacing.m,
    borderTopWidth: 1,
    borderTopColor: colors.border,
    backgroundColor: colors.surface,
  },
});