'use client';
import React, { useState, useEffect } from 'react';
import Link from 'next/link';
import {Image} from "next/dist/client/image-component";
import printinglogo from "@/public/printinglogo.png";
import AppointmentModal from "@/components/modals/AppointmentModal";
interface Props{
    submit: (formData: FormData) => Promise<any>;
}
function Header({submit}:Props) {
    // const [isServicesOpen, setIsServicesOpen] = useState(false);
    const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
    const [isMobileServicesOpen, setIsMobileServicesOpen] = useState(false);
    const [isModalOpen, setIsModalOpen] = useState(false);

    // Close mobile menu when clicking outside
    useEffect(() => {
        const handleOutsideClick = (e: MouseEvent) => {
            const sidebar = document.getElementById('mobile-sidebar');
            const menuButton = document.getElementById('mobile-menu-button');

            if (isMobileMenuOpen && sidebar && menuButton &&
                !sidebar.contains(e.target as Node) &&
                !menuButton.contains(e.target as Node)) {
                setIsMobileMenuOpen(false);
            }
        };

        if (isMobileMenuOpen) {
            document.addEventListener('mousedown', handleOutsideClick);
        }

        return () => {
            document.removeEventListener('mousedown', handleOutsideClick);
        };
    }, [isMobileMenuOpen]);

    // Prevent body scroll when menu is open
    useEffect(() => {
        if (isMobileMenuOpen) {
            document.body.style.overflow = 'hidden';
        } else {
            document.body.style.overflow = 'unset';
        }
    }, [isMobileMenuOpen]);

    const closeMobileMenu = () => {
        setIsMobileMenuOpen(false);
        setIsMobileServicesOpen(false);
    };

    return (
        <header className="bg-white shadow-md sticky top-0 z-50">
            <div className="container mx-auto px-4 py-1">
                <div className="flex justify-between items-center">
                    {/* Logo/Brand */}
                    <Link href="/" className="flex items-center">
                        <Image src={printinglogo} alt="Painting Services Logo" width={150} height={60} className=""/>
                    </Link>

                    {/* Navigation */}
                    <nav className="hidden md:flex items-center space-x-8">
                        <Link href="/" className="text-gray-700 hover:text-blue-600 transition-colors font-medium">
                            Home
                        </Link>

                        {/* Services Dropdown */}
                        {/*<div*/}
                        {/*    className="relative"*/}
                        {/*    onMouseEnter={() => setIsServicesOpen(true)}*/}
                        {/*    onMouseLeave={() => setIsServicesOpen(false)}*/}
                        {/*>*/}
                        {/*    <Link*/}
                        {/*        href="/services"*/}
                        {/*        className="text-gray-700 hover:text-blue-600 transition-colors font-medium flex items-center space-x-1"*/}
                        {/*    >*/}
                        {/*        <span>Services</span>*/}
                        {/*        <svg*/}
                        {/*            className={`w-4 h-4 transition-transform ${isServicesOpen ? 'rotate-180' : ''}`}*/}
                        {/*            fill="none"*/}
                        {/*            stroke="currentColor"*/}
                        {/*            viewBox="0 0 24 24"*/}
                        {/*        >*/}
                        {/*            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />*/}
                        {/*        </svg>*/}
                        {/*    </Link>*/}
                        
                        {/*    /!* Dropdown Menu *!/*/}
                        {/*    {isServicesOpen && (*/}
                        {/*        <div className="absolute top-full left-0 mt-0 w-56 bg-white rounded-lg shadow-xl py-2 border border-gray-100">*/}
                        {/*            <Link*/}
                        {/*                href="/services/interior-painting"*/}
                        {/*                className="block px-4 py-2 text-gray-700 hover:bg-blue-50 hover:text-blue-600 transition-colors"*/}
                        {/*            >*/}
                        {/*                Interior Painting*/}
                        {/*            </Link>*/}
                        {/*            <Link*/}
                        {/*                href="/services/exterior-painting"*/}
                        {/*                className="block px-4 py-2 text-gray-700 hover:bg-blue-50 hover:text-blue-600 transition-colors"*/}
                        {/*            >*/}
                        {/*                Exterior Painting*/}
                        {/*            </Link>*/}
                        {/*            <Link*/}
                        {/*                href="/services/commercial-painting"*/}
                        {/*                className="block px-4 py-2 text-gray-700 hover:bg-blue-50 hover:text-blue-600 transition-colors"*/}
                        {/*            >*/}
                        {/*                Commercial Painting*/}
                        {/*            </Link>*/}
                        {/*            <Link*/}
                        {/*                href="/services/residential-painting"*/}
                        {/*                className="block px-4 py-2 text-gray-700 hover:bg-blue-50 hover:text-blue-600 transition-colors"*/}
                        {/*            >*/}
                        {/*                Residential Painting*/}
                        {/*            </Link>*/}
                        {/*            <Link*/}
                        {/*                href="/services/cabinet-refinishing"*/}
                        {/*                className="block px-4 py-2 text-gray-700 hover:bg-blue-50 hover:text-blue-600 transition-colors"*/}
                        {/*            >*/}
                        {/*                Cabinet Refinishing*/}
                        {/*            </Link>*/}
                        {/*        </div>*/}
                        {/*    )}*/}
                        {/*</div>*/}

                        <Link href="/gallery" className="text-gray-700 hover:text-blue-600 transition-colors font-medium">
                            Gallery
                        </Link>
                        <Link href="/about" className="text-gray-700 hover:text-blue-600 transition-colors font-medium">
                            About
                        </Link>
                        <Link href="/contact" className="text-gray-700 hover:text-blue-600 transition-colors font-medium">
                            Contact
                        </Link>
                    </nav>

                    {/* CTA Button */}
                    <div className="flex items-center space-x-4">
                        <button
                            onClick={() => setIsModalOpen(true)}
                            className="hidden md:inline-block cursor-pointer bg-gradient-to-r from-blue-600 to-indigo-600 text-white px-6 py-2 rounded-lg font-semibold hover:shadow-lg transition-all duration-300 hover:scale-105"
                        >
                            Get Quote
                        </button>

                        {/* Mobile Menu Button */}
                        <button
                            id="mobile-menu-button"
                            onClick={() => setIsMobileMenuOpen(true)}
                            className="md:hidden text-gray-700 hover:text-red-500 transition-colors"
                            aria-label="Open menu"
                        >
                            <svg className="w-6 h-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>
            </div>

            {/* Mobile Overlay */}
            {isMobileMenuOpen && (
                <div
                    className="fixed inset-0 bg-black/50 z-40 md:hidden transition-opacity duration-500"
                    style={{ opacity: isMobileMenuOpen ? 1 : 0 }}
                />
            )}

            {/* Mobile Sidebar Menu */}
            <div
                id="mobile-sidebar"
                className={`fixed top-0 right-0 h-full w-80 bg-white shadow-2xl z-50 transform transition-transform duration-500 ease-in-out md:hidden ${
                    isMobileMenuOpen ? 'translate-x-0' : 'translate-x-full'
                }`}
            >
                <div className="flex flex-col h-full">
                    {/* Sidebar Header */}
                    <div className="flex justify-between items-center p-4 border-b border-gray-200">
                        <div className="flex items-center space-x-2">
                            <div className="bg-gradient-to-r from-red-500 to-red-600 text-white w-10 h-10 rounded-lg flex items-center justify-center font-bold text-xl">
                                PS
                            </div>
                            <span className="text-xl font-bold text-gray-800">
                                Painting Services
                            </span>
                        </div>
                        <button
                            onClick={closeMobileMenu}
                            className="p-2 rounded-full hover:bg-red-50 transition-colors"
                            aria-label="Close menu"
                        >
                            <svg className="w-6 h-6 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                            </svg>
                        </button>
                    </div>

                    {/* Sidebar Navigation */}
                    <nav className="flex-1 overflow-y-auto py-4">
                        <Link
                            href="/"
                            onClick={closeMobileMenu}
                            className="block px-6 py-3 text-gray-700 hover:bg-red-50 hover:text-red-600 transition-colors font-medium"
                        >
                            Home
                        </Link>

                        {/* Mobile Services Dropdown */}
                        <div>
                            <button
                                onClick={() => setIsMobileServicesOpen(!isMobileServicesOpen)}
                                className="w-full flex justify-between items-center px-6 py-3 text-gray-700 hover:bg-red-50 hover:text-red-600 transition-colors font-medium"
                            >
                                <span>Services</span>
                                <svg
                                    className={`w-4 h-4 transition-transform ${isMobileServicesOpen ? 'rotate-180' : ''}`}
                                    fill="none"
                                    stroke="currentColor"
                                    viewBox="0 0 24 24"
                                >
                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
                                </svg>
                            </button>

                            {/* Mobile Services Submenu */}
                            {isMobileServicesOpen && (
                                <div className="bg-gray-50 py-2">
                                    <Link
                                        href="/services/interior-painting"
                                        onClick={closeMobileMenu}
                                        className="block px-10 py-2 text-gray-600 hover:bg-red-50 hover:text-red-600 transition-colors text-sm"
                                    >
                                        Interior Painting
                                    </Link>
                                    <Link
                                        href="/services/exterior-painting"
                                        onClick={closeMobileMenu}
                                        className="block px-10 py-2 text-gray-600 hover:bg-red-50 hover:text-red-600 transition-colors text-sm"
                                    >
                                        Exterior Painting
                                    </Link>
                                    <Link
                                        href="/services/commercial-painting"
                                        onClick={closeMobileMenu}
                                        className="block px-10 py-2 text-gray-600 hover:bg-red-50 hover:text-red-600 transition-colors text-sm"
                                    >
                                        Commercial Painting
                                    </Link>
                                    <Link
                                        href="/services/residential-painting"
                                        onClick={closeMobileMenu}
                                        className="block px-10 py-2 text-gray-600 hover:bg-red-50 hover:text-red-600 transition-colors text-sm"
                                    >
                                        Residential Painting
                                    </Link>
                                    <Link
                                        href="/services/cabinet-refinishing"
                                        onClick={closeMobileMenu}
                                        className="block px-10 py-2 text-gray-600 hover:bg-red-50 hover:text-red-600 transition-colors text-sm"
                                    >
                                        Cabinet Refinishing
                                    </Link>
                                </div>
                            )}
                        </div>

                        <Link
                            href="/gallery"
                            onClick={closeMobileMenu}
                            className="block px-6 py-3 text-gray-700 hover:bg-red-50 hover:text-red-600 transition-colors font-medium"
                        >
                            Gallery
                        </Link>
                        <Link
                            href="/about"
                            onClick={closeMobileMenu}
                            className="block px-6 py-3 text-gray-700 hover:bg-red-50 hover:text-red-600 transition-colors font-medium"
                        >
                            About
                        </Link>
                        <Link
                            href="/contact"
                            onClick={closeMobileMenu}
                            className="block px-6 py-3 text-gray-700 hover:bg-red-50 hover:text-red-600 transition-colors font-medium"
                        >
                            Contact
                        </Link>

                        {/* Mobile CTA Button */}
                        <div className="px-6 mt-4">
                            <button
                                onClick={() => {
                                    closeMobileMenu();
                                    setIsModalOpen(true);
                                }}
                                className="block w-full cursor-pointer text-center bg-gradient-to-r from-red-500 to-red-600 text-white px-6 py-3 rounded-lg font-semibold hover:shadow-lg transition-all duration-300"
                            >
                                Get Quote
                            </button>
                        </div>
                    </nav>
                </div>
            </div>

            {/* Appointment Modal */}
            <AppointmentModal
                submit={submit}
                isOpen={isModalOpen}
                onClose={() => setIsModalOpen(false)}
                title="Get Your Free Quote"
                subtitle="Fill in your details and we'll get back to you soon"
                headerBgColor="bg-blue-600"
            />
        </header>
    );
}

export default Header;