"use client";

import React, { useEffect, useState } from "react";
import {
    TextInput,
    Button,
    Title,
    Paper,
    Group,
    Text,
} from "@mantine/core";
import { notifications } from "@mantine/notifications";
import { IconRefresh, IconCurrencyRupee } from "@tabler/icons-react";
import { generateCaptcha } from "@/app/captcha";
import { useRouter } from "next/navigation";
import { sendOtp, verifyOtp } from "@/app/_util/otp";
import { getDailyLimit } from "@/app/_util/transactionLimit";

export default function SetTransactionLimit() {
    const [limit, setLimit] = useState("");
    const [captcha, setCaptcha] = useState("");
    const [captchaInput, setCaptchaInput] = useState("");
    const [otp, setOtp] = useState("");
    const [otpValidated, setOtpValidated] = useState(false);
    const [countdown, setCountdown] = useState(180);
    const [timerActive, setTimerActive] = useState(false);
    const [step, setStep] = useState<"form" | "otp" | "final">("form");
    const [dailyLimit, setDailyLimit] = useState<number | null>(null);
    const router = useRouter();

    const icon = <IconCurrencyRupee size={18} stroke={1.5} />;

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

            } else {
                setDailyLimit(null);
            }
        } catch {
            setDailyLimit(null);

        }
    };

    async function handleSendOtp() {
        const mobileNumber = localStorage.getItem("remitter_mobile_no");
        if (!mobileNumber) {
            notifications.show({
                title: "Error",
                message: "Mobile number not found. Contact administrator.",
                color: "red",
            });
            return;
        }
        try {
            await sendOtp({ type: "TLIMIT" });
            setCountdown(180);
            setTimerActive(true);
            notifications.show({
                title: "OTP Sent",
                message: "An OTP has been sent to your registered mobile.",
                color: "blue",
            });
        } catch (err: any) {
            console.error("Send OTP failed", err);
            notifications.show({
                title: "Error",
                message: err.message || "Send OTP failed. Try again later.",
                color: "red",
            });
        }
    }

    async function handleVerifyOtp() {
        try {
            await verifyOtp(otp);
            return true;
        } catch {
            return false;
        }
    }
    const regenerateCaptcha = async () => {
        const newCaptcha = await generateCaptcha();
        setCaptcha(newCaptcha);
        setCaptchaInput("");
    };

    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]);

    useEffect(() => {
        regenerateCaptcha();
        FetchDailyLimit();
    }, []);

    const handleSubmit = async () => {
        if (step === "form") {
            if (!limit || !captchaInput) {
                notifications.show({
                    title: "Missing Field",
                    message: "Please fill all mandatory fields.",
                    color: "red",
                });
                return;
            }



            if (isNaN(Number(limit)) || Number(limit) <= 0) {
                notifications.show({
                    title: "Invalid Limit",
                    message: "Please enter a valid positive numeric transaction limit.",
                    color: "red",
                });
                return;
            }

            if (captchaInput !== captcha) {
                notifications.show({
                    title: "Invalid Captcha",
                    message: "Please enter correct Captcha",
                    color: "red",
                });
                regenerateCaptcha();
                return;
            }

            await handleSendOtp();
            setStep("otp");
            return;
        }

        if (step === "otp") {
            const verified = await handleVerifyOtp();
            if (!verified) {
                notifications.show({
                    title: "Invalid OTP",
                    message: "The OTP entered does not match.",
                    color: "red",
                });
                return;
            }

            setOtpValidated(true);
            setStep("final");
            notifications.show({
                title: "OTP Verified",
                message: "OTP has been successfully verified.",
                color: "green",
            });
            return;
        }

        if (step === "final") {
            const token = localStorage.getItem("access_token");
            if (!token) {
                router.push("/login");
                return;
            }

            try {
                const response = await fetch("/api/customer/daily-limit", {
                    method: "POST",
                    headers: {
                        "Content-Type": "application/json",
                        "X-Login-Type": "IB",
                        Authorization: `Bearer ${token}`,
                    },
                    body: JSON.stringify({
                        amount: Number(limit),
                    }),
                });

                const result = await response.json();

                if (!response.ok) {
                    throw new Error(result.message || "Failed to set transaction limit");
                }

                notifications.show({
                    title: "Success",
                    message: `Transaction limit set successfully to ₹${limit}.`,
                    color: "green",
                });
                resetForm();
                await FetchDailyLimit(); //refresh
                const otp_sended = await sendOtp({ type: "TLIMIT_SET", amount: Number(limit) });

            } catch (err: any) {
                notifications.show({
                    title: "Error",
                    message: err.message || "Server error, please try again later",
                    color: "red",
                });
            }
        }
    };

    const resetForm = () => {
        setLimit("");
        setCaptchaInput("");
        setOtp("");
        setOtpValidated(false);
        setStep("form");
        regenerateCaptcha();
    };

    return (
        <Paper shadow="sm" radius="md" p="md" withBorder h={500}>
            <Title order={4} mb="sm">
                Set Transaction Limit
            </Title>

            <div style={{ overflowY: "auto", maxHeight: "280px", paddingRight: 8 }}>
                <Group grow>
                    <TextInput
                        label="Transaction Limit"
                        placeholder="Enter your transaction limit"
                        value={limit}
                        onChange={(e) => {
                            const val = e.currentTarget.value;

                            // Allow only digits AND max value 500000
                            if (/^\d*$/.test(val)) {
                                const num = Number(val);
                                if (num <= 500000) {
                                    setLimit(val);
                                }
                            }
                        }}
                        leftSection={icon}
                        withAsterisk
                        mb="sm"
                        readOnly={step !== "form"}
                    />

                </Group>
                {dailyLimit !== null ? (
                    <Text size="xs" c="green">
                        Your transaction limit per day is Rs. {dailyLimit.toFixed(2)}
                    </Text>
                ) : (
                    <Text size="xs" c="red">
                        • No daily limit set for this user
                    </Text>
                )}
                {/* CAPTCHA */}
                <div style={{ marginTop: 5 }}>
                    <label
                        style={{ display: "block", marginBottom: 4, fontSize: "14px" }}
                    >
                        Enter CAPTCHA <span style={{ color: "red" }}>*</span>
                    </label>
                    <div
                        style={{
                            display: "flex",
                            alignItems: "center",
                            gap: 10,
                            marginBottom: 5,
                        }}
                    >
                        <div
                            style={{
                                fontSize: "18px",
                                letterSpacing: "3px",
                                background: "#f3f4f6",
                                padding: "6px 12px",
                                borderRadius: "6px",
                                border: "1px solid #d1d5db",
                                userSelect: "none",
                                textDecoration: "line-through",
                                fontFamily: "Verdana",
                            }}
                        >
                            {captcha}
                        </div>

                        <Button
                            size="xs"
                            variant="outline"
                            onClick={regenerateCaptcha}
                            style={{ height: 30, padding: "0 10px", lineHeight: "1" }}
                            disabled={step !== "form"}
                        >
                            Refresh
                        </Button>

                        <TextInput
                            placeholder="Enter above text"
                            value={captchaInput}
                            onChange={(e) => setCaptchaInput(e.currentTarget.value)}
                            withAsterisk
                            style={{ flexGrow: 1 }}
                            readOnly={step !== "form"}
                        />
                    </div>
                </div>

                <Group grow>
                    {step !== "form" && (
                        <Group gap="xs" align="flex-end">
                            <TextInput
                                label="OTP"
                                placeholder="Enter OTP"
                                value={otp}
                                maxLength={6}
                                onChange={(e) => setOtp(e.currentTarget.value)}
                                withAsterisk
                                disabled={otpValidated}
                                style={{ flex: 1 }}
                            />
                            {!otpValidated &&
                                (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>
                    )}
                </Group>
            </div>

            <Group mt="md" gap="sm">
                <Button onClick={handleSubmit}>
                    {step === "form" && "Submit"}
                    {step === "otp" && "Validate OTP"}
                    {step === "final" && "Set Limit"}
                </Button>
                <Button variant="outline" color="gray" onClick={resetForm}>
                    Reset
                </Button>
            </Group>

            <Text size="sm" style={{ marginTop: "40px" }}>
                <Text span c="red" fw={600}>
                    Note :{" "}
                </Text>
                <Text span>
                    Please enter your desired transaction limit. OTP verification is required to
                    confirm changes.
                </Text>
            </Text>
        </Paper>
    );
}