"use client";

import Link from "next/link";
import { cn } from "@/lib/utils";

const PEMANTAUAN = [
  {
    label: "Bulanan Ibu Hamil",
    href: "/admin/kesehatan/stunting/pemantauan/ibu-hamil",
  },
  {
    label: "Bulanan Anak 0-2 Tahun",
    href: "/admin/kesehatan/stunting/pemantauan/anak",
  },
  {
    label: "Sasaran Paud Anak 2-6 tahun",
    href: "/admin/kesehatan/stunting/pemantauan/paud",
  },
];

const REKAPITULASI = [
  {
    label: "Bulanan Ibu Hamil",
    href: "/admin/kesehatan/stunting/rekapitulasi?jenis=ibu-hamil",
  },
  {
    label: "Bulanan Anak 0-2 Tahun",
    href: "/admin/kesehatan/stunting/rekapitulasi?jenis=anak",
  },
  {
    label: "Bulanan Anak 2-6 Tahun",
    href: "/admin/kesehatan/stunting/rekapitulasi?jenis=paud",
  },
];

export function StuntingNav({ active }: { active?: string }) {
  return (
    <div className="space-y-3">
      <div className="flex flex-wrap gap-2">
        <NavLink href="/admin/kesehatan/stunting/kia" active={active === "kia"}>
          Kesehatan Ibu dan Anak (KIA)
        </NavLink>
        <NavLink
          href="/admin/kesehatan/stunting/rekapitulasi"
          active={active === "rekapitulasi"}
        >
          Rekapitulasi
        </NavLink>
        <NavLink
          href="/admin/kesehatan/stunting/scorecard"
          active={active === "scorecard"}
        >
          Scorecard Konvergensi
        </NavLink>
      </div>
      <div className="grid gap-3 sm:grid-cols-2">
        <div className="rounded-lg border p-3">
          <p className="mb-2 text-xs font-semibold uppercase tracking-wide text-muted-foreground">
            Pemantauan
          </p>
          <div className="flex flex-col gap-1.5 text-sm">
            {PEMANTAUAN.map((item) => (
              <Link
                key={item.href}
                href={item.href}
                className={cn(
                  "text-primary hover:underline",
                  active === item.href && "font-semibold",
                )}
              >
                {item.label}
              </Link>
            ))}
          </div>
        </div>
        <div className="rounded-lg border p-3">
          <p className="mb-2 text-xs font-semibold uppercase tracking-wide text-muted-foreground">
            Rekapitulasi
          </p>
          <div className="flex flex-col gap-1.5 text-sm">
            {REKAPITULASI.map((item) => (
              <Link
                key={item.href}
                href={item.href}
                className="text-primary hover:underline"
              >
                {item.label}
              </Link>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

function NavLink({
  href,
  active,
  children,
}: {
  href: string;
  active?: boolean;
  children: React.ReactNode;
}) {
  return (
    <Link
      href={href}
      className={cn(
        "rounded-md border px-3 py-1.5 text-sm font-medium transition-colors",
        active
          ? "border-primary bg-primary text-primary-foreground"
          : "bg-card hover:bg-muted",
      )}
    >
      {children}
    </Link>
  );
}