"use client";

import Link from "@/app/components/LocaleLink";
import { useEffect, useState } from "react";
import Image from "next/image";

import { getAstrologerDashboard } from "@/app/lib/astrologer";

const NAV_ITEMS = [
  { href: "/astrologer/dashboard", label: "Home", icon: "🏠" },
  { href: "/astrologer/requests", label: "Orders", icon: "💬" },
  { href: "/astrologer/consultations", label: "Consultations", icon: "📜" },
  { href: "/astrologer/wallet", label: "Wallet", icon: "👛" },
  { href: "/astrologer/profile", label: "Profile", icon: "👤" },
];

// Self-polls for the pending-requests badge so every page that mounts
// this sidebar gets it for free, rather than threading it through
// each page's own data-fetch.
function usePendingRequestCount(): number {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const token = localStorage.getItem("astrologerToken");
    if (!token) return;

    let cancelled = false;

    const poll = async () => {
      try {
        const response = await getAstrologerDashboard(token);
        if (!cancelled && response?.success) {
          setCount(response.data?.pending_request_count ?? 0);
        }
      } catch {
        // Non-fatal — the badge just stays at its last known value.
      }
    };

    poll();
    const interval = setInterval(poll, 10000);

    return () => {
      cancelled = true;
      clearInterval(interval);
    };
  }, []);

  return count;
}

function SidebarNav({
  active,
  onNavigate,
}: {
  active: string;
  onNavigate?: () => void;
}) {
  const pendingRequestCount = usePendingRequestCount();

  return (
    <>
      <div className="astrologer-sidebar-brand">
        <Link className="navbar-brand" href="/">
          <Image
            src="/images/logo-vertical.svg"
            alt="AstroEye"
            width={180}
            height={50}
            className="object-contain"
            priority
          />
        </Link>
      </div>

      <nav className="astrologer-sidebar-nav">
        {NAV_ITEMS.map((item) => (
          <Link
            key={item.label}
            href={item.href}
            onClick={onNavigate}
            className={`astrologer-sidebar-link ${
              item.label === active ? "active" : ""
            }`}
          >
            <span className="astrologer-sidebar-icon">{item.icon}</span>
            {item.label}
            {item.label === "Orders" && pendingRequestCount > 0 && (
              <span className="badge bg-danger rounded-pill ms-2">{pendingRequestCount}</span>
            )}
          </Link>
        ))}
      </nav>
    </>
  );
}

export default function DashboardSidebar({ active }: { active: string }) {
  const [open, setOpen] = useState(false);

  return (
    <>
      <button
        type="button"
        className="astrologer-mobile-nav-toggle"
        onClick={() => setOpen(true)}
        aria-label="Open navigation"
      >
        ☰
      </button>

      {open && (
        <div
          className="astrologer-modal-backdrop"
          onClick={() => setOpen(false)}
        >
          <aside
            className="astrologer-sidebar-drawer"
            onClick={(e) => e.stopPropagation()}
          >
            <SidebarNav active={active} onNavigate={() => setOpen(false)} />
          </aside>
        </div>
      )}

      <aside className="astrologer-sidebar">
        <SidebarNav active={active} />
      </aside>
    </>
  );
}