import { useState } from 'react';
import { motion } from 'framer-motion';
import { cn } from '../../utils/cn';

const VerticalSidebar = ({ 
  activeView, 
  onViewChange, 
  databaseCount, 
  activeConnections,
  claudeConfigured 
}) => {
  const [collapsed, setCollapsed] = useState(false);

  const navigationItems = [
    {
      id: 'dashboard',
      label: 'Dashboard',
      icon: (
        <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2H5a2 2 0 00-2-2v0a2 2 0 002-2h10a2 2 0 012 2v0a2 2 0 012 2z" />
        </svg>
      ),
      description: 'Overview & insights'
    },
    {
      id: 'databases',
      label: 'My Local Databases',
      icon: (
        <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4" />
        </svg>
      ),
      description: 'Manage configurations',
      count: databaseCount,
      hasSubmenu: true
    },
    {
      id: 'claude',
      label: 'Claude Desktop',
      icon: (
        <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1" />
        </svg>
      ),
      description: 'Integration status',
      count: activeConnections,
      status: claudeConfigured ? 'online' : 'offline'
    }
  ];

  return (
    <motion.div
      className={cn(
        'bg-white border border-gray-200 flex flex-col h-full rounded-xl shadow-lg overflow-hidden',
        collapsed ? 'w-12 sm:w-16' : 'w-56 sm:w-64'
      )}
      initial={false}
      animate={{ 
        width: collapsed ? 64 : 256,
        transition: {
          type: "spring",
          stiffness: 300,
          damping: 30,
          mass: 0.8
        }
      }}
      transition={{
        type: "spring",
        stiffness: 300,
        damping: 30,
        mass: 0.8
      }}
    >
      {/* Header */}
      <div className="p-3 sm:p-4 border-b border-gray-200 rounded-t-xl">
        <div className="flex items-center justify-between">
          <motion.div 
            className="flex items-center space-x-3"
            initial={false}
            animate={{ 
              opacity: collapsed ? 0 : 1,
              x: collapsed ? -20 : 0,
              transition: {
                duration: 0.2,
                delay: collapsed ? 0 : 0.1
              }
            }}
            style={{ display: collapsed ? 'none' : 'flex' }}
          >
            <img 
              src="/logo.png" 
              alt="HANA MCP Logo" 
              className="w-8 h-8 flex-shrink-0"
            />
            <div>
              <h2 className="text-lg font-semibold text-gray-900">HANA MCP</h2>
              <p className="text-xs text-gray-500">Database Manager</p>
            </div>
          </motion.div>
          <motion.div 
            className="flex flex-col items-center w-full space-y-2"
            initial={false}
            animate={{ 
              opacity: collapsed ? 1 : 0,
              scale: collapsed ? 1 : 0.8,
              transition: {
                duration: 0.2,
                delay: collapsed ? 0.1 : 0
              }
            }}
            style={{ display: collapsed ? 'flex' : 'none' }}
          >
            <img 
              src="/logo.png" 
              alt="HANA MCP Logo" 
              className="w-6 h-6"
            />
            <motion.button
              onClick={() => setCollapsed(!collapsed)}
              className="p-1 rounded-lg hover:bg-gray-100 transition-colors"
              whileHover={{ scale: 1.05 }}
              whileTap={{ scale: 0.95 }}
              title="Expand sidebar"
            >
              <motion.svg 
                className="w-4 h-4 text-gray-500" 
                fill="none" 
                stroke="currentColor" 
                viewBox="0 0 24 24"
                animate={{ rotate: collapsed ? 180 : 0 }}
                transition={{ duration: 0.3, ease: "easeInOut" }}
              >
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 5l7 7-7 7M5 5l7 7-7 7" />
              </motion.svg>
            </motion.button>
          </motion.div>
          <motion.button
            onClick={() => setCollapsed(!collapsed)}
            className={cn(
              "p-1.5 rounded-lg hover:bg-gray-100 transition-colors",
              collapsed && "hidden"
            )}
            whileHover={{ scale: 1.05 }}
            whileTap={{ scale: 0.95 }}
          >
            <motion.svg 
              className="w-4 h-4 text-gray-500" 
              fill="none" 
              stroke="currentColor" 
              viewBox="0 0 24 24"
              animate={{ rotate: collapsed ? 180 : 0 }}
              transition={{ duration: 0.3, ease: "easeInOut" }}
            >
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11 19l-7-7 7-7m8 14l-7-7 7-7" />
            </motion.svg>
          </motion.button>
        </div>
      </div>

      {/* Navigation */}
      <nav className="flex-1 p-1 sm:p-2">
        <ul className="space-y-1">
          {navigationItems.map((item) => (
            <li key={item.id}>
              <button
                onClick={() => onViewChange(item.id)}
                className={cn(
                  'w-full flex items-center p-3 rounded-lg text-left transition-all duration-200',
                  'hover:bg-gray-50 group',
                  activeView === item.id
                    ? 'bg-blue-50 text-blue-700 border border-blue-200'
                    : 'text-gray-700 hover:text-gray-900'
                )}
              >
                <div className={cn(
                  'flex-shrink-0',
                  activeView === item.id ? 'text-blue-600' : 'text-gray-400 group-hover:text-gray-600'
                )}>
                  {item.icon}
                </div>
                
                <motion.div 
                  className="ml-3 flex-1 min-w-0"
                  initial={false}
                  animate={{ 
                    opacity: collapsed ? 0 : 1,
                    x: collapsed ? -10 : 0,
                    transition: {
                      duration: 0.2,
                      delay: collapsed ? 0 : 0.1
                    }
                  }}
                  style={{ display: collapsed ? 'none' : 'block' }}
                >
                  <div className="flex items-center justify-between">
                    <span className="text-sm font-medium truncate">
                      {item.label}
                    </span>
                    {item.count !== undefined && item.count > 0 && (
                      <motion.span 
                        className={cn(
                          'ml-2 px-2 py-0.5 text-xs font-medium rounded-full',
                          activeView === item.id
                            ? 'bg-blue-100 text-blue-700'
                            : 'bg-gray-100 text-gray-600'
                        )}
                        initial={{ scale: 0 }}
                        animate={{ scale: 1 }}
                        transition={{ delay: 0.2 }}
                      >
                        {item.count}
                      </motion.span>
                    )}
                    {item.status && (
                      <motion.div 
                        className={cn(
                          'ml-2 w-2 h-2 rounded-full',
                          item.status === 'online' ? 'bg-green-500' : 'bg-gray-300'
                        )}
                        initial={{ scale: 0 }}
                        animate={{ scale: 1 }}
                        transition={{ delay: 0.2 }}
                      />
                    )}
                  </div>
                  <p className="text-xs text-gray-500 truncate">
                    {item.description}
                  </p>
                </motion.div>
              </button>
            </li>
          ))}
        </ul>
      </nav>

      {/* Quick Actions */}
      <motion.div 
        className="p-3 sm:p-4 border-t border-gray-200 rounded-b-xl"
        initial={false}
        animate={{ 
          opacity: collapsed ? 0 : 1,
          y: collapsed ? 20 : 0,
          transition: {
            duration: 0.2,
            delay: collapsed ? 0 : 0.15
          }
        }}
        style={{ display: collapsed ? 'none' : 'block' }}
      >
        <motion.button
          onClick={() => onViewChange('add-database')}
          className="w-full flex items-center justify-center px-4 py-2 bg-[#86a0ff] text-white text-sm font-medium rounded-lg hover:bg-[#7990e6] transition-colors"
          whileHover={{ scale: 1.02 }}
          whileTap={{ scale: 0.98 }}
        >
          <svg className="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
          </svg>
           Add Database
        </motion.button>
      </motion.div>

    </motion.div>
  );
};

export default VerticalSidebar;