'use client';

import { useEffect, useRef, useState } from 'react';
import Link from 'next/link';
import { Icon, type IconName } from '@/components/marketing/icons';
import { cn } from '@/lib/utils';

const quickLinks: Array<{ href: string; label: string; icon: IconName }> = [
  { href: '/dashboard/customers', label: 'Customers', icon: 'users' },
  { href: '/dashboard/storefront/settings', label: 'Store Settings', icon: 'settings' },
  { href: '/dashboard/reports', label: 'Reports', icon: 'chart' },
  { href: '/dashboard/billing', label: 'Billing', icon: 'wallet' },
  { href: '/dashboard/account', label: 'Account', icon: 'user' },
  { href: '/dashboard/more', label: 'All options', icon: 'more' },
];

export function MoreOptionsMenu() {
  const [open, setOpen] = useState(false);
  const rootRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (!open) return;
    function onPointer(event: MouseEvent) {
      if (!rootRef.current?.contains(event.target as Node)) setOpen(false);
    }
    function onKey(event: KeyboardEvent) {
      if (event.key === 'Escape') setOpen(false);
    }
    document.addEventListener('mousedown', onPointer);
    document.addEventListener('keydown', onKey);
    return () => {
      document.removeEventListener('mousedown', onPointer);
      document.removeEventListener('keydown', onKey);
    };
  }, [open]);

  return (
    <div className="relative" ref={rootRef}>
      <button
        type="button"
        className={cn(
          'relative inline-flex size-11 items-center justify-center rounded-xl text-muted-foreground transition-[background-color,color,transform] duration-200 hover:bg-muted hover:text-navy active:scale-95',
          open && 'bg-muted text-navy',
        )}
        aria-label="More options"
        aria-expanded={open}
        aria-haspopup="menu"
        onClick={() => setOpen(value => !value)}
      >
        <Icon name="more" size={20} />
      </button>

      {open && (
        <>
          <button
            type="button"
            className="more-backdrop fixed inset-0 z-40 bg-navy/20 lg:bg-transparent"
            aria-label="Close more options"
            onClick={() => setOpen(false)}
          />
          <div
            role="menu"
            className="more-dropdown absolute right-0 z-50 mt-2 w-64 origin-top-right overflow-hidden rounded-[var(--radius-lg)] border border-border bg-card p-1.5 shadow-[var(--shadow-lg)]"
          >
            {quickLinks.map((link, index) => (
              <Link
                key={link.href}
                href={link.href}
                role="menuitem"
                className="more-dropdown-item flex items-center gap-3 rounded-[var(--radius-md)] px-3 py-2.5 text-sm font-semibold text-navy transition-colors hover:bg-muted"
                style={{ animationDelay: `${index * 30}ms` }}
                onClick={() => setOpen(false)}
              >
                <span className="inline-flex size-8 items-center justify-center rounded-lg bg-primary-soft text-primary">
                  <Icon name={link.icon} size={16} />
                </span>
                {link.label}
              </Link>
            ))}
          </div>
        </>
      )}
    </div>
  );
}