"use client";
import React, { useEffect, useState } from 'react';
import { Anchor, Box, Button, Container, Divider, Group, Image, Modal, Popover, Stack, Switch, Text, Title, Grid } from '@mantine/core';
import { IconHome, IconLogout, IconMoon, IconSend, IconSettings, IconSun, IconUserCircle, IconUsers, IconWallet } from '@tabler/icons-react';
import Link from 'next/link';
import { useRouter, usePathname } from "next/navigation";
import { Providers } from '../providers';
import logo from '@/app/image/logo1.jpg';
import NextImage from 'next/image';
import { notifications } from '@mantine/notifications';
import { useDisclosure, useMediaQuery } from '@mantine/hooks';
import { fetchAndStoreUserName } from '../_util/userdetails';
import styles from './page.module.css';

export default function RootLayout({ children }: { children: React.ReactNode }) {
    const router = useRouter();
    const pathname = usePathname();
    const [authorized, SetAuthorized] = useState<boolean | null>(null);
    const [userLastLoginDetails, setUserLastLoginDetails] = useState(null);
    const [custname, setCustname] = useState<string | null>(null);
    const isMobile = useMediaQuery("(max-width: 768px)");
    const [sessionModal, setSessionModal] = useState(false);
    const [countdown, setCountdown] = useState(30); // 30 sec countdown before auto logout
    const [darkMode, setDarkMode] = useState(false);
    const firstName = custname ? custname.split(" ")[0] : "";
    const [userOpened, setUserOpened] = useState(false); // Manage dropdown visibility

    const [opened, { open, close }] = useDisclosure(false);

    function doLogout() {
        localStorage.removeItem("access_token");
        sessionStorage.removeItem("access_token");
        localStorage.removeItem("remitter_name");
        localStorage.removeItem("pswExpiryDate");
        localStorage.clear();
        sessionStorage.clear();
        router.push("/login");
    }

    async function handleLogout(e: React.FormEvent) {
        e.preventDefault();
        doLogout()
        router.push("/login");
    }
    // Toggle Dark/Light Mode
    const toggleDarkMode = () => {
        setDarkMode((prevMode) => !prevMode);
    };

    // When reload and click on back then logout
    useEffect(() => {
        // Push fake history state to trap navigation
        window.history.pushState(null, "", window.location.href);
        const handlePopState = () => {
            doLogout(); // logout when back/forward pressed
        };
        const handleBeforeUnload = (e: BeforeUnloadEvent) => {
            // logout on tab close / refresh
            localStorage.removeItem("access_token");
            sessionStorage.removeItem("access_token");
            localStorage.clear();
            sessionStorage.clear();
        };
        window.addEventListener("popstate", handlePopState);
        window.addEventListener("beforeunload", handleBeforeUnload);
        return () => {
            window.removeEventListener("popstate", handlePopState);
            window.addEventListener("beforeunload", handleBeforeUnload);
        };
    }, []);

    useEffect(() => {
        const token = localStorage.getItem("access_token");
        if (!token) {
            SetAuthorized(false);
            router.push("/login");
        }
        else {
            SetAuthorized(true);
            fetchAndStoreUserName(token).then(() => {
                const name = localStorage.getItem("remitter_name");
                if (name) setCustname(name);
            });
        }
    }, []);

    async function handleFetchUserDetails(e: React.FormEvent) {
        e.preventDefault();
        const token = localStorage.getItem("access_token");
        const response = await fetch('/api/auth/user_details', {
            method: 'GET',
            headers: {
                'Content-Type': 'application/json',
                "X-Login-Type": "IB",
                'Authorization': `Bearer ${token}`
            },
        });
        const data = await response.json();
        if (response.ok) {
            return data;
        }
        else if (response.status === 401 || data.message === 'invalid or expired token') {
            // console.log(data);
            localStorage.removeItem("access_token");
            localStorage.clear();
            sessionStorage.clear();
            router.push('/login');
        }
        else {
            notifications.show({
                withBorder: true,
                color: "red",
                title: "Please try again later",
                message: "Unable to fetch timestamp, please try again later",
                autoClose: 5000,
            });
        }
    }

    useEffect(() => {
        const fetchLoginTime = async () => {
            const result = await handleFetchUserDetails({ preventDefault: () => { } } as React.FormEvent);
            if (result) {
                setUserLastLoginDetails(result.last_login);
            }
        };
        fetchLoginTime();
    }, []);

    // LOGOUT AFTER 5 MINUTES OF INACTIVITY OR TAB SWITCH
    useEffect(() => {
        const INACTIVITY_LIMIT = 5 * 60 * 1000; // 5 minutes
        let inactiveSince: number | null = null;
        let countdownTimer: NodeJS.Timeout;

        const startCountdown = () => {
            setSessionModal(true);
            setCountdown(30); // start from 30 seconds

            countdownTimer = setInterval(() => {
                setCountdown((prev) => {
                    if (prev <= 1) {
                        clearInterval(countdownTimer);
                        doLogout(); // auto logout after countdown
                        return 0;
                    }
                    return prev - 1;
                });
            }, 1000);
        };

        const handleVisibilityChange = () => {
            if (document.hidden) {
                // User switched tab → mark inactive time
                inactiveSince = Date.now();
            } else {
                // User returned to tab
                if (inactiveSince && Date.now() - inactiveSince >= INACTIVITY_LIMIT) {
                    // Inactive for ≥ 5 min → show modal
                    startCountdown();
                }
                inactiveSince = null; // reset inactiveSince
            }
        };

        const handleUserActivity = () => {
            // Reset inactivity timestamp if user interacts
            inactiveSince = null;
        };

        const activityEvents = ["mousemove", "keydown", "click", "scroll", "touchstart"];
        activityEvents.forEach((event) => window.addEventListener(event, handleUserActivity));
        document.addEventListener("visibilitychange", handleVisibilityChange);

        return () => {
            activityEvents.forEach((event) => window.removeEventListener(event, handleUserActivity));
            document.removeEventListener("visibilitychange", handleVisibilityChange);
            clearInterval(countdownTimer);
        };
    }, []);

    const navItems = [
        { href: "/home", label: "Home", icon: IconHome },
        { href: "/accounts", label: "Accounts", icon: IconWallet },
        { href: "/funds_transfer", label: "Fund Transfer", icon: IconSend },
        { href: "/beneficiary", label: "Beneficiaries", icon: IconUsers },
        { href: "/settings", label: "Settings", icon: IconSettings },
    ];

    if (authorized) {
        return (
            <html lang="en">
                <body>
                    <Providers>
                        <Box style={{ minHeight: "100%", display: "flex", flexDirection: "column" }}>

                            {/* HEADER */}
                            <Box
                                component="header"
                                className={styles.header}
                                style={{
                                    width: "100%",
                                    padding: isMobile ? "0.6rem 1rem" : "0.8rem 2rem",
                                    background: darkMode
                                        ? "linear-gradient(15deg, rgba(229, 101, 22, 1) 55%, rgba(28, 28, 30, 1) 100%)"
                                        : "linear-gradient(15deg, rgba(10, 114, 40, 1) 55%, rgba(101, 101, 184, 1) 100%)",
                                    alignItems: "center",
                                    justifyContent: "space-between",
                                    color: "white",
                                    boxShadow: "0 2px 6px rgba(0,0,0,0.15)",
                                    position: "sticky",
                                    top: 0,
                                    zIndex: 200,      // ↑ Increased for stability
                                }}
                            >
                                <Group gap="md" wrap="nowrap">
                                    <Image
                                        src={logo}
                                        component={NextImage}
                                        fit="contain"
                                        alt="ebanking"
                                        style={{
                                            width: isMobile ? "40px" : "60px",
                                            height: "auto",
                                        }}
                                    />

                                    <div>
                                        <Title
                                            order={isMobile ? 4 : 3}
                                            style={{
                                                fontFamily: "Roboto",
                                                color: "white",
                                                marginBottom: 2,
                                                fontSize: isMobile ? "14px" : "22px",
                                                lineHeight: 1.2,
                                            }}
                                        >
                                            THE KANGRA CENTRAL CO-OPERATIVE BANK LTD.
                                        </Title>

                                        {!isMobile && (
                                            <Text size="xs" c="white" style={{ opacity: 0.85 }}>
                                                Head Office: Dharmshala, District Kangra (H.P), Pin: 176215
                                            </Text>
                                        )}
                                    </div>
                                </Group>

                                {/* USER BUTTON */}
                                <Popover
                                    opened={userOpened}
                                    onChange={setUserOpened}
                                    position="bottom-end"
                                    withArrow
                                    shadow="md"
                                >
                                    <Popover.Target>
                                        <Button
                                            leftSection={<IconUserCircle size={isMobile ? 18 : 22} />}
                                            variant="subtle"
                                            onClick={() => setUserOpened((prev) => !prev)}
                                            color='white'
                                            style={{
                                                fontWeight: 500,
                                                padding: isMobile ? "4px 8px" : "6px 12px",
                                                fontSize: isMobile ? "12px" : "14px",
                                            }}
                                        >
                                            Welcome, {firstName}
                                        </Button>
                                    </Popover.Target>

                                    <Popover.Dropdown style={{ minWidth: 230, padding: 15 }}>
                                        <Stack gap="xs">
                                            <Box>
                                                <Text size="sm" fw={700}>{custname}</Text>
                                                <Text size="xs" c="dimmed">Full Name</Text>
                                            </Box>

                                            <Box>
                                                <Text size="sm">
                                                    {userLastLoginDetails
                                                        ? new Date(userLastLoginDetails).toLocaleString()
                                                        : "N/A"}
                                                </Text>
                                                <Text size="xs" c="dimmed">Last Login</Text>
                                            </Box>

                                            <Divider />

                                            <Button
                                                leftSection={<IconLogout size={18} />}
                                                onClick={handleLogout}
                                            >
                                                Logout
                                            </Button>
                                        </Stack>
                                    </Popover.Dropdown>
                                </Popover>
                            </Box>

                            {/* NAVBAR — desktop unchanged, mobile scrollable */}
                            <Group
                                style={{
                                    background: "#c8eeacff",
                                    boxShadow: "0 6px 6px rgba(0,0,0,0.06)",
                                    position: "sticky",
                                    top: isMobile ? 60 : 85,
                                    zIndex: 150,

                                    /* MOBILE FIX make it scrollable */
                                    overflowX: isMobile ? "auto" : "visible",
                                    whiteSpace: isMobile ? "nowrap" : "normal",
                                    padding: isMobile ? "6px 4px" : "0.05rem",
                                }}
                            >
                                {navItems.map((item) => {
                                    const isActive = pathname.startsWith(item.href);
                                    const Icon = item.icon;

                                    return (
                                        <Link key={item.href} href={item.href} style={{ textDecoration: "none" }}>
                                            <Group
                                                gap={8}
                                                style={{
                                                    padding: isMobile ? "10px 14px" : "14px 16px",
                                                    // borderRadius: isMobile ? 6 : 8,
                                                    width: "100%",
                                                    transition: "0.2s ease",
                                                    background: isActive ? "rgba(50, 159, 81, 1)" : "transparent",
                                                    color: isActive ? "white" : "#3b3b3b",
                                                    fontWeight: isActive ? 600 : 500,
                                                }}
                                            >
                                                <Icon
                                                    size={isMobile ? 16 : 18}
                                                    color={isActive ? "white" : "#3b3b3b"}
                                                />
                                                <Text size={isMobile ? "xs" : "sm"} fw={500}>
                                                    {item.label}
                                                </Text>
                                            </Group>
                                        </Link>
                                    );
                                })}
                            </Group>

                            {/* CONTENT */}
                            <Box
                                style={{
                                    flex: 1,
                                    backgroundColor: "#f5f7fa",
                                    padding: isMobile ? "0.8rem" : "1.5rem",
                                }}
                            >
                                <Box
                                    style={{
                                        margin: "0 auto",
                                        background: "white",
                                        padding: isMobile ? "1rem" : "1.8rem",
                                        borderRadius: "12px",
                                        boxShadow: "0 4px 12px rgba(0,0,0,0.08)",
                                        minHeight: "75vh",
                                    }}
                                >
                                    {children}
                                </Box>
                            </Box>

                            {/* this model for session logout  */}
                            <Modal
                                opened={sessionModal}
                                onClose={() => setSessionModal(false)}
                                withCloseButton={false}
                                centered
                                closeOnClickOutside={false} // <--- prevents clicking outside to close
                                closeOnEscape={false}       // <--- prevents ESC key
                                title="Session Timeout Warning"
                            >
                                <Stack align="center" gap="md">
                                    <Text ta="center" c="red">
                                        You have been inactive for a while.
                                        <br />
                                        You’ll be logged out automatically in <b>{countdown}</b> seconds.
                                    </Text>
                                    <Group justify="center" mt="sm">
                                        {/* <Button color="gray" variant="default" onClick={() => setSessionModal(false)}>
                                            Stay Logged In
                                        </Button> */}
                                        <Button color="red" onClick={doLogout}>
                                            Logout Now
                                        </Button>
                                    </Group>
                                </Stack>
                            </Modal>

                            {/* FOOTER (desktop same, mobile stacked) */}
                            <Box
                                component="footer"
                                style={{
                                    backgroundColor: "rgba(60, 54, 74, 1)",
                                    paddingTop: "2rem",
                                    paddingBottom: "2rem",
                                    color: "white",
                                }}
                            >
                                <Container size="xl">
                                    <Grid gutter="xl">

                                        <Grid.Col span={{ base: 12, md: 4 }}>
                                            <Group mb="md">
                                                <Box
                                                    style={{
                                                        width: 40,
                                                        height: 40,
                                                        background: 'linear-gradient(135deg, #16a34a 0%, #10b981 100%)',
                                                        borderRadius: '50%',
                                                        overflow: 'hidden',
                                                    }}
                                                >
                                                    <Image
                                                        src={logo}
                                                        component={NextImage}
                                                        fit="cover"
                                                        alt="ebanking"
                                                        style={{
                                                            width: "100%",
                                                            height: "100%",
                                                            borderRadius: "50%",
                                                        }}
                                                    />
                                                </Box>

                                                <div>
                                                    <Text size="sm" fw={500}>The Kangra Central</Text>
                                                    <Text size="sm" fw={500}>Co-operative Bank Ltd</Text>
                                                </div>
                                            </Group>
                                            <Text size="sm" c="dimmed">
                                                Serving the community since inception.
                                            </Text>
                                        </Grid.Col>

                                        <Grid.Col span={{ base: 12, md: 4 }}>
                                            <Text size="sm" fw={500} mb="md">Quick Links</Text>
                                            <Stack gap="xs">
                                                <Anchor
                                                    href="https://kccbhp.bank.in/about-us/history-of-kccb/"
                                                    size="sm"
                                                    c="dimmed"
                                                    target="_blank"
                                                    rel="noopener noreferrer"
                                                >
                                                    About Us
                                                </Anchor>
                                                <Anchor
                                                    href="https://kccbhp.bank.in/products/service-products/service-charges/"
                                                    size="sm"
                                                    c="dimmed"
                                                    target="_blank"
                                                    rel="noopener noreferrer"
                                                >
                                                    Products & Services
                                                </Anchor>
                                                <Anchor
                                                    href="/CustomerCare"
                                                    size="sm"
                                                    c="dimmed"
                                                    target="_blank"
                                                    rel="noopener noreferrer"
                                                >
                                                    Help & Support
                                                </Anchor>
                                            </Stack>
                                        </Grid.Col>

                                        <Grid.Col span={{ base: 12, md: 4 }}>
                                            <Text size="sm" fw={500} mb="md">Contact Us</Text>
                                            <Stack gap="xs">
                                                <Text size="sm" c="dimmed">Phone: +91-1800-1808008 </Text>
                                                <Text size="sm" c="dimmed">Mon–Sat 10 AM – 5 PM</Text>
                                                <Text size="sm" c="dimmed">(The Second and fourth Saturdays are holidays)</Text>
                                            </Stack>
                                        </Grid.Col>

                                    </Grid>

                                    <Text
                                        size="sm"
                                        c="dimmed"
                                        ta="center"
                                        style={{ borderTop: "1px solid rgba(255,255,255,0.2)", marginTop: 20, paddingTop: 20 }}
                                    >
                                        © 2025 The Kangra Central Co-operative Bank Ltd. All rights reserved.
                                    </Text>
                                </Container>
                            </Box>

                        </Box>
                    </Providers>
                </body>
            </html>
        );

    }
}
