import { Popover, PopoverButton, PopoverPanel } from '@headlessui/react'
import {
  ArrowRightStartOnRectangleIcon,
  UserIcon,
} from '@heroicons/react/24/outline'
import { ChevronDownIcon } from '@heroicons/react/24/solid'
import { Link, useFetcher, useRouteLoaderData } from 'react-router'

import { ProfileIcon } from '~/components/icons/profile'
import { Button } from '~/components/ui/button'
import { APP } from '~/configs/meta'
import { useAdminContext } from '~/contexts/admin'
import type { loader } from '~/routes/_admin.lg-admin'

export const Navbar = () => {
  const loaderData = useRouteLoaderData<typeof loader>('routes/_admin.lg-admin')
  const { staffData } = loaderData || {}
  const fetcher = useFetcher()
  const { setEditProfile } = useAdminContext()

  return (
    <div className="flex h-20 items-center justify-between border-b border-[#ECECEC] bg-white px-10 py-5">
      <Link
        to="/"
        className="h-full"
      >
        <img
          src={APP.logo}
          alt={APP.title}
          className="h-3/4 w-auto sm:h-full"
        />
      </Link>
      <div className="flex items-center gap-x-8">
        <Popover className="relative">
          <PopoverButton className="flex w-3xs cursor-pointer items-center justify-between rounded-xl p-2 ring-1 ring-[#707FDD]/10 hover:shadow focus:outline-none">
            <div className="flex items-center space-x-3">
              {staffData?.profile_picture ? (
                <img
                  src={staffData?.profile_picture}
                  alt={staffData?.name}
                  className="size-8 rounded-full bg-[#C4C4C4] object-cover"
                />
              ) : (
                <ProfileIcon className="size-8 rounded-full bg-[#C4C4C4]" />
              )}

              <span className="text-sm">{staffData?.name}</span>
            </div>
            <ChevronDownIcon className="size-4 opacity-50" />
          </PopoverButton>
          <PopoverPanel
            anchor={{ to: 'bottom', gap: '8px' }}
            transition
            className="flex w-3xs flex-col divide-y divide-black/5 rounded-xl border border-[#ECECEC] bg-white transition duration-200 ease-in-out data-[closed]:-translate-y-1 data-[closed]:opacity-0"
          >
            <div className="p-2">
              <Button
                variant="secondary"
                className="w-full justify-start rounded p-1 px-3 text-base font-bold"
                onClick={() => {
                  setEditProfile(true)
                }}
              >
                <UserIcon className="size-5" />
                <span>Profile</span>
              </Button>
            </div>
            <div className="p-2">
              <fetcher.Form
                method="POST"
                action="/actions/admin/logout"
                className="grid"
              >
                <Button
                  disabled={fetcher.state !== 'idle'}
                  isLoading={fetcher.state !== 'idle'}
                  type="submit"
                  className="w-full justify-start rounded p-1 px-3 text-base font-bold"
                  variant="secondary"
                  icon={<ArrowRightStartOnRectangleIcon className="size-5" />}
                >
                  <span>Logout</span>
                </Button>
              </fetcher.Form>
            </div>
          </PopoverPanel>
        </Popover>
      </div>
    </div>
  )
}