import React, { useState } from 'react';
import { StyleSheet, View } from 'react-native';
import { NativeStackScreenProps } from '@react-navigation/native-stack';

import { ScreenShell, Input, Button, Card, AppModal } from '../../../components';
import { useAddBeneficiaryMutation } from '../services/paymentsApi';
import type { PaymentsStackParamList } from '../../../navigation/types';
import { useDispatch } from 'react-redux';
import { beneficiariesActions } from '../store/beneficiariesSlice';

type Props = NativeStackScreenProps<PaymentsStackParamList, 'AddBeneficiary'>;

export default function AddBeneficiaryScreen({ navigation }: Props) {
  const dispatch = useDispatch();
  const [addBen, { isLoading }] = useAddBeneficiaryMutation();

  const [form, setForm] = useState({
    name: '',
    accountNumber: '',
    confirmAccountNumber: '',
    ifsc: '',
    nickname: '',
  });

  const [otpModalVisible, setOtpModalVisible] = useState(false);
  const [otp, setOtp] = useState('');
  const [otpError, setOtpError] = useState<string | undefined>(undefined);

  const isValid =
    form.name.trim().length > 2 &&
    form.accountNumber.length > 6 &&
    form.accountNumber === form.confirmAccountNumber &&
    form.ifsc.length === 11;

  const handleSubmit = () => {
    if (!isValid) return;
    setOtp('');
    setOtpError(undefined);
    setOtpModalVisible(true);
  };

  const closeOtpModal = () => {
    setOtpModalVisible(false);
    setOtp('');
    setOtpError(undefined);
  };

  const confirmOTPAndSave = async () => {
    if (otp !== '123456') {
      setOtpError('That code is incorrect. Use 123456 for this demo.');
      return;
    }

    setOtpModalVisible(false);

    try {
      const nickname = form.nickname.trim() || undefined;
      const newBeneficiaryObj = {
        name: form.name.trim(),
        bankName: form.ifsc.toUpperCase().startsWith('HDFC') ? 'HDFC Bank' : 'State Bank of India', // mock logic
        accountMasked: form.accountNumber.slice(-4).padStart(8, 'X'),
        nickname,
      };

      const payload = await addBen(newBeneficiaryObj).unwrap();
      // Save into the beneficiaries slice — the single source of truth that
      // every payments screen reads, so the new payee shows up immediately.
      dispatch(beneficiariesActions.addBeneficiary({ ...payload, nickname }));
      navigation.goBack();
    } catch (e) {
      console.warn("Failed to add beneficiary", e);
      setOtpError('We could not save this payee. Please try again.');
      setOtpModalVisible(true);
    }
  };

  return (
    <ScreenShell title="Add Beneficiary" subtitle="Securely save a payee for future transfers" contentContainerStyle={styles.container}>
      <Card style={styles.formCard}>
        <Input 
          label="Beneficiary Full Name"
          placeholder="As per bank records"
          value={form.name}
          onChangeText={(v) => setForm({ ...form, name: v })}
        />
        <Input 
          label="Account Number"
          placeholder="Enter 9-18 digit account number"
          secureTextEntry
          keyboardType="number-pad"
          value={form.accountNumber}
          onChangeText={(v) => setForm({ ...form, accountNumber: v })}
        />
         <Input 
          label="Confirm Account Number"
          placeholder="Re-enter account number"
          keyboardType="number-pad"
          value={form.confirmAccountNumber}
          onChangeText={(v) => setForm({ ...form, confirmAccountNumber: v })}
          error={form.confirmAccountNumber.length > 0 && form.accountNumber !== form.confirmAccountNumber ? "Account numbers must match" : undefined}
        />
        <Input
          label="IFSC Code"
          placeholder="e.g. SBIN0001234"
          autoCapitalize="characters"
          maxLength={11}
          value={form.ifsc}
          onChangeText={(v) => setForm({ ...form, ifsc: v })}
          error={form.ifsc.length > 0 && form.ifsc.length !== 11 ? 'IFSC code must be 11 characters' : undefined}
        />
        <Input 
          label="Nickname (Optional)"
          placeholder="e.g. Landlord, Office"
          value={form.nickname}
          onChangeText={(v) => setForm({ ...form, nickname: v })}
        />
      </Card>

      <Button 
        title="Verify & Save" 
        onPress={handleSubmit} 
        disabled={!isValid || isLoading}
        loading={isLoading}
        style={styles.submitBtn} 
      />

      <AppModal
        visible={otpModalVisible}
        onClose={closeOtpModal}
        title="Bank Authentication"
      >
         <View style={{ gap: 16 }}>
           <Input
             label="Enter 6-digit OTP"
             placeholder="OTP sent to mobile (Hint: 123456)"
             keyboardType="number-pad"
             maxLength={6}
             value={otp}
             onChangeText={(v) => {
               setOtp(v);
               if (otpError) setOtpError(undefined);
             }}
             error={otpError}
           />
           <Button
             title="Confirm Addition"
             onPress={confirmOTPAndSave}
             disabled={otp.length !== 6 || isLoading}
             loading={isLoading}
           />
         </View>
      </AppModal>
    </ScreenShell>
  );
}

const styles = StyleSheet.create({
  container: {
    padding: 16,
    flexGrow: 1,
  },
  formCard: {
    padding: 16,
    gap: 16,
  },
  submitBtn: {
    marginTop: 'auto',
    paddingTop: 32,
  }
});