"use client";

import Link from "next/link";
import Image from "next/image";
import { usePathname } from "next/navigation";

import {
  NavigationMenu,
  NavigationMenuContent,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  NavigationMenuTrigger,
  navigationMenuTriggerStyle,
} from "@/components/ui/navigation-menu";

import { cn } from "@/lib/utils";

interface HeaderPrimary {
  label: string;
  path?: string;
  key: string;
  items?: Array<{
    label: string;
    path: string;
    description: string;
  }>;
}

const headerPrimary: Array<HeaderPrimary> = [
  {
    label: "Beranda",
    key: "beranda",
    path: "/",
  },
  {
    label: "Layanan",
    key: "layanan",
    items: [
      {
        label: "Home Care",
        path: "/layanan/home-care",
        description:
          "Layanan perawatan kesehatan yang diberikan di rumah pasien untuk mendukung pemulihan dan kenyamanan.",
      },
      {
        label: "Poli Gigi",
        path: "/layanan/poli-gigi",
        description:
          "Layanan kesehatan yang fokus pada perawatan dan pencegahan masalah gigi dan mulut.",
      },
      {
        label: "Poli KB",
        path: "/layanan/poli-kb",
        description:
          "Layanan kesehatan yang fokus pada keluarga berencana dan kesehatan reproduksi.",
      },
      {
        label: "Medical Check Up",
        path: "/layanan/mcu",
        description:
          "Layanan pemeriksaan kesehatan menyeluruh untuk menilai kondisi kesehatan secara umum dan mendeteksi potensi masalah kesehatan sejak dini.",
      },
      {
        label: "Poli Umum",
        path: "/layanan/poli-umum",
        description:
          "Layanan kesehatan dasar yang menyediakan pemeriksaan, diagnosis, dan pengobatan untuk berbagai kondisi medis umum.",
      },
      {
        label: "Poli KIA",
        path: "/layanan/poli-kia",
        description:
          "Layanan kesehatan yang fokus pada kesehatan ibu dan anak, termasuk pemeriksaan kehamilan, persalinan, dan perawatan anak.",
      },
      {
        label: "Hemodialisis",
        path: "/layanan/hemodialisis",
        description:
          "Layanan cuci darah untuk pasien dengan gangguan fungsi ginjal yang membutuhkan terapi pengganti ginjal.",
      },
      {
        label: "Laboratorium",
        path: "/layanan/laboratorium",
        description:
          "Layanan pemeriksaan laboratorium untuk mendukung diagnosis dan pemantauan kondisi kesehatan pasien.",
      },
    ],
  },
  {
    label: "Vaksinasi",
    key: "vaksinasi",
    items: [
      {
        label: "Vaksin Dewasa",
        path: "/vaksinasi?kategori=dewasa",
        description:
          "Layanan vaksinasi untuk melindungi orang dewasa dari berbagai penyakit menular.",
      },
      {
        label: "Vaksin Anak",
        path: "/vaksinasi?kategori=anak",
        description:
          "Layanan vaksinasi untuk melindungi anak-anak dari berbagai penyakit menular sesuai jadwal imunisasi.",
      },
      {
        label: "Vaksin Perjalanan",
        path: "/vaksinasi?kategori=perjalanan",
        description:
          "Layanan vaksinasi untuk melindungi wisatawan dari penyakit yang rentan di daerah tujuan perjalanan.",
      },
      {
        label: "Vaksin Penyakit Tertentu",
        path: "/vaksinasi?kategori=penyakit-tertentu",
        description:
          "Layanan vaksinasi untuk pencegahan penyakit tertentu berdasarkan kebutuhan medis.",
      },
      {
        label: "Vaksin HPV",
        path: "/vaksinasi?kategori=hpv",
        description:
          "Layanan vaksinasi HPV untuk pencegahan kanker serviks dan penyakit terkait HPV.",
      },
    ],
  },
  {
    label: "Dokter",
    key: "dokter",
    path: "/dokter",
  },
  {
    label: "Sunat Racing",
    key: "sunat-racing",
    path: "/sunat-racing",
  },
  {
    label: "Berita",
    key: "berita",
    path: "/berita",
  },
  {
    label: "Tentang Kami",
    key: "tentang-kami",
    path: "/tentang-kami",
  },
];

