import { Link } from '@inertiajs/react';
import {
    NavigationMenu,
    NavigationMenuContent,
    NavigationMenuItem,
    NavigationMenuLink,
    NavigationMenuList,
    NavigationMenuTrigger,
} from '@/components/ui/navigation-menu';
import { Phone, Mail, MessageCircle, Users } from 'lucide-react';

interface NavbarProps {
    settings?: {
        support_phone?: string;
        support_email?: string;
        brand_name?: string;
    };
}

export default function Navbar({ settings }: NavbarProps) {
    const supportPhone = settings?.support_phone || '+974 3339 6090';
    const supportEmail = settings?.support_email || 'dev@hometech.one';

    return (
        <header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
            {/* Top Bar */}
            <div className="border-b bg-muted/40">
                <div className="container mx-auto px-4">
                    <div className="flex h-10 items-center justify-between text-sm">
                        <div className="flex items-center gap-4">
                            <a href={`tel:${supportPhone}`} className="flex items-center gap-2 hover:text-primary transition-colors">
                                <Phone className="h-4 w-4" />
                                <span className="hidden sm:inline">{supportPhone}</span>
                            </a>
                            <a href={`mailto:${supportEmail}`} className="flex items-center gap-2 hover:text-primary transition-colors">
                                <Mail className="h-4 w-4" />
                                <span className="hidden md:inline">{supportEmail}</span>
                            </a>
                        </div>
                        <div className="flex items-center gap-4">
                            <a href="https://wa.me/97433396090" target="_blank" rel="noopener noreferrer" className="flex items-center gap-2 hover:text-primary transition-colors">
                                <MessageCircle className="h-4 w-4" />
                                <span className="hidden sm:inline">WhatsApp</span>
                            </a>
                            <a href="https://cp.hometech.one/clientarea.php" target="_blank" rel="noopener noreferrer" className="flex items-center gap-2 hover:text-primary transition-colors">
                                <Users className="h-4 w-4" />
                                <span className="hidden sm:inline">Client Area</span>
                            </a>
                        </div>
                    </div>
                </div>
            </div>

            {/* Main Navigation */}
            <div className="container mx-auto px-4">
                <div className="flex h-16 items-center justify-between">
                    {/* Logo */}
                    <Link href="/" className="flex items-center">
                        <img src="/img/HomeTech.png" alt="HomeTech" className="h-10 w-auto" />
                    </Link>

                    {/* Desktop Navigation */}
                    <NavigationMenu className="hidden lg:flex">
                        <NavigationMenuList className="gap-2">
                            <NavigationMenuItem>
                                <Link href="/">
                                    <NavigationMenuLink className="group inline-flex h-16 items-center justify-center px-4 text-sm font-medium text-slate-700 transition-colors hover:text-primary">
                                        Home
                                    </NavigationMenuLink>
                                </Link>
                            </NavigationMenuItem>

                            <NavigationMenuItem>
                                <Link href="/about-us">
                                    <NavigationMenuLink className="group inline-flex h-16 items-center justify-center px-4 text-sm font-medium text-slate-700 transition-colors hover:text-primary">
                                        About Us
                                    </NavigationMenuLink>
                                </Link>
                            </NavigationMenuItem>

                            <NavigationMenuItem>
                                <Link href="/services">
                                    <NavigationMenuLink className="group inline-flex h-16 items-center justify-center px-4 text-sm font-medium text-slate-700 transition-colors hover:text-primary">
                                        Services
                                    </NavigationMenuLink>
                                </Link>
                            </NavigationMenuItem>

                            <NavigationMenuItem>
                                <Link href="/ai-automation">
                                    <NavigationMenuLink className="group inline-flex h-16 items-center justify-center px-4 text-sm font-medium text-slate-700 transition-colors hover:text-primary">
                                        AI Automation
                                    </NavigationMenuLink>
                                </Link>
                            </NavigationMenuItem>

                            <NavigationMenuItem>
                                <Link href="/erp">
                                    <NavigationMenuLink className="group inline-flex h-16 items-center justify-center px-4 text-sm font-medium text-slate-700 transition-colors hover:text-primary">
                                        ERP Solutions
                                    </NavigationMenuLink>
                                </Link>
                            </NavigationMenuItem>

                            <NavigationMenuItem>
                                <Link href="/portfolio">
                                    <NavigationMenuLink className="group inline-flex h-16 items-center justify-center px-4 text-sm font-medium text-slate-700 transition-colors hover:text-primary">
                                        Portfolio
                                    </NavigationMenuLink>
                                </Link>
                            </NavigationMenuItem>

                            <NavigationMenuItem>
                                <Link href="/testimonial">
                                    <NavigationMenuLink className="group inline-flex h-16 items-center justify-center px-4 text-sm font-medium text-slate-700 transition-colors hover:text-primary">
                                        Testimonials
                                    </NavigationMenuLink>
                                </Link>
                            </NavigationMenuItem>

                            <NavigationMenuItem>
                                <Link href="/contact">
                                    <NavigationMenuLink className="group inline-flex h-16 items-center justify-center px-4 text-sm font-medium text-slate-700 transition-colors hover:text-primary">
                                        Contact Us
                                    </NavigationMenuLink>
                                </Link>
                            </NavigationMenuItem>
                        </NavigationMenuList>
                    </NavigationMenu>

                    {/* Mobile Menu Button (TODO: Add mobile menu) */}
                    <button className="lg:hidden p-2 hover:bg-accent rounded-md">
                        <svg className="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
                        </svg>
                    </button>
                </div>
            </div>
        </header>
    );
}