"use client"
import { setTheme as setTauriTheme } from "@/hooks/tauri/theme"
import { useAppStore } from "@/store/app"
import { useToolStore } from "@/store/tool"
import { addToast, Button, Link, Tooltip, useDisclosure } from "@heroui/react"
import {
  Close,
  Communication,
  Minus,
  Moon,
  Refresh,
  RocketOne,
  Square,
  SunOne
} from "@icon-park/react"
import { type Theme, getCurrentWindow } from "@tauri-apps/api/window"
import { /* relaunch,  */ exit } from "@tauri-apps/plugin-process"
import { useTheme } from "next-themes"
import { usePathname, useRouter } from "next/navigation"
import { saveAllNow } from "@tauri-store/valtio"
import { useSteamStore } from "@/store/steam"
import { Modal, ModalContent, ModalHeader, ModalBody, ModalFooter } from "@heroui/react"
import { window } from "@tauri-apps/api"

const Nav = () => {
  const { theme, setTheme } = useTheme()
  const setAppTheme = async (theme: Theme) => {
    setTheme(theme)
    await setTauriTheme(theme)
  }

  const app = useAppStore()
  const close = async () => {
    await saveAllNow()
    // await exit()
    if (app.state.hiddenOnClose) window.getCurrentWindow().hide()
    else exit()
  }

  const minimize = async () => {
    await saveAllNow()
    await getCurrentWindow().minimize()
  }

  const toggleMaximize = async () => {
    const current = getCurrentWindow()
    const maximized = await current.isMaximized()
    await (maximized ? current.unmaximize() : current.maximize())
  }

  // const reset = async () => {
  //   await relaunch()
  // }
  const router = useRouter()
  const pathname = usePathname()

  return (
    <nav className="absolute top-0 right-0 flex flex-row h-16 gap-0.5 p-4" data-tauri-drag-region>
      <Tooltip content="启动页确认设置" showArrow={true} delay={300}>
        {pathname !== "/" && (
          <button
            type="button"
            className="px-2 py-0 transition duration-150 rounded hover:bg-black/10 dark:hover:bg-zinc-100/10 active:scale-95"
            onClick={() => {
              app.setInited(false)
              if (pathname !== "/") router.push("/")
            }}
          >
            <RocketOne size={16} />
          </button>
        )}
      </Tooltip>
      <Tooltip content="深色模式" showArrow={true} delay={300}>
        <button
          type="button"
          className="px-2 py-0 transition duration-150 rounded hover:bg-black/10 dark:hover:bg-zinc-100/10 active:scale-95"
          onClick={() => (theme === "light" ? setAppTheme("dark") : setAppTheme("light"))}
        >
          {theme === "light" ? <SunOne size={16} /> : <Moon size={16} />}
        </button>
      </Tooltip>
      <Tooltip content="反馈" showArrow={true} delay={300}>
        <Link
          href="https://docs.qq.com/form/page/DZU1ieW9SQkxWU1RF"
          target="_blank"
          className="px-2 py-0 text-black transition duration-150 rounded dark:text-white hover:bg-black/10 dark:hover:bg-zinc-100/10 active:scale-95"
        >
          <button type="button">
            <Communication size={16} />
          </button>
        </Link>
      </Tooltip>

      <ResetModal />

      {/* { platform() === "windows" && ( */}
      <>
        <button
          type="button"
          className="px-2 py-0 transition duration-150 rounded hover:bg-black/10 dark:hover:bg-zinc-100/10 active:scale-95"
          onClick={minimize}
        >
          <Minus size={16} />
        </button>
        <button
          type="button"
          className="px-2 py-0 transition duration-150 rounded hover:bg-black/10 dark:hover:bg-zinc-100/10 active:scale-95"
          onClick={toggleMaximize}
        >
          <Square size={16} />
        </button>
        <button
          type="button"
          className="px-2 py-0 transition duration-150 rounded hover:bg-black/10 dark:hover:bg-zinc-100/10 active:scale-95"
          onClick={close}
        >
          <Close size={16} />
        </button>
      </>
      {/* )} */}
    </nav>
  )
}

function ResetModal() {
  const app = useAppStore()
  const tool = useToolStore()
  const steam = useSteamStore()
  const router = useRouter()
  const { isOpen, onOpen, onOpenChange } = useDisclosure()

  function reset() {
    app.resetAppStore()
    tool.resetToolStore()
    steam.resetSteamStore()
    addToast({
      title: "重置成功",
      color: "success",
      // description: "已重置所有设置",
    })
    router.push("/")
  }

  return (
    <>
      <Tooltip content="重置设置" showArrow={true} delay={300}>
        <button
          type="button"
          className="px-2 py-0 transition duration-150 rounded hover:bg-black/10 dark:hover:bg-zinc-100/10 active:scale-95"
          onClick={onOpen}
        >
          <Refresh size={16} />
        </button>
      </Tooltip>
      <Modal isOpen={isOpen} onOpenChange={onOpenChange}>
        <ModalContent>
          {(onClose) => (
            <>
              <ModalHeader className="flex flex-col gap-1">重置设置</ModalHeader>
              <ModalBody>
                <p>确认后会恢复CS工具箱的偏好设置为默认设置</p>
              </ModalBody>
              <ModalFooter>
                <Button color="danger" variant="light" onPress={onClose}>
                  取消
                </Button>
                <Button
                  color="primary"
                  onPress={() => {
                    reset()
                    onClose()
                  }}
                >
                  确认
                </Button>
              </ModalFooter>
            </>
          )}
        </ModalContent>
      </Modal>
    </>
  )
}

export default Nav