"use client";

import React, { Dispatch, SetStateAction, useState } 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 Option from "./option";
import { motion } from "framer-motion";

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

const sidebarSections = [
  {
    title: "DashBoard",
    items: [
      {
        title: "Dashboard",
        icon: () => (
          <Icon icon="material-symbols:dashboard" className="text-lg" />
        ),
        link: "/admin/dashboard",
      },
    ],
  },
  {
    title: "Apps",
    items: [
      {
        title: "Artikel",
        icon: () => <Icon icon="ri:article-line" className="text-lg" />,
        link: "/admin/article",
      },
      {
        title: "Kategori",
        icon: () => <Icon icon="famicons:list-outline" className="text-lg" />,
        link: "/admin/master-category",
      },
      // {
      //   title: "Majalah",
      //   icon: () => <Icon icon="emojione-monotone:newspaper" className="text-lg" />,
      //   link: "/admin/magazine",
      // },
      {
        title: "Advertise",
        icon: () => <Icon icon="ic:round-ads-click" className="text-lg" />,
        link: "/admin/advertise",
      },
      // {
      //   title: "Komentar",
      //   icon: () => <Icon icon="material-symbols:comment-outline-rounded" className="text-lg" />,
      //   link: "/admin/komentar",
      // },
    ],
  },
  {
    title: "Master",
    items: [
      {
        title: "Master Static Page",
        icon: () => <Icon icon="fluent-mdl2:page-solid" className="text-lg" />,
        link: "/admin/static-page",
      },
      {
        title: "Master User",
        icon: () => <Icon icon="ph:users-three-fill" className="text-lg" />,
        link: "/admin/master-user",
      },
    ],
  },
];

export const RetractingSidebar = ({
  sidebarData,
  updateSidebarData,
}: RetractingSidebarProps) => {
  const pathname = usePathname();

  return (
    <>
      {/* DESKTOP SIDEBAR */}
      <motion.nav
        layout
        className="hidden md:flex sticky top-0 h-screen shrink-0 border-r border-slate-300 bg-white p-1 flex-col justify-between"
        style={{
          width: sidebarData ? "160px" : "90px",
        }}
      >
        <SidebarContent
          open={sidebarData}
          pathname={pathname}
          updateSidebarData={updateSidebarData}
        />
      </motion.nav>

      {/* MOBILE SIDEBAR */}
      {sidebarData && (
        <motion.div
          initial={{ x: "-100%" }}
          animate={{ x: 0 }}
          exit={{ x: "-100%" }}
          transition={{ type: "tween" }}
          className="fixed top-0 left-0 z-50 w-[250px] h-full bg-white p-4 flex flex-col md:hidden shadow-lg"
        >
          {/* <button onClick={() => updateSidebarData(false)} className="mb-4 self-end text-zinc-500">
            ✕
          </button> */}
          <SidebarContent
            open={true}
            pathname={pathname}
            updateSidebarData={updateSidebarData}
          />
        </motion.div>
      )}
    </>
  );
};

const SidebarContent = ({
  open,
  pathname,
  updateSidebarData,
}: {
  open: boolean;
  pathname: string;
  updateSidebarData: (newData: boolean) => void;
}) => {
  return (
    <>
      {/* BAGIAN ATAS */}
      <div>
        {!open && (
          <div className="w-full flex justify-center items-center">
            <button
              className="w-5 h-5 text-zinc-400 border border-zinc-400 rounded-full flex justify-center items-center"
              onClick={() => updateSidebarData(true)}
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="24"
                height="24"
                viewBox="0 0 24 24"
              >
                <path
                  fill="none"
                  stroke="currentColor"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth="2.5"
                  d="m10 17l5-5m0 0l-5-5"
                />
              </svg>
            </button>
          </div>
        )}

        <div
          className={`flex ${
            open ? "justify-between" : "justify-center"
          } w-full items-center px-2`}
        >
          <Link href="/" className="flex flex-row items-center gap-3 font-bold">
            <img src="/mikul.png" className="w-20" />
          </Link>
          {/* {open && (
            <button className="w-5 h-5 text-zinc-400 border border-zinc-400 rounded-full flex justify-center items-center" onClick={() => updateSidebarData(false)}>
              ✕
            </button>
          )} */}
          {open && (
            <button
              className="w-5 h-5 text-zinc-400 border border-zinc-400 rounded-full flex justify-center items-center"
              onClick={() => updateSidebarData(false)}
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="24"
                height="24"
                viewBox="0 0 24 24"
              >
                <path
                  fill="none"
                  stroke="currentColor"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth="2.5"
                  d="m14 7l-5 5m0 0l5 5"
                />
              </svg>
            </button>
          )}
        </div>

        <div className="space-y-1">
          {sidebarSections.map((section) => (
            <div key={section.title}>
              <p className="font-bold text-[14px] py-2">{section.title}</p>
              {section.items.map((item) => (
                <Link href={item.link} key={item.title}>
                  <Option
                    Icon={item.icon}
                    title={item.title}
                    active={pathname === item.link}
                    open={open}
                  />
                </Link>
              ))}
            </div>
          ))}
        </div>
      </div>

      {/* BAGIAN BAWAH */}
      <div className="space-y-1">
        <Option
          Icon={() => <Icon icon="solar:moon-bold" className="text-lg" />}
          title="Theme"
          active={false}
          open={open}
        />
        <Link href="/settings">
          <Option
            Icon={() => (
              <Icon icon="lets-icons:setting-fill" className="text-lg" />
            )}
            title="Settings"
            active={pathname === "/settings"}
            open={open}
          />
        </Link>
        <div className="flex flex-row gap-2">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="34"
            height="34"
            viewBox="0 0 24 24"
          >
            <g fill="none" stroke="currentColor" strokeWidth="1.5">
              <circle cx="12" cy="6" r="4" />
              <path d="M20 17.5c0 2.485 0 4.5-8 4.5s-8-2.015-8-4.5S7.582 13 12 13s8 2.015 8 4.5Z" />
            </g>
          </svg>
          <div className="flex flex-col gap-0.5 text-xs">
            <p>admin-mabes</p>
            <Link href={"/auth"}>
              <p className="underline">Logout</p>
            </Link>
          </div>
        </div>
      </div>
    </>
  );
};

