'use client';

import { useEffect, useRef, useState } from 'react';
import Link from 'next/link';
import { ChevronDown, ArrowUpLeft, FlaskConical, Microscope, Package, ShieldCheck } from 'lucide-react';
import catalog from '../app/catalog.json';

const groups = [
  { title: 'اندیکاتورهای شیمیایی', icon: FlaskConical, start: 2, end: 15 },
  { title: 'اندیکاتورهای بیولوژیکال', icon: Microscope, start: 0, end: 2 },
  { title: 'بسته‌بندی استریل', icon: Package, start: 15, end: 26 },
  { title: 'بهداشت و کنترل عفونت', icon: ShieldCheck, start: 26, end: 30 },
];

export default function ProductMenu() {
  const [open, setOpen] = useState(false);
  const root = useRef<HTMLDivElement>(null);
  const trigger = useRef<HTMLButtonElement>(null);

  useEffect(() => {
    if (!open) return;
    function outside(event: PointerEvent) {
      if (!root.current?.contains(event.target as Node)) setOpen(false);
    }
    function escape(event: KeyboardEvent) {
      if (event.key === 'Escape') {
        setOpen(false);
        trigger.current?.focus();
      }
    }
    document.addEventListener('pointerdown', outside);
    document.addEventListener('keydown', escape);
    return () => {
      document.removeEventListener('pointerdown', outside);
      document.removeEventListener('keydown', escape);
    };
  }, [open]);

  return <div className="product-menu" ref={root} onBlur={event => {
    if (!event.currentTarget.contains(event.relatedTarget as Node)) setOpen(false);
  }}>
    <button ref={trigger} className="product-menu-trigger" aria-expanded={open} aria-controls="product-mega-menu" onClick={() => setOpen(!open)}>
      محصولات <ChevronDown size={14} aria-hidden="true" />
    </button>
    <div id="product-mega-menu" className="mega-menu" hidden={!open}>
      <div className="mega-heading"><div><strong>محصولات تخصصی ما</strong><span>استریلیزاسیون و کنترل عفونت</span></div><Link href="/#products" onClick={() => setOpen(false)}>همه محصولات <ArrowUpLeft size={17} /></Link></div>
      <div className="mega-columns">{groups.map(group => <section key={group.title}>
        <h2><group.icon size={21} aria-hidden="true" />{group.title}</h2>
        <ul>{catalog.slice(group.start, group.end).map(product => <li key={product.source}>
          <a href={product.downloaded ? product.url : '/tmas-bama'} target={product.downloaded ? '_blank' : undefined} rel={product.downloaded ? 'noreferrer' : undefined} onClick={() => setOpen(false)}>
            <span>{product.title}</span><small>{product.downloaded ? 'PDF' : 'درخواست'}</small>
          </a>
        </li>)}</ul>
      </section>)}</div>
    </div>
  </div>;
}