"use client";

import Link from "next/link";
import { toMegaSections, type NavCategory } from "@/lib/categories";

function CategoryLinks({ items, depth = 0 }: { items: NavCategory[]; depth?: number }) {
  if (!items.length) return null;

  return (
    <ul className={depth === 0 ? "space-y-1" : "mt-1 space-y-1 border-r border-line/70 pr-2 mr-1"}>
      {items.map((item) => (
        <li key={item.id}>
          <Link
            href={item.href}
            className={`block rounded-lg px-2 py-1 transition hover:bg-paper hover:text-brand ${
              depth === 0 ? "text-[12.5px] text-muted" : "text-[12px] text-muted/90"
            }`}
          >
            {item.title}
          </Link>
          {item.children.length ? <CategoryLinks items={item.children} depth={depth + 1} /> : null}
        </li>
      ))}
    </ul>
  );
}

export function MegaMenu({ open, categories }: { open: boolean; categories: NavCategory[] }) {
  if (!open) return null;

  const sections = toMegaSections(categories);

  return (
    <div className="absolute top-full right-0 z-50 -mt-1 pt-3">
      <div className="max-h-[min(70vh,640px)] w-[min(920px,calc(100vw-2rem))] overflow-y-auto border border-line bg-white p-5 shadow-[0_20px_50px_rgba(0,0,0,0.08)]">
        {sections.length === 0 ? (
          <p className="text-[13px] text-muted">دسته‌بندی‌ها به‌زودی اضافه می‌شوند.</p>
        ) : (
          <div className="columns-2 gap-6 md:columns-3 lg:columns-4">
            {sections.map((category) => (
              <div key={category.id} className="mb-6 break-inside-avoid">
                <Link
                  href={category.href}
                  className="mb-2 block text-[13.5px] font-semibold text-ink hover:text-brand"
                >
                  {category.title}
                </Link>
                <CategoryLinks items={category.children} />
              </div>
            ))}
          </div>
        )}
      </div>
    </div>
  );
}