"use client";

import React, { useState, useEffect, useCallback } from "react";
import Link from "next/link";
import { usePathname, useRouter, useSearchParams } from "next/navigation";
import { ChevronDown, Circle } from "lucide-react";
import { NavigationItem, NavigationSubItem } from "@/types/navigation";
import { cn } from "@/lib/utils";

interface NavItemProps {
  item: NavigationItem;
  collapsed?: boolean;
  onItemClick?: () => void;
}

interface SubNavItemProps {
  child: NavigationSubItem;
  pathname: string;
  isSubmenuActive: (item: NavigationSubItem) => boolean;
  prefetchRoute: (href: string) => void;
  onItemClick?: () => void;
}

const SubNavItem: React.FC<SubNavItemProps> = ({
  child,
  pathname,
  isSubmenuActive,
  prefetchRoute,
  onItemClick,
}) => {
  const hasSubChildren = Boolean(child.children && child.children.length > 0);
  const isAnySubChildActive = hasSubChildren
    ? child.children!.some((sub) => isSubmenuActive(sub))
    : false;

  const [isSubExpanded, setIsSubExpanded] = useState<boolean>(isAnySubChildActive);

  useEffect(() => {
    if (isAnySubChildActive) {
      setIsSubExpanded(true);
    }
  }, [isAnySubChildActive]);

  const ChildIcon = child.icon;

  if (hasSubChildren) {
    return (
      <div className="space-y-1">
        {/* Child Level 2 Dropdown Button (Ruang) */}
        <button
          type="button"
          onClick={() => setIsSubExpanded(!isSubExpanded)}
          onMouseEnter={() => {
            if (child.children) {
              child.children.forEach((sc) => prefetchRoute(sc.href));
            }
          }}
          className={cn(
            "group w-full flex items-center justify-between gap-2 px-3 py-1.5 rounded-lg text-xs font-medium transition-all duration-150 select-none text-left",
            isAnySubChildActive
              ? "text-blue-300 font-semibold bg-white/10 shadow-xs"
              : "text-slate-300 hover:text-white hover:bg-white/10"
          )}
        >
          <div className="flex items-center gap-2 min-w-0 flex-1">
            {ChildIcon ? (
              <ChildIcon
                className={cn(
                  "w-3.5 h-3.5 shrink-0 transition-transform duration-150 group-hover:scale-105",
                  isAnySubChildActive ? "text-blue-400" : "text-slate-400 group-hover:text-white"
                )}
              />
            ) : (
              <Circle
                className={cn(
                  "w-1.5 h-1.5 shrink-0",
                  isAnySubChildActive ? "fill-blue-400 text-blue-400" : "fill-slate-400 text-slate-400"
                )}
              />
            )}
            <span className="truncate">{child.title}</span>
          </div>

          <div className="flex items-center gap-1.5 shrink-0">
            {child.statusLabel && (
              <span className="text-[9px] px-1.5 py-0.5 rounded font-normal uppercase tracking-wider bg-slate-700/60 text-slate-400">
                {child.statusLabel}
              </span>
            )}
            <ChevronDown
              className={cn(
                "w-3 h-3 text-slate-400 transition-transform duration-200",
                isSubExpanded ? "rotate-180 text-white" : ""
              )}
            />
          </div>
        </button>

        {/* Sub-Child Level 3 List (Lantai 1, 2, 3) */}
        {isSubExpanded && (
          <div className="pl-3.5 pr-1 py-1 space-y-1 border-l border-white/10 ml-4 animate-in slide-in-from-top-1 duration-150">
            {child.children!.map((subChild) => {
              const isSubChildActive = isSubmenuActive(subChild);
              const SubChildIcon = subChild.icon;

              return (
                <Link
                  key={subChild.id}
                  href={subChild.href}
                  prefetch={true}
                  onMouseEnter={() => prefetchRoute(subChild.href)}
                  onFocus={() => prefetchRoute(subChild.href)}
                  onClick={() => {
                    if (onItemClick) onItemClick();
                  }}
                  className={cn(
                    "group flex items-center justify-between gap-2 px-2.5 py-1.5 rounded-lg text-xs font-medium transition-all duration-150",
                    isSubChildActive
                      ? "bg-blue-600 text-white shadow-sm font-semibold"
                      : "text-slate-300 hover:text-white hover:bg-white/10"
                  )}
                >
                  <div className="flex items-center gap-2 min-w-0 flex-1">
                    {SubChildIcon ? (
                      <SubChildIcon
                        className={cn(
                          "w-3 h-3 shrink-0",
                          isSubChildActive
                            ? "text-white"
                            : "text-slate-400 group-hover:text-white"
                        )}
                      />
                    ) : (
                      <Circle
                        className={cn(
                          "w-1.5 h-1.5 shrink-0",
                          isSubChildActive
                            ? "fill-white text-white"
                            : "fill-slate-400 text-slate-400"
                        )}
                      />
                    )}
                    <span className="truncate">{subChild.title}</span>
                  </div>

                  {subChild.statusLabel && (
                    <span
                      className={cn(
                        "text-[9px] px-1.5 py-0.5 rounded font-normal shrink-0 uppercase tracking-wider",
                        isSubChildActive
                          ? "bg-white/20 text-white"
                          : "bg-slate-700/60 text-slate-400"
                      )}
                    >
                      {subChild.statusLabel}
                    </span>
                  )}
                </Link>
              );
            })}
          </div>
        )}
      </div>
    );
  }

  // Normal Child Level 2 Link (without nested children)
  const isChildActive = isSubmenuActive(child);
  return (
    <Link
      key={child.id}
      href={child.href}
      prefetch={true}
      onMouseEnter={() => prefetchRoute(child.href)}
      onFocus={() => prefetchRoute(child.href)}
      onClick={() => {
        if (onItemClick) onItemClick();
      }}
      className={cn(
        "group flex items-center justify-between gap-2 px-3 py-1.5 rounded-lg text-xs font-medium transition-all duration-150",
        isChildActive
          ? "bg-blue-600 text-white shadow-sm font-semibold"
          : "text-slate-300 hover:text-white hover:bg-white/10"
      )}
    >
      <div className="flex items-center gap-2 min-w-0 flex-1">
        {ChildIcon ? (
          <ChildIcon
            className={cn(
              "w-3.5 h-3.5 shrink-0",
              isChildActive
                ? "text-white"
                : "text-slate-400 group-hover:text-white"
            )}
          />
        ) : (
          <Circle
            className={cn(
              "w-1.5 h-1.5 shrink-0",
              isChildActive ? "fill-white text-white" : "fill-slate-400 text-slate-400"
            )}
          />
        )}
        <span className="truncate">{child.title}</span>
      </div>

      {child.statusLabel && (
        <span
          className={cn(
            "text-[9px] px-1.5 py-0.5 rounded font-normal shrink-0 uppercase tracking-wider",
            isChildActive
              ? "bg-white/20 text-white"
              : child.status === "in_development"
              ? "bg-amber-500/20 text-amber-300 border border-amber-500/30"
              : "bg-slate-700/60 text-slate-400"
          )}
        >
          {child.statusLabel}
        </span>
      )}
    </Link>
  );
};

