'use client'

import type { MobileNavigation } from '@/payload-types'

import { CMSLink } from '@/components/Link'
import { Button } from '@/components/ui/button'
import {
  Sheet,
  SheetContent,
  SheetDescription,
  SheetFooter,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from '@/components/ui/sheet'
import { Leaf, MenuIcon } from 'lucide-react'
import Link from 'next/link'
import { usePathname } from 'next/navigation'
import React, { useEffect, useState } from 'react'

type MobileNavItem = NonNullable<MobileNavigation['navItems']>[number]

type Props = {
  items: MobileNavItem[]
  trigger: React.ReactNode
}

export function MobileNavigationDrawer({ items, trigger }: Props) {
  const pathname = usePathname()
  const [isOpen, setIsOpen] = useState(false)

  useEffect(() => {
    setIsOpen(false)
  }, [pathname])

  useEffect(() => {
    const handleResize = () => {
      if (window.innerWidth >= 768) {
        setIsOpen(false)
      }
    }

    window.addEventListener('resize', handleResize)
    return () => window.removeEventListener('resize', handleResize)
  }, [])

  return (
    <Sheet onOpenChange={setIsOpen} open={isOpen}>
      <SheetTrigger asChild>{trigger}</SheetTrigger>

      <SheetContent className="w-[86vw] max-w-sm gap-0 border-r border-[#dbe8d7] bg-[#fbfdf8] px-0" side="left">
        <SheetHeader className="border-b border-[#dbe8d7] px-5 pt-5 pb-4 text-left">
          <SheetTitle className="flex items-center gap-3 font-serif text-2xl text-[#063f2b]">
            <span className="inline-flex h-10 w-10 items-center justify-center rounded-full border border-[#dbe8d7] bg-white">
              <Leaf className="h-5 w-5" strokeWidth={2.25} />
            </span>
            Bunga Mekarsari
          </SheetTitle>

          <SheetDescription className="pt-2 text-sm leading-6 text-[#607668]">
            Akses cepat ke katalog, artikel perawatan, kontak, dan layanan Bunga Mekarsari.
          </SheetDescription>
        </SheetHeader>

        <div className="flex-1 overflow-y-auto px-5 py-5">
          {items.length ? (
            <ul className="flex w-full flex-col gap-2">
              {items.map((item) => (
                <li key={item.id}>
                  <CMSLink
                    {...item.link}
                    appearance="link"
                    className="flex rounded-2xl border border-transparent px-4 py-3 text-sm font-bold text-[#14422d] transition hover:border-[#dbe8d7] hover:bg-white"
                  />
                </li>
              ))}
            </ul>
          ) : (
            <p className="rounded-2xl border border-[#dbe8d7] bg-white px-4 py-3 text-sm text-[#607668]">
              Menu mobile belum dikonfigurasi.
            </p>
          )}
        </div>

        <SheetFooter className="border-t border-[#dbe8d7] bg-white/70 px-5 py-4">
          <Button asChild className="rounded-full bg-[#063f2b] text-white hover:bg-[#14422d]">
            <Link href="/contact">
              <MenuIcon className="mr-2 h-4 w-4" />
              Hubungi Bunga Mekarsari
            </Link>
          </Button>
        </SheetFooter>
      </SheetContent>
    </Sheet>
  )
}