"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,
  );
  const withChildren = tree.filter((node) => node.children.length > 0);
  const leafParents = tree.filter((node) => node.children.length === 0);

  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">
                {withChildren.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>
                    <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>
                  </div>
                ))}
              </div>
              {leafParents.length > 0 ? (
                <div className="mega-menu-leaf-row">
                  <p className="mega-menu-leaf-label">More</p>
                  <ul className="mega-menu-leaf-list">
                    {leafParents.map((parent) => (
                      <li key={parent.id}>
                        <Link
                          href={storeCategoryHref(parent.id, categoryLabel(parent))}
                          className="mega-menu-parent-leaf"
                          onClick={() => setOpen(false)}
                        >
                          {categoryLabel(parent)}
                        </Link>
                      </li>
                    ))}
                  </ul>
                </div>
              ) : null}
            </>
          )}
        </div>
      ) : null}
    </div>
  );
}