'use client'

import colors from "@/con/colors";
import { authStore } from "@/store/authStore";
import {
  ActionIcon,
  AppShell,
  AppShellHeader,
  AppShellMain,
  AppShellNavbar,
  Burger,
  Center,
  Flex,
  Group,
  Image,
  Loader,
  NavLink,
  ScrollArea,
  Text,
  Tooltip,
  rem
} from "@mantine/core";
import { useDisclosure } from "@mantine/hooks";
import {
  IconChevronLeft,
  IconChevronRight,
  IconLogout2
} from "@tabler/icons-react";
import _ from "lodash";
import Link from "next/link";
import { useRouter, useSelectedLayoutSegments } from "next/navigation";
import { useEffect, useState } from "react";
import { useSnapshot } from "valtio";
import { getNavbar } from "./(dashboard)/user&role/_com/dynamicNavbar";

export default function Layout({ children }: { children: React.ReactNode }) {
 const [opened, { toggle }] = useDisclosure();
  const [loading, setLoading] = useState(true);
  const [desktopOpened, { toggle: toggleDesktop }] = useDisclosure(true);
  const router = useRouter();
  const segments = useSelectedLayoutSegments().map((s) => _.lowerCase(s));

  const { user } = useSnapshot(authStore);

  console.log("Current user in store:", user);

 useEffect(() => {
    if (authStore.user) {
      setLoading(false);
      return;
    }

    const fetchUser = async () => {
      try {
        const res = await fetch('/api/auth/me');
        const data = await res.json();

        if (data.user) {
          const menuRes = await fetch(`/api/admin/user-menu-access?userId=${data.user.id}`);
          const menuData = await menuRes.json();

          // ✅ Clone ke array mutable
          const menuIds = menuData.success && Array.isArray(menuData.menuIds)
            ? [...menuData.menuIds] // Converts readonly array to mutable
            : null;

          authStore.setUser({
            id: data.user.id,
            name: data.user.name,
            roleId: Number(data.user.roleId),
            menuIds,
          });
        } else {
          authStore.setUser(null);
          router.replace('/login');
        }
      } catch (error) {
        console.error('Gagal memuat data pengguna:', error);
        authStore.setUser(null);
        router.replace('/login');
      } finally {
        setLoading(false);
      }
    };

    fetchUser();
  }, [router]);

  if (loading) {
    return (
      <AppShell>
        <AppShellMain>
          <Center h="100vh">
            <Loader />
          </Center>
        </AppShellMain>
      </AppShell>
    );
  }

  // ✅ Ambil menu berdasarkan roleId
  const currentNav = authStore.user
    ? getNavbar({ roleId: authStore.user.roleId, menuIds: authStore.user.menuIds })
    : [];

  const handleLogout = () => {
    authStore.setUser(null);
    document.cookie = `${process.env.BASE_SESSION_KEY}=; Max-Age=0; path=/;`;
    router.push('/login');
  };

  return (
    <AppShell
      suppressHydrationWarning
      header={{ height: 64 }}
      navbar={{
        width: { base: 260, sm: 280, lg: 300 },
        breakpoint: 'sm',
        collapsed: {
          mobile: !opened,
          desktop: !desktopOpened,
        },
      }}
      padding="md"
    >
      <AppShellHeader
        style={{
          background: "linear-gradient(90deg, #ffffff, #f9fbff)",
          borderBottom: `1px solid ${colors["blue-button"]}20`,
          padding: '0 16px',
        }}
        px={{ base: 'sm', sm: 'md' }}
        py={{ base: 'xs', sm: 'sm' }}
      >
        <Group w="100%" h="100%" justify="space-between" wrap="nowrap">
          <Flex align="center" gap="sm">
            <Image
              src="/assets/images/darmasaba-icon.png"
              alt="Logo Darmasaba"
              w={{ base: 32, sm: 40 }}
              h={{ base: 32, sm: 40 }}
              radius="md"
              loading="lazy"
              style={{
                minWidth: '32px',
                height: 'auto',
              }}
            />
            <Text
              fw={700}
              c={colors["blue-button"]}
              fz={{ base: 'md', sm: 'xl' }}
            >
              Admin Darmasaba
            </Text>
          </Flex>

          <Group gap="xs">
            {!desktopOpened && (
              <Tooltip label="Buka Navigasi" position="bottom" withArrow>
                <ActionIcon
                  variant="light"
                  radius="xl"
                  size="lg"
                  onClick={toggleDesktop}
                  color={colors["blue-button"]}
                >
                  <IconChevronRight />
                </ActionIcon>
              </Tooltip>
            )}

            <Burger
              opened={opened}
              onClick={toggle}
              hiddenFrom="sm"
              size="md"
              color={colors["blue-button"]}
              mr="xs"
            />

            <Tooltip label="Kembali ke Website Desa" position="bottom" withArrow>
              <ActionIcon
                onClick={() => {
                  router.push("/darmasaba");
                }}
                color={colors["blue-button"]}
                radius="xl"
                size="lg"
                variant="gradient"
                gradient={{ from: colors["blue-button"], to: "#228be6" }}
              >
                <Image
                  src="/assets/images/darmasaba-icon.png"
                  alt="Logo Darmasaba"
                  w={20}
                  h={20}
                  radius="md"
                  loading="lazy"
                  style={{
                    minWidth: '20px',
                    height: 'auto',
                  }}
                />
              </ActionIcon>
            </Tooltip>
            <Tooltip label="Keluar" position="bottom" withArrow>
              <ActionIcon
                onClick={handleLogout}
                color={colors["blue-button"]}
                radius="xl"
                size="lg"
                variant="gradient"
                gradient={{ from: colors["blue-button"], to: "#228be6" }}
              >
                <IconLogout2 size={22} />
              </ActionIcon>
            </Tooltip>
          </Group>
        </Group>
      </AppShellHeader>

      <AppShellNavbar
        component={ScrollArea}
        style={{
          background: "#ffffff",
          borderRight: `1px solid ${colors["blue-button"]}20`,
        }}
        p={{ base: 'xs', sm: 'sm' }}
      >
        <AppShell.Section p="sm">
          {currentNav.map((v, k) => {
            const isParentActive = segments.includes(_.lowerCase(v.name));

            return (
              <NavLink
                key={k}
                defaultOpened={isParentActive}
                c={isParentActive ? colors["blue-button"] : "gray"}
                label={
                  <Text fw={isParentActive ? 600 : 400} fz="sm">
                    {v.name}
                  </Text>
                }
                style={{
                  borderRadius: rem(10),
                  marginBottom: rem(4),
                  transition: "background 150ms ease",
                }}
                styles={{
                  root: {
                    '&:hover': {
                      backgroundColor: 'rgba(25, 113, 194, 0.05)',
                    },
                  },
                }}
                variant="light"
                active={isParentActive}
              >
                {v.children.map((child, key) => {
                  const isChildActive = segments.includes(
                    _.lowerCase(child.name)
                  );

                  return (
                    <NavLink
                      key={key}
                      href={child.path}
                      c={isChildActive ? colors["blue-button"] : "gray"}
                      label={
                        <Text fw={isChildActive ? 600 : 400} fz="sm">
                          {child.name}
                        </Text>
                      }
                      styles={{
                        root: {
                          borderRadius: rem(8),
                          marginBottom: rem(2),
                          transition: 'background 150ms ease',
                          padding: '6px 12px',
                          '&:hover': {
                            backgroundColor: isChildActive ? 'rgba(25, 113, 194, 0.15)' : 'rgba(25, 113, 194, 0.05)',
                          },
                          ...(isChildActive && {
                            backgroundColor: 'rgba(25, 113, 194, 0.1)',
                          }),
                        },
                      }}
                      active={isChildActive}
                      component={Link}
                    />
                  );
                })}
              </NavLink>
            );
          })}
        </AppShell.Section>

        <AppShell.Section py="md">
          <Group justify="end" pr="sm">
            <Tooltip
              label={desktopOpened ? "Tutup Navigasi" : "Buka Navigasi"}
              position="top"
              withArrow
            >
              <ActionIcon
                variant="light"
                radius="xl"
                size="lg"
                onClick={toggleDesktop}
                color={colors["blue-button"]}
              >
                <IconChevronLeft />
              </ActionIcon>
            </Tooltip>
          </Group>
        </AppShell.Section>
      </AppShellNavbar>

      <AppShellMain
        style={{
          background: "linear-gradient(180deg, #fdfdfd, #f6f9fc)",
          minHeight: "100vh",
        }}
      >
        {children}
      </AppShellMain>
    </AppShell>
  );
}
