import React, { useState, useRef } from 'react';
import { ChevronRightIcon } from '../../assets/icons/ChevronRightIcon';

interface QuickLink {
  label: string;
  href: string;
  external?: boolean;
}

const actionPanelSiteLinks: QuickLink[] = [
  { label: 'Website', href: 'https://actionpanelai.com/', external: true },
  { label: 'Privacy', href: 'https://actionpanelai.com/privacy', external: true },
  { label: 'Terms', href: 'https://actionpanelai.com/terms', external: true },
];

const QuickLinks: React.FC = () => {
    const [isOpen, setIsOpen] = useState(false);
    const timeoutRef = useRef<NodeJS.Timeout>();
    
    // Optionally, detect if it's a mobile device
    const isMobile = window.matchMedia('(pointer: coarse)').matches;
    
    const handleMouseEnter = () => {
        // Show dropdown only if it's not a mobile device
        if (!isMobile) {
            if (timeoutRef.current) {
                clearTimeout(timeoutRef.current);
            }
            setIsOpen(true);
        }
    };

    const handleMouseLeave = () => {
        if (!isMobile) {
            timeoutRef.current = setTimeout(() => {
                setIsOpen(false);
            }, 75);
        }
    };

    const handleClick = () => {
        // If it is mobile, toggle on click
        if (isMobile) {
            setIsOpen(!isOpen);
        }
    };

    return (
        <div 
            className="relative w-full"
            onMouseEnter={handleMouseEnter}
            onMouseLeave={handleMouseLeave}
        >
            <button
                onClick={handleClick}
                className={`
                    w-full text-sm font-medium text-left py-2 px-3 rounded-md
                    text-app-muted-strong
                    transition-colors
                    flex items-center justify-between
                    ${isMobile && isOpen
                        ? 'bg-app-surface-hover text-app-text'
                        : 'hover:text-app-text hover:bg-app-surface-hover'
                    }
                `}
            >
                Quick Links
                <ChevronRightIcon 
                    className={`w-4 h-4 transform ${
                        isOpen ? '-rotate-90' : 'rotate-0'
                    } transition-transform duration-200`}
                />
            </button>
            
            {/* Desktop menu */}
            {isOpen && !isMobile && (
                <div className="absolute left-full bottom-0 ml-5 bg-app-surface rounded-lg shadow-card border border-app-border py-2 w-40 z-[9000] px-2 md:block hidden">    
                    <div className="absolute right-full top-0 bottom-0 w-2" />
                    {actionPanelSiteLinks.map((link) => (
                        <a
                            key={link.href}
                            href={link.href}
                            target={link.external ? "_blank" : undefined}
                            rel={link.external ? "noopener" : undefined}
                            className="block px-3 py-2 text-sm text-app-muted hover:text-app-text hover:bg-app-surface-hover transition-colors rounded-md"
                        >
                            {link.label}
                        </a>
                    ))}
                </div>
            )}
            
            {/* Mobile menu */}
            {isOpen && isMobile && (
                <div className="absolute right-0 bottom-full mb-1 bg-app-surface rounded-lg shadow-card border border-app-border py-2 w-40 z-[9000] px-2 md:hidden block">    
                    {actionPanelSiteLinks.map((link) => (
                        <a
                            key={link.href}
                            href={link.href}
                            target={link.external ? "_blank" : undefined}
                            rel={link.external ? "noopener" : undefined}
                            className="block px-3 py-2 text-sm text-app-muted hover:text-app-text hover:bg-app-surface-hover transition-colors rounded-md"
                        >
                            {link.label}
                        </a>
                    ))}
                </div>
            )}
        </div>
    );
};

export default React.memo(QuickLinks);