"use client";

import React, { Dispatch, SetStateAction, useState, useEffect } from "react";
import Image from "next/image";
import { Icon } from "@iconify/react";
import Link from "next/link";
import DashboardContainer from "../main/dashboard/dashboard-container";
import { usePathname } from "next/navigation";
import { useTheme } from "../layout/theme-context";
import { AnimatePresence, motion } from "framer-motion";
import Option from "./option";

interface RetractingSidebarProps {
  sidebarData: boolean;
  updateSidebarData: (newData: boolean) => void;
}

const getSidebarByRole = (role: string) => {
  if (role === "Admin") {
    return [
      {
        title: "Dashboard",
        items: [
          {
            title: "Dashboard",
            icon: () => (
              <Icon icon="material-symbols:dashboard" className="text-lg" />
            ),
            link: "/admin/dashboard",
          },
        ],
      },
    ];
  }

  if (role === "Approver" || role === "Kontributor") {
    return [
      {
        title: "Dashboard",
        items: [
          {
            title: "Dashboard",
            icon: () => (
              <Icon icon="material-symbols:dashboard" className="text-lg" />
            ),
            link: "/admin/dashboard",
          },
        ],
      },
      {
        title: "Content Management",
        items: [
          {
            title: "Articles",
            icon: () => <Icon icon="ri:article-line" className="text-lg" />,
            link: "/admin/article",
          },
        ],
      },
    ];
  }

  // fallback kalau role tidak dikenal
  return [];
};

export const RetractingSidebar = ({
  sidebarData,
  updateSidebarData,
}: RetractingSidebarProps) => {
  const pathname = usePathname();
  const [mounted, setMounted] = useState(false);

  useEffect(() => {
    setMounted(true);
  }, []);

  if (!mounted) {
    return null;
  }

  return (
    <>
      {/* DESKTOP SIDEBAR */}
      <AnimatePresence mode="wait">
        <motion.nav
          key="desktop-sidebar"
          layout
          className="hidden md:flex sticky top-0 h-screen shrink-0 bg-gradient-to-b from-slate-50 to-white dark:from-slate-800 dark:to-slate-900 border-r border-slate-200/60 dark:border-slate-700/60 shadow-lg backdrop-blur-sm flex-col justify-between"
          style={{
            width: sidebarData ? "280px" : "80px",
          }}
          initial={{ opacity: 0, x: -20 }}
          animate={{ opacity: 1, x: 0 }}
          exit={{ opacity: 0, x: -20 }}
          transition={{ duration: 0.3 }}
        >
          <SidebarContent
            open={sidebarData}
            pathname={pathname}
            updateSidebarData={updateSidebarData}
          />
        </motion.nav>
      </AnimatePresence>

      {/* Desktop Toggle Button - appears when sidebar is collapsed */}
      <AnimatePresence>
        {!sidebarData && (
          <motion.button
            key="desktop-toggle"
            initial={{ opacity: 0, scale: 0.8 }}
            animate={{ opacity: 1, scale: 1 }}
            exit={{ opacity: 0, scale: 0.8 }}
            className="hidden md:flex fixed top-4 left-20 z-40 p-3 bg-white rounded-xl shadow-lg border border-slate-200/60 hover:shadow-xl transition-all duration-200 hover:bg-slate-50"
            onClick={() => updateSidebarData(true)}
          >
            <Icon
              icon="heroicons:chevron-right"
              className="w-5 h-5 text-slate-600"
            />
          </motion.button>
        )}
      </AnimatePresence>

      {/* Mobile Toggle Button */}
      <AnimatePresence>
        {!sidebarData && (
          <motion.button
            key="mobile-toggle"
            initial={{ opacity: 0, scale: 0 }}
            animate={{ opacity: 1, scale: 1 }}
            exit={{ opacity: 0, scale: 0 }}
            className="md:hidden fixed top-4 left-4 z-50 p-3 bg-white dark:bg-slate-800 rounded-xl shadow-lg border border-slate-200/60 dark:border-slate-700/60 hover:shadow-xl transition-all duration-200"
            onClick={() => updateSidebarData(true)}
          >
            <Icon
              icon="heroicons:chevron-right"
              className="w-6 h-6 text-slate-600"
            />
          </motion.button>
        )}
      </AnimatePresence>

      {/* MOBILE SIDEBAR */}
      <AnimatePresence>
        {sidebarData && (
          <motion.div
            key="mobile-sidebar"
            initial={{ x: "-100%" }}
            animate={{ x: 0 }}
            exit={{ x: "-100%" }}
            transition={{ type: "tween", duration: 0.3 }}
            className="fixed top-0 left-0 z-50 w-[280px] h-full bg-gradient-to-b from-slate-50 to-white dark:from-slate-800 dark:to-slate-900 p-4 flex flex-col md:hidden shadow-2xl backdrop-blur-sm"
          >
            {/* <button onClick={() => updateSidebarData(false)} className="mb-4 self-end text-zinc-500">
              ✕
            </button> */}
            <SidebarContent
              open={true}
              pathname={pathname}
              updateSidebarData={updateSidebarData}
            />
          </motion.div>
        )}
      </AnimatePresence>
    </>
  );
};

