"use client";

import { useState, useEffect } from "react";
import { useTheme } from "next-themes";
import Link from "next/link";
import Image from "next/image";
import Sidebar from "@/components/Sidebar";

export default function Header() {
    const { resolvedTheme } = useTheme();
    const [isScrolled, setIsScrolled] = useState(false);
    const [isSidebarOpen, setIsSidebarOpen] = useState(false);
    const [mounted, setMounted] = useState(false);

    useEffect(() => {
        setMounted(true);
        const handleScroll = () => {
            setIsScrolled(window.scrollY > 50);
        };

        window.addEventListener("scroll", handleScroll);
        return () => window.removeEventListener("scroll", handleScroll);
    }, []);

    // Prevent hydration mismatch
    if (!mounted) {
        return (
            <header className="fixed top-0 left-0 right-0 z-50 bg-transparent py-6">
                <div className="w-full px-[50px] max-[375px]:px-[25px] flex items-center justify-between">
                    <Link href="/" className="flex items-center gap-3 group">
                        <div className="relative w-60 h-20 -left-[83px]">
                            <Image
                                src="/assets/images/white-logo.png"
                                alt="Sky and Soil Logo"
                                fill
                                className="object-contain"
                            />
                        </div>
                    </Link>
                    <div className="flex items-center gap-4">
                        <button className="p-2 -mr-2 text-white">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6">
                                <path strokeLinecap="round" strokeLinejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
                            </svg>
                        </button>
                    </div>
                </div>
            </header>
        );
    }

    const isLight = resolvedTheme === "light";

    return (
        <>
            <header
                className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 ${isScrolled
                    ? "bg-white/25 dark:bg-black/25 backdrop-blur-md shadow-sm py-4"
                    : "bg-transparent py-6"
                    }`}
            >
                <div className="w-full px-[50px] max-[375px]:px-[25px] flex items-center justify-between">
                    <Link href="/" className="flex items-center gap-3 group">
                        <div className="relative w-60 h-20 transition-transform group-hover:scale-105 -left-[83px]">
                            <Image
                                src={(isScrolled && isLight) ? "/assets/images/blue-logo.png" : "/assets/images/white-logo.png"}
                                alt="Sky and Soil Logo"
                                fill
                                className="object-contain"
                            />
                        </div>
                        {/* <span className={`text-2xl font-semibold tracking-tight group-hover:text-primary transition-colors ${isScrolled ? "text-foreground" : "text-white"
                            }`}>
                            Sky and Soil
                        </span> */}
                    </Link>

                    <div className="flex items-center gap-4">


                        <button
                            className={`p-2 -mr-2 ${(isScrolled && isLight) ? "text-primary" : "text-white"}`}
                            onClick={() => setIsSidebarOpen(true)}
                        >
                            <svg
                                xmlns="http://www.w3.org/2000/svg"
                                fill="none"
                                viewBox="0 0 24 24"
                                strokeWidth={1.5}
                                stroke="currentColor"
                                className="w-6 h-6"
                            >
                                <path
                                    strokeLinecap="round"
                                    strokeLinejoin="round"
                                    d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
                                />
                            </svg>
                        </button>

                    </div>
                </div>
            </header>

            <Sidebar isOpen={isSidebarOpen} onClose={() => setIsSidebarOpen(false)} />
        </>
    );
}