import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { getImagePath } from '../../lib/utils';

export function SharedSidebar({ currentPage = "dashboard" }) {
    const navigate = useNavigate();
    const [showMobileMenu, setShowMobileMenu] = useState(false);

    const handleViolationsClick = () => {
        navigate('/dashboard');
    };

    const handleConstablesClick = () => {
        navigate('/constables');
    };

    return (
        <>
            {/* Responsive Sidebar */}
            <div className="w-48 lg:w-48 md:w-48 sm:w-16 xs:w-16 bg-white border-r border-gray-200 flex flex-col fixed left-0 top-0 h-full z-10 transition-all duration-300">
                {/* Mobile Menu Toggle - Only visible on very small screens */}
                <div className="lg:hidden md:hidden sm:block xs:block p-2 border-b border-gray-200">
                    <button 
                        onClick={() => setShowMobileMenu(!showMobileMenu)}
                        className="w-8 h-8 flex items-center justify-center text-gray-600 hover:text-gray-800 hover:bg-gray-100 rounded-md transition-colors"
                    >
                        <svg className="w-5 h-5" 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 className="p-4 md:p-4 sm:p-2 border-b border-gray-200">
                    <div className="flex items-center justify-center">
                        <img src={getImagePath("pushpakAI-logo.svg")} alt="PUSHPAK.AI" className="h-16 w-16 lg:h-16 lg:w-16 md:h-14 md:w-14 sm:h-10 sm:w-10 xs:h-8 xs:w-8" />
                    </div>
                </div>

                <nav className="flex-1 p-4 lg:p-4 md:p-4 sm:p-2 xs:p-2 space-y-2">
                    {/* Violations - Selected */}
                    <div 
                        className={`flex items-center justify-between p-3 lg:p-3 md:p-3 sm:p-2 xs:p-2 rounded-lg cursor-pointer transition-colors ${
                            currentPage === "dashboard" 
                                ? "bg-blue-50 hover:bg-blue-100" 
                                : "bg-gray-50 hover:bg-gray-100"
                        }`}
                        onClick={handleViolationsClick}
                    >
                        <div className="flex items-center space-x-3 lg:space-x-3 md:space-x-3 sm:space-x-2 xs:space-x-1">
                            <div className="w-5 h-5 lg:w-5 lg:h-5 md:w-5 md:h-5 sm:w-4 sm:h-4 xs:w-3 xs:h-3 flex items-center justify-center">
                                <svg className={`w-5 h-5 lg:w-5 lg:h-5 md:w-5 md:h-5 sm:w-4 sm:h-4 xs:w-3 xs:h-3 ${
                                    currentPage === "dashboard" ? "text-blue-600" : "text-gray-500"
                                }`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 10h16M4 14h16M4 18h16" />
                                </svg>
                            </div>
                            <span className={`text-sm lg:text-sm md:text-sm sm:text-xs xs:text-xs font-medium ${
                                currentPage === "dashboard" ? "text-blue-700" : "text-gray-600"
                            } lg:block md:block sm:hidden xs:hidden`}>Violations</span>
                        </div>
                        {currentPage === "dashboard" && (
                            <div className="w-2 h-2 lg:w-2 lg:h-2 md:w-2 md:h-2 sm:w-1.5 sm:h-1.5 xs:w-1 xs:h-1 bg-blue-500 rounded-full lg:block md:block sm:block xs:block"></div>
                        )}
                    </div>
                    
                    {/* Constables - Unselected */}
                    <div 
                        className={`flex items-center justify-between p-3 lg:p-3 md:p-3 sm:p-2 xs:p-2 rounded-lg cursor-pointer transition-colors ${
                            currentPage === "constables" 
                                ? "bg-blue-50 hover:bg-blue-100" 
                                : "bg-gray-50 hover:bg-gray-100"
                        }`}
                        onClick={handleConstablesClick}
                    >
                        <div className="flex items-center space-x-3 lg:space-x-3 md:space-x-3 sm:space-x-2 xs:space-x-1">
                            <div className="w-5 h-5 lg:w-5 lg:h-5 md:w-5 md:h-5 sm:w-4 sm:h-4 xs:w-3 xs:h-3 flex items-center justify-center">
                                <svg className={`w-5 h-5 lg:w-5 lg:h-5 md:w-5 md:h-5 sm:w-4 sm:h-4 xs:w-3 xs:h-3 ${
                                    currentPage === "constables" ? "text-blue-600" : "text-gray-500"
                                }`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
                                </svg>
                            </div>
                            <span className={`text-sm lg:text-sm md:text-sm sm:text-xs xs:text-xs font-medium ${
                                currentPage === "constables" ? "text-blue-700" : "text-gray-600"
                            } lg:block md:block sm:hidden xs:hidden`}>Constables</span>
                        </div>
                        {currentPage === "constables" && (
                            <div className="w-2 h-2 lg:w-2 lg:h-2 md:w-2 md:h-2 sm:w-1.5 sm:h-1.5 xs:w-1 xs:h-1 bg-blue-500 rounded-full lg:block md:block sm:block xs:block"></div>
                        )}
                    </div>
                </nav>
            </div>

            {/* Mobile Menu Overlay - Only visible on small screens */}
            {showMobileMenu && (
                <div className="md:hidden sm:block fixed inset-0 bg-black bg-opacity-50 z-20">
                    <div className="fixed left-0 top-0 h-full w-64 bg-white shadow-lg transform transition-transform duration-300 ease-in-out">
                        <div className="p-4 border-b border-gray-200">
                            <div className="flex items-center justify-between">
                                <h2 className="text-lg font-semibold text-gray-800">Menu</h2>
                                <button 
                                    onClick={() => setShowMobileMenu(false)}
                                    className="w-8 h-8 flex items-center justify-center text-gray-600 hover:text-gray-800 hover:bg-gray-100 rounded-md transition-colors"
                                >
                                    <svg className="w-5 h-5" 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>
                        </div>
                        <nav className="p-4 space-y-2">
                            <div 
                                className={`flex items-center justify-between p-3 rounded-lg cursor-pointer transition-colors ${
                                    currentPage === "dashboard" ? "bg-blue-50 hover:bg-blue-100" : "bg-gray-50 hover:bg-gray-100"
                                }`}
                                onClick={() => {
                                    handleViolationsClick();
                                    setShowMobileMenu(false);
                                }}
                            >
                                <div className="flex items-center space-x-3">
                                    <div className="w-5 h-5 flex items-center justify-center">
                                        <svg className={`w-5 h-5 ${currentPage === "dashboard" ? "text-blue-600" : "text-gray-500"}`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 10h16M4 14h16M4 18h16" />
                                        </svg>
                                    </div>
                                    <span className="text-sm font-medium text-gray-700">Violations</span>
                                </div>
                                {currentPage === "dashboard" && (
                                    <div className="w-2 h-2 bg-blue-500 rounded-full"></div>
                                )}
                            </div>
                            
                            <div 
                                className={`flex items-center justify-between p-3 rounded-lg cursor-pointer transition-colors ${
                                    currentPage === "constables" ? "bg-blue-50 hover:bg-blue-100" : "bg-gray-50 hover:bg-gray-100"
                                }`}
                                onClick={() => {
                                    handleConstablesClick();
                                    setShowMobileMenu(false);
                                }}
                            >
                                <div className="flex items-center space-x-3">
                                    <div className="w-5 h-5 flex items-center justify-center">
                                        <svg className={`w-5 h-5 ${currentPage === "constables" ? "text-blue-600" : "text-gray-500"}`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
                                        </svg>
                                    </div>
                                    <span className="text-sm font-medium text-gray-600">Constables</span>
                                </div>
                                {currentPage === "constables" && (
                                    <div className="w-2 h-2 bg-blue-500 rounded-full"></div>
                                )}
                            </div>
                        </nav>
                    </div>
                </div>
            )}
        </>
    );
}
