"use client";

import {useState} from "react";
import Link from "next/link";

export default function Header() {
    const [isSidebarOpen, setIsSidebarOpen] = useState(false);

    const toggleSidebar = () => {
        setIsSidebarOpen(!isSidebarOpen);
    };

    const scrollToSection = (id: string) => {
        const element = document.getElementById(id);
        if (element) {
            element.scrollIntoView({behavior: "smooth"});
        } else {
            /*go to main page and scroll*/
            window.location.href = `/#${id}`;
        }
    };

    return (
        <div className="p-4">
            <div
                className={`fixed top-4 left-4 right-4 p-4 bg-white/45 text-gray-700 backdrop-blur-md shadow-xl rounded-2xl z-50 ${isSidebarOpen ? 'transform -translate-y-full' : ''}`}>
                <header className="w-full">
                    <nav className="flex flex-row items-center px-4">
                        <Link href="/" className="flex justify-start">
                            <h1 className="text-xl md:text-2xl">Dennis Konkol</h1>
                        </Link>
                        <div className="flex-grow"></div>
                        <button
                            className="text-gray-700 hover:text-gray-900 md:hidden"
                            onClick={toggleSidebar}
                        >
                            <svg
                                className="w-6 h-6"
                                fill="none"
                                stroke="currentColor"
                                viewBox="0 0 24 24"
                                xmlns="http://www.w3.org/2000/svg"
                            >
                                <path
                                    strokeLinecap="round"
                                    strokeLinejoin="round"
                                    strokeWidth="2"
                                    d="M4 6h16M4 12h16M4 18h16"
                                />
                            </svg>
                        </button>
                        <div className="hidden md:flex space-x-4 md:space-x-6">
                            <button
                                onClick={() => scrollToSection("about")}
                                className="relative px-4 py-2 text-gray-700 hover:text-gray-900 text-xl md:text-2xl group">
                                About
                            </button>
                            <button
                                onClick={() => scrollToSection("projects")}
                                className="relative px-4 py-2 text-gray-700 hover:text-gray-900 text-xl md:text-2xl group">
                                Projects
                            </button>
                            <button
                                onClick={() => scrollToSection("contact")}
                                className="relative pl-4 py-2 text-gray-700 hover:text-gray-900 text-xl md:text-2xl group">
                                Contact
                            </button>
                        </div>
                    </nav>
                </header>
            </div>

            <div
                className={`fixed inset-0 bg-black bg-opacity-50 transition-opacity ${isSidebarOpen ? 'opacity-100' : 'opacity-0 pointer-events-none'}`}
                onClick={toggleSidebar}
            ></div>

            <div
                className={`fixed z-10 top-0 right-0 h-full bg-white w-1/3 transform transition-transform flex flex-col ${isSidebarOpen ? 'translate-x-0' : 'translate-x-full'}`}
            >
                <button
                    className="absolute top-4 right-4 text-gray-700 hover:text-gray-900"
                    onClick={toggleSidebar}
                >
                    <svg
                        className="w-6 h-6"
                        fill="none"
                        stroke="currentColor"
                        viewBox="0 0 24 24"
                        xmlns="http://www.w3.org/2000/svg"
                    >
                        <path
                            strokeLinecap="round"
                            strokeLinejoin="round"
                            strokeWidth="2"
                            d="M6 18L18 6M6 6l12 12"
                        />
                    </svg>
                </button>
                <div className="pt-8 space-y-4 flex-grow">
                    <button
                        onClick={() => scrollToSection("about")}
                        className="w-full px-4 py-2 pt-8 text-gray-700 hover:text-gray-900 text-xl md:text-2xl group">
                        About
                    </button>
                    <button
                        onClick={() => scrollToSection("projects")}
                        className="w-full px-4 py-2 text-gray-700 hover:text-gray-900 text-xl md:text-2xl group">
                        Projects
                    </button>
                    <button
                        onClick={() => scrollToSection("contact")}
                        className="w-full px-4 py-2 text-gray-700 hover:text-gray-900 text-xl md:text-2xl group">
                        Contact
                    </button>
                </div>
                <h6 className="text-center text-xs text-gray-500 p-4">© 2025 Dennis</h6>
            </div>
        </div>
    );
}