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

interface QuickLink {
  label: string;
  href: string;
  external?: boolean;
  action?: () => void;
}

const baseLinks: QuickLink[] = [
  { label: 'Privacy', href: 'https://wpassistant.ai/privacy/', external: true },
  { label: 'Terms', href: 'https://wpassistant.ai/terms/', external: true },
  { label: 'Sitemap', href: 'https://wpassistant.ai/html-sitemap/', external: true },
];

const WORDPRESS_HELP_LINK: QuickLink = {
  label: 'Human WordPress Help',
  href: 'https://wpassistant.ai/human-wordpress-help/',
  external: true,
};

const QuickLinks: React.FC = () => {
    const [isOpen, setIsOpen] = useState(false);
    const [isModalOpen, setIsModalOpen] = 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);
        }
    };

    const openModal = () => {
        setIsOpen(false);
        setIsModalOpen(true);
    };
    
    // Add privacy preferences link
    const links = IS_WORDPRESS
        ? baseLinks.filter(link => link.label !== 'Sitemap')
        : baseLinks;

    const allLinks = IS_WORDPRESS
        ? [...links, WORDPRESS_HELP_LINK]
        : [
            ...links,
            { 
                label: 'Content Use', 
                href: '#', 
                action: openModal 
            }
        ];
    
    return (
        <div 
            className="relative w-full"
            onMouseEnter={handleMouseEnter}
            onMouseLeave={handleMouseLeave}
        >
            <button 
                onClick={handleClick}
                className={`
                    w-full text-sm text-left py-2 px-3 mb-1 rounded-lg
                    dark:text-gray-400 text-gray-500
                    transition-colors duration-0 
                    flex items-center justify-between
                    ${isMobile 
                        ? isOpen
                            ? 'bg-secondary/10 dark:bg-secondary/40 text-foreground'  // Mobile & Open
                            : 'hover:text-foreground hover:bg-secondary/10 dark:hover:bg-secondary/40'  // Mobile & Closed
                        : 'hover:text-foreground hover:bg-secondary/10 dark:hover:bg-secondary/40'  // Desktop (unchanged)
                    }
                `}
            >
                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-background-light dark:bg-background-dark rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 py-3 w-36 z-[9000] px-3 md:block hidden">    
                    <div className="absolute right-full top-0 bottom-0 w-2" />
                    {allLinks.map((link, index) => (
                        <a
                            key={link.href + index}
                            href={link.href}
                            target={link.external ? "_blank" : undefined}
                            rel={link.external ? "noopener" : undefined}
                            onClick={e => {
                                if (link.action) {
                                    e.preventDefault();
                                    link.action();
                                }
                            }}
                            className="block px-3 py-2 text-sm dark:text-gray-400 text-gray-500 hover:text-foreground hover:bg-secondary/10 dark:hover:bg-secondary/40 transition-colors duration-0 rounded-lg"
                        >
                            {link.label}
                        </a>
                    ))}
                </div>
            )}
            
            {/* Mobile menu */}
            {isOpen && isMobile && (
                <div className="absolute right-0 bottom-full mb-1 bg-background-light dark:bg-background-dark rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 py-3 w-36 z-[9000] px-3 md:hidden block">    
                    {allLinks.map((link, index) => (
                        <a
                            key={link.href + index}
                            href={link.href}
                            target={link.external ? "_blank" : undefined}
                            rel={link.external ? "noopener" : undefined}
                            onClick={e => {
                                if (link.action) {
                                    e.preventDefault();
                                    link.action();
                                }
                            }}
                            className="block px-3 py-2 text-sm dark:text-gray-400 text-gray-500 hover:text-foreground hover:bg-secondary/10 dark:hover:bg-secondary/40 transition-colors duration-0 rounded-lg"
                        >
                            {link.label}
                        </a>
                    ))}
                </div>
            )}

            {isModalOpen && (
                <SeoConsentModal onClose={() => setIsModalOpen(false)} />
            )}
        </div>
    );
};

export default React.memo(QuickLinks);