"use client";

import Link from "next/link";
import { useState } from "react";
import { buildCategoryTree, categoryLabel } from "@/lib/meshkee/format";
import type { Category } from "@/lib/meshkee/types";
import { storeCategoryHref } from "@/lib/meshkee/urls";

export function ProductsMegaMenu({ categories }: { categories: Category[] }) {
  const [open, setOpen] = useState(false);
  const tree = buildCategoryTree(categories).filter(
    (node) => node.children.length > 0 || !node.parentId,
  );

  return (
    <div
      className={`mega-menu ${open ? "is-open" : ""}`}
      onMouseEnter={() => setOpen(true)}
      onMouseLeave={() => setOpen(false)}
    >
      <Link
        href="/store"
        className="mega-menu-trigger"
        onFocus={() => setOpen(true)}
        aria-expanded={open}
      >
        <span>محصولات</span>
        <svg
          className="mega-menu-chevron"
          viewBox="0 0 16 16"
          width="12"
          height="12"
          aria-hidden="true"
        >
          <path
            d="M3.5 5.75 8 10.25l4.5-4.5"
            fill="none"
            stroke="currentColor"
            strokeWidth="1.7"
            strokeLinecap="round"
            strokeLinejoin="round"
          />
        </svg>
      </Link>
      {open ? (
        <div className="mega-menu-panel" role="menu">
          {tree.length === 0 ? (
            <p className="empty-note">دسته‌بندی‌ای برای نمایش وجود ندارد.</p>
          ) : (
            <div className="mega-menu-grid">
              {tree.map((parent) => (
                <div key={parent.id} className="mega-menu-column">
                  <Link
                    href={storeCategoryHref(parent.id, categoryLabel(parent))}
                    className="mega-menu-parent"
                    onClick={() => setOpen(false)}
                  >
                    {categoryLabel(parent)}
                  </Link>
                  {parent.children.length > 0 ? (
                    <ul className="mega-menu-children">
                      {parent.children.map((child) => (
                        <li key={child.id}>
                          <Link
                            href={storeCategoryHref(child.id, categoryLabel(child))}
                            className="mega-menu-child"
                            onClick={() => setOpen(false)}
                          >
                            {categoryLabel(child)}
                          </Link>
                        </li>
                      ))}
                    </ul>
                  ) : null}
                </div>
              ))}
            </div>
          )}
        </div>
      ) : null}
    </div>
  );
}