import {useEffect, useRef, useState} from 'react';
import {useNavigate} from 'react-router-dom';

const POP_ITEMS = {
    Platform: [
        {title: 'Command as Service', href: '/solutions', desc: 'Every action is a versioned, replayable command'},
        {title: 'Collaborative Rooms', href: '/solutions/rooms', desc: 'Command-first human-AI workspaces via shared command streams'},
        {title: 'AI Agents', href: '/solutions', desc: 'Agents that listen to commands and execute skills'},
        {title: 'Git Repositories', href: '/solutions', desc: 'Branches, commits, PRs, branch protection'},
    ],
    Skills: [
        {title: 'Explore Skills', href: '/skills', desc: 'Browse the community skill library'},
        {title: 'Publish a Skill', href: '/skills/publish', desc: 'Share your agent behavior as a service'},
        {title: 'Skill Documentation', href: '/skills/docs', desc: 'Build and test skills locally'},
    ],
    Network: [
        {title: 'Explore Network', href: '/network', desc: 'Discover agents and command flows'},
        {title: 'Public Rooms', href: '/network/rooms', desc: 'Join open rooms — humans and agents executing commands together'},
        {title: 'Developer API', href: '/network/api', desc: 'Emit commands, stream results'},
    ],
    Pricing: [
        {title: 'Plans & Pricing', href: '/pricing', desc: 'Compare free and paid tiers'},
        {title: 'Enterprise', href: '/pricing/enterprise', desc: 'Command as Service at scale — custom deployment & SLA'},
        {title: 'Billing FAQ', href: '/pricing/faq', desc: 'Common billing questions'},
    ],
};

type PopKey = keyof typeof POP_ITEMS;

export function LandingNav() {
    const navigate = useNavigate();
    const [openPop, setOpenPop] = useState<PopKey | null>(null);
    const popRef = useRef<HTMLDivElement>(null);

    useEffect(() => {
        const handler = (e: MouseEvent) => {
            if (popRef.current && !popRef.current.contains(e.target as Node)) {
                setOpenPop(null);
            }
        };
        document.addEventListener('mousedown', handler);
        return () => document.removeEventListener('mousedown', handler);
    }, []);

    return (
        <header
            className="sticky top-0 z-50 border-b border-zinc-100 dark:border-zinc-900/50 bg-white/80 dark:bg-zinc-950/80 backdrop-blur-xl">
            <div className="mx-auto max-w-5xl px-6 h-14 flex items-center justify-between">
                {/* Logo */}
                <div className="flex items-center gap-2.5">
                    <img src="/logo.png" alt="GitDataAI" className="h-6 w-6 object-contain"/>
                    <span className="text-sm font-semibold text-zinc-900 dark:text-zinc-100 tracking-tight">
                        GitDataAI
                    </span>
                </div>

                {/* Nav links */}
                <nav className="hidden md:flex items-center gap-1" ref={popRef}>
                    {(Object.keys(POP_ITEMS) as PopKey[]).map(key => (
                        <div key={key} className="relative">
                            <button
                                onClick={() => setOpenPop(openPop === key ? null : key)}
                                onMouseEnter={() => setOpenPop(key)}
                                className="h-8 px-3 flex items-center gap-1 text-xs font-medium text-zinc-500 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-100 uppercase tracking-widest transition-colors rounded-full">
                                {key}
                                <svg className={`h-3 w-3 transition-transform ${openPop === key ? 'rotate-180' : ''}`}
                                     fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7"/>
                                </svg>
                            </button>

                            {openPop === key && (
                                <div
                                    className="absolute top-full left-0 mt-2 w-64 rounded-2xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 shadow-xl overflow-hidden z-50">
                                    {POP_ITEMS[key].map(item => (
                                        <button
                                            key={item.href}
                                            onClick={() => {
                                                navigate(item.href);
                                                setOpenPop(null);
                                            }}
                                            className="w-full flex flex-col items-start px-4 py-3 hover:bg-zinc-50 dark:hover:bg-zinc-800/50 transition-colors text-left">
                                            <span
                                                className="text-sm font-medium text-zinc-900 dark:text-zinc-100">{item.title}</span>
                                            <span
                                                className="text-xs text-zinc-500 dark:text-zinc-400">{item.desc}</span>
                                        </button>
                                    ))}
                                </div>
                            )}
                        </div>
                    ))}
                </nav>

                {/* Actions */}
                <div className="flex items-center gap-2">
                    <button onClick={() => navigate('/auth/login')}
                            className="h-8 px-4 text-xs font-medium text-zinc-600 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-zinc-100 transition-colors rounded-full">
                        Sign in
                    </button>
                    <button onClick={() => navigate('/auth/register')}
                            className="h-8 px-4 bg-zinc-900 dark:bg-white text-white dark:text-zinc-900 text-xs font-medium rounded-full hover:bg-zinc-800 dark:hover:bg-zinc-100 transition-colors">
                        Join Beta
                    </button>
                </div>
            </div>
        </header>
    );
}
