dewedev/src/components/ToolSidebar.js

import React, { useState } from 'react';
import { Link, useLocation } from 'react-router-dom';
import { Search, ChevronLeft, ChevronRight, Sparkles } from 'lucide-react';
import { NAVIGATION_TOOLS, SITE_CONFIG } from '../config/tools';

const ToolSidebar = () => {
  const location = useLocation();
  const [isCollapsed, setIsCollapsed] = useState(true);
  const [searchTerm, setSearchTerm] = useState('');

  const filteredTools = NAVIGATION_TOOLS.filter(tool =>
    tool.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
    tool.description.toLowerCase().includes(searchTerm.toLowerCase())
  );

  const isActive = (path) => location.pathname === path;

  return (
    <div className={`bg-white/70 dark:bg-slate-800/70 backdrop-blur-sm border-r border-slate-200/50 dark:border-slate-700/50 transition-all duration-300 sticky top-16 ${
      isCollapsed ? 'w-16' : 'w-64'
    }`} style={{ height: 'calc(100vh - 4rem)' }}>
      <div className="h-full flex flex-col">
        {/* Sidebar Header */}
        <div className="p-4 border-b border-slate-200/50 dark:border-slate-700/50">
          <div className="flex items-center justify-between">
            {!isCollapsed && (
              <div className="flex items-center gap-2">
                <Sparkles className="h-4 w-4 text-blue-500" />
                <h2 className="text-lg font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
                  Tools
                </h2>
              </div>
            )}
            <button
              onClick={() => setIsCollapsed(!isCollapsed)}
              className="p-2 rounded-xl hover:bg-white/50 dark:hover:bg-slate-700/50 transition-all duration-300 group"
            >
              {isCollapsed ? (
                <ChevronRight className="h-4 w-4 text-slate-500 group-hover:text-blue-500 transition-colors" />
              ) : (
                <ChevronLeft className="h-4 w-4 text-slate-500 group-hover:text-blue-500 transition-colors" />
              )}
            </button>
          </div>
          
          {/* Search - only show when not collapsed */}
          {!isCollapsed && (
            <div className="relative mt-4">
              <div className="absolute inset-0 bg-gradient-to-r from-blue-500/10 to-purple-500/10 rounded-xl blur opacity-50"></div>
              <div className="relative">
                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-slate-400" />
                <input
                  type="text"
                  placeholder="Search tools..."
                  value={searchTerm}
                  onChange={(e) => setSearchTerm(e.target.value)}
                  className="w-full pl-9 pr-3 py-2.5 text-sm border border-slate-200 dark:border-slate-600 rounded-xl bg-white/80 dark:bg-slate-700/80 backdrop-blur-sm text-slate-900 dark:text-slate-100 placeholder-slate-500 focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-300"
                />
              </div>
            </div>
          )}
        </div>

        {/* Tools List */}
        <div className="flex-1 overflow-y-auto py-3">
          <nav className="space-y-2 px-3">
            {filteredTools.map((tool) => {
              const IconComponent = tool.icon;
              const isActiveItem = isActive(tool.path);
              const isHome = tool.path === '/';
              
              // Get category-specific colors for active states
              const getActiveClasses = (category, isHome) => {
                if (isHome) {
                  return {
                    collapsed: '', // No background for folded active items
                    expanded: 'bg-gradient-to-r from-slate-50 to-slate-100 dark:from-slate-700 dark:to-slate-600',
                    titleColor: 'text-slate-700 dark:text-slate-300',
                    iconBg: 'bg-gradient-to-br from-slate-500 to-slate-600' // Active icon has colored background
                  };
                }
                
                switch (category) {
                  case 'editor':
                    return {
                      collapsed: '', // No background for folded active items
                      expanded: 'bg-gradient-to-r from-blue-50 to-blue-100 dark:from-blue-900/30 dark:to-blue-800/30',
                      titleColor: 'text-blue-700 dark:text-blue-300',
                      iconBg: 'bg-gradient-to-br from-blue-500 to-cyan-500'
                    };
                  case 'encoder':
                    return {
                      collapsed: '', // No background for folded active items
                      expanded: 'bg-gradient-to-r from-purple-50 to-purple-100 dark:from-purple-900/30 dark:to-purple-800/30',
                      titleColor: 'text-purple-700 dark:text-purple-300',
                      iconBg: 'bg-gradient-to-br from-purple-500 to-pink-500'
                    };
                  case 'formatter':
                    return {
                      collapsed: '', // No background for folded active items
                      expanded: 'bg-gradient-to-r from-green-50 to-green-100 dark:from-green-900/30 dark:to-green-800/30',
                      titleColor: 'text-green-700 dark:text-green-300',
                      iconBg: 'bg-gradient-to-br from-green-500 to-emerald-500'
                    };
                  case 'analyzer':
                    return {
                      collapsed: '', // No background for folded active items
                      expanded: 'bg-gradient-to-r from-orange-50 to-orange-100 dark:from-orange-900/30 dark:to-orange-800/30',
                      titleColor: 'text-orange-700 dark:text-orange-300',
                      iconBg: 'bg-gradient-to-br from-orange-500 to-red-500'
                    };
                  default:
                    return {
                      collapsed: '', // No background for folded active items
                      expanded: 'bg-gradient-to-r from-slate-50 to-slate-100 dark:from-slate-700 dark:to-slate-600',
                      titleColor: 'text-slate-700 dark:text-slate-300',
                      iconBg: 'bg-gradient-to-br from-slate-500 to-slate-600'
                    };
                }
              };
              
              const getInactiveClasses = (category, isHome) => {
                if (isHome) {
                  return {
                    collapsed: '', // No background for folded inactive items
                    expanded: 'hover:bg-white/50 dark:hover:bg-slate-700/50',
                    titleColor: 'text-slate-500 dark:text-slate-400 group-hover:text-slate-700 dark:group-hover:text-slate-300',
                    iconBorder: 'border-2 border-slate-300 dark:border-slate-600 bg-transparent group-hover:bg-gradient-to-br group-hover:from-slate-500 group-hover:to-slate-600', // Hover: colored background
                    iconColor: 'text-slate-500 dark:text-slate-400 group-hover:text-white' // Hover: white icon
                  };
                }
                
                switch (category) {
                  case 'editor':
                    return {
                      collapsed: '', // No background for folded inactive items
                      expanded: 'hover:bg-white/50 dark:hover:bg-slate-700/50',
                      titleColor: 'text-slate-500 dark:text-slate-400 group-hover:text-blue-600 dark:group-hover:text-blue-400',
                      iconBorder: 'border-2 border-blue-300 dark:border-blue-600 bg-transparent group-hover:bg-gradient-to-br group-hover:from-blue-500 group-hover:to-cyan-500',
                      iconColor: 'text-slate-500 dark:text-slate-400 group-hover:text-white'
                    };
                  case 'encoder':
                    return {
                      collapsed: '', // No background for folded inactive items
                      expanded: 'hover:bg-white/50 dark:hover:bg-slate-700/50',
                      titleColor: 'text-slate-500 dark:text-slate-400 group-hover:text-purple-600 dark:group-hover:text-purple-400',
                      iconBorder: 'border-2 border-purple-300 dark:border-purple-600 bg-transparent group-hover:bg-gradient-to-br group-hover:from-purple-500 group-hover:to-pink-500',
                      iconColor: 'text-slate-500 dark:text-slate-400 group-hover:text-white'
                    };
                  case 'formatter':
                    return {
                      collapsed: '', // No background for folded inactive items
                      expanded: 'hover:bg-white/50 dark:hover:bg-slate-700/50',
                      titleColor: 'text-slate-500 dark:text-slate-400 group-hover:text-green-600 dark:group-hover:text-green-400',
                      iconBorder: 'border-2 border-green-300 dark:border-green-600 bg-transparent group-hover:bg-gradient-to-br group-hover:from-green-500 group-hover:to-emerald-500',
                      iconColor: 'text-slate-500 dark:text-slate-400 group-hover:text-white'
                    };
                  case 'analyzer':
                    return {
                      collapsed: '', // No background for folded inactive items
                      expanded: 'hover:bg-white/50 dark:hover:bg-slate-700/50',
                      titleColor: 'text-slate-500 dark:text-slate-400 group-hover:text-orange-600 dark:group-hover:text-orange-400',
                      iconBorder: 'border-2 border-orange-300 dark:border-orange-600 bg-transparent group-hover:bg-gradient-to-br group-hover:from-orange-500 group-hover:to-red-500',
                      iconColor: 'text-slate-500 dark:text-slate-400 group-hover:text-white'
                    };
                  default:
                    return {
                      collapsed: '', // No background for folded inactive items
                      expanded: 'hover:bg-white/50 dark:hover:bg-slate-700/50',
                      titleColor: 'text-slate-500 dark:text-slate-400 group-hover:text-slate-700 dark:group-hover:text-slate-300',
                      iconBorder: 'border-2 border-slate-300 dark:border-slate-600 bg-transparent group-hover:bg-gradient-to-br group-hover:from-slate-500 group-hover:to-slate-600',
                      iconColor: 'text-slate-500 dark:text-slate-400 group-hover:text-white'
                    };
                }
              };
              
              const activeClasses = getActiveClasses(tool.category, isHome);
              const inactiveClasses = getInactiveClasses(tool.category, isHome);
              
              return (
                <Link
                  key={tool.path}
                  to={tool.path}
                  className={`group flex items-center text-sm font-medium rounded-xl transition-all duration-300 ${
                    isActiveItem
                      ? isCollapsed 
                        ? activeClasses.collapsed + ' justify-center py-3' // Center for folded
                        : activeClasses.expanded + ' shadow-lg px-3 py-3'
                      : isCollapsed
                        ? inactiveClasses.collapsed + ' justify-center py-3' // Center for folded
                        : inactiveClasses.expanded + ' px-3 py-3'
                  }`}
                  title={isCollapsed ? tool.name : ''}
                >
                  {isCollapsed ? (
                    // Folded sidebar - clean icon squares only, centered
                    <div className={`rounded-lg shadow-sm group-hover:scale-110 transition-transform duration-300 ${
                      isActiveItem 
                        ? activeClasses.iconBg + ' p-3' // Active: bigger padding (no border)
                        : inactiveClasses.iconBorder + ' p-2' // Inactive: normal padding (has border)
                    }`}>
                      <IconComponent className={`${
                        isActiveItem 
                          ? 'h-5 w-5 text-white' // Active: bigger icon, white
                          : 'h-4 w-4 ' + inactiveClasses.iconColor // Inactive: normal size, grayscale/hover
                      }`} />
                    </div>
                  ) : (
                    // Expanded sidebar
                    <>
                      <div className={`p-2 rounded-lg shadow-sm group-hover:scale-110 transition-transform duration-300 mr-3 flex-shrink-0 ${
                        isActiveItem 
                          ? activeClasses.iconBg // Active: colored background
                          : inactiveClasses.iconBorder // Inactive: transparent with colored border
                      }`}>
                        <IconComponent className={`h-4 w-4 ${
                          isActiveItem 
                            ? 'text-white' // Active: white icon
                            : inactiveClasses.iconColor // Inactive: grayscale icon
                        }`} />
                      </div>
                      <div className="flex-1 min-w-0">
                        <div className={`font-medium truncate ${
                          isActiveItem ? activeClasses.titleColor : inactiveClasses.titleColor
                        }`}>
                          {tool.name}
                        </div>
                        <div className="text-xs text-slate-500 dark:text-slate-400 truncate">
                          {tool.description}
                        </div>
                      </div>
                    </>
                  )}
                </Link>
              );
            })}
          </nav>
        </div>

        {/* Footer */}
        {!isCollapsed && (
          <div className="p-4 border-t border-slate-200/50 dark:border-slate-700/50">
            <div className="text-center">
              <div className="flex items-center justify-center gap-2 mb-2">
                <div className="w-1.5 h-1.5 bg-gradient-to-r from-blue-500 to-purple-500 rounded-full animate-pulse"></div>
                <span className="text-xs font-medium text-slate-500 dark:text-slate-400">
                  Quick Access
                </span>
                <div className="w-1.5 h-1.5 bg-gradient-to-r from-purple-500 to-indigo-500 rounded-full"></div>
              </div>
              <p className="text-xs text-slate-400 dark:text-slate-500">
                {SITE_CONFIG.totalTools} tools available
              </p>
            </div>
          </div>
        )}
      </div>
    </div>
  );
};

export default ToolSidebar;