import { Link } from '@inertiajs/react';
import { Cpu, Server, ShieldCheck, User, Zap } from 'lucide-react';
import React, { useState } from 'react';

interface NavbarProps {
    auth?: {
        user?: any;
    };
}

export const Navbar: React.FC<NavbarProps> = ({ auth }) => {
    const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);

    return (
        <header className="sticky top-0 z-50 w-full border-b border-[#260f14] bg-[#070405]/95 backdrop-blur-md">
            {/* Top banner notice for hardware & uptime */}
            <div className="bg-gradient-to-r from-[#170609] via-[#0d0406] to-[#1a070a] px-4 py-1.5 text-xs text-slate-300 border-b border-[#2b1016]">
                <div className="mx-auto flex max-w-7xl items-center justify-between">
                    <div className="flex items-center gap-2">
                        <span className="relative flex h-2 w-2">
                            <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-emerald-400 opacity-75"></span>
                            <span className="relative inline-flex h-2 w-2 rounded-full bg-emerald-500"></span>
                        </span>
                        <span className="font-medium text-emerald-400">99.99% Uptime</span>
                        <span className="hidden text-slate-600 md:inline">|</span>
                        <span className="hidden text-slate-400 md:inline">Datacenter Frankfurt FRA1 • AMD EPYC™ Gen4 NVMe PCIe 4.0</span>
                    </div>
                    <div className="flex items-center gap-4 text-slate-400">
                        <span className="flex items-center gap-1 text-rose-400 font-mono text-[11px]">
                            <ShieldCheck className="h-3.5 w-3.5 text-rose-400" />
                            2.4 Tbps Voxility Anti-DDoS Active
                        </span>
                    </div>
                </div>
            </div>

            {/* Main Navbar */}
            <div className="mx-auto flex max-w-7xl items-center justify-between px-4 py-3 sm:px-6 lg:px-8">
                {/* Brand Logo */}
                <Link href="/" className="flex items-center gap-3 group">
                    <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-gradient-to-br from-red-600 to-rose-700 shadow-lg shadow-red-600/25 group-hover:scale-105 transition-all duration-300">
                        <Server className="h-5.5 w-5.5 text-white stroke-[2.5]" />
                    </div>
                    <div className="flex flex-col">
                        <span className="text-xl font-black tracking-wider text-white flex items-center gap-1 font-mono">
                            ROSE<span className="text-rose-500">HOST</span>
                        </span>
                        <span className="text-[10px] uppercase tracking-widest text-rose-400/80 font-mono">Next-Gen Server Hosting</span>
                    </div>
                </Link>

                {/* Desktop Menu */}
                <nav className="hidden items-center gap-8 md:flex">
                    <a href="#vps-calculator" className="text-xs font-semibold text-slate-300 hover:text-rose-400 transition-colors flex items-center gap-1.5">
                        <Zap className="h-4 w-4 text-rose-400" />
                        Server-Rechner
                    </a>
                    <a href="#products" className="text-xs font-semibold text-slate-300 hover:text-rose-400 transition-colors flex items-center gap-1.5">
                        <Cpu className="h-4 w-4 text-slate-400" />
                        Produkte & Tarife
                    </a>
                    <a href="#network" className="text-xs font-semibold text-slate-300 hover:text-rose-400 transition-colors">
                        Rechenzentren
                    </a>
                    <a href="#panel-preview" className="text-xs font-semibold text-slate-300 hover:text-rose-400 transition-colors">
                        Control Panel
                    </a>
                    <a href="#faq" className="text-xs font-semibold text-slate-300 hover:text-rose-400 transition-colors">
                        FAQ
                    </a>
                </nav>

                {/* Right Action buttons */}
                <div className="flex items-center gap-3">
                    {auth?.user ? (
                        <Link
                            href="/dashboard"
                            className="flex items-center gap-2 rounded-xl bg-red-600 hover:bg-red-700 px-4 py-2 text-xs font-bold text-white shadow-lg shadow-red-600/25 active:scale-95 transition-all"
                        >
                            <User className="h-4 w-4" />
                            Kundenportal
                        </Link>
                    ) : (
                        <>
                            <Link
                                href="/login"
                                className="hidden sm:inline-flex items-center rounded-xl border border-[#36131b] bg-[#14070a] px-4 py-2 text-xs font-medium text-slate-200 hover:border-rose-500/50 hover:bg-[#1f0a0e] transition-all"
                            >
                                Anmelden
                            </Link>
                            <Link
                                href="/dashboard"
                                className="flex items-center gap-1.5 rounded-xl bg-red-600 hover:bg-red-700 px-4 py-2 text-xs font-bold text-white shadow-lg shadow-red-600/25 active:scale-95 transition-all"
                            >
                                <Zap className="h-4 w-4 fill-white" />
                                Kundenportal (Dashboard)
                            </Link>
                        </>
                    )}

                    {/* Mobile menu toggle */}
                    <button
                        onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
                        className="rounded-xl p-2 text-slate-400 hover:bg-[#14070a] hover:text-white md:hidden border border-[#36131b]"
                    >
                        <svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            {isMobileMenuOpen ? (
                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                            ) : (
                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
                            )}
                        </svg>
                    </button>
                </div>
            </div>

            {/* Mobile Dropdown */}
            {isMobileMenuOpen && (
                <div className="border-b border-[#260f14] bg-[#070405] px-4 py-4 md:hidden">
                    <div className="flex flex-col gap-3">
                        <a href="#vps-calculator" onClick={() => setIsMobileMenuOpen(false)} className="text-xs font-semibold text-slate-300 hover:text-rose-400 py-1">
                            ⚡ Server-Rechner
                        </a>
                        <a href="#products" onClick={() => setIsMobileMenuOpen(false)} className="text-xs font-semibold text-slate-300 hover:text-rose-400 py-1">
                            📦 Produkte & Tarife
                        </a>
                        <a href="#network" onClick={() => setIsMobileMenuOpen(false)} className="text-xs font-semibold text-slate-300 hover:text-rose-400 py-1">
                            🌐 Rechenzentren
                        </a>
                        <a href="#panel-preview" onClick={() => setIsMobileMenuOpen(false)} className="text-xs font-semibold text-slate-300 hover:text-rose-400 py-1">
                            🖥️ Control Panel
                        </a>
                        <a href="#faq" onClick={() => setIsMobileMenuOpen(false)} className="text-xs font-semibold text-slate-300 hover:text-rose-400 py-1">
                            ❓ FAQ
                        </a>
                    </div>
                </div>
            )}
        </header>
    );
};