import { Link, Outlet, useLocation } from "@remix-run/react";
import {
  ShoppingBag,
  MessageCircle,
  CircleFadingPlus,
  BookmarkMinus,
  Layers,
  Wallet,
  MapPin,
  Settings,
  LogOut,
  CircleUserRound,
} from "lucide-react";
import { useServiceGetProfile } from "~/utils/RequestHandler";
import { useRootData } from "~/hooks/use-root-data";
import { useBadgeCounts } from "~/hooks/useBadgeCounts";

const NAV = [
  { label: "سفارش‌ها", to: "/profile/orders", icon: ShoppingBag, badgeKey: "order_updates" as const },
  { label: "پیام‌ها", to: "/profile/threads", icon: MessageCircle, badgeKey: "chat" as const },
  { label: "دنبال‌شده‌ها", to: "/profile/following", icon: CircleFadingPlus },
  { label: "ذخیره‌شده‌ها", to: "/profile/bookmarks", icon: BookmarkMinus },
  { label: "ست‌های من", to: "/profile/sets", icon: Layers },
  { label: "کیف پول", to: "/profile/wallet", icon: Wallet },
  { label: "آدرس‌ها", to: "/profile/location", icon: MapPin },
  { label: "تنظیمات", to: "/profile/setting", icon: Settings },
];

/**
 * Layout for the account area. On desktop it renders a sticky sidebar
 * (user card + menu) next to the page content; on mobile it's just the
 * page content (each profile page keeps its existing mobile UI).
 */
export default function ProfileLayout() {
  const location = useLocation();
  const { user } = useRootData();
  const { data: profile } = useServiceGetProfile();
  const { data: badges } = useBadgeCounts();

  const isActive = (to: string) =>
    location.pathname === to || location.pathname.startsWith(to + "/");

  return (
    <div className="lg:max-w-[1320px] lg:mx-auto lg:w-full lg:px-8 lg:py-8 lg:grid lg:grid-cols-[280px_1fr] lg:gap-7 lg:items-start">
      {/* Desktop sidebar */}
      <aside className="hidden lg:block lg:sticky lg:top-[88px] border border-WHITE3 rounded-2xl overflow-hidden">
        <div className="p-5 border-b border-WHITE3 text-center">
          <div className="w-20 h-20 rounded-full bg-WHITE3 grid place-items-center mx-auto mb-3 text-GRAY">
            <CircleUserRound size={40} />
          </div>
          <p className="font-bold text-[16px]">
            {profile?.username || "کاربر ویترون"}
          </p>
          {profile?.phoneNumber ? (
            <p className="text-GRAY text-[13px] mt-1" dir="ltr">
              {profile.phoneNumber}
            </p>
          ) : null}
        </div>
        <nav className="p-2.5 flex flex-col gap-0.5">
          {NAV.map((n) => {
            const count = n.badgeKey ? badges?.[n.badgeKey] || 0 : 0;
            return (
              <Link
                key={n.to}
                to={n.to}
                prefetch="intent"
                className={`flex items-center gap-3 px-3.5 py-3 rounded-xl text-[14.5px] font-semibold transition-colors ${
                  isActive(n.to)
                    ? "bg-BLACK text-white"
                    : "text-BLACK2 hover:bg-WHITE2"
                }`}
              >
                <n.icon size={20} />
                {n.label}
                {count > 0 ? (
                  <span className="ml-auto min-w-[18px] h-[18px] px-1 rounded-full bg-RED text-white text-[10px] font-bold flex items-center justify-center leading-none">
                    {count > 99 ? "99+" : count}
                  </span>
                ) : null}
              </Link>
            );
          })}
          {user?.access_token ? (
            <Link
              to="/logout"
              className="flex items-center gap-3 px-3.5 py-3 rounded-xl text-[14.5px] font-semibold text-RED hover:bg-red-50 transition-colors"
            >
              <LogOut size={20} />
              خروج از حساب
            </Link>
          ) : null}
        </nav>
      </aside>

      {/* Page content */}
      <div className="min-w-0">
        <Outlet />
      </div>
    </div>
  );
}