"use client"

import { Button, Dropdown, DropdownTrigger, DropdownMenu, DropdownItem, Avatar, Spinner } from "@heroui/react"
import { User, Logout, Login, AddUser } from "@icon-park/react"
import { useAuthStore } from "@/store/auth"
import { openLoginPage, openSignupPage } from "@/utils/auth"
import { useDisclosure } from "@heroui/react"
import { Modal, ModalContent, ModalHeader, ModalBody, ModalFooter } from "@heroui/react"

export function AuthButton() {
  const { state, signOut } = useAuthStore()
  const { isOpen, onOpen, onOpenChange } = useDisclosure()

  const handleLogin = async () => {
    await openLoginPage()
  }

  const handleSignup = async () => {
    await openSignupPage()
  }

  const handleSignOut = async () => {
    await signOut()
    onOpenChange()
  }

  if (state.isLoading) {
    return (
      <Button
        isIconOnly
        variant="light"
        size="sm"
        className="px-2 py-0 rounded transition duration-150 hover:bg-black/10 dark:hover:bg-zinc-100/10 active:scale-95"
      >
        <Spinner size="sm" />
      </Button>
    )
  }

  if (state.isAuthenticated && state.user) {
    return (
      <>
        <Dropdown placement="bottom-end">
          <DropdownTrigger>
            <Button
              isIconOnly
              variant="light"
              size="sm"
              className="px-2 py-0 rounded transition duration-150 hover:bg-black/10 dark:hover:bg-zinc-100/10 active:scale-95"
            >
              <Avatar
                src={state.user.user_metadata?.avatar_url}
                name={state.user.email || state.user.id}
                size="sm"
                className="w-6 h-6"
              />
            </Button>
          </DropdownTrigger>
          <DropdownMenu aria-label="用户菜单">
            <DropdownItem
              key="profile"
              startContent={<User size={16} />}
              textValue="用户信息"
            >
              <div className="flex flex-col">
                <span className="text-sm font-medium">{state.user.email}</span>
                {state.user.user_metadata?.name && (
                  <span className="text-xs text-zinc-500">{state.user.user_metadata.name}</span>
                )}
              </div>
            </DropdownItem>
            <DropdownItem
              key="logout"
              startContent={<Logout size={16} />}
              color="danger"
              onPress={onOpen}
            >
              退出登录
            </DropdownItem>
          </DropdownMenu>
        </Dropdown>
        <Modal isOpen={isOpen} onOpenChange={onOpenChange}>
          <ModalContent>
            {(onClose) => (
              <>
                <ModalHeader className="flex flex-col gap-1">退出登录</ModalHeader>
                <ModalBody>
                  <p>确认要退出登录吗？</p>
                </ModalBody>
                <ModalFooter>
                  <Button color="default" variant="light" onPress={onClose}>
                    取消
                  </Button>
                  <Button
                    color="danger"
                    onPress={() => {
                      handleSignOut()
                    }}
                  >
                    确认退出
                  </Button>
                </ModalFooter>
              </>
            )}
          </ModalContent>
        </Modal>
      </>
    )
  }

  return (
    <Dropdown placement="bottom-end">
      <DropdownTrigger>
        <Button
          isIconOnly
          variant="light"
          size="sm"
          className="px-2 py-0 rounded transition duration-150 hover:bg-black/10 dark:hover:bg-zinc-100/10 active:scale-95"
        >
          <User size={16} />
        </Button>
      </DropdownTrigger>
      <DropdownMenu aria-label="登录菜单">
        <DropdownItem
          key="login"
          startContent={<Login size={16} />}
          onPress={handleLogin}
        >
          登录
        </DropdownItem>
        <DropdownItem
          key="signup"
          startContent={<AddUser size={16} />}
          onPress={handleSignup}
        >
          注册
        </DropdownItem>
      </DropdownMenu>
    </Dropdown>
  )
}