import { useEffect, useState } from "react";
import { Link, useLocation, useNavigate } from "react-router-dom";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import type { NotificationItem } from "../../api/notifications";
import { fetchNotifications, markAllNotificationsRead, markNotificationRead } from "../../api/notifications";
import { useAuth } from "../../auth/AuthContext";
import { resolvePageMeta } from "../../features/navigation/schema";
import { resolveNotificationTargetLink, formatNotificationRelativeTime } from "../../lib/notificationLinks";
import { resolveErrorMessage } from "../../lib/resolveErrorMessage";
import { isWecomWebView } from "../../lib/runtimeContext";
import { GlobalSearchDialog } from "../GlobalSearchDialog";
import { AppBrand } from "../shell/AppBrand";
import { Button } from "../ui/button";
import { Dialog, DialogClose, DialogContent, DialogTrigger } from "../ui/dialog";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "../ui/dropdown-menu";
import { NavLinks } from "./NavLinks";
import { toast } from "sonner";

function MenuIcon() {
  return (
    <svg aria-hidden="true" fill="none" height="20" viewBox="0 0 24 24" width="20" xmlns="http://www.w3.org/2000/svg">
      <path d="M4 6h16M4 12h16M4 18h16" stroke="currentColor" strokeLinecap="round" strokeWidth="2" />
    </svg>
  );
}

function BellIcon() {
  return (
    <svg aria-hidden="true" fill="none" height="20" viewBox="0 0 24 24" width="20" xmlns="http://www.w3.org/2000/svg">
      <path
        d="M15 17H9m9-2V11a6 6 0 10-12 0v4l-2 2h16l-2-2z"
        stroke="currentColor"
        strokeLinecap="round"
        strokeLinejoin="round"
        strokeWidth="2"
      />
    </svg>
  );
}