function ListItem({
  title,
  children,
  href,
  pathname,
  ...props
}: React.ComponentPropsWithoutRef<"li"> & { href: string; pathname: string }) {
  return (
    <li {...props}>
      <NavigationMenuLink
        className={cn(
          "group",
          pathname === href
            ? "bg-text-sub focus:bg-text-sub text-white hover:bg-text-sub"
            : "hover:bg-[#D9E4FF] hover:text-[#3466D4]",
        )}
        render={
          <Link href={href}>
            <div className="flex flex-col gap-1 text-sm">
              <div className="leading-none font-medium">{title}</div>
              <div
                className={cn(
                  "line-clamp-2 group-hover:text-[#3466D4]/80",
                  pathname === href
                    ? "text-white/60 group-hover:text-white/60"
                    : "text-muted-foreground",
                )}
              >
                {children}
              </div>
            </div>
          </Link>
        }
      />
    </li>
  );
}

const HeaderPrimary = () => {
  const pathname = usePathname();

  return (
    <header className="bg-background-custom p-3">
      <div className="max-w-7xl mx-auto flex justify-between">
        <Image
          src={"/assets/logo.png"}
          alt="Logo Klinik Adera"
          width={150}
          height={100}
          className="scale-75"
        />
        <NavigationMenu>
          <NavigationMenuList>
            {headerPrimary.map((item, idx) => {
              if (item.items) {
                return (
                  <NavigationMenuItem key={idx}>
                    <NavigationMenuTrigger
                      className={cn(
                        "bg-background-custom hover:bg-[#3F7BFF] hover:text-primary-foreground data-open:hover:bg-[#3F7BFF] data-open:focus:bg-[#3F7BFF] data-open:bg-[#3F7BFF] data-popup-open:bg-[#3F7BFF] data-popup-open:text-primary-foreground data-popup-open:hover:bg-[#3F7BFF] focus:bg-transparent focus:text-foreground rounded-full",
                        pathname !== "/" && pathname.startsWith(`/${item.key}`)
                          ? "bg-[#3F7BFF] text-primary-foreground"
                          : "",
                      )}
                    >
                      {item.label}
                    </NavigationMenuTrigger>
                    <NavigationMenuContent>
                      {item.items.length <= 3 && (
                        <ul className="w-96">
                          {item.items.map((sub, idx) => (
                            <ListItem
                              key={idx}
                              href={sub.path}
                              title={sub.label}
                              pathname={pathname}
                            >
                              {sub.description}
                            </ListItem>
                          ))}
                        </ul>
                      )}

                      {item.items.length > 3 && (
                        <ul className="grid w-100 gap-2 md:w-125 md:grid-cols-2 lg:w-150">
                          {item.items.map((sub, idx) => (
                            <ListItem
                              key={idx}
                              title={sub.label}
                              href={sub.path}
                              pathname={pathname}
                            >
                              {sub.description}
                            </ListItem>
                          ))}
                        </ul>
                      )}
                    </NavigationMenuContent>
                  </NavigationMenuItem>
                );
              }

              return (
                <NavigationMenuItem key={idx}>
                  <NavigationMenuLink
                    className={cn(
                      navigationMenuTriggerStyle(),
                      "bg-background-custom hover:bg-[#3F7BFF] hover:text-primary-foreground focus:bg-text-sub focus:text-white rounded-full",
                      pathname === item.path
                        ? "bg-[#3F7BFF] text-primary-foreground"
                        : "",
                    )}
                    render={<Link href={item.path ?? "#"}>{item.label}</Link>}
                  />
                </NavigationMenuItem>
              );
            })}
          </NavigationMenuList>
        </NavigationMenu>
      </div>
    </header>
  );
};

export default HeaderPrimary;