"use client";
import React, { useEffect, useMemo, useState } from "react";
import avatarImage from "@/assets/images/avatar.jpeg";
import Link from "next/link";
import {
  Bell,
  ExternalLink,
  LogOut,
  Menu,
  MessageCircleMore,
  Podcast,
  User,
  Users,
  Wallet,
} from "lucide-react";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuTrigger,
} from "@radix-ui/react-dropdown-menu";
import Image from "next/image";
import AppSearch from "@/components/app/search/app";
import { logout } from "@/redux/slices/user";
import { useAppDispatch } from "@/redux/hooks";
import { useParams, usePathname, useRouter } from "next/navigation";
import DataService from "@/config/axios";
import { pageTitleFromPath } from "@/lib/breadcrumb-utils";
import { OrgSwitcher } from "@/platform/components/org-switcher";
import { UnitScopeSelector } from "@/platform/components/unit-scope-selector";
import { getLogoutRedirectPath, tenantHref } from "@/lib/tenant-routing";
import { USER_PROFILE_UPDATED_EVENT } from "@/features/settings/profile";

const DashboardHeader = ({
  toggleDrawer,
  isOpen,
}: {
  isOpen: boolean;
  toggleDrawer: () => void;
}) => {
  const dispatch = useAppDispatch();
  const router = useRouter();
  const pathname = usePathname();
  const params = useParams();
  const app = params?.app as string | undefined;

  const [meLabel, setMeLabel] = useState<string>("My Account");
  const [mePhoto, setMePhoto] = useState<string>("");
  const [avatarLoadFailed, setAvatarLoadFailed] = useState(false);

  const pageTitle = useMemo(() => pageTitleFromPath(pathname || ""), [pathname]);

  const profileHref = tenantHref(pathname, "/profile", app);

  useEffect(() => {
    let cancelled = false;
    const loadMe = async () => {
      try {
        const res = await DataService.get("/user/me");
        const u = res.data?.data as
          | { firstName?: string; lastName?: string; email?: string; photo?: string }
          | undefined;
        if (cancelled || !u) return;
        const name = [u.firstName, u.lastName].filter(Boolean).join(" ").trim();
        setMeLabel(name || u.email || "My Account");
        setMePhoto(u.photo?.trim() || "");
        setAvatarLoadFailed(false);
      } catch {
        if (!cancelled) {
          setMeLabel("My Account");
          setMePhoto("");
          setAvatarLoadFailed(false);
        }
      }
    };
    void loadMe();
    const onProfileUpdated = () => {
      void loadMe();
    };
    window.addEventListener(USER_PROFILE_UPDATED_EVENT, onProfileUpdated);
    return () => {
      cancelled = true;
      window.removeEventListener(USER_PROFILE_UPDATED_EVENT, onProfileUpdated);
    };
  }, []);

  const handleLogout = () => {
    dispatch(logout());
    router.push(getLogoutRedirectPath(pathname, params?.slug as string | undefined));
  };

  const avatarSrc = mePhoto && !avatarLoadFailed ? mePhoto : avatarImage;

  return (
    <div className="w-full p-5 border-b flex items-center justify-between gap-5">
      <button
        className={`cursor-pointer `}
        onClick={toggleDrawer}
        aria-label={isOpen ? "Close drawer" : "Open drawer"}
      >
        <Menu className="size-8 text-gray-500 border hover:bg-primary hover:border-gray-100 rounded p-1 hover:text-white" />
      </button>
      <span className="min-w-0 flex-1 truncate px-2 text-center text-base font-semibold capitalize text-gray-700 md:max-w-md md:text-lg">
        {/* {pageTitle} */}
      </span>
      <div className="grow sm:block hidden">
        <AppSearch />
      </div>
      <div className="flex items-center md:gap-5 gap-2">
        {(app === "client" || app === "property") && (
          <>
            <OrgSwitcher />
            <UnitScopeSelector />
          </>
        )}
        {app === "super-admin" ? (
          <Link
            href="/"
            target="_blank"
            rel="noopener noreferrer"
            className="inline-flex items-center gap-1.5 rounded-md border px-2.5 py-1.5 text-sm text-gray-600 hover:border-primary hover:bg-primary hover:text-white"
            title="Visit website"
          >
            <ExternalLink className="size-4" />
            <span className="hidden sm:inline">Visit website</span>
          </Link>
        ) : null}
        {/* <MessageCircleMore className="size-5 fill-primary stroke-white" /> */}
        <Bell className="size-6 fill-primary stroke-none" />
        <DropdownMenu>
          <DropdownMenuTrigger className="rounded-full border outline-none ring-offset-2 focus-visible:ring-2 focus-visible:ring-primary">
            <Image
              className="size-8 rounded-full object-cover"
              src={avatarSrc}
              alt=""
              width={32}
              height={32}
              onError={() => setAvatarLoadFailed(true)}
            />
          </DropdownMenuTrigger>
          <DropdownMenuContent className="border bg-white shadow -translate-x-12 p-3 rounded min-w-40">
            <DropdownMenuLabel className="truncate">{meLabel}</DropdownMenuLabel>
            <DropdownMenuItem className="text-gray-600">
              <Link className="profile-menu-item flex items-center gap-2" href={profileHref}>
                <User className="size-4" /> Profile
              </Link>
            </DropdownMenuItem>
            {/* <DropdownMenuItem className="text-gray-600">
              <Link className="profile-menu-item " href="#">
                <Wallet className="size-4" /> Billing
              </Link>
            </DropdownMenuItem>
            <DropdownMenuItem className="text-gray-600">
              <Link className="profile-menu-item " href="#">
                <Users className="size-4" /> Team
              </Link>
            </DropdownMenuItem>
            <DropdownMenuItem className="text-gray-600">
              <Link className="profile-menu-item " href="#">
                <Podcast className="size-4" /> Subscription
              </Link>
            </DropdownMenuItem> */}
            <DropdownMenuItem className="text-gray-600" onClick={handleLogout}>
              <div className="flex px-2 py-1 items-center gap-2 cursor-pointer hover:bg-red-500 hover:text-white rounded">
                <LogOut className="size-4" /> Logout
              </div>
            </DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>
      </div>
    </div>
  );
};

export default DashboardHeader;