"use client"
import { cn, user } from "@heroui/react"
import { Home, MonitorOne, Movie, Setting, Terminal, Toolkit } from "@icon-park/react"
import { usePathname, useRouter } from "next/navigation"
import type { ReactNode } from "react"
import { getVersion } from "@tauri-apps/api/app"

// import { platform } from "@tauri-apps/plugin-os"
import { useAppStore } from "@/store/app"
import { useSteamStore } from "@/store/steam"

interface SideButtonProps {
  route: string
  className?: string
  children?: ReactNode
}

const SideButton = ({
  route,
  className,
  children,
  ...rest
}: SideButtonProps & React.ButtonHTMLAttributes<HTMLButtonElement>) => {
  const router = useRouter()
  const path = usePathname()

  return (
    <button
      type="button"
      onClick={() => router.push(route || "/")}
      className={cn(
        className,
        "p-2.5 hover:bg-black/5 dark:hover:bg-white/5 rounded-lg transition relative active:scale-90",
        path.startsWith(route) && "bg-black/5 dark:bg-white/5"
      )}
      {...rest}
    >
      {children}
      <div
        className={cn(
          path.startsWith(route) && "opacity-100",
          "transition-opacity duration-300 opacity-0 h-3.5 w-0.5 absolute left-0.5 bg-purple-500 rounded-full top-1/2 -translate-y-1/2"
        )}
      />
    </button>
  )
}

const Avatar = () => {
  const steam = useSteamStore()
  const router = useRouter()
  const path = usePathname()

  return (
    <img
      src={
        steam.currentUser()?.avatar
          ? `data:image/png;base64,${steam.currentUser()?.avatar || ''}`
          : "/logo_square.png"
      }
      alt="avatar"
      draggable={false}
      className={cn(
        "w-12 h-12 bg-gray-700 rounded-full shadow-lg cursor-pointer transition active:scale-95 shadow-purple-900/50",
        path.startsWith("/users") && "shadow-sm"
      )}
      onClick={() => router.push("/users")}
    />
  )
}

const SideBar = () => {
  const app = useAppStore()

  void getVersion().then((Value) => {
    app.setVersion(Value)
  })

  return (
    <div
      className={cn(
        "absolute left-0 flex flex-col h-full select-none w-20 pt-7 pb-5"
        // platform() === "windows" ? "w-20" : "w-[4.25rem]"
      )}
      data-tauri-drag-region
    >
      <section className="mx-auto">
        <Avatar />
      </section>

      <section
        className="flex flex-col items-center justify-center h-full gap-5"
        data-tauri-drag-region
      >
        <SideButton route="/home">
          <Home size={24} />
        </SideButton>
        <SideButton route="/tool">
          <Toolkit size={24} />
        </SideButton>
        <SideButton route="/console">
          <Terminal size={24} />
        </SideButton>
        <SideButton route="/gear">
          <MonitorOne size={24} />
        </SideButton>
        <SideButton route="/movie">
          <Movie size={24} />
        </SideButton>
        <SideButton route="/preference">
          <Setting size={24} />
        </SideButton>
      </section>

      <div className="mx-auto text-sm text-center text-zinc-500" data-tauri-drag-region>
        <p>版本号</p>
        <p className="py-1 text-sm text-zinc-600">{app.state.version}</p>
      </div>
    </div>
  )
}

export default SideBar
