"use client";

import React, { useEffect, useState } from "react";
import { Center, Group, Loader, Paper, ScrollArea, Table, Text, Title, TextInput, Button, Modal } from "@mantine/core";
import { notifications } from "@mantine/notifications";
import { useRouter } from "next/navigation";
import Image from "next/image";
import { getBankLogo } from "@/app/_util/getBankLogo";
import { IconRefresh, IconTrash } from "@tabler/icons-react";
import { sendOtp, verifyOtp } from "@/app/_util/otp";


interface Beneficiary {
    accountNo: string;
    name: string;
    accountType: string;
    ifscCode: string;
    bankName: string;
    branchName: string;
}

export default function ViewBeneficiary() {
    const router = useRouter();
    const [authorized, setAuthorized] = useState<boolean | null>(null);
    const [beneficiaries, setBeneficiaries] = useState<Beneficiary[]>([]);
    const [loading, setLoading] = useState(true);
    const [opened, setOpened] = useState(false);
    const [otpStep, setOtpStep] = useState(false);
    const [otp, setOtp] = useState("");
    const [selectedAccount, setSelectedAccount] = useState<string | null>(null);
    const [countdown, setCountdown] = useState(180);
    const [timerActive, setTimerActive] = useState(false);

    const maskAccount = (account: string) => {
        if (!account) return undefined;
        const length = account.length;
        if (length <= 4) return account;
        const masked = "X".repeat(length - 4) + account.slice(length - 4);
        return masked;
    };

    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: 'BENEFICIARY_DELETE', beneficiary: selectedAccount ? maskAccount(selectedAccount) : undefined });
            setCountdown(180);
            setTimerActive(true);
        } catch (err: any) {
            console.error('Send OTP failed', err);
            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 openDeleteModal = (accountNo: string) => {
        setSelectedAccount(accountNo);
        setOpened(true);
        setOtpStep(false); // Reset modal to confirmation step
        setOtp("");
    };


    const handleModalConfirm = async () => {
        if (!selectedAccount) return;

        try {
            await handleSendOtp(); // send OTP to user's mobile
            setOtpStep(true); // move modal to OTP input step
        } catch (err) {
            notifications.show({
                title: "Error",
                message: "Failed to send OTP. Please try again.",
                color: "red",
            });
        }
    };

    // Step 3: Handle OTP verification & delete
    const handleVerifyOtpAndDelete = async () => {
        if (!otp || !selectedAccount) return;

        try {
            const isOtpValid = await handleVerifyOtp(); // verify OTP
            if (!isOtpValid) {
                notifications.show({
                    title: "Invalid OTP",
                    message: "Please enter the correct OTP.",
                    color: "red",
                });
                return;
            }

            // OTP is valid → delete beneficiary
            const token = localStorage.getItem("access_token");
            const res = await fetch(`/api/beneficiary/${selectedAccount}`, {
                method: "DELETE",
                headers: {
                    "Content-Type": "application/json",
                    "X-Login-Type": "IB",
                    Authorization: `Bearer ${token}`
                },
            });

            if (res.ok) {
                setBeneficiaries((prev) => prev.filter((b) => b.accountNo !== selectedAccount));
                notifications.show({
                    title: "Deleted",
                    message: "Beneficiary deleted successfully.",
                    color: "green",
                });
                setOpened(false);
                setOtpStep(false);
                setOtp("");
            } else {
                notifications.show({
                    title: "Error",
                    message: "Failed to delete beneficiary.",
                    color: "red",
                });
            }
        } catch (err) {
            notifications.show({
                title: "Error",
                message: "Something went wrong.",
                color: "red",
            });
        }
    };


    useEffect(() => {
        const token = localStorage.getItem("access_token");
        if (!token) {
            setAuthorized(false);
            router.push("/login");
        } else {
            setAuthorized(true);
        }
    }, []);
    useEffect(() => {
        const fetchBeneficiaries = 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}`,
                    },
                });
                if (!response.ok) throw new Error("Failed to fetch beneficiaries");
                const data = await response.json();
                setBeneficiaries(data);
            } catch (error) {
                notifications.show({
                    title: "Error",
                    message: "Unable to fetch beneficiaries. Please try again later.",
                    color: "red",
                });
            } finally {
                setLoading(false);
            }
        };
        fetchBeneficiaries();
    }, []);

    //new use effect
    useEffect(() => {
        let interval: NodeJS.Timeout | null = null;
        if (timerActive && countdown > 0) {
            interval = setInterval(() => {
                setCountdown((prev) => prev - 1);
            }, 1000);
        } else if (countdown === 0) {
            setTimerActive(false);
        }
        return () => {
            if (interval) clearInterval(interval);
        };
    }, [timerActive, countdown]);



    if (loading) {
        return (
            <Center h="60vh">
                <Loader size="lg" color="green" />
            </Center>
        );
    }

    if (!authorized) return null;



    return (
        <Paper shadow="sm" radius="md" p="md" withBorder h={400}>
            <Group justify="space-between" align="center" mb="md" wrap="wrap">
                <Title order={3}>My Beneficiaries</Title>

                <Button
                    color="green"
                    variant="filled"
                    size="sm"
                    component="a"
                    href="/beneficiary"
                    style={{ minWidth: "150px" }}
                >
                    + Add Beneficiary
                </Button>
            </Group>

            {beneficiaries.length === 0 ? (
                <Text>No beneficiaries found.</Text>
            ) : (
                <>
                    <ScrollArea h={300} type="always">
                        <Table highlightOnHover withTableBorder stickyHeader style={{ borderCollapse: "collapse", width: "100%" }}>
                            <thead style={{
                                background: "linear-gradient(56deg, rgba(24,140,186,1) 0%, rgba(62,230,132,1) 86%)",
                                position: "sticky",
                                top: 0,
                                zIndex: 5,
                            }}>
                                <tr>
                                    <Table.Th >Bank</Table.Th>
                                    <Table.Th style={{ textAlign: "right" }}>Account No</Table.Th>
                                    <Table.Th >Name</Table.Th>
                                    <Table.Th >Type</Table.Th>
                                    <Table.Th style={{ textAlign: "center" }}>IFSC</Table.Th>
                                    <Table.Th style={{ textAlign: "center" }}>Action Icon</Table.Th>
                                </tr>
                            </thead>
                            <Table.Tbody>
                                {beneficiaries.map((b, i) => (
                                    <Table.Tr key={i}>
                                        <Table.Td>
                                            <Group gap='sm'>
                                                <Image
                                                    // src={getBankLogo(b.bankName) ??logo}
                                                    src={getBankLogo(b.bankName)}
                                                    alt={b.bankName}
                                                    width={20}
                                                    height={15}
                                                />
                                                {b.bankName}
                                            </Group>
                                        </Table.Td>
                                        <Table.Td style={{ textAlign: "right" }}>{b.accountNo}</Table.Td>
                                        <Table.Td>{b.name}</Table.Td>
                                        <Table.Td>{b.accountType}</Table.Td>
                                        <Table.Td style={{ textAlign: "center" }}>{b.ifscCode}</Table.Td>
                                        {/* <Table.Td style={{ textAlign: "center" }}><IconTrash color="red" /></Table.Td> */}

                                        <Table.Td style={{ textAlign: "center" }}>
                                            <IconTrash
                                                color="red"
                                                style={{ cursor: "pointer" }}
                                                onClick={() => openDeleteModal(b.accountNo)}
                                            />
                                        </Table.Td>

                                    </Table.Tr>
                                ))}
                            </Table.Tbody>
                        </Table>
                    </ScrollArea>

                    <Modal
                        opened={opened}
                        onClose={() => {
                            setOpened(false);
                            setOtpStep(false);
                            setOtp("");
                        }}
                        title="Delete Beneficiary"
                        centered
                    >
                        {!otpStep ? (
                            <>
                                <Text mb="md">
                                    Are you sure you want to delete this beneficiary?
                                </Text>
                                <Group p="right">
                                    <Button variant="default" onClick={() => setOpened(false)}>
                                        Cancel
                                    </Button>
                                    <Button color="red" onClick={handleModalConfirm}>
                                        Confirm
                                    </Button>
                                </Group>
                            </>
                        ) : (
                            <>
                                <Text mb="sm">Enter OTP sent to your registered number:</Text>
                                <TextInput
                                    value={otp}
                                    onChange={(e) => setOtp(e.currentTarget.value)}
                                    placeholder="Enter OTP"
                                    maxLength={6}
                                />
                                <Group justify="space-between" mt="xs">
                                    {/* Resend OTP Timer or Icon */}
                                    {timerActive ? (
                                        <Text size="xs" c="dimmed" style={{ minWidth: "180px" }}>
                                            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>
                                <Group p="right" mt="md">
                                    <Button variant="default" onClick={() => setOpened(false)}>
                                        Cancel
                                    </Button>
                                    <Button color="green" onClick={handleVerifyOtpAndDelete}>
                                        Verify & Delete
                                    </Button>
                                </Group>
                            </>
                        )}
                    </Modal>
                </>

            )}
        </Paper >
    );
}