const Sidebar = () => {
  const [open, setOpen] = useState(true);
  const pathname = usePathname();

  return (
    <motion.nav
      layout
      className="sticky top-0 h-screen shrink-0 border-r border-slate-300 bg-white p-1 hidden md:flex flex-col justify-between"
      style={{
        width: open ? "120px" : "90px",
      }}
    >
      {/* BAGIAN ATAS */}
      <div>
        {!open && (
          <div className="w-full flex justify-center items-center">
            <button
              className="w-5 h-5 text-zinc-400 border border-zinc-400 rounded-full flex justify-center items-center"
              onClick={() => setOpen(true)}
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="24"
                height="24"
                viewBox="0 0 24 24"
              >
                <path
                  fill="none"
                  stroke="currentColor"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth="2.5"
                  d="m10 17l5-5m0 0l-5-5"
                />
              </svg>
            </button>
          </div>
        )}

        <div
          className={`flex ${
            open ? "justify-between" : "justify-center"
          } w-full items-center px-2`}
        >
          <Link href="/" className="flex flex-row items-center gap-3 font-bold">
            <img src="/assets/icon/Logo.png" className="w-20" />
          </Link>
          {open && (
            <button
              className="w-5 h-5 text-zinc-400 border border-zinc-400 rounded-full flex justify-center items-center"
              onClick={() => setOpen(false)}
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="24"
                height="24"
                viewBox="0 0 24 24"
              >
                <path
                  fill="none"
                  stroke="currentColor"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth="2.5"
                  d="m14 7l-5 5m0 0l5 5"
                />
              </svg>
            </button>
          )}
        </div>

        <div className="space-y-1">
          {sidebarSections.map((section) => (
            <div key={section.title}>
              <p className="font-bold text-[14px] py-2">{section.title}</p>
              {section.items.map((item) => (
                <Link href={item.link} key={item.title}>
                  <Option
                    Icon={item.icon}
                    title={item.title}
                    active={pathname === item.link}
                    open={open}
                  />
                </Link>
              ))}
            </div>
          ))}
        </div>
      </div>

      {/* BAGIAN BAWAH */}
      <div className="space-y-1">
        <Option
          Icon={() => <Icon icon="solar:moon-bold" className="text-lg" />}
          title="Theme"
          active={false}
          open={open}
        />
        <Link href="/settings">
          <Option
            Icon={() => (
              <Icon icon="lets-icons:setting-fill" className="text-lg" />
            )}
            title="Settings"
            active={pathname === "/settings"}
            open={open}
          />
        </Link>{" "}
        <div className="flex flex-row gap-2">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="34"
            height="34"
            viewBox="0 0 24 24"
          >
            <g fill="none" stroke="currentColor" strokeWidth="1.5">
              <circle cx="12" cy="6" r="4" />
              <path d="M20 17.5c0 2.485 0 4.5-8 4.5s-8-2.015-8-4.5S7.582 13 12 13s8 2.015 8 4.5Z" />
            </g>
          </svg>
          <div className="flex flex-col gap-0.5 text-xs">
            <p>admin-mabes</p>
            <p className="underline">Logout</p>
          </div>
        </div>
      </div>
    </motion.nav>
  );
};

export default Sidebar;

const TitleSection = ({ open }: { open: boolean }) => {
  return (
    <div className="flex cursor-pointer items-center justify-between rounded-md transition-colors hover:bg-slate-100">
      <div className="flex items-center">
        <motion.div
          layout
          initial={{ opacity: 0, y: 12, scale: 0.5 }}
          animate={
            open
              ? { opacity: 1, y: 0, scale: 1 }
              : { opacity: 1, y: 0, scale: 0.5 }
          }
          transition={{ delay: 0.125 }}
        >
          <Image
            src="/assets/icon/Logo.png"
            alt="logo"
            width={1920}
            height={1080}
            className="w-full h-fit"
          />
        </motion.div>
      </div>
      {/* {open && <FiChevronDown className="mr-2" />} */}
    </div>
  );
};

const ToggleClose = ({
  open,
  setOpen,
}: {
  open: boolean;
  setOpen: Dispatch<SetStateAction<boolean>>;
}) => {
  return (
    <motion.button layout onClick={() => setOpen((pv) => !pv)}>
      <div className="flex justify-center items-center pt-2">
        <motion.div layout className="grid size-10 text-lg">
          {/* <FiChevronsRight
            className={`transition-transform  ${open && "rotate-180"}`}
          /> */}
        </motion.div>
        {/* {open && (
          <motion.span layout initial={{ opacity: 0, y: 12 }} animate={{ opacity: 1, y: 0 }} transition={{ delay: 0.125 }} className="text-xs font-medium">
            Hide
          </motion.span>
        )} */}
      </div>
    </motion.button>
  );
};

const ExampleContent = () => (
  <div>
    <DashboardContainer />
  </div>
);