import {
  BotIcon,
  BoxIcon,
  ChevronsUpDownIcon,
  CreditCardIcon,
  CircleHelpIcon,
  HandCoinsIcon,
  HomeIcon,
  LogOutIcon,
  LucideIcon,
  Plug2Icon,
  PlugZapIcon,
  SettingsIcon,
  SparklesIcon,
  SquareStackIcon,
  WalletIcon,
} from "lucide-react";
import React from "react";

import { Link, NavLink, useLocation, useNavigate } from "react-router";

import ExternalLink from "src/components/ExternalLink";
import { AlbyIcon } from "src/components/icons/Alby";
import { AlbyHubIcon } from "src/components/icons/AlbyHubIcon";
import { AlbyHubLogo } from "src/components/icons/AlbyHubLogo";
import { ProBadge } from "src/components/ProBadge";
import SidebarHint from "src/components/SidebarHint";
import { Badge } from "src/components/ui/badge";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "src/components/ui/dropdown-menu";
import {
  Sidebar,
  SidebarContent,
  SidebarFooter,
  SidebarGroup,
  SidebarGroupContent,
  SidebarHeader,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  useSidebar,
} from "src/components/ui/sidebar";
import { UpgradeDialog } from "src/components/UpgradeDialog";
import UserAvatar from "src/components/UserAvatar";
import { useAlbyMe } from "src/hooks/useAlbyMe";
import { useHealthCheck } from "src/hooks/useHealthCheck";
import { useInfo } from "src/hooks/useInfo";
import { deleteAuthToken } from "src/lib/auth";
import { isHttpMode } from "src/utils/isHttpMode";

function isPathActive(pathname: string, url: string) {
  return pathname === url || pathname.startsWith(`${url}/`);
}

