"use client";
import React, { useState, useEffect, memo, useRef } from "react";
import { Text, Button, TextInput, PasswordInput, Title, Card, Group, Flex, Box, Image, Anchor, Tooltip } from "@mantine/core";
import { notifications } from "@mantine/notifications";
import { Providers } from "@/app/providers";
import { useRouter } from "next/navigation";
import NextImage from "next/image";
import logo from '@/app/image/logo1.jpg';
import frontPage from '@/app/image/ib_front.jpg';
import dynamic from 'next/dynamic';
import { generateCaptcha } from '@/app/captcha';
import { IconShieldLockFilled } from "@tabler/icons-react";

export default function Login() {
    const router = useRouter();
    const [CIF, SetCIF] = useState("");
    const [psw, SetPsw] = useState("");
    const [captcha, setCaptcha] = useState("");
    const [inputCaptcha, setInputCaptcha] = useState("");
    const [isLogging, setIsLogging] = useState(false);
    const ClientCarousel = dynamic(() => import('./clientCarousel'), { ssr: false });
    const headerRef = useRef<HTMLHeadingElement>(null);

    useEffect(() => {
        const loadCaptcha = async () => {
            const newCaptcha = await generateCaptcha();
            setCaptcha(newCaptcha);
        };
        loadCaptcha();
    }, []);

    const regenerateCaptcha = () => {
        // setCaptcha(generateCaptcha());
        const loadCaptcha = async () => {
            const newCaptcha = await generateCaptcha();
            setCaptcha(newCaptcha);
        };
        loadCaptcha();
        setInputCaptcha("");
    };

    async function handleLogin(e: React.FormEvent) {
        e.preventDefault();
        const onlyDigit = /^\d{11}$/;
        if (!onlyDigit.test(CIF)) {
            // setError('Input value must be 11 digit');
            notifications.show({
                withBorder: true,
                color: "red",
                title: "Invalid UserId",
                message: "UserID must be 11 digit",
                autoClose: 5000,
            });
            return;
        }
        if (!inputCaptcha) {
            notifications.show({
                withBorder: true,
                color: "red",
                title: "Invalid Captcha",
                message: "Please fill the Captcha filed",
                autoClose: 5000,
            });
            return;
        }
        if (inputCaptcha !== captcha) {
            notifications.show({
                withBorder: true,
                color: "red",
                title: "Captcha Error",
                message: "Please enter the correct captcha",
                autoClose: 5000,
            });
            regenerateCaptcha();
            return;
        }
        if (!CIF || !psw) {
            notifications.show({
                withBorder: true,
                color: "red",
                title: "Invalid Input",
                message: "Please fill UserId and Password",
                autoClose: 5000,
            });
            return;
        }
        try {
            const response = await fetch('api/auth/login', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    customerNo: CIF,
                    password: psw,
                }),
            });
            if (!response.ok) {
                notifications.show({
                    withBorder: true,
                    color: "red",
                    title: "Error",
                    message: "Internal Server Error",
                    autoClose: 5000,
                });
                localStorage.removeItem("access_token");
                localStorage.removeItem("remitter_name");
                return;
            }
            const data = await response.json();
            console.log(data);
            setIsLogging(true);
            if (response.ok) {
                console.log(data);
                const token = data.token;
                localStorage.setItem("access_token", token);
                if (data.FirstTimeLogin === true) {
                    router.push("/SetPassword")
                }
                else {
                    router.push("/home");
                }

            }
            else {
                setIsLogging(false);
                notifications.show({
                    withBorder: true,
                    color: "red",
                    title: "Wrong User Id or Password",
                    message: "Wrong User Id or Password",
                    autoClose: 5000,
                });
            }
        }
        catch (error: any) {
            notifications.show({
                withBorder: true,
                color: "red",
                title: "Error",
                message: "Internal Server Error,Please try again Later",
                autoClose: 5000,
            });
            return;
        }
    }
    useEffect(() => {
        const headerData = [
            "THE KANGRA CENTRAL CO-OPERATIVE BANK LTD.",
            "कांगड़ा केन्द्रीय सहकारी बैंक सीमित",
        ];
        let index = 0;
        const interval = setInterval(() => {
            index = (index + 1) % headerData.length;
            if (headerRef.current) {
                headerRef.current.textContent = headerData[index];
            }
        }, 2000);
        return () => clearInterval(interval);
    }, []);

    return (
        <Providers>
            <div style={{ backgroundColor: "#f8f9fa", width: "100%", height: "auto", paddingTop: "5%" }}>
                {/* Header */}
                <Box
                    style={{
                        position: 'fixed', width: '100%', height: '12%', top: 0, left: 0, zIndex: 100,
                        display: "flex",
                        justifyContent: "flex-start",
                        background: "linear-gradient(15deg,rgba(10, 114, 40, 1) 55%, rgba(101, 101, 184, 1) 100%)",
                    }}>
                    <Image
                        src={logo}
                        component={NextImage}
                        fit="contain"
                        alt="ebanking"
                        style={{ width: "100%", height: "auto", flexShrink: 0 }}
                    />
                    <Title ref={headerRef}
                        order={2}
                        style={{
                            fontFamily: 'Roboto',
                            position: 'absolute',
                            top: '30%',
                            left: '7%',
                            color: 'White',
                            transition: "opacity 0.5s ease-in-out",
                        }}
                    >
                        THE KANGRA CENTRAL CO-OPERATIVE BANK LTD.
                    </Title>
                    <Text size="sm" c="white"
                        style={{
                            backgroundColor: '#1f1f14',
                            fontFamily: 'Roboto',
                            position: 'absolute',
                            top: '59%',
                            left: '72%',
                            color: 'white',
                            textShadow: '1px 1px 2px blue',
                        }}
                    >
                        Head Office : Dharmshala, District: Kangra(H.P), Pin: 176215
                    </Text>
                    {/* <Box style={{ position: "absolute", right: "1rem", top: "50%", transform: 'translateY(-50%)' }}>
                        <Tooltip
                            label='Head Office : Dharmshala, District: Kangra(H.P), Pin: 176215'
                            position="right"
                            withArrow>
                            <IconBuildingBank size={40} style={{ cursor: "pointer", color: "white" }} />
                        </Tooltip>
                    </Box> */}
                </Box>

                <div style={{ marginTop: '10px' }}>
                    {/* Movable text */}
                    <Box
                        style={{
                            width: "100%",
                            height: "0.5%",
                            overflow: "hidden",
                            whiteSpace: "nowrap",
                            padding: "8px 0",
                        }}
                    >
                        <Text
                            component="span"
                            style={{
                                display: "inline-block",
                                paddingLeft: "100%",
                                animation: "scroll-left 60s linear infinite",
                                fontWeight: "bold",
                                color: "#004d99",
                            }}
                        >
                            ⚠️ Always login to our Net Banking site directly or through Banks website.
                            ⚠️ Do not disclose your User Id and Password to any third party and keep Your User Id and Password strictly confidential.
                            ⚠️ KCC Bank never asks for User Id,Passwords and Pins through email or  phone.
                            ⚠️ Be ware of Phishing mails with links to fake bank&apos;s websites asking for personal information are in circulation.
                            ⚠️ Please DO NOT Click on the links given in the emails asking for personal details like bank account number, user ID and password.
                            ⚠️ If you had shared your User Id and Password through such mails or links, please change your Password immediately.
                            ⚠️ Inform the Bank/branch in which your account is maintained for resetting your password.
                        </Text>
                        <style>
                            {`
              @keyframes scroll-left {
                0% { transform: translateX(0%); }
                100% { transform: translateX(-100%); }
              }
            `}
                        </style>
                    </Box>
                    {/* Main */}
                    <div style={{
                        display: "flex", height: "75vh", overflow: "hidden", position: "relative",
                        // background: 'linear-gradient(to right, #02081eff, #0a3d91)'
                        background: 'linear-gradient(179deg,rgba(1, 13, 18, 1) 49%, rgba(77, 82, 79, 1) 87%)'
                    }}>
                        <div style={{ flex: 1, backgroundColor: "#c1e0f0", position: "relative" }}>
                            <Image
                                fit="cover"
                                src={frontPage}
                                component={NextImage}
                                alt="ebanking"
                                style={{ width: "100%", height: "100%" }}
                            />
                        </div>
                        <Box w={{ base: "100%", md: "45%" }} p="lg">
                            <Card shadow="md" padding="xl" radius="md" style={{ maxWidth: 550, margin: "0 auto", height: '68vh' }}>
                                <form onSubmit={handleLogin}>
                                    <TextInput
                                        label="User ID"
                                        placeholder="Enter your CIF No"
                                        value={CIF}
                                        onInput={(e) => {
                                            const input = e.currentTarget.value.replace(/\D/g, "");
                                            if (input.length <= 11) SetCIF(input);
                                        }}
                                        withAsterisk
                                    />
                                    <PasswordInput
                                        label="Password"
                                        placeholder="Enter your password"
                                        value={psw}
                                        onChange={(e) => SetPsw(e.currentTarget.value)}
                                        withAsterisk
                                        mt="sm"
                                    />
                                    <Box style={{ textAlign: "right" }}>
                                        <Anchor
                                            style={{ fontSize: "14px", color: "#1c7ed6", cursor: "pointer" }}
                                            onClick={() => router.push("/ValidateUser")}
                                        >
                                            Forgot Password?
                                        </Anchor>
                                    </Box>
                                    <Group mt="sm" align="center">
                                        <Box style={{ backgroundColor: "#fff", fontSize: "18px", textDecoration: "line-through", padding: "4px 8px", fontFamily: "cursive" }}>{captcha}</Box>
                                        <Button size="xs" variant="light" onClick={regenerateCaptcha}>Refresh</Button>
                                    </Group>
                                    <TextInput
                                        label="Enter CAPTCHA"
                                        placeholder="Enter above text"
                                        value={inputCaptcha}
                                        onChange={(e) => setInputCaptcha(e.currentTarget.value)}
                                        withAsterisk
                                        mt="sm"
                                    />
                                    <Button type="submit" fullWidth mt="md" disabled={isLogging}>
                                        {isLogging ? "Logging..." : "Login"}
                                    </Button>
                                </form>
                            </Card>
                        </Box>
                    </div>
                    {/* Carousel and Notes */}
                    <Flex direction={{ base: "column", md: "row" }} mt="md" px="md" py="sm" gap="sm">
                        <Box w={{ base: "100%", md: "85%" }}>
                            <ClientCarousel />
                        </Box>
                        <Box w={{ base: "100%", md: "25%" }} p="md" style={{ textAlign: "center", border: '1px solid #5c5c3d' }}>
                            <Title order={2}> <IconShieldLockFilled />Security Notes :</Title>
                            <Text mt="sm" size="md">When you Login, Your User Id and Password travels in an encrypted and highly secured mode.</Text>
                            <Text mt="sm" fs="italic">For more information on Products and Services, Please Visit</Text>
                            <Anchor href="http://www.kccb.in/"> http://www.kccb.in/</Anchor>
                        </Box>
                    </Flex>
                    {/* Footer */}
                    <Box
                        component="footer"
                        style={{
                            width: "100%",
                            textAlign: "center",
                            padding: "10px 0",
                            bottom: 0,
                            left: 0,
                            zIndex: 1000,
                            fontSize: "14px",
                        }}
                    >
                        <Text>
                            © 2025 KCC Bank. All rights reserved. |{" "}
                            <Anchor href="document/disclaimer.pdf" target="_blank" rel="noopener noreferrer">Disclaimer</Anchor> |{" "}
                            <Anchor href="document/privacy_policy.pdf" target="_blank" rel="noopener noreferrer">Privacy Policy</Anchor> |{" "}
                            <Anchor href="document/phishing.pdf" target="_blank" rel="noopener noreferrer">Phishing</Anchor> |{" "}
                            <Anchor href="document/security_tips.pdf" target="_blank" rel="noopener noreferrer">Security Tips</Anchor> |{" "}
                            <Anchor href="document/grievance.jpg" target="_blank" rel="noopener noreferrer">Grievances</Anchor>
                        </Text>
                    </Box>
                </div>
            </div>
        </Providers>
    );
}