const SidebarContent = ({
  open,
  pathname,
  updateSidebarData,
}: {
  open: boolean;
  pathname: string;
  updateSidebarData: (newData: boolean) => void;
}) => {
  const { theme, toggleTheme } = useTheme();

  const [username, setUsername] = useState<string>("Guest");
  const [roleName, setRoleName] = useState<string>("");

  useEffect(() => {
    const getCookie = (name: string) => {
      const match = document.cookie.match(
        new RegExp("(^| )" + name + "=([^;]+)"),
      );
      return match ? decodeURIComponent(match[2]) : null;
    };

    const cookieUsername = getCookie("username");
    const cookieRole = getCookie("roleName"); // pastikan nama cookie sesuai

    if (cookieUsername) {
      setUsername(cookieUsername);
    }

    if (cookieRole) {
      setRoleName(cookieRole);
    }
  }, []);

  const sidebarSections = getSidebarByRole(roleName);

  return (
    <div className="flex flex-col h-full">
      {/* SCROLLABLE TOP SECTION */}
      <div className="flex-1 overflow-y-auto">
        {/* HEADER SECTION */}
        <div className="flex flex-col space-y-6">
          {/* Logo and Toggle */}
          <div className="flex items-center justify-between px-4 py-6">
            <Link href="/" className="flex items-center space-x-3">
              <div className="relative">
                <img
                  src="/arah-negeri.png"
                  className="w-10 h-10 rounded-lg shadow-sm"
                />
                <div className="absolute -inset-1 bg-gradient-to-r from-blue-500 to-purple-500 rounded-lg opacity-20 blur-sm"></div>
              </div>
              {open && (
                <motion.div
                  initial={{ opacity: 0, x: -10 }}
                  animate={{ opacity: 1, x: 0 }}
                  transition={{ delay: 0.1 }}
                  className="flex flex-col"
                >
                  <span className="text-lg font-bold bg-gradient-to-r from-slate-800 to-slate-600 bg-clip-text text-transparent">
                    Arah Negeri
                  </span>
                  <span className="text-xs text-slate-500">Admin Panel</span>
                </motion.div>
              )}
            </Link>

            {open && (
              <motion.button
                initial={{ opacity: 0, scale: 0.8 }}
                animate={{ opacity: 1, scale: 1 }}
                transition={{ delay: 0.2 }}
                className="p-2 rounded-lg hover:bg-slate-100 transition-colors duration-200 group"
                onClick={() => updateSidebarData(false)}
              >
                <Icon
                  icon="heroicons:chevron-left"
                  className="w-5 h-5 text-slate-500 group-hover:text-slate-700 transition-colors"
                />
              </motion.button>
            )}
          </div>

          {/* Navigation Sections */}
          <div className="space-y-3 px-3 pb-6">
            {sidebarSections.map((section, sectionIndex) => (
              <motion.div
                key={section.title}
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ delay: 0.1 + sectionIndex * 0.1 }}
                className="space-y-3"
              >
                {open && (
                  <motion.h3
                    initial={{ opacity: 0 }}
                    animate={{ opacity: 1 }}
                    transition={{ delay: 0.2 + sectionIndex * 0.1 }}
                    className="text-xs font-semibold text-slate-500 uppercase tracking-wider px-3"
                  >
                    {section.title}
                  </motion.h3>
                )}
                <div className="space-y-2">
                  {section.items.map((item, itemIndex) => (
                    <Link href={item.link} key={item.title}>
                      <Option
                        Icon={item.icon}
                        title={item.title}
                        active={pathname === item.link}
                        open={open}
                      />
                    </Link>
                  ))}
                </div>
              </motion.div>
            ))}
          </div>
        </div>
      </div>

      {/* FIXED BOTTOM SECTION */}
      <div className="flex-shrink-0 space-y-1 border-t border-slate-200/60 dark:border-slate-700/60 bg-white/50 dark:bg-slate-800/50 backdrop-blur-sm">
        {/* Divider */}
        {/* <div className="px-3 pb-2">
          <div className="h-px bg-gradient-to-r from-transparent via-slate-300 to-transparent"></div>
        </div> */}

        {/* Theme Toggle */}
        <div className="px-3 pt-1">
          <motion.button
            onClick={toggleTheme}
            className={`relative flex h-12 w-full items-center rounded-xl transition-all duration-200 cursor-pointer group ${
              open ? "px-3" : "justify-center"
            } ${
              theme === "dark"
                ? "bg-gradient-to-r from-emerald-500 to-green-500 text-white shadow-lg shadow-emerald-500/25"
                : "text-slate-600 hover:bg-gradient-to-r hover:from-slate-100 hover:to-slate-200/50 hover:text-slate-800 dark:text-slate-300 dark:hover:bg-slate-700/50"
            }`}
            whileHover={{ scale: 1.02 }}
            whileTap={{ scale: 0.98 }}
          >
            <motion.div
              className={`h-full flex items-center justify-center ${
                open ? "w-12" : "w-full"
              }`}
            >
              <div
                className={`text-lg transition-all duration-200 ${
                  theme === "dark"
                    ? "text-white"
                    : "text-slate-500 group-hover:text-slate-700 dark:text-slate-400 dark:group-hover:text-slate-200"
                }`}
              >
                {theme === "dark" ? (
                  <Icon icon="solar:sun-bold" className="text-lg" />
                ) : (
                  <Icon icon="solar:moon-bold" className="text-lg" />
                )}
              </div>
            </motion.div>

            {open && (
              <motion.span
                initial={{ opacity: 0, x: -10 }}
                animate={{ opacity: 1, x: 0 }}
                transition={{ delay: 0.1, duration: 0.2 }}
                className={`text-sm font-medium transition-colors duration-200 ${
                  theme === "dark"
                    ? "text-white"
                    : "text-slate-700 dark:text-slate-300"
                }`}
              >
                {theme === "dark" ? "Light Mode" : "Dark Mode"}
              </motion.span>
            )}
          </motion.button>
        </div>

        {/* Settings */}
        <div className="px-3">
          <Link href="/settings">
            <Option
              Icon={() => (
                <Icon icon="lets-icons:setting-fill" className="text-lg" />
              )}
              title="Settings"
              active={pathname === "/settings"}
              open={open}
            />
          </Link>
        </div>

        {/* User Profile */}
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ delay: 0.4 }}
          className="px-3 py-3 border-t border-slate-200/60"
        >
          <div
            className={`${
              open
                ? "flex items-center space-x-3"
                : "flex items-center justify-center"
            } p-3 rounded-xl bg-gradient-to-r from-slate-50 to-slate-100/50 hover:from-slate-100 hover:to-slate-200/50 transition-all duration-200 cursor-pointer group`}
          >
            <div className="relative">
              <div className="w-10 h-10 rounded-full bg-gradient-to-r from-blue-500 to-purple-500 flex items-center justify-center text-white font-semibold text-sm shadow-lg">
                A
              </div>
              <div className="absolute -bottom-1 -right-1 w-4 h-4 bg-green-500 rounded-full border-2 border-white"></div>
            </div>
            {open && (
              <motion.div
                initial={{ opacity: 0, x: -10 }}
                animate={{ opacity: 1, x: 0 }}
                transition={{ delay: 0.5 }}
                className="flex-1 min-w-0"
              >
                <p className="text-sm font-medium text-slate-800 truncate">
                  {username}
                </p>
                <Link href="/auth">
                  <p className="text-xs text-slate-500 hover:text-blue-600 transition-colors duration-200">
                    Sign out
                  </p>
                </Link>
              </motion.div>
            )}
          </div>
        </motion.div>

        {/* Expand Button for Collapsed State */}
        {/* {!open && (
          <motion.div
            initial={{ opacity: 0, scale: 0.8 }}
            animate={{ opacity: 1, scale: 1 }}
            transition={{ delay: 0.6 }}
            className="px-3 pt-2"
          >
            <button
              onClick={() => updateSidebarData(true)}
              className="w-full p-3 rounded-xl bg-gradient-to-r from-blue-500 to-purple-500 hover:from-blue-600 hover:to-purple-600 text-white shadow-lg transition-all duration-200 hover:shadow-xl group"
            >
              <div className="flex items-center justify-center">
                <Icon 
                  icon="heroicons:chevron-right" 
                  className="w-5 h-5 group-hover:scale-110 transition-transform duration-200" 
                />
              </div>
            </button>
          </motion.div>
        )} */}
      </div>
    </div>
  );
};