"use client";

import Link from "next/link";
import { useEffect, useState } from "react";
import Image from "next/image";
import { ThemeToggle } from "@/components/ThemeToggle";

interface SidebarProps {
    isOpen: boolean;
    onClose: () => void;
}

export default function Sidebar({ isOpen, onClose }: SidebarProps) {
    const [isProjectsOpen, setIsProjectsOpen] = useState(false);

    // Prevent scrolling when sidebar is open
    useEffect(() => {
        if (isOpen) {
            document.body.style.overflow = "hidden";
        } else {
            document.body.style.overflow = "unset";
        }
        return () => {
            document.body.style.overflow = "unset";
        };
    }, [isOpen]);

    return (
        <>
            {/* Backdrop */}
            <div
                className={`fixed inset-0 z-[60] bg-black/50 backdrop-blur-sm transition-opacity duration-300 ${isOpen ? "opacity-100 visible" : "opacity-0 invisible"
                    }`}
                onClick={onClose}
            />

            {/* Sidebar */}
            <div
                className={`fixed top-0 right-0 bottom-0 z-[70] w-[300px] bg-white dark:bg-black border-l border-gray-200 dark:border-gray-800 shadow-2xl transform transition-transform duration-300 ease-in-out ${isOpen ? "translate-x-0" : "translate-x-full"
                    }`}
            >
                <div className="flex flex-col h-full p-6">
                    <div className="flex items-center justify-between mb-8">
                        <div className="relative w-40 h-12">
                            <Image
                                src="/assets/images/blue-logo.png"
                                alt="Sky and Soil Sidebar Logo"
                                fill
                                className="object-contain"
                            />
                        </div>
                        <button
                            onClick={onClose}
                            className="p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
                        >
                            <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="M6 18L18 6M6 6l12 12"
                                />
                            </svg>
                        </button>
                    </div>

                    <nav className="flex flex-col space-y-6">
                        <Link
                            href="/about"
                            className="text-lg font-medium text-gray-600 dark:text-gray-300 hover:text-primary transition-colors"
                            onClick={onClose}
                        >
                            About
                        </Link>
                        <div className="flex flex-col space-y-2">
                            <div className="flex items-center justify-between">
                                <Link
                                    href="/projects"
                                    className="text-lg font-medium text-gray-600 dark:text-gray-300 hover:text-primary transition-colors"
                                    onClick={onClose}
                                >
                                    Projects
                                </Link>
                                <button
                                    onClick={() => setIsProjectsOpen(!isProjectsOpen)}
                                    className="p-1 rounded-full hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
                                >
                                    <svg
                                        xmlns="http://www.w3.org/2000/svg"
                                        fill="none"
                                        viewBox="0 0 24 24"
                                        strokeWidth={1.5}
                                        stroke="currentColor"
                                        className={`w-5 h-5 transition-transform duration-200 ${isProjectsOpen ? "rotate-180" : ""}`}
                                    >
                                        <path
                                            strokeLinecap="round"
                                            strokeLinejoin="round"
                                            d="M19.5 8.25l-7.5 7.5-7.5-7.5"
                                        />
                                    </svg>
                                </button>
                            </div>
                            <div className={`overflow-hidden transition-all duration-300 ${isProjectsOpen ? "max-h-40 opacity-100" : "max-h-0 opacity-0"}`}>
                                <Link
                                    href="/residential-real-estate"
                                    className="block text-base font-medium text-gray-500 dark:text-gray-400 hover:text-primary transition-colors pl-4 py-2"
                                    onClick={onClose}
                                >
                                    Residential Real Estate
                                </Link>
                            </div>
                        </div>
                        <Link
                            href="/lifestyle"
                            className="text-lg font-medium text-gray-600 dark:text-gray-300 hover:text-primary transition-colors"
                            onClick={onClose}
                        >
                            Lifestyle
                        </Link>
                        <Link
                            href="/contact"
                            className="text-lg font-medium text-gray-600 dark:text-gray-300 hover:text-primary transition-colors"
                            onClick={onClose}
                        >
                            Contact
                        </Link>
                    </nav>

                    <div className="mt-auto space-y-6">
                        <div className="flex items-center justify-between">
                            <span className="text-sm font-medium text-gray-600 dark:text-gray-400">
                                Theme
                            </span>
                            <ThemeToggle />
                        </div>

                    </div>
                </div>
            </div>
        </>
    );
}
