"use client";
import { Box, Burger, Button, Divider, Drawer, Stack, Text } from '@mantine/core';
import { usePathname } from 'next/navigation';
import Link from 'next/link';
import React, { useEffect, useState } from 'react';
import { useRouter } from "next/navigation";
import { useMediaQuery } from '@mantine/hooks';
import Image from "next/image";
import logo from "@/app/image/logo1.jpg";

export default function Layout({ children }: { children: React.ReactNode }) {
    const [authorized, SetAuthorized] = useState<boolean | null>(null);
    const router = useRouter();
    const pathname = usePathname();
    const isMobile = useMediaQuery("(max-width: 768px)");
    const [drawerOpened, setDrawerOpened] = useState(false);

    const links = [
        { label: "View Profile", href: "/settings" },
        { label: "Change Login Password", href: "/settings/change_login_password" },
        { label: "Change transaction Password", href: "/settings/change_txn_password" },
        { label: "Set transaction Password", href: "/settings/set_txn_password" },
        { label: "Set userId", href: "/settings/user_id" },
    ];
    useEffect(() => {
        const token = localStorage.getItem("access_token");
        if (!token) {
            SetAuthorized(false);
            router.push("/login");
        }
        else {
            SetAuthorized(true);
        }
    }, []);

    if (authorized) {
        return (
            <Box style={{ display: "flex", height: "100%", flexDirection: isMobile ? "column" : "row" }}>
                {/* Desktop Sidebar */}
                {!isMobile && (
                    <Box
                        style={{
                            width: "16%",
                            backgroundColor: "#c5e4f9",
                            borderRight: "1px solid #ccc",
                        }}
                    >
                        <Stack style={{ background: "#228be6", height: "10%", alignItems: "center" }}>
                            <Text fw={700} c="white" style={{ textAlign: "center", marginTop: "10px" }}>
                                Settings
                            </Text>
                        </Stack>

                        <Stack gap="sm" justify="flex-start" style={{ padding: "1rem" }}>
                            {links.map((link) => {
                                const isActive = pathname === link.href;
                                return (
                                    <Text
                                        key={link.href}
                                        component={Link}
                                        href={link.href}
                                        c={isActive ? "darkblue" : "blue"}
                                        style={{
                                            textDecoration: isActive ? "underline" : "none",
                                            fontWeight: isActive ? 600 : 400,
                                        }}
                                    >
                                        {link.label}
                                    </Text>
                                );
                            })}
                        </Stack>
                    </Box>
                )}

                {/* Mobile: Burger & Drawer */}
                {isMobile && (
                    <>
                        {/* Top header with burger and title */}
                        <Box
                            style={{
                                backgroundColor: "#228be6",
                                // padding: "0.5rem 1rem",
                                display: "flex",
                                alignItems: "center",
                                justifyContent: "space-between",
                            }}
                        >
                            <Burger
                                opened={drawerOpened}
                                onClick={() => setDrawerOpened(!drawerOpened)}
                                size="sm"
                                color="white"
                            />
                            <Text fw={500} c="white">
                                Settings
                            </Text>
                        </Box>

                        <Drawer
                            opened={drawerOpened}
                            onClose={() => setDrawerOpened(false)}
                            padding="md"
                            size="75%"
                            overlayProps={{ color: "black", opacity: 0.55, blur: 3 }}
                            styles={{
                                root: {
                                    backgroundColor: "#e6f5ff", // soft background for drawer
                                },
                            }}
                        >
                            {/* Logo and Drawer Header */}
                            <Box style={{ display: "flex", alignItems: "center", marginBottom: "1rem" }}>
                                <>
                                    <Image src={logo} alt="KCCB Logo" width={40} height={40} style={{ borderRadius: "50%" }} />
                                    <Text
                                        fw={700}
                                        ml="10px"
                                        style={{ fontSize: "18px", color: "#228be6" }}
                                    >
                                        Settings
                                    </Text>
                                </>
                            </Box>

                            {/* Menu Items */}
                            <Stack gap="sm">
                                {links.map((link) => {
                                    const isActive = pathname === link.href;

                                    return (
                                        <Button
                                            key={link.href}
                                            variant="subtle"
                                            component={Link}
                                            href={link.href}
                                            fullWidth
                                            style={{
                                                justifyContent: "flex-start",
                                                fontWeight: isActive ? 600 : 400,
                                                textDecoration: isActive ? "underline" : "none",
                                                color: isActive ? "#fff" : "#228be6",
                                                backgroundColor: isActive ? "#228be6" : "#dceeff",
                                                borderRadius: "8px",
                                                padding: "10px 12px",
                                                transition: "0.3s",
                                            }}
                                            onMouseEnter={(e) => {
                                                const target = e.currentTarget as unknown as HTMLElement;
                                                target.style.backgroundColor = "#228be6";
                                                target.style.color = "#fff";
                                            }}
                                            onMouseLeave={(e) => {
                                                const target = e.currentTarget as unknown as HTMLElement;
                                                target.style.backgroundColor = isActive ? "#228be6" : "#dceeff";
                                                target.style.color = isActive ? "#fff" : "#228be6";
                                            }}
                                            onClick={() => setDrawerOpened(false)}
                                        >
                                            {link.label}
                                        </Button>
                                    );
                                })}
                            </Stack>
                        </Drawer>
                    </>
                )}


                {/* Content Area */}
                <Box style={{ flex: 1, padding: isMobile ? "0.5rem" : "1rem", overflowY: "auto" }}>
                    {children}
                </Box>
            </Box>
        );
    }
}