'use client';

import React from 'react';
import Link from 'next/link';
import {usePathname, useRouter} from 'next/navigation';
import {Button} from '@/components/ui/button';
import {Sheet, SheetContent, SheetTrigger} from '@/components/ui/sheet';
import {Menu} from 'lucide-react';
import {ThemeToggle} from '@/components/theme-toggle';

const navLinks = [
    {id: 'services', label: 'Leistungen'},
    {id: 'about', label: 'Über uns'},
    {id: 'process', label: 'Ablauf'},
    {id: 'whyus', label: 'Warum wir'},
    {id: 'referral', label: 'Empfehlung'},
    {id: 'faq', label: 'FAQ'},
];

const Navbar = () => {
    const pathname = usePathname();
    const router = useRouter();

    const handleNavClick = (id: string) => {
        if (typeof window === 'undefined') return

        if (pathname === '/') {
            const el = document.getElementById(id)
            if (el) {
                el.scrollIntoView({behavior: 'smooth', block: 'start'})
            }
        } else {
            localStorage.setItem('scrollToId', id)
            router.push('/')
        }
    }

    return (
        <div className="w-full px-4 sm:px-6 lg:px-8 flex justify-center mt-4 z-50 fixed">
            <header
                className="bg-background/50 backdrop-blur-md border shadow-lg rounded-xl w-full max-w-screen-xl py-3 px-4 sm:px-6 lg:px-8">
                <div className="flex items-center justify-between">
                    <button
                        onClick={() => handleNavClick('start')}
                        className="text-xl font-bold cursor-pointer"
                    >
                        <span className="text-pink-600">R</span>hein Software
                    </button>

                    {/* Desktop nav */}
                    <nav className="hidden lg:flex items-center gap-6">
                        {navLinks.map((link) => (
                            <button
                                key={link.id}
                                onClick={() => handleNavClick(link.id)}
                                className="cursor-pointer text-sm font-medium text-muted-foreground hover:text-primary transition-colors"
                            >
                                {link.label}
                            </button>
                        ))}

                        <Button asChild>
                            <Link href="/contact">Kontakt</Link>
                        </Button>

                        <ThemeToggle/>
                    </nav>

                    {/* Mobile nav */}
                    <div className="lg:hidden flex items-center gap-3">
                        <ThemeToggle/>
                        <Sheet>
                            <SheetTrigger asChild>
                                <Button variant="outline" size="icon">
                                    <Menu className="h-5 w-5"/>
                                </Button>
                            </SheetTrigger>
                            <SheetContent side="top" className="pt-10">
                                <div className="flex flex-col space-y-4 text-center">
                                    {navLinks.map((link) => (
                                        <button
                                            key={link.id}
                                            onClick={() => handleNavClick(link.id)}
                                            className="cursor-pointer text-base font-semibold text-muted-foreground hover:text-primary transition-colors"
                                        >
                                            {link.label}
                                        </button>
                                    ))}
                                    <Button asChild className="mt-4 w-full">
                                        <Link href="/contact">Kontakt</Link>
                                    </Button>
                                </div>
                            </SheetContent>
                        </Sheet>
                    </div>
                </div>
            </header>
        </div>
    );
};

export default Navbar;