"use client";

import { useState } from "react";
import {
  Menu,
  X,
  Home,
  ChevronDown,
  Video,
  Music,
  Image as ImageIcon,
  FileText,
} from "lucide-react";
import Link from "next/link";

export default function FloatingMenuNews() {
  const [open, setOpen] = useState(false);
  const [openKonten, setOpenKonten] = useState(false);

  return (
    <>
      {/* FLOATING BUTTON */}
      <button
        onClick={() => setOpen(true)}
        className="fixed right-6 top-6 z-[100] flex h-12 w-12 items-center justify-center rounded-md bg-[#966314] text-white shadow-lg"
      >
        <Menu />
      </button>

      {/* OVERLAY */}
      {open && (
        <div
          onClick={() => setOpen(false)}
          className="fixed inset-0 z-[90] bg-black/40"
        />
      )}

      {/* SIDEBAR */}
      <aside
        className={`fixed right-0 top-0 z-[110] h-full w-[280px] bg-[#8a5a0c] text-white transition-transform duration-300 ${
          open ? "translate-x-0" : "translate-x-full"
        }`}
      >
        {/* HEADER */}
        <div className="flex items-center justify-between border-b border-white/20 p-6">
          <div className="flex rounded-full bg-white text-sm font-semibold text-[#8a5a0c]">
            <button className="rounded-full bg-white px-3 py-1">ID</button>
            <button className="px-3 py-1">EN</button>
          </div>

          <button onClick={() => setOpen(false)}>
            <X />
          </button>
        </div>

        {/* MENU */}
        <nav className="flex flex-col text-base font-medium">
          {/* HOME */}
          <Link href="/news-services">
            <div className="flex items-center justify-between border-b border-white/20 px-6 py-5 hover:bg-white/10 transition">
              <span>Home</span>
              <Home size={20} />
            </div>
          </Link>

          {/* KONTEN */}
          <div>
            <button
              onClick={() => setOpenKonten(!openKonten)}
              className="flex w-full items-center justify-between border-b border-white/20 px-6 py-5 hover:bg-white/10 transition"
            >
              <span>Konten</span>
              <ChevronDown
                size={20}
                className={`transition-transform duration-300 ${
                  openKonten ? "rotate-180" : ""
                }`}
              />
            </button>

            {/* SUBMENU */}
            <div
              className={`overflow-hidden bg-[#a8772a] transition-all duration-300 ${
                openKonten ? "max-h-60" : "max-h-0"
              }`}
            >
              <Link href={"/video/filter"}>
                <SubMenuItem icon={<Video size={18} />} label="Audio Visual" />
              </Link>
              <Link href={"/audio/filter"}>
                <SubMenuItem icon={<Music size={18} />} label="Audio" />
              </Link>
              <Link href={"/image/filter"}>
                <SubMenuItem icon={<ImageIcon size={18} />} label="Foto" />
              </Link>
              <Link href={"/document/filter"}>
                <SubMenuItem icon={<FileText size={18} />} label="Teks" />
              </Link>
            </div>
          </div>
        </nav>
      </aside>
    </>
  );
}

/* ================= SUBMENU ================= */

function SubMenuItem({
  icon,
  label,
}: {
  icon: React.ReactNode;
  label: string;
}) {
  return (
    <div className="flex items-center justify-between px-8 py-4 text-sm hover:bg-white/20 transition cursor-pointer">
      <span>{label}</span>
      {icon}
    </div>
  );
}