export function Topbar() {
  const { me, logout } = useAuth();
  const location = useLocation();
  const navigate = useNavigate();
  const queryClient = useQueryClient();
  const [mobileNavOpen, setMobileNavOpen] = useState(false);
  const [searchOpen, setSearchOpen] = useState(false);
  const [notificationsOpen, setNotificationsOpen] = useState(false);
  const wecomEntry = isWecomWebView();
  const pageMeta = resolvePageMeta(location.pathname);

  const unreadQuery = useQuery({
    enabled: Boolean(me),
    queryKey: ["notifications", "unread-count"],
    queryFn: () => fetchNotifications({ unreadOnly: true, page: 1, pageSize: 1 }),
    refetchInterval: 30_000,
  });

  const dropdownQuery = useQuery({
    enabled: Boolean(me) && notificationsOpen,
    queryKey: ["notifications", "dropdown"],
    queryFn: () => fetchNotifications({ page: 1, pageSize: 5 }),
  });

  const markReadMutation = useMutation({
    mutationFn: (notificationId: string) => markNotificationRead(notificationId),
    onSuccess: async () => {
      await queryClient.invalidateQueries({ queryKey: ["notifications"] });
    },
  });

  const markAllReadMutation = useMutation({
    mutationFn: () => markAllNotificationsRead(),
    onSuccess: async () => {
      toast.success("已全部标为已读");
      await queryClient.invalidateQueries({ queryKey: ["notifications"] });
    },
    onError: (error) => {
      toast.error(resolveErrorMessage(error));
    },
  });

  const unreadCount = unreadQuery.data?.unreadCount ?? 0;
  const unreadBadge = unreadCount > 99 ? "99+" : String(unreadCount);

  const handleNotificationClick = async (item: NotificationItem) => {
    const targetLink = resolveNotificationTargetLink(item) ?? "/notifications";

    try {
      if (!item.readAt) {
        await markReadMutation.mutateAsync(item.id);
      }
      setNotificationsOpen(false);
      navigate(targetLink);
    } catch (error) {
      toast.error(resolveErrorMessage(error));
    }
  };

  useEffect(() => {
    const handleKeydown = (event: KeyboardEvent) => {
      if (!(event.metaKey || event.ctrlKey) || event.altKey || event.shiftKey) {
        return;
      }

      if (event.key.toLowerCase() !== "k") {
        return;
      }

      if (!window.matchMedia("(min-width: 768px)").matches) {
        return;
      }

      const target = event.target;
      if (target instanceof HTMLElement) {
        const tagName = target.tagName.toLowerCase();
        if (target.isContentEditable || tagName === "input" || tagName === "textarea" || tagName === "select") {
          return;
        }
      }

      event.preventDefault();
      setSearchOpen(true);
    };

    window.addEventListener("keydown", handleKeydown);
    return () => window.removeEventListener("keydown", handleKeydown);
  }, []);

  return (
    <>
      <header className="sticky top-0 z-10 border-b border-slate-200/80 bg-white/88 px-4 py-3 shadow-[0_10px_30px_rgba(15,23,42,0.06)] backdrop-blur-xl sm:px-8">
        <div className="flex items-center justify-between gap-4">
          <div className="flex min-w-0 items-center gap-3">
            <Dialog open={mobileNavOpen} onOpenChange={setMobileNavOpen}>
              <DialogTrigger asChild>
                <Button className="lg:hidden" size="icon" variant="secondary" aria-label="打开菜单" type="button">
                  <MenuIcon />
                </Button>
              </DialogTrigger>

              <DialogContent className="left-0 top-0 h-dvh w-80 max-w-[88vw] translate-x-0 translate-y-0 rounded-none rounded-r-3xl border-r border-slate-200 p-0">
                <div className="flex h-full flex-col bg-white">
                  <div className="flex items-start justify-between border-b border-slate-200 px-5 py-5">
                    <AppBrand />
                    <DialogClose asChild>
                      <Button size="icon" variant="ghost" aria-label="关闭菜单" type="button">
                        ✕
                      </Button>
                    </DialogClose>
                  </div>

                  <div className="flex-1 overflow-auto px-4 py-5">
                    <NavLinks onNavigate={() => setMobileNavOpen(false)} />
                  </div>
                </div>
              </DialogContent>
            </Dialog>

            <div className="min-w-0">
              <div className="text-xs font-bold uppercase tracking-[0.2em] text-primary/70">{pageMeta.group}</div>
              <div className="mt-1 flex flex-wrap items-center gap-2">
                <p className="truncate text-lg font-semibold text-[var(--color-text-primary)]">{pageMeta.title}</p>
                {wecomEntry ? (
                  <span
                    className="badge-neutral border-primary-200 bg-primary-50 text-primary"
                    data-testid="topbar-wecom-entry-badge"
                  >
                    当前通过企业微信进入
                  </span>
                ) : null}
              </div>
              <div className="mt-1 text-sm text-[var(--color-text-secondary)]">{me ? `你好，${me.name}` : "欢迎进入海音达工作台"}</div>
            </div>
          </div>

          <div className="flex items-center gap-2 sm:gap-3">
            <Button
              size="sm"
              variant="secondary"
              type="button"
              onClick={() => setSearchOpen(true)}
              data-testid="global-search-trigger"
              className="hidden md:inline-flex"
            >
              <span className="material-symbols-outlined mr-1 text-[18px]">search</span>
              搜索
            </Button>

            <Button
              size="icon"
              variant="secondary"
              type="button"
              onClick={() => setSearchOpen(true)}
              data-testid="global-search-trigger-mobile"
              className="md:hidden"
              aria-label="打开搜索"
            >
              <span className="material-symbols-outlined text-[18px]">search</span>
            </Button>

            <DropdownMenu open={notificationsOpen} onOpenChange={setNotificationsOpen}>
              <DropdownMenuTrigger asChild>
                <Button
                  size="icon"
                  variant="secondary"
                  aria-label="通知"
                  type="button"
                  data-testid="notifications-bell"
                  className="relative"
                >
                  <BellIcon />
                  {unreadCount > 0 ? (
                    <span className="absolute -right-2 -top-2 min-w-5 rounded-full bg-red-500 px-1.5 py-0.5 text-[10px] font-semibold leading-none text-white">
                      {unreadBadge}
                    </span>
                  ) : null}
                </Button>
              </DropdownMenuTrigger>

              <DropdownMenuContent align="end" className="w-80 max-w-[calc(100vw-2rem)] overflow-hidden rounded-2xl border-slate-200 bg-white p-0">
                <div className="flex items-center justify-between border-b border-slate-200 bg-slate-50/80 px-4 py-3">
                  <div className="flex items-center gap-2">
                    <span className="text-sm font-semibold text-[var(--color-text-primary)]">通知</span>
                    <span className="rounded-full bg-white px-2 py-0.5 text-xs font-medium text-[var(--color-text-secondary)]">
                      {unreadCount}
                    </span>
                  </div>
                  <button
                    type="button"
                    className="text-xs font-medium text-primary disabled:text-zinc-400"
                    disabled={unreadCount === 0 || markAllReadMutation.isPending}
                    onClick={() => markAllReadMutation.mutate()}
                  >
                    全部标为已读
                  </button>
                </div>

                <div className="max-h-[400px] overflow-y-auto">
                  {dropdownQuery.isLoading ? (
                    <div className="px-4 py-6 text-sm text-[var(--color-text-secondary)]">通知加载中...</div>
                  ) : null}

                  {dropdownQuery.isError ? (
                    <div className="px-4 py-6 text-sm text-red-600">{resolveErrorMessage(dropdownQuery.error)}</div>
                  ) : null}

                  {!dropdownQuery.isLoading && !dropdownQuery.isError ? (
                    dropdownQuery.data?.items?.length ? (
                      dropdownQuery.data.items.map((item) => (
                        <button
                          key={item.id}
                          type="button"
                          className="flex w-full items-start gap-3 border-b border-slate-100 px-4 py-3 text-left transition hover:bg-slate-50 disabled:opacity-60"
                          disabled={markReadMutation.isPending}
                          onClick={() => void handleNotificationClick(item)}
                        >
                          <span className="mt-1 flex w-3 justify-center">
                            {!item.readAt ? <span className="h-2 w-2 rounded-full bg-sky-500" /> : null}
                          </span>
                          <span className="min-w-0 flex-1">
                            <span className="block truncate text-sm font-medium text-[var(--color-text-primary)]">{item.title}</span>
                            <span className="mt-1 block text-xs text-[var(--color-text-secondary)]">
                              {formatNotificationRelativeTime(item.createdAt)}
                            </span>
                          </span>
                        </button>
                      ))
                    ) : (
                      <div className="px-4 py-6 text-sm text-[var(--color-text-secondary)]">暂无通知</div>
                    )
                  ) : null}
                </div>

                <div className="border-t border-slate-200 px-2 py-2">
                  <Button asChild variant="ghost" className="w-full justify-between" type="button">
                    <Link to="/notifications" onClick={() => setNotificationsOpen(false)}>
                      查看全部通知
                    </Link>
                  </Button>
                </div>
              </DropdownMenuContent>
            </DropdownMenu>

            <DropdownMenu>
              <DropdownMenuTrigger asChild>
                <Button data-testid="topbar-profile-trigger" variant="secondary" type="button" className="max-w-[160px] truncate">
                  {me?.name ?? "账号"}
                </Button>
              </DropdownMenuTrigger>

              <DropdownMenuContent align="end" className="w-48 rounded-2xl border-slate-200 bg-white">
                <DropdownMenuItem asChild className="cursor-pointer">
                  <Link to="/settings/profile">个人设置</Link>
                </DropdownMenuItem>
                <DropdownMenuSeparator />
                <DropdownMenuItem
                  className="cursor-pointer text-red-600 focus:text-red-600"
                  onSelect={(event) => {
                    event.preventDefault();
                    void logout();
                  }}
                >
                  退出登录
                </DropdownMenuItem>
              </DropdownMenuContent>
            </DropdownMenu>
          </div>
        </div>
      </header>

      <GlobalSearchDialog open={searchOpen} onOpenChange={setSearchOpen} />
    </>
  );
}