"use client";

import Link from "next/link";
import Image from "@/components/ui/resilient-image";
import { usePathname } from "next/navigation";
import { BookOpenIcon, MenuIcon } from "lucide-react";

import { Button } from "@/components/ui/button";
import {
  Drawer,
  DrawerClose,
  DrawerContent,
  DrawerDescription,
  DrawerHeader,
  DrawerTitle,
  DrawerTrigger,
} from "@/components/ui/drawer";

const destinations = [
  { href: "/", label: "หน้ารวม", icon: null },
  { href: "/commission", label: "จ้างคำนวณทีม", icon: "/icon/commission.webp" },
  { href: "/stygian", label: "ไกด์ Stygian", icon: "/icon/stygian.webp" },
] as const;

export function PublicNavigation() {
  const pathname = usePathname();
  const isCurrent = (href: string) => href === "/" ? pathname === "/" : pathname.startsWith(href);

  return <>
    <nav aria-label="เมนูหลัก" className="hidden items-center gap-1 lg:flex">
      {destinations.slice(1).map(({ href, label, icon }) =>
        <Button key={href} variant="ghost" size="sm" nativeButton={false}
          render={<Link href={href} aria-current={isCurrent(href) ? "page" : undefined} />}>
          {icon ? <Image src={icon} alt="" width={24} height={24} className="size-6 object-contain" /> : null}{label}
        </Button>)}
    </nav>
    <div className="lg:hidden">
      <Drawer>
        <DrawerTrigger render={<Button type="button" variant="outline" size="sm" aria-label="เปิดเมนูหลัก" />}>
          <MenuIcon data-icon="inline-start" aria-hidden="true" />เมนู
        </DrawerTrigger>
        <DrawerContent>
          <DrawerHeader>
            <DrawerTitle>เมนูหลัก</DrawerTitle>
            <DrawerDescription>เลือกหน้าที่ต้องการดู</DrawerDescription>
          </DrawerHeader>
          <nav aria-label="เมนูหลักบนมือถือ" className="grid gap-1 p-4">
            {destinations.map(({ href, label, icon }) =>
              <DrawerClose key={href} render={<Link href={href} aria-current={isCurrent(href) ? "page" : undefined}
                className="flex min-h-11 items-center gap-3 rounded-lg px-3 text-sm hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring" />}>
                {icon ? <Image src={icon} alt="" width={20} height={20} className="size-5 object-contain" /> : <BookOpenIcon aria-hidden="true" />}{label}
                {isCurrent(href) ? <span className="ml-auto text-xs text-primary">ปัจจุบัน</span> : null}
              </DrawerClose>)}
          </nav>
        </DrawerContent>
      </Drawer>
    </div>
  </>;
}