"use client";

import {
    Box,
    Stack,
    Text,
    SegmentedControl,
    ScrollArea,
    Burger,
    Drawer,
    Button,
} from "@mantine/core";

import Link from "next/link";
import { usePathname, useRouter } from "next/navigation";
import React, { useEffect, useState } from "react";
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);

    /* Beneficiary Options */
    const links = [
        { label: "View Beneficiary", href: "/beneficiary" },
        { label: "Add Beneficiary", href: "/beneficiary/add_beneficiary" },
    ];

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

    if (!authorized) return null;

    return (
        <Box style={{ display: "flex", height: "100%", flexDirection: "column" }}>

            {/* ---------------- DESKTOP HEADER ---------------- */}
            {!isMobile && (
                <>
                    {/* Segmented Tabs */}
                    <Box mb="1rem">
                        <ScrollArea type="never" offsetScrollbars>
                            <SegmentedControl
                                fullWidth
                                value={pathname}
                                onChange={(value) => router.push(value)}
                                data={links.map((link) => ({
                                    label: link.label,
                                    value: link.href,
                                }))}
                                styles={{
                                    root: {
                                        backgroundColor: "#e9ecef",
                                        borderRadius: 999,
                                        padding: 4,
                                    },
                                    control: {
                                        borderRadius: 999,
                                        transition: "0.3s",
                                    },

                                    indicator: {
                                        borderRadius: 999,
                                        background: "linear-gradient(90deg, #02a355 0%, #5483c9ff 100%)",
                                        boxShadow: "0 3px 8px rgba(0,0,0,0.15)",
                                    },

                                    label: {
                                        fontSize: 13,
                                        padding: "6px 10px",
                                        textAlign: "center",
                                        fontWeight: 600,
                                        color: "#000",
                                    },
                                }}
                            />
                        </ScrollArea>
                    </Box>
                </>
            )}

            {/* ---------------- MOBILE HEADER ---------------- */}
            {isMobile && (
                <>
                    <Box
                        style={{
                            backgroundColor: "#228be6",
                            padding: "0.8rem 1rem",
                            display: "flex",
                            alignItems: "center",
                            justifyContent: "space-between",
                        }}
                    >
                        <Burger
                            opened={drawerOpened}
                            onClick={() => setDrawerOpened(true)}
                            size="sm"
                            color="white"
                        />
                        <Text fw={600} c="white">
                            Beneficiary
                        </Text>
                    </Box>

                    {/* Drawer for Mobile */}
                    <Drawer
                        opened={drawerOpened}
                        onClose={() => setDrawerOpened(false)}
                        padding="md"
                        size="75%"
                        overlayProps={{ color: "black", opacity: 0.55, blur: 3 }}
                    >
                        {/* 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={{ color: "#228be6", fontSize: "18px" }}>
                                Beneficiary
                            </Text>
                        </Box>

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

                                return (
                                    <Button
                                        key={link.href}
                                        component={Link}
                                        href={link.href}
                                        fullWidth
                                        variant="light"
                                        style={{
                                            justifyContent: "flex-start",
                                            backgroundColor: isActive ? "#228be6" : "#e2efff",
                                            color: isActive ? "#fff" : "#1b69c7",
                                            fontWeight: isActive ? 600 : 400,
                                            borderRadius: 10,
                                            padding: "10px",
                                        }}
                                        onClick={() => setDrawerOpened(false)}
                                    >
                                        {link.label}
                                    </Button>
                                );
                            })}
                        </Stack>
                    </Drawer>
                </>
            )}

            {/* ---------------- CONTENT BODY ---------------- */}
            <Box
                style={{
                    flex: 1,
                    padding: isMobile ? "0.8rem" : "1rem",
                    overflowY: "auto",
                }}
            >
                {children}
            </Box>
        </Box >
    );
}