"use client"

import * as React from "react"
import Link from "next/link"
import { MenuIcon } from "lucide-react"
import { siteConfig } from "@/config/site"
import { Button } from "@/components/ui/button"
import {
  Sheet,
  SheetTrigger,
  SheetContent,
  SheetHeader,
  SheetTitle,
} from "@/components/ui/sheet"
import {
  Accordion,
  AccordionItem,
  AccordionTrigger,
  AccordionContent,
} from "@/components/ui/accordion"

import type { Route } from "next"

export function MobileNav() {
  const { nav } = siteConfig

  return (
    <Sheet>
      <SheetTrigger
        render={
          <Button
            variant="ghost"
            size="icon-sm"
            className="lg:hidden text-muted-gray hover:text-active-dark hover:bg-black/5"
          />
        }
      >
        <MenuIcon className="size-5" />
        <span className="sr-only">Toggle navigation menu</span>
      </SheetTrigger>
      <SheetContent
        side="right"
        className="w-[300px] sm:w-[400px] bg-navy border-l border-hairline text-off-white p-6"
      >
        <SheetHeader className="border-b border-white/10 pb-4">
          <SheetTitle className="font-display text-lg text-gold font-semibold">
            Meticulous Research
          </SheetTitle>
        </SheetHeader>
        <div className="flex flex-col gap-6 py-6 overflow-y-auto max-h-[80vh]">
          <Accordion className="w-full">
            {nav.primary.map((item, index) => {
              if (item.isTrigger) {
                const isReports = item.title === "Reports"
                const subItems = isReports
                  ? [
                      { section: "By Industry", links: nav.reportsMegaMenu.industries },
                      { section: "By Type", links: nav.reportsMegaMenu.types },
                      { section: "Featured", links: nav.reportsMegaMenu.featured },
                    ]
                  : [
                      { section: "Insights", links: nav.insightsMegaMenu },
                    ]

                return (
                  <AccordionItem
                    key={index}
                    value={`item-${index}`}
                    className="border-b border-white/10"
                  >
                    <AccordionTrigger className="text-sm hover:no-underline font-sans text-off-white py-3">
                      {item.title}
                    </AccordionTrigger>
                    <AccordionContent className="pt-2 pb-4 pl-4 text-off-white/80 space-y-4">
                      {subItems.map((sub, sIdx) => (
                        <div key={sIdx} className="space-y-2">
                          {isReports && (
                            <h4 className="text-[11px] font-mono tracking-wider text-gold uppercase">
                              {sub.section}
                            </h4>
                          )}
                          <ul className="space-y-2">
                            {sub.links.map((link, lIdx) => (
                              <li key={lIdx}>
                                <Link
                                  href={link.href as Route}
                                  className="text-xs hover:text-gold block py-1"
                                >
                                  {link.title}
                                </Link>
                              </li>
                            ))}
                          </ul>
                        </div>
                      ))}
                    </AccordionContent>
                  </AccordionItem>
                )
              }

              return (
                <div key={index} className="border-b border-white/10 py-3">
                  <Link
                    href={item.href as Route}
                    className="text-sm font-sans font-medium text-off-white hover:text-gold block"
                  >
                    {item.title}
                  </Link>
                </div>
              )
            })}
          </Accordion>

          <div className="mt-auto pt-6">
            <Link
              href="/custom-research"
              className="w-full text-center bg-gold text-navy hover:bg-gold/90 font-sans font-medium rounded-sm py-2 px-4 block text-sm"
            >
              Talk to an Analyst
            </Link>
          </div>
        </div>
      </SheetContent>
    </Sheet>
  )
}