import {
  Archive,
  CalendarClock,
  CircleDollarSignIcon,
  ClipboardClock,
  ClipboardList,
  Clock1,
  FolderCode,
  LayoutDashboard,
  PanelLeftCloseIcon,
  PanelLeftOpenIcon,
  ReceiptJapaneseYenIcon,
  Router,
  ShoppingBag,
  TicketPercent,
  UserCheck,
} from "lucide-react"
import { type ReactNode, useState } from "react"
import { Link } from "react-router-dom"
import ProfileOrLogin from "@/components/profileOrLogin"
import { Button } from "@/components/ui/button"
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@/components/ui/tooltip"
import { cn } from "@/lib/utils"
import logoAvatar from "./assets/logo-avatar.svg"
import { useLayout } from "./layout-context"
import { AdminNavMenu } from "./nav-menu"

export function Shell(props: { children: ReactNode }) {
  const { navbar } = useLayout()
  return (
    <div
      data-expand={navbar}
      className={cn(
        "transition-[grid-template-columns] duration-300 ease-in-out",
        "w-full h-full grid bg-card",
        "grid-rows-[64px_1fr]",
        "data-[expand=true]:grid-cols-[200px_1fr]",
        "data-[expand=false]:grid-cols-[0px_1fr]",
        "md:data-[expand=false]:grid-cols-[64px_1fr]",
      )}
    >
      {props.children}
    </div>
  )
}

export function Content(props: { children: ReactNode }) {
  const { navbar } = useLayout()
  return (
    <div
      data-expand={navbar}
      className={cn(
        "transition-[margin] duration-300 ease-in-out",
        "absolute inset-0 overflow-hidden",
        "mt-16",
        "md:ml-16",
        "lg:data-[expand=true]:ml-50",
      )}
    >
      {props.children}
    </div>
  )
}

export function Mask() {
  const { navbar, setNavbar } = useLayout()
  return (
    <button
      data-expand={navbar}
      className={cn(
        "lg:hidden",
        "transition-opacity duration-300 ease-in-out",
        "col-start-1 row-start-1 col-span-2 row-span-2 bg-black/50 z-10",
        "data-[expand=true]:opacity-100 data-[expand=false]:opacity-0",
        "data-[expand=true]:pointer-events-auto data-[expand=false]:pointer-events-none",
      )}
      onClick={() => setNavbar(false)}
    />
  )
}

export function Header() {
  const { navbar, toggleNavbar } = useLayout()
  return (
    <header className="flex-none h-16 flex items-stretch">
      <div className="flex-none flex items-center">
        <Button
          variant="ghost"
          className="h-9 ml-4 md:ml-0"
          onClick={toggleNavbar}
        >
          {navbar ? <PanelLeftCloseIcon /> : <PanelLeftOpenIcon />}
        </Button>
      </div>

      <AdminNavMenu />

      <div className="flex-none flex items-center justify-end pr-4 max-md:hidden gap-3">
        <ProfileOrLogin />
      </div>
    </header>
  )
}

export function Navbar() {
  const { navbar } = useLayout()

  return (
    <nav
      data-expand={navbar}
      className={cn(
        `transition-[flex-basis] duration-300 ease-in-out`,
        `h-full flex flex-col overflow-hidden group`,
        `data-[expand=true]:basis-52 data-[expand=false]:basis-16`,
      )}
    >
      <Link to="/" className="flex-none h-16 flex items-center justify-center">
        <img src={logoAvatar} alt="logo" className="w-10 h-10 object-contain" />
      </Link>

      <section
        className={cn(
          "transition-[padding] duration-300 ease-in-out",
          "flex-auto overflow-x-hidden overflow-y-auto pb-4",
          "group-data-[expand=true]:px-4 group-data-[expand=false]:px-3",
        )}
      >
        <TooltipProvider>
          <NavItem
            href="/admin"
            icon={<LayoutDashboard size={20} />}
            label="账户总览"
            expand={navbar}
          />
          <NavItem
            href="/admin/whitelist"
            icon={<UserCheck size={20} />}
            label="白名单"
            expand={navbar}
          />
          <NavItem
            href="/admin/channels"
            icon={<FolderCode size={20} />}
            label="IP账号管理"
            expand={navbar}
          />
          <NavItem
            href="/admin/funds"
            icon={<CircleDollarSignIcon size={20} />}
            label="资金明细"
            expand={navbar}
          />
          <NavItem
            href="/admin/orders"
            icon={<ShoppingBag size={20} />}
            label="订单管理"
            expand={navbar}
          />
          <NavItem
            href="/admin/refundOrders"
            icon={<ClipboardList size={20} />}
            label="退货管理"
            expand={navbar}
          />
          <NavItem
            href="/admin/coupon"
            icon={<TicketPercent size={20} />}
            label="优惠券"
            expand={navbar}
          />
          <NavItem
            href="/admin/channels"
            icon={<ReceiptJapaneseYenIcon size={20} />}
            label="提现管理"
            expand={navbar}
          />
          <NavItem
            href="/admin/httpRecharge"
            icon={<Archive size={20} />}
            label="充值记录"
            expand={navbar}
          />
          <NavItem
            href="/admin/resources/short"
            icon={<Clock1 size={20} />}
            label="短效套餐"
            expand={navbar}
          />
          <NavItem
            href="/admin/resources/long"
            icon={<CalendarClock size={20} />}
            label="长效管理"
            expand={navbar}
          />
          <NavItem
            href="/admin/rosorder"
            icon={<Router size={20} />}
            label="软路由"
            expand={navbar}
          />
          <NavItem
            href="/admin/record"
            icon={<ClipboardClock size={20} />}
            label="使用记录"
            expand={navbar}
          />
        </TooltipProvider>
      </section>
    </nav>
  )
}

function NavItem(props: {
  href: string
  icon?: ReactNode
  label: string
  expand?: boolean
}) {
  const [open, setOpen] = useState(false)
  const { setNavbar } = useLayout()

  const handleOpenChange = (open: boolean) => {
    if (!props.expand) {
      setOpen(open)
    }
  }

  const closeNavBarIfMobile = () => {
    if (window.innerWidth < 768) {
      setNavbar(false)
    }
  }

  return (
    <Tooltip open={open} onOpenChange={handleOpenChange}>
      <TooltipTrigger asChild>
        <Link
          className={cn(
            `transition-[padding,background] duration-300 ease-in-out`,
            `flex items-center rounded-md gap-2 whitespace-nowrap`,
            `hover:bg-gray-100`,
            `group-data-[expand=true]:px-4`,
          )}
          to={props.href}
          onClick={closeNavBarIfMobile}
        >
          <span className="flex-none w-10 h-10 flex items-center justify-center">
            {props.icon}
          </span>
          <span
            className={cn(
              `flex-auto`,
              `transition-[width,opacity] duration-300 ease-in-out`,
              `group-data-[expand=true]:w-auto group-data-[expand=true]:opacity-100`,
              `group-data-[expand=false]:w-0 group-data-[expand=false]:opacity-0`,
            )}
          >
            {props.label}
          </span>
        </Link>
      </TooltipTrigger>
      <TooltipContent side="right" sideOffset={16}>
        <p>{props.label}</p>
      </TooltipContent>
    </Tooltip>
  )
}