export function AppSidebar() {
  const { data: albyMe } = useAlbyMe();

  const { data: info, mutate: refetchInfo } = useInfo();
  const { isMobile, setOpenMobile } = useSidebar();
  const { hasChannelManagement } = useInfo();
  const navigate = useNavigate();
  const location = useLocation();

  const _isHttpMode = isHttpMode();

  const logout = React.useCallback(async () => {
    deleteAuthToken();
    await refetchInfo();

    if (_isHttpMode) {
      window.location.href = "/logout";
    } else {
      navigate("/", { replace: true });
    }
  }, [_isHttpMode, navigate, refetchInfo]);

  const data = {
    navMain: [
      {
        title: "Home",
        url: "/home",
        icon: HomeIcon,
      },
      {
        title: "Wallet",
        url: "/wallet",
        icon: WalletIcon,
      },
      {
        title: "Sub-wallets",
        url: "/sub-wallets",
        icon: SquareStackIcon,
      },
      {
        title: "Connections",
        url: "/apps",
        icon: Plug2Icon,
      },
      {
        title: "AI & Agents",
        url: "/ai",
        icon: BotIcon,
      },
      {
        title: "Cards",
        url: "/cards",
        icon: CreditCardIcon,
        badge: "NEW",
      },
    ],
    navSecondary: [
      ...(hasChannelManagement
        ? [
            {
              title: "Node",
              url: "/channels",
              icon: BoxIcon,
            },
          ]
        : []),
      {
        title: "Settings",
        url: "/settings",
        icon: SettingsIcon,
      },
      {
        title: "Earn",
        url: "/earn",
        icon: HandCoinsIcon,
      },
    ],
  };

  return (
    <Sidebar
      className="top-(--header-height) h-[calc(100svh-var(--header-height))]!"
      collapsible="offcanvas"
    >
      <SidebarHeader>
        <div className="p-2 flex flex-row items-center justify-between">
          <Link to="/home" onClick={() => setOpenMobile(false)}>
            <AlbyHubLogo className="h-7" />
          </Link>
          <div className="flex gap-3 items-center">
            <HealthIndicator />
          </div>
        </div>
      </SidebarHeader>
      <SidebarContent>
        <SidebarGroup>
          <SidebarGroupContent>
            <SidebarMenu>
              {data.navMain.map((item) => (
                <SidebarMenuItem key={item.title}>
                  <SidebarMenuButton
                    asChild
                    isActive={isPathActive(location.pathname, item.url)}
                  >
                    <Link
                      to={item.url}
                      onClick={() => {
                        setOpenMobile(false);
                      }}
                    >
                      <item.icon />
                      <span>{item.title}</span>
                      {item.badge && (
                        <Badge className="ml-auto text-[10px] px-1.5 py-0">
                          {item.badge}
                        </Badge>
                      )}
                    </Link>
                  </SidebarMenuButton>
                </SidebarMenuItem>
              ))}
            </SidebarMenu>
          </SidebarGroupContent>
        </SidebarGroup>
        <div className="mt-auto">
          <SidebarGroup>
            <SidebarGroupContent>
              <SidebarHint />
            </SidebarGroupContent>
          </SidebarGroup>
          <NavSecondary items={data.navSecondary} />
        </div>
      </SidebarContent>
      <SidebarFooter>
        <SidebarMenu>
          <SidebarMenuItem>
            <DropdownMenu>
              <SidebarMenuButton size="lg" asChild>
                <DropdownMenuTrigger className="w-full">
                  {info?.albyAccountConnected ? (
                    <>
                      <UserAvatar />
                      <div className="grid flex-1 text-left text-sm leading-tight">
                        <div className="flex items-center gap-1 min-w-0">
                          <span className="truncate font-semibold">
                            {albyMe?.name || albyMe?.email}
                          </span>
                          {albyMe?.subscription?.plan_code && <ProBadge />}
                        </div>

                        <div className="truncate text-xs">
                          {albyMe?.lightning_address}
                        </div>
                      </div>
                    </>
                  ) : (
                    <>
                      <div className="size-8 flex items-center justify-center bg-sidebar-primary/80 text-sidebar-primary-foreground rounded-md">
                        <AlbyHubIcon className="size-4" />
                      </div>
                      <div className="font-semibold text-left text-sm leading-tight">
                        My Alby Hub
                      </div>
                    </>
                  )}
                  <ChevronsUpDownIcon className="ml-auto size-4" />
                </DropdownMenuTrigger>
              </SidebarMenuButton>
              <DropdownMenuContent
                className="w-64"
                side={isMobile ? "bottom" : "right"}
                align="end"
                sideOffset={4}
              >
                {info?.albyAccountConnected && (
                  <>
                    <DropdownMenuLabel className="p-0 font-normal">
                      <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
                        <UserAvatar />
                        <div className="grid flex-1 text-left text-sm leading-tight">
                          <div className="flex items-center gap-1 min-w-0">
                            <span className="truncate font-semibold">
                              {albyMe?.name || albyMe?.email}
                            </span>
                            {albyMe?.subscription?.plan_code && <ProBadge />}
                          </div>
                          <span className="truncate text-xs">
                            {albyMe?.lightning_address}
                          </span>
                        </div>
                      </div>
                    </DropdownMenuLabel>
                    <DropdownMenuSeparator />
                  </>
                )}
                {!info?.albyAccountConnected ? (
                  <DropdownMenuItem asChild>
                    <Link
                      to="/alby/account"
                      className="w-full flex flex-row items-center gap-2"
                    >
                      <PlugZapIcon />
                      Connect Alby Account
                    </Link>
                  </DropdownMenuItem>
                ) : (
                  <DropdownMenuItem asChild>
                    <Link
                      to="/settings/alby-account"
                      className="w-full flex flex-row items-center gap-2"
                    >
                      <AlbyIcon className="size-4" />
                      Alby Account Settings
                    </Link>
                  </DropdownMenuItem>
                )}
                {!albyMe?.subscription.plan_code && (
                  <>
                    <UpgradeDialog>
                      <DropdownMenuItem onSelect={(e) => e.preventDefault()}>
                        <SparklesIcon />
                        Upgrade to Pro
                      </DropdownMenuItem>
                    </UpgradeDialog>
                  </>
                )}
                {_isHttpMode && (
                  <>
                    <DropdownMenuSeparator />
                    <DropdownMenuItem onClick={logout}>
                      <LogOutIcon className="size-4" />
                      Log out
                    </DropdownMenuItem>
                  </>
                )}
              </DropdownMenuContent>
            </DropdownMenu>
          </SidebarMenuItem>
        </SidebarMenu>
      </SidebarFooter>
    </Sidebar>
  );
}

export function NavSecondary({
  items,
  ...props
}: {
  items: {
    title: string;
    url: string;
    icon: LucideIcon;
  }[];
} & React.ComponentPropsWithoutRef<typeof SidebarGroup>) {
  const { setOpenMobile } = useSidebar();
  const location = useLocation();

  return (
    <SidebarGroup {...props}>
      <SidebarGroupContent>
        <SidebarMenu>
          {items.map((item) => (
            <SidebarMenuItem key={item.title}>
              <SidebarMenuButton
                asChild
                isActive={isPathActive(location.pathname, item.url)}
              >
                <NavLink
                  to={item.url}
                  end
                  onClick={() => {
                    setOpenMobile(false);
                  }}
                >
                  <item.icon />
                  <span>{item.title}</span>
                </NavLink>
              </SidebarMenuButton>
            </SidebarMenuItem>
          ))}
          <SidebarMenuItem>
            <SidebarMenuButton asChild>
              <ExternalLink to="https://support.getalby.com">
                <CircleHelpIcon className="h-4 w-4" />
                Help
              </ExternalLink>
            </SidebarMenuButton>
          </SidebarMenuItem>
        </SidebarMenu>
      </SidebarGroupContent>
    </SidebarGroup>
  );
}

function HealthIndicator() {
  const { data: health } = useHealthCheck();
  const { setOpenMobile } = useSidebar();

  if (!health) {
    return null;
  }

  const ok = !health.alarms?.length;
  if (ok) {
    return null;
  }

  return (
    <Link to="/channels" onClick={() => setOpenMobile(false)}>
      <div className="w-2 h-2 rounded-full bg-destructive" />
    </Link>
  );
}