const NavItemComponent: React.FC<NavItemProps> = ({
  item,
  collapsed = false,
  onItemClick,
}) => {
  const pathname = usePathname();
  const router = useRouter();
  const searchParams = useSearchParams();
  const activeTabInQuery = searchParams?.get("tab") || null;

  const prefetchRoute = useCallback(
    (href: string) => {
      if (href && href.startsWith("/")) {
        try {
          router.prefetch(href);
        } catch {
          // ignore prefetch errors
        }
      }
    },
    [router]
  );

  // Helper untuk mengecek kecocokan link dengan URL & Query Params (Menu Utama / Standalone)
  const isUrlActive = (href: string): boolean => {
    try {
      if (href.includes("?")) {
        const [targetPath, targetQuery] = href.split("?");
        if (pathname !== targetPath) return false;
        const targetParams = new URLSearchParams(targetQuery);
        const targetTab = targetParams.get("tab");
        // Hanya aktif jika targetTab sama persis dengan tab yang sedang aktif di query URL
        return Boolean(targetTab && activeTabInQuery && targetTab === activeTabInQuery);
      }
      if (href === "/") {
        return pathname === "/";
      }

      // Khusus rute portal: jika sedang ada tab aktif di query (?tab=...), jangan highlight root portal tanpa query
      if ((href === "/portal-siswa" || href === "/portal-ortu") && activeTabInQuery) {
        return false;
      }
      if (href === "/portal-siswa" || href === "/portal-ortu") {
        return pathname === href && !activeTabInQuery;
      }

      return pathname === href || pathname.startsWith(`${href}/`);
    } catch {
      return false;
    }
  };

  const hasChildren = Boolean(item.children && item.children.length > 0);

  // Helper spesifik untuk mengecek kecocokan rute submenu secara eksklusif (Exact Match)
  const isSubmenuActive = (child: NavigationSubItem): boolean => {
    try {
      // Jika memiliki nested children (Level 2 Dropdown), periksa apakah anak level 3 ada yang aktif
      if (child.children && child.children.length > 0) {
        return child.children.some((subChild) => isSubmenuActive(subChild));
      }

      const rawHref = child.href;

      // 1. Jika ada query parameter
      if (rawHref.includes("?")) {
        const [targetPath, targetQuery] = rawHref.split("?");
        if (pathname !== targetPath) return false;
        const targetParams = new URLSearchParams(targetQuery);
        const targetTab = targetParams.get("tab");
        return Boolean(targetTab && activeTabInQuery && targetTab === activeTabInQuery);
      }

      // 2. Pencocokan langsung (Exact Match)
      if (pathname === rawHref) {
        return true;
      }

      // 3. Pencocokan alias spesifik untuk Menu Kurikulum
      if (
        child.id === "dashboard-kurikulum" &&
        (pathname === "/kurikulum" || pathname === "/kurikulum/dashboard")
      ) {
        return true;
      }
      if (
        child.id === "plotting-guru" &&
        (pathname === "/kurikulum/plotting" || pathname.startsWith("/kurikulum/plotting/"))
      ) {
        return true;
      }
      if (
        child.id === "penilaian-mapel" &&
        (pathname === "/nilai" || pathname.startsWith("/nilai/") || pathname === "/kurikulum/penilaian" || pathname.startsWith("/kurikulum/penilaian/"))
      ) {
        return true;
      }
      if (
        child.id === "jadwal-mapel" &&
        (pathname === "/jadwal" || pathname === "/kurikulum/jadwal" || pathname.startsWith("/jadwal/"))
      ) {
        return true;
      }
      if (
        child.id === "presensi-rekap" &&
        (pathname === "/presensi" || pathname === "/kurikulum/presensi" || pathname.startsWith("/presensi/"))
      ) {
        return true;
      }
      if (
        child.id === "rapor-bulanan" &&
        (pathname === "/rapor-bulanan" || pathname === "/kurikulum/rapor" || pathname.startsWith("/rapor-bulanan/"))
      ) {
        return true;
      }
      if (
        child.id === "rapor-semesteran" &&
        (pathname === "/kurikulum/rapor-semesteran" || pathname === "/rapor-semesteran" || pathname.startsWith("/kurikulum/rapor-semesteran/") || pathname.startsWith("/rapor-semesteran/"))
      ) {
        return true;
      }
      if (
        child.id === "nilai-akhir-xii" &&
        (pathname === "/kurikulum/nilai-akhir" || pathname.startsWith("/kurikulum/nilai-akhir/"))
      ) {
        return true;
      }
      if (
        child.id === "skl" &&
        (pathname === "/kurikulum/skl" || pathname.startsWith("/kurikulum/skl/"))
      ) {
        return true;
      }

      // 3b. Pencocokan alias spesifik untuk Menu Kesiswaan
      if (
        child.id === "dashboard-kesiswaan" &&
        (pathname === "/kesiswaan" || pathname === "/kesiswaan/dashboard")
      ) {
        return true;
      }
      if (
        child.id === "pelanggaran-siswa" &&
        (pathname === "/kesiswaan/pelanggaran" || pathname.startsWith("/kesiswaan/pelanggaran/"))
      ) {
        return true;
      }
      if (
        child.id === "pembinaan-siswa" &&
        (pathname === "/kesiswaan/pembinaan" || pathname.startsWith("/kesiswaan/pembinaan/"))
      ) {
        return true;
      }
      if (
        child.id === "ekstrakurikuler" &&
        (pathname === "/kesiswaan/ekskul" || pathname.startsWith("/kesiswaan/ekskul/"))
      ) {
        return true;
      }
      if (
        child.id === "prolife" &&
        (pathname === "/kesiswaan/prolife" || pathname.startsWith("/kesiswaan/prolife/"))
      ) {
        return true;
      }
      if (
        child.id === "prestasi-siswa" &&
        (pathname === "/kesiswaan/prestasi" || pathname.startsWith("/kesiswaan/prestasi/"))
      ) {
        return true;
      }

      // 3c. Pencocokan spesifik untuk Menu Sarana & Prasarana (SISPRAS)
      if (
        child.id === "dashboard-sarpras" &&
        (pathname === "/sarpras" || pathname === "/sarpras/dashboard" || pathname === "/sarana")
      ) {
        return true;
      }
      if (
        child.id === "ruang-lantai-1" &&
        (pathname === "/sarpras/ruang/lantai-1" || pathname === "/sarpras/ruang")
      ) {
        return true;
      }
      if (child.id === "ruang-lantai-2" && pathname === "/sarpras/ruang/lantai-2") {
        return true;
      }
      if (child.id === "ruang-lantai-3" && pathname === "/sarpras/ruang/lantai-3") {
        return true;
      }
      if (child.id === "sarpras-inventaris" && pathname === "/inventaris") {
        return true;
      }

      // 3d. Pencocokan spesifik untuk Modul Tata Usaha (Persuratan)
      if (
        child.id === "tu-surat-masuk" &&
        (pathname === "/tu/surat-surat/masuk" || pathname.startsWith("/tu/surat-surat/masuk/"))
      ) {
        return true;
      }
      if (
        child.id === "tu-surat-keluar" &&
        (pathname === "/tu/surat-surat/keluar" || pathname.startsWith("/tu/surat-surat/keluar/") || pathname === "/tu/persuratan")
      ) {
        return true;
      }

      // 4. Fallback umum untuk submenu lain:
      // Hanya izinkan startsWith jika rawHref bukan prefix induk yang menaungi submenu lain
      const otherChildrenHrefs = item.children
        ?.filter((c) => c.id !== child.id)
        .map((c) => c.href.split("?")[0]) || [];

      const isPrefixOfOtherChild = otherChildrenHrefs.some(
        (otherHref) => otherHref !== rawHref && otherHref.startsWith(`${rawHref}/`)
      );

      if (!isPrefixOfOtherChild && rawHref !== "/" && pathname.startsWith(`${rawHref}/`)) {
        return true;
      }

      return false;
    } catch {
      return false;
    }
  };

  // Periksa apakah anak submenu sedang aktif berdasarkan pencocokan presisi
  const isAnyChildActive = hasChildren
    ? item.children!.some((child) => isSubmenuActive(child))
    : false;

  const isDirectActive = !hasChildren && isUrlActive(item.href);
  const isItemActive = isAnyChildActive || isDirectActive;

  // State expand/collapse untuk item yang memiliki submenu
  const [isExpanded, setIsExpanded] = useState<boolean>(isAnyChildActive);

  // Otomatis expand ketika user berada di halaman rute tersebut
  useEffect(() => {
    if (isAnyChildActive) {
      setIsExpanded(true);
    }
  }, [isAnyChildActive]);

  // Prefetch child routes when expanded
  useEffect(() => {
    if (isExpanded && item.children) {
      item.children.forEach((child) => {
        prefetchRoute(child.href);
        if (child.children) {
          child.children.forEach((sub) => prefetchRoute(sub.href));
        }
      });
    }
  }, [isExpanded, item.children, prefetchRoute]);

  const Icon = item.icon;

  // Jika item memiliki children (submenu)
  if (hasChildren) {
    return (
      <div className="space-y-1">
        {/* Parent Toggle Button */}
        <button
          type="button"
          onClick={() => setIsExpanded(!isExpanded)}
          onMouseEnter={() => {
            if (item.children) {
              item.children.forEach((c) => {
                prefetchRoute(c.href);
                if (c.children) {
                  c.children.forEach((sc) => prefetchRoute(sc.href));
                }
              });
            }
          }}
          title={
            collapsed
              ? `${item.title}${isItemActive ? " (Aktif)" : ""}`
              : undefined
          }
          className={cn(
            "group relative w-full flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium transition-all duration-150 select-none text-left",
            isItemActive
              ? "bg-blue-600 text-white shadow-sm font-semibold"
              : "text-slate-300 hover:text-white hover:bg-white/10",
            collapsed && "justify-center px-2 py-2.5"
          )}
        >
          <Icon
            className={cn(
              "w-4 h-4 shrink-0 transition-transform duration-150 group-hover:scale-105",
              isItemActive ? "text-white" : "text-slate-400 group-hover:text-white"
            )}
          />

          {!collapsed && (
            <div className="flex items-center justify-between flex-1 min-w-0">
              <span className="truncate">{item.title}</span>
              <div className="flex items-center gap-1.5 shrink-0">
                {item.statusLabel && (
                  <span className="text-[10px] px-1.5 py-0.5 rounded font-semibold uppercase tracking-wider bg-slate-700/70 text-slate-300">
                    {item.statusLabel}
                  </span>
                )}
                <ChevronDown
                  className={cn(
                    "w-3.5 h-3.5 text-slate-400 transition-transform duration-200",
                    isExpanded ? "rotate-180 text-white" : ""
                  )}
                />
              </div>
            </div>
          )}

          {/* Indicator bar ketika collapsed dan submenu aktif */}
          {isItemActive && collapsed && (
            <span className="absolute left-0 top-1/2 -translate-y-1/2 w-1 h-5 bg-white rounded-r-full" />
          )}
        </button>

        {/* Submenu List */}
        {/* Submenu List */}
        {!collapsed && isExpanded && (
          <div className="pl-4 pr-1 py-1 space-y-1 border-l border-white/10 ml-5 animate-in slide-in-from-top-1 duration-150">
            {item.children!.map((child: NavigationSubItem) => (
              <SubNavItem
                key={child.id}
                child={child}
                pathname={pathname}
                isSubmenuActive={isSubmenuActive}
                prefetchRoute={prefetchRoute}
                onItemClick={onItemClick}
              />
            ))}
          </div>
        )}
      </div>
    );
  }

  // Standalone menu item (tanpa submenu)
  return (
    <Link
      href={item.href}
      prefetch={true}
      onMouseEnter={() => prefetchRoute(item.href)}
      onFocus={() => prefetchRoute(item.href)}
      onClick={() => {
        if (onItemClick) onItemClick();
      }}
      title={
        collapsed
          ? `${item.title}${item.statusLabel ? ` (${item.statusLabel})` : ""}`
          : undefined
      }
      className={cn(
        "group relative flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium transition-all duration-150 select-none",
        isDirectActive
          ? "bg-blue-600 text-white shadow-sm font-semibold"
          : "text-slate-300 hover:text-white hover:bg-white/10",
        collapsed && "justify-center px-2 py-2.5"
      )}
    >
      <Icon
        className={cn(
          "w-4 h-4 shrink-0 transition-transform duration-150 group-hover:scale-105",
          isDirectActive ? "text-white" : "text-slate-400 group-hover:text-white"
        )}
      />

      {!collapsed && (
        <div className="flex items-center justify-between flex-1 min-w-0">
          <span className="truncate">{item.title}</span>
          {item.statusLabel && (
            <span
              className={cn(
                "text-[10px] px-1.5 py-0.5 rounded font-semibold ml-1.5 shrink-0 uppercase tracking-wider",
                isDirectActive
                  ? "bg-white/20 text-white"
                  : item.status === "in_development"
                  ? "bg-amber-500/20 text-amber-300 border border-amber-500/30"
                  : "bg-slate-700/70 text-slate-300"
              )}
            >
              {item.statusLabel}
            </span>
          )}
        </div>
      )}

      {/* Floating indicator bar for active item */}
      {isDirectActive && collapsed && (
        <span className="absolute left-0 top-1/2 -translate-y-1/2 w-1 h-5 bg-white rounded-r-full" />
      )}
    </Link>
  );
};

export const NavItem = React.memo(NavItemComponent);