"use client";

import React, { useEffect, useState } from "react";
import { Button, Group, Modal, Paper, Radio, Select, Stack, Text, TextInput, Title, PasswordInput } from "@mantine/core";
import { notifications } from "@mantine/notifications";
import { useRouter } from "next/navigation";
import SendToBeneficiaryOthers from "./sendBeneficiaryOthers";
import Image from "next/image";
import img from '@/app/image/logo1.jpg';
import { IconRefresh } from "@tabler/icons-react";
import { sendOtp, verifyOtp } from '@/app/_util/otp';
import { getDailyLimit } from "@/app/_util/transactionLimit";


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

export default function SendToBeneficiaryOwn() {
    const router = useRouter();
    const [bankType, setBankType] = useState("own");
    const [authorized, setAuthorized] = useState<boolean | null>(null);
    const [accountData, setAccountData] = useState<accountData[]>([]);
    const [selectedAccNo, setSelectedAccNo] = useState<string | null>(null);
    const [beneficiaryData, setBeneficiaryData] = useState<any[]>([]);
    const [beneficiaryAcc, setBeneficiaryAcc] = useState<string | null>(null);
    const [beneficiaryName, setBeneficiaryName] = useState<string | null>(null);
    const [beneficiaryType, setBeneficiaryType] = useState<string | null>(null);
    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 [dailyLimit, setDailyLimit] = useState<number | null>(null);
    const [usedLimit, setUsedLimit] = useState<number | null>(null);

    const FetchDailyLimit = async () => {
        try {
            const token = localStorage.getItem("access_token");
            if (!token) return;
            const data = await getDailyLimit(token);
            if (data) {
                setDailyLimit(data.dailyLimit);
                setUsedLimit(data.usedLimit);
            } else {
                setDailyLimit(null);
                setUsedLimit(null);
            }
        } catch {
            setDailyLimit(null);
            setUsedLimit(null);
        }
    };

    async function handleSendOtp() {
        const mobileNumber = localStorage.getItem('remitter_mobile_no');
        if (!mobileNumber) {
            notifications.show({
                title: 'Error',
                message: 'Mobile number not found.Contact to administrator',
                color: 'red',
            });
            return;
        }
        try {
            await sendOtp({ type: 'IMPS' });
            setShowOtpField(true);
            setCountdown(180);
            setTimerActive(true);
        } catch (err: any) {
            notifications.show({
                title: 'Error',
                message: err.message || 'Send OTP failed.Please try again later.',
                color: 'red',
            });
        }
    }

    async function handleVerifyOtp() {
        try {
            await verifyOtp(otp);
            return true;
        } catch {
            return false;
        }
    }

    const selectedAccount = accountData.find((acc) => acc.stAccountNo === selectedAccNo);
    const accountOptions = accountData.map((acc) => ({
        value: acc.stAccountNo,
        label: `${acc.stAccountNo} (${acc.stAccountType})`,
    }));
    const FetchBeneficiaryDetails = async () => {
        try {
            const token = localStorage.getItem("access_token");
            const response = await fetch("/api/beneficiary", {
                method: "GET",
                headers: {
                    "Content-Type": "application/json",
                    "X-Login-Type": "IB",
                    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 FetchAccountDetails = async () => {
        try {
            const token = localStorage.getItem("access_token");
            const response = await fetch("/api/customer", {
                method: "GET",
                headers: {
                    "Content-Type": "application/json",
                    "X-Login-Type": "IB",
                    Authorization: `Bearer ${token}`,
                },
            });
            const data = await response.json();
            if (response.ok && Array.isArray(data)) {
                const filterSAaccount = data.filter((acc) => ['SA', 'SB'].includes(acc.stAccountType));
                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();
            FetchDailyLimit();
        }
    }, [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]);

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

    const handleBeneficiary = (benAcc: string | null) => {
        if (benAcc) {
            setBeneficiaryAcc(benAcc);
            const selected = beneficiaryData.find(
                (item) => item.accountNo === benAcc
            );
            if (selected) {
                setBeneficiaryName(selected.name);
                setBeneficiaryType(selected.accountType);
            }

        } else {
            setBeneficiaryAcc(null);
            setBeneficiaryName(null);
            setBeneficiaryType(null);
        }
    };

    async function handleProceed() {
        if (!selectedAccNo || !beneficiaryAcc! || !beneficiaryName || !beneficiaryType || !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 (showOtpField && !showTxnPassword) {
            if (!otp) {
                notifications.show({
                    title: "Error",
                    message: "Please enter the OTP",
                    color: "red",
                });
                return;
            }

            const verified = await handleVerifyOtp();
            if (!verified) {
                notifications.show({
                    title: "Invalid OTP",
                    message: "The OTP entered does not match",
                    color: "red",
                });
                return;
            }
            // If OTP verified successfully → show transaction password field
            setShowTxnPassword(true);
            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 res = await fetch("/api/payment/transfer", {
                method: "POST",
                headers: {
                    "Content-Type": "application/json",
                    "X-Login-Type": "IB",
                    Authorization: `Bearer ${token}`,
                },
                body: JSON.stringify({
                    fromAccount: selectedAccNo,
                    toAccount: beneficiaryAcc,
                    toAccountType: beneficiaryType,
                    amount: amount,
                    remarks: 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('');
                await FetchDailyLimit();
            } 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('');
            setBeneficiaryType(null);
            setAmount('');
            setRemarks('');
            setIsVisibilityLocked(false);
            setIsSubmitting(false);
            setShowTxnPassword(false);
            setShowOtpField(false);
            setOtp('');
            setTxnPassword('');
        }
    };

    if (!authorized) return null;
    return (
        <>
            <Modal
                opened={showConfirmModel}
                onClose={() => setConfirmModel(false)}
                // title="Confirm Transaction"
                centered

            >
                <Stack >
                    {/* <Center> */}
                    <Image
                        src={img}
                        alt="KCC Bank Logo"
                        width={70}
                        height={70}
                        style={{
                            //border: "2px solid black",
                            marginTop: "-5px",
                            marginRight: "10px",
                        }}
                    />
                    {/* </Center> */}

                    <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>Beneficiary Account Type:</strong> {beneficiaryType}</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 handleSendOtp();
                            setShowOtpField(true);
                            notifications.show({
                                title: "OTP Sent",
                                message: `Check your registered device for OTP`,
                                color: "green",
                                autoClose: 5000,
                            });
                        }}
                    >
                        Confirm
                    </Button>
                </Group>
            </Modal>



            {/* main content */}
            <Paper shadow="sm" radius="md" p="md" withBorder h={400}>
                <Title order={3} mb="md">
                    Send To Beneficiary
                </Title>
                <Radio.Group value={bankType} onChange={setBankType} name="bankType" withAsterisk mb="md">
                    <Group justify="center">
                        <Radio value="own" label="Own Bank" />
                        <Radio value="outside" label="Outside Bank" />
                    </Group>
                </Radio.Group>

                {bankType === "own" ? (
                    <div style={{ maxHeight: "290px", 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="Select 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>
                                <Select
                                    label="Beneficiary Account Type"
                                    placeholder="Select type"
                                    data={["Savings", "Current"]}
                                    value={beneficiaryType}
                                    onChange={setBeneficiaryType}
                                    withAsterisk
                                    readOnly={showOtpField}
                                />
                                <TextInput
                                    label="Amount"
                                    type="number"
                                    value={amount}
                                    // onChange={(e) => setAmount(e.currentTarget.value)}
                                    onChange={(e) => {
                                        let input = e.currentTarget.value;
                                        if (/^\d*\.?\d{0,2}$/.test(input))
                                            setAmount(input);
                                    }}
                                    error={
                                        selectedAccount && Number(amount) > Number(selectedAccount.stAvailableBalance) ?
                                            "Amount exceeds available balance" : false}
                                    withAsterisk
                                    leftSection="₹"
                                    readOnly={showOtpField}
                                />

                                <TextInput
                                    label="Remarks"
                                    placeholder="Enter remarks"
                                    value={remarks}
                                    // onChange={(e) => setRemarks(e.currentTarget.value)}
                                    onChange={(e) => {
                                        let input = e.currentTarget.value;
                                        input = input.replace(/[^a-zA-Z0-9 ]/g, "");
                                        setRemarks(input)
                                    }}
                                    maxLength={70}
                                    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={handleSendOtp}
                                                    />
                                                )
                                            )}

                                        </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">
                                <Text size="xs" c="green">
                                    • Minimum Transfer Amount on this Day is Rs. 1.00
                                </Text>
                                {dailyLimit !== null ? (
                                    <>
                                        <Text size="xs" c="green">
                                            • Maximum Transfer Limit per Day is Rs. {dailyLimit.toFixed(2)}
                                        </Text>
                                        <Text size="xs" c="green">
                                            • Available Transfer Amount on this Day is Rs.{" "}
                                            {usedLimit?.toFixed(2)}
                                        </Text>
                                    </>
                                ) : (
                                    <Text size="xs" c="red">
                                        • No daily limit set for this user
                                    </Text>
                                )}
                            </Stack>
                        </Stack>
                    </div>
                ) : (
                    <div>
                        <SendToBeneficiaryOthers />
                    </div>
                )}
            </Paper>
        </>
    );
}
