"use client";

import React, { useEffect, useRef, useState } from "react";
import { Button, Center, Divider, Group, List, Modal, Paper, PasswordInput, Radio, ScrollArea, Select, Stack, Text, TextInput, ThemeIcon, Title } from "@mantine/core";
import { notifications } from "@mantine/notifications";
import { useRouter } from "next/navigation";
import { generateOTP } from '@/app/OTPGenerator';
import { IconAlertTriangle, IconRefresh } from "@tabler/icons-react";
import Image from "next/image";
import img from '@/app/image/logo1.jpg'


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 [beneficiaryData, setBeneficiaryData] = useState<any[]>([]);
    const [showIntroModal, setShowIntroModal] = useState(true);
    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 [countdown, setCountdown] = useState(180);
    const [timerActive, setTimerActive] = useState(false);
    const [generateOtp, setGenerateOtp] = useState("");

    async function handleGenerateOtp() {
        // const value = await generateOTP(6);
        const value = "123456";
        setGenerateOtp(value);
        setCountdown(180);
        setTimerActive(true);
        return value;
    }
    const getAmountError = () => {
        if (!amount || !selectedAccount) return null;
        const amt = Number(amount);
        const balance = Number(selectedAccount.stAvailableBalance);
        if (paymentMode === "IMPS") {
            if (amt > 200000) return "IMPS limit is ₹2,00,000";
            if (amt > balance) return "Amount exceeds available balance";
        }
        if (paymentMode === "RTGS") {
            if (amt < 200000) return "RTGS requires minimum ₹2,00,000";
            if (amt > balance) return "Amount exceeds available balance";
        }
        if (paymentMode === "NEFT") {
            if (amt > balance) return "Amount exceeds available balance";
        }
        if (amt <= 0) return "Amount cannot be less than or equal to zero";
        return null;
    };

    const FetchBeneficiaryDetails = async () => {
        try {
            const token = localStorage.getItem("access_token");
            const response = await fetch("/api/beneficiary", {
                method: "GET",
                headers: {
                    "Content-Type": "application/json",
                    Authorization: `Bearer ${token}`,
                },
            });
            const data = await response.json();
            console.log(data);
            if (response.ok && Array.isArray(data)) {
                setBeneficiaryData(data);
            } else {
                notifications.show({
                    title: "Error",
                    message: "Unable to fetch beneficiary list",
                    color: "red",
                });
            }
        } catch {
            notifications.show({
                title: "Error",
                message: "Something went wrong while fetching beneficiaries",
                color: "red",
            });
        }
    };
    const selectedAccount = accountData.find((acc) => acc.stAccountNo === selectedAccNo);
    const accountOptions = accountData.map((acc) => ({
        value: acc.stAccountNo,
        label: `${acc.stAccountNo} (${acc.stAccountType})`,
    }));

    const benAccountOption = beneficiaryData.
        filter((ben) => !ben.ifscCode?.startsWith("KACE"))
        .map((ben) => ({
            value: ben.accountNo,
            label: `${ben.accountNo} - ${ben.name}`,

        }));

    const handleBeneficiary = (ben: string | null) => {
        if (ben) {
            setBeneficiaryAcc(ben);
            const selected = beneficiaryData.find((item) => item.accountNo === ben && !item.ifscCode?.startsWith("KACE"));
            if (selected) {
                setBeneficiaryName(selected.name);
                setBeneficiaryIFSC(selected?.ifscCode ?? '');
            }
            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();
            FetchBeneficiaryDetails();
        }
    }, [authorized]);

    useEffect(() => {
        let interval: number | undefined;
        if (timerActive && countdown > 0) {
            interval = window.setInterval(() => {
                setCountdown((prev) => prev - 1);
            }, 1000);
        }
        if (countdown === 0) {
            if (interval) clearInterval(interval);
            setTimerActive(false);
        }
        return () => {
            if (interval) clearInterval(interval);
        };
    }, [timerActive, countdown]);

    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 (getAmountError()) {
            notifications.show({
                title: "Invalid amount",
                message: getAmountError()!,
                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");
            const remitter_name = localStorage.getItem("remitter_name");
            let url = "";
            if (paymentMode === "NEFT")
                url = "/api/payment/neft";
            if (paymentMode === "RTGS")
                url = "/api/payment/rtgs"
            if (paymentMode === "IMPS")
                url = "/api/payment/imps";

            const res = await fetch(url, {
                method: "POST",
                headers: {
                    "Content-Type": "application/json",
                    Authorization: `Bearer ${token}`,
                },
                body: JSON.stringify({
                    fromAccount: selectedAccNo,
                    toAccount: beneficiaryAcc,
                    ifscCode: beneficiaryIFSC,
                    amount: amount,
                    beneficiaryName: beneficiaryName,
                    remitterName: remitter_name,
                    tpassword: txnPassword
                }),
            });
            const result = await res.json();
            if (res.ok) {
                notifications.show({
                    title: "Success",
                    message: result?.utr ? `Transaction successful - UTR =${result.utr}` : "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);
            setOtp('');
            setTxnPassword('');
        }
    };

    if (!authorized) return null;

    return (
        <>
            {/* <Modal
                opened={showIntroModal}
                onClose={() => setShowIntroModal(false)}
                centered
                withCloseButton={false} // force them to press OK
            >
                <Stack gap={1}>
                    <Title order={4} style={{ textAlign: "center" }}>Important Note</Title>
                    <Text size="sm">• <strong>IMPS</strong> is available 24X7. Limit: up to ₹5,00,000. Money is transfer instantly.</Text>
                    <Text size="sm">• <strong>NEFT</strong> is available 24x7. Can be used for any amount but not instant.</Text>
                    <Text size="sm">• <strong>RTGS</strong> is for ₹2,00,000 and above. Available during banking hours.As per directions of RBI, RTGS transactions are subjected to the following{" "}
                        <strong>Time Varying Tariff</strong> in addition to the existing <strong>RTGS</strong>
                        Commission. The tariff will be calculated based on the time of completion
                        of transaction.</Text>
                    <List
                        spacing="xs"
                        size="sm"
                        icon={
                            <ThemeIcon color="red" size={20} radius="xl">
                                <IconAlertTriangle size={14} />
                            </ThemeIcon>
                        }
                    >
                        <List.Item>
                            From <strong>09:00 hrs</strong> to <strong>12:00 hrs</strong> →{" "}
                            <strong>₹0.00</strong>
                        </List.Item>
                        <List.Item>
                            After <strong>12:00 hrs</strong> up to <strong>15:30 hrs</strong> →{" "}
                            <strong>₹1.00</strong>
                        </List.Item>
                        <List.Item>
                            After <strong>15:30 hrs</strong> → <strong>₹5.00</strong>
                        </List.Item>
                    </List>
                    <Divider my="sm" variant="dashed" />
                    <Text size="xs" c="blue">
                        • Minimum Transfer Amount on this Day is Rs. 1.00
                    </Text>
                    <Text size="xs" c="blue">
                        • Maximum Transfer Limit per Day is Rs. 500000.00
                    </Text>
                    <Text size="xs" c="blue">
                        • Available Transfer Amount on this Day is Rs. 500000.00
                    </Text>
                    <Group justify="flex-end" mt="md">
                        <Button color="blue" onClick={() => setShowIntroModal(false)}>
                            Okay
                        </Button>
                    </Group>
                </Stack>
            </Modal> */}

            <Modal
                opened={showIntroModal}
                onClose={() => setShowIntroModal(false)}
                centered
                withCloseButton={false} // force them to press OK
            >
                <Stack gap={1}>

                    <Center>
                        <Image
                            src={img}
                            alt="KCC Bank Logo"
                            width={100}
                            height={100}
                            style={{ border: "2px solid black" }}
                        />
                    </Center>



                    <Title order={4} style={{ textAlign: "center" }}>
                        Important Note
                    </Title>

                    <Text size="sm">
                        • <strong>IMPS</strong> is available 24X7. Limit: up to ₹5,00,000.
                        Money is transfer instantly.
                    </Text>
                    <Text size="sm">
                        • <strong>NEFT</strong> is available 24x7. Can be used for any amount
                        but not instant.
                    </Text>
                    <Text size="sm">
                        • <strong>RTGS</strong> is for ₹2,00,000 and above. Available during
                        banking hours. As per directions of RBI, RTGS transactions are
                        subjected to the following <strong>Time Varying Tariff</strong> in
                        addition to the existing <strong>RTGS</strong> Commission. The tariff
                        will be calculated based on the time of completion of transaction.
                    </Text>

                    <List
                        spacing="xs"
                        size="sm"
                        icon={
                            <ThemeIcon color="red" size={20} radius="xl">
                                <IconAlertTriangle size={14} />
                            </ThemeIcon>
                        }
                    >
                        <List.Item>
                            From <strong>09:00 hrs</strong> to <strong>12:00 hrs</strong> →{" "}
                            <strong>₹0.00</strong>
                        </List.Item>
                        <List.Item>
                            After <strong>12:00 hrs</strong> up to <strong>15:30 hrs</strong> →{" "}
                            <strong>₹1.00</strong>
                        </List.Item>
                        <List.Item>
                            After <strong>15:30 hrs</strong> → <strong>₹5.00</strong>
                        </List.Item>
                    </List>

                    <Divider my="sm" variant="dashed" />

                    <Text size="xs" c="blue">
                        • Minimum Transfer Amount on this Day is Rs. 1.00
                    </Text>
                    <Text size="xs" c="blue">
                        • Maximum Transfer Limit per Day is Rs. 500000.00
                    </Text>
                    <Text size="xs" c="blue">
                        • Available Transfer Amount on this Day is Rs. 500000.00
                    </Text>

                    <Group justify="flex-end" mt="md">
                        <Button color="blue" onClick={() => setShowIntroModal(false)}>
                            Okay
                        </Button>
                    </Group>
                </Stack>
            </Modal>




            <Modal
                opened={showConfirmModel}
                onClose={() => setConfirmModel(false)}
                // title="Confirm Transaction"
                centered
            >
                <Stack>
                    <Image
                        src={img}
                        alt="KCC Bank Logo"
                        width={70}
                        height={70}
                        style={{
                            //border: "2px solid black",
                            marginTop: "-5px",
                            marginRight: "10px",
                        }}
                    />
                    <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 */}
            {!showIntroModal && (
                <div style={{ maxHeight: "290px", overflowY: "auto" }}>
                    <Stack gap={5} justify="flex-start">
                        <Group grow gap='xs' >
                            <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
                            />
                            <TextInput
                                label="Beneficiary IFSC Code"
                                value={beneficiaryIFSC ? beneficiaryIFSC : ""}
                                disabled
                                readOnly
                                withAsterisk
                            />
                        </Group>
                        <Group gap='xs' >
                            <Text size="xs" c="green" style={{ visibility: selectedAccount ? "visible" : "hidden" }}>Available Balance :
                                {selectedAccount ? selectedAccount.stAvailableBalance : 0}
                            </Text>
                        </Group>
                        <Group grow gap='xs'>
                            <Radio.Group
                                name="payment-mode"
                                label="Select Payment Method"
                                value={paymentMode}
                                onChange={setPaymentMode}
                                withAsterisk
                                readOnly={isVisibilityLocked}
                            >
                                <Group gap="xs">
                                    <Radio value="IMPS" label="IMPS" />
                                    <Radio value="RTGS" label="RTGS" />
                                    <Radio value="NEFT" label="NEFT" />
                                </Group>
                                <Text size="xs" c="red">
                                    {paymentMode === "IMPS" && "IMPS is available 24X7. Limit: up to ₹2,00,000. Money is transfer instantly. "}
                                    {paymentMode === "RTGS" && "RTGS is for ₹2,00,000 and above. Available during banking hours."}
                                    {paymentMode === "NEFT" && "NEFT is available 24x7. Can be used for any amount but not instant."}
                                </Text>
                            </Radio.Group>

                            <TextInput
                                label="Amount"
                                type="number"
                                value={amount}
                                onChange={(e) => {
                                    let input = e.currentTarget.value;
                                    if (/^\d*\.?\d{0,2}$/.test(input))
                                        setAmount(input);
                                }}
                                error={getAmountError()}
                                leftSection="₹"
                                withAsterisk
                                readOnly={showOtpField}
                            />

                            <TextInput
                                label="Remarks"
                                placeholder="Enter remarks"
                                value={remarks}
                                onChange={(e) => {
                                    let input = e.currentTarget.value;
                                    input = input.replace(/[^a-zA-Z0-9 ]/g, "");
                                    setRemarks(input)
                                }}
                                maxLength={50}
                                withAsterisk
                                readOnly={showOtpField}
                            />
                        </Group>
                        <Group grow>
                            {showOtpField && (
                                <>
                                    <Group gap="xs" align="flex-end">
                                        <PasswordInput
                                            label="OTP"
                                            placeholder="Enter OTP"
                                            type="otp"
                                            value={otp}
                                            maxLength={6}
                                            onChange={(e) => setOtp(e.currentTarget.value)}
                                            withAsterisk
                                            disabled={showTxnPassword}
                                            style={{ flex: 1 }}
                                        />
                                        {!showTxnPassword && (
                                            timerActive ? (
                                                <Text size="xs" c="dimmed" style={{ minWidth: "120px" }}>
                                                    Resend OTP will be enabled in{" "}
                                                    {String(Math.floor(countdown / 60)).padStart(2, "0")}:
                                                    {String(countdown % 60).padStart(2, "0")}
                                                </Text>
                                            ) : (
                                                <IconRefresh
                                                    size={22}
                                                    style={{ cursor: "pointer", color: "blue", marginBottom: "6px" }}
                                                    onClick={handleGenerateOtp}
                                                />
                                            )
                                        )}

                                    </Group>
                                </>
                            )}
                            {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 gap={1} mt="xs">
                            {paymentMode === "RTGS" &&
                                <>
                                    <Text size="xs" >
                                        • As per directions of RBI, RTGS transactions are subjected to the following{" "}
                                        <strong>Time Varying Tariff</strong> in addition to the existing RTGS
                                        Commission. The tariff will be calculated based on the time of completion
                                        of transaction.
                                    </Text>
                                    <List
                                        spacing="xs"
                                        size="sm"
                                    // icon={
                                    //     <ThemeIcon color="red" size={20} radius="xl">
                                    //         <IconAlertTriangle size={14} />
                                    //     </ThemeIcon>
                                    // }
                                    >
                                        <List.Item>
                                            From <strong>09:00 hrs</strong> to <strong>12:00 hrs</strong> →{" "}
                                            <strong>₹0.00</strong>
                                        </List.Item>
                                        <List.Item>
                                            After <strong>12:00 hrs</strong> up to <strong>15:30 hrs</strong> →{" "}
                                            <strong>₹1.00</strong>
                                        </List.Item>
                                        <List.Item>
                                            After <strong>15:30 hrs</strong> → <strong>₹5.00</strong>
                                        </List.Item>
                                    </List>
                                </>
                            }
                            <Text size="xs" c="dimmed">
                                • Minimum Transfer Limit per Day is Rs. 1.00
                            </Text>
                            <Text size="xs" c="dimmed">
                                • Maximum Transfer Limit per Day is Rs. 500000.00
                            </Text>
                            <Text size="xs" c="dimmed">
                                • Available Transfer Amount on this Day is Rs. 500000.00
                            </Text>

                        </Stack>
                    </Stack>
                </div >
            )}
        </>
    );
}