"use client";

import React, { useEffect, useRef, useState } from "react";
import { Button, Group, Modal, Paper, Radio, ScrollArea, Select, Stack, Text, TextInput, Title } from "@mantine/core";
import { notifications } from "@mantine/notifications";
import { useRouter } from "next/navigation";
import { generateOTP } from '@/app/OTPGenerator';
import { MockBeneficiaryData } from './page';

interface accountData {
    stAccountNo: string;
    stAccountType: string;
    stAvailableBalance: string;
    custname: string;
}

export default function SendToBeneficiaryOthers() {
    const router = useRouter();
    const [authorized, setAuthorized] = useState<boolean | null>(null);
    const [accountData, setAccountData] = useState<accountData[]>([]);
    const [selectedAccNo, setSelectedAccNo] = useState<string | null>(null);
    const [beneficiaryAcc, setBeneficiaryAcc] = useState<string | null>(null);
    const [beneficiaryName, setBeneficiaryName] = useState<string | null>(null);
    const [beneficiaryIFSC, setBeneficiaryIFSC] = useState<string | null>(null);
    const [paymentMode, setPaymentMode] = useState('IMPS');
    const [isVisibilityLocked, setIsVisibilityLocked] = useState(false);
    const [amount, setAmount] = useState("");
    const [remarks, setRemarks] = useState("");
    const [showConfirmModel, setConfirmModel] = useState(false);
    const [showTxnPassword, setShowTxnPassword] = useState(false);
    const [txnPassword, setTxnPassword] = useState("");
    const [isSubmitting, setIsSubmitting] = useState(false);
    const [showOtpField, setShowOtpField] = useState(false);
    const [otp, setOtp] = useState("");
    const [generateOtp, setGenerateOtp] = useState("");

    async function handleGenerateOtp() {
        // const value = await generateOTP(6);
        const value = "123456";
        setGenerateOtp(value);
        return value;
    }
    const selectedAccount = accountData.find((acc) => acc.stAccountNo === selectedAccNo);
    const accountOptions = accountData.map((acc) => ({
        value: acc.stAccountNo,
        label: `${acc.stAccountNo} (${acc.stAccountType})`,
    }));

    const benAccountOption = MockBeneficiaryData.filter((ben_acc) =>
        ben_acc.stBankName !== 'Kangra Central Co-operative Bank')
        .map((ben_acc) => ({
            value: ben_acc.stBenAccountNo,
            label: ben_acc.stBenAccountNo,

        }));
    const handleBeneficiary = (benAcc: string | null) => {
        if (benAcc) {
            setBeneficiaryAcc(benAcc);
            const selected = MockBeneficiaryData.find((item) => item.stBenAccountNo === benAcc);
            if (selected)
                setBeneficiaryName(selected.stBenName);
            setBeneficiaryIFSC(selected?.stIFSC ?? '');
        }
        else {
            setBeneficiaryAcc('');
            setBeneficiaryName('');
            setBeneficiaryIFSC('');
        }
    }

    const FetchAccountDetails = async () => {
        try {
            const token = localStorage.getItem("access_token");
            const response = await fetch("/api/customer", {
                method: "GET",
                headers: {
                    "Content-Type": "application/json",
                    Authorization: `Bearer ${token}`,
                },
            });
            const data = await response.json();
            if (response.ok && Array.isArray(data)) {
                const filterSAaccount = data.filter((acc) => acc.stAccountType === 'SA');
                setAccountData(filterSAaccount);
            }
        } catch {
            notifications.show({
                withBorder: true,
                color: "red",
                title: "Please try again later",
                message: "Unable to Fetch, Please try again later",
                autoClose: 5000,
            });
        }
    };

    useEffect(() => {
        const token = localStorage.getItem("access_token");
        if (!token) {
            setAuthorized(false);
            router.push("/login");
        } else {
            setAuthorized(true);
        }
    }, []);

    useEffect(() => {
        if (authorized) {
            FetchAccountDetails();
        }
    }, [authorized]);

    async function handleProceed() {
        if (!selectedAccNo || !beneficiaryAcc! || !beneficiaryName || !beneficiaryIFSC || !paymentMode || !amount || !remarks) {
            notifications.show({
                title: "Validation Error",
                message: `Please fill all required fields`,
                color: "red",
            });
            return;
        }

        if (parseInt(amount) <= 0) {
            notifications.show({
                title: "Invalid amount",
                message: "Amount Can not be less than Zero",
                color: "red",
            });
            return;
        }

        if (!showOtpField && !showTxnPassword && !showConfirmModel) {
            setConfirmModel(true);
            setIsVisibilityLocked(true);
            return;
        }

        if (!otp) {
            notifications.show({
                title: "Enter OTP",
                message: "Please enter the OTP",
                color: "red",
            });
            return;
        }
        if (otp !== generateOtp) {
            notifications.show({
                title: "Invalid OTP",
                message: "The OTP entered does not match",
                color: "red",
            });
            return;
        }

        if (!showTxnPassword) {
            setShowTxnPassword(true);
            return;
        }

        if (!txnPassword) {
            notifications.show({
                title: "Missing field",
                message: "Please Enter Transaction Password Before Proceed",
                color: "red",
            });
            return;
        }
        try {
            setIsSubmitting(true);
            const token = localStorage.getItem("access_token");
            // Need to change the API
            const res = await fetch("/api/payment/transfer", {
                method: "POST",
                headers: {
                    "Content-Type": "application/json",
                    Authorization: `Bearer ${token}`,
                },
                body: JSON.stringify({
                    fromAccount: selectedAccNo,
                    toAccount: beneficiaryAcc,
                    // toAccountType: beneficiaryType,
                    amount: amount,
                    narration: remarks,
                    tpassword: txnPassword,
                }),
            });
            const result = await res.json();
            if (res.ok) {
                notifications.show({
                    title: "Success",
                    message: "Transaction successful",
                    color: "green",
                });
                setShowTxnPassword(false);
                setTxnPassword("");
                setShowOtpField(false);
                setOtp("");
                setBeneficiaryName('');
            } else {
                notifications.show({
                    title: "Error",
                    message: result?.error || "Transaction failed",
                    color: "red",
                });
            }
        } catch {
            notifications.show({
                title: "Error",
                message: "Something went wrong",
                color: "red",
            });
        } finally {
            setSelectedAccNo(null);
            setBeneficiaryAcc(null);
            setBeneficiaryName('');
            setPaymentMode('');
            setAmount('');
            setRemarks('');
            setIsVisibilityLocked(false);
            setIsSubmitting(false);
            setShowTxnPassword(false);
            setShowOtpField(false);
        }
    };

    if (!authorized) return null;

    return (
        <>
            <Modal
                opened={showConfirmModel}
                onClose={() => setConfirmModel(false)}
                // title="Confirm Transaction"
                centered
            >
                <Stack>
                    <Title order={4}>Confirm Transaction</Title>
                    <Text><strong>Debit Account:</strong> {selectedAccNo}</Text>
                    <Text><strong>Beneficiary Account:</strong> {beneficiaryAcc}</Text>
                    <Text><strong>Beneficiary Name:</strong> {beneficiaryName}</Text>
                    <Text><strong>Payment Type:</strong> {paymentMode}</Text>
                    <Text><strong>Amount:</strong> ₹ {amount}</Text>
                    <Text><strong>Remarks:</strong>  {remarks}</Text>
                </Stack>
                <Group justify="flex-end" mt="md">
                    <Button variant="default" onClick={() => setConfirmModel(false)}>Cancel</Button>
                    <Button
                        color="blue"
                        onClick={async () => {
                            setConfirmModel(false);
                            const otp = await handleGenerateOtp();
                            setShowOtpField(true);
                            notifications.show({
                                title: "OTP Sent",
                                message: `Check your registered device for OTP`,
                                color: "green",
                                autoClose: 5000,
                            });
                        }}
                    >
                        Confirm
                    </Button>
                </Group>
            </Modal>
            {/* main content */}
            <div style={{ maxHeight: "320px", overflowY: "auto" }}>
                <Stack gap="xs">
                    <Group grow>
                        <Select
                            label="Select Debit Account Number"
                            placeholder="Choose account number"
                            data={accountOptions}
                            value={selectedAccNo}
                            onChange={setSelectedAccNo}
                            withAsterisk
                            readOnly={isVisibilityLocked}
                        />
                        <Select
                            label="Beneficiary Account No"
                            placeholder="Choose beneficiary account number"
                            data={benAccountOption}
                            value={beneficiaryAcc}
                            onChange={handleBeneficiary}
                            withAsterisk
                            readOnly={isVisibilityLocked}
                            nothingFoundMessage='No account found'
                        />
                        <TextInput
                            label="Beneficiary Name"
                            value={beneficiaryName ? beneficiaryName : ""}
                            disabled
                            readOnly
                            withAsterisk
                        />
                    </Group>
                    <Group justify="space-between" >
                        <Text size="xs" c="green" style={{ visibility: selectedAccount ? "visible" : "hidden" }}>Available Balance :
                            {selectedAccount ? selectedAccount.stAvailableBalance : 0}
                        </Text>
                    </Group>
                    <Group grow>
                        <TextInput
                            label="Beneficiary IFSC Code"
                            value={beneficiaryIFSC ? beneficiaryIFSC : ""}
                            disabled
                            readOnly
                            withAsterisk
                        />
                        <Radio.Group
                            name="payment-mode"
                            label="Select Payment Method"
                            value={paymentMode}
                            onChange={setPaymentMode}
                            withAsterisk
                            readOnly={isVisibilityLocked}
                        >
                            <Group>
                                <Radio value="IMPS" label="IMPS" />
                                <Radio value="RTGS" label="RTGS" />
                                <Radio value="NEFT" label="NEFT" />
                            </Group>
                        </Radio.Group>

                        <TextInput
                            label="Amount"
                            type="number"
                            value={amount}
                            onChange={(e) => setAmount(e.currentTarget.value)}
                            error={
                                selectedAccount && Number(amount) > Number(selectedAccount.stAvailableBalance) ?
                                    "Amount exceeds available balance" : false}
                            withAsterisk
                            readOnly={showOtpField}
                        />

                        <TextInput
                            label="Remarks"
                            placeholder="Enter remarks"
                            value={remarks}
                            onChange={(e) => setRemarks(e.currentTarget.value)}
                            withAsterisk
                            readOnly={showOtpField}
                        />
                    </Group>
                    <Group grow>
                        {showOtpField && (
                            <TextInput
                                label="OTP"
                                placeholder="Enter OTP"
                                type="otp"
                                value={otp}
                                onChange={(e) => setOtp(e.currentTarget.value)}
                                withAsterisk
                                disabled={showTxnPassword}
                            />
                        )}
                        {showTxnPassword && (
                            <TextInput
                                label="Transaction Password"
                                placeholder="Enter transaction password"
                                type="password"
                                value={txnPassword}
                                onChange={(e) => setTxnPassword(e.currentTarget.value)}
                                withAsterisk
                            />
                        )}
                    </Group>

                    <Group justify="flex-start">
                        <Button
                            variant="filled"
                            color="blue"
                            onClick={handleProceed}
                            loading={isSubmitting}
                        >
                            {!showTxnPassword && showOtpField ? "Validate the OTP" : showTxnPassword ? "Proceed to Pay" : "Proceed"}
                        </Button>
                    </Group>
                </Stack>
            </div>
        </>
    );
}
