import React from 'react';
import { Link, useLocation } from 'react-router-dom';

const Sidebar = () => {
  const location = useLocation();
  const userEmail = localStorage.getItem("userEmail") || "Admin User";

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

  const menuItems = [
    { name: 'Dashboard', path: '/dashboard', icon: '📊' },
    { name: 'Cars', path: '/cars', icon: '🚗' },
    { name: 'Services', path: '/services', icon: '🛠️' },
    { name: 'Service Records', path: '/records', icon: '📋' },
    { name: 'Payments', path: '/payments', icon: '💳' },
    { name: 'Reports', path: '/reports', icon: '📈' }
   
  ];

  return (
    <div style={{ 
      width: '260px', 
      backgroundColor: '#0f172a', 
      color: '#fff', 
      display: 'flex',
      flexDirection: 'column',
      height: '100vh',
      position: 'sticky',
      top: 0
    }}>
      <div style={{ padding: '30px 25px' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
          <div style={{ 
            backgroundColor: '#2563eb', 
            padding: '5px', 
            borderRadius: '6px',
            fontSize: '20px'
          }}>🔧</div>
          <div>
            <h2 style={{ margin: 0, fontSize: '22px', fontWeight: 'bold', letterSpacing: '0.5px' }}>
              FixTrack
            </h2>
            <p style={{ margin: 0, fontSize: '11px', color: '#94a3b8' }}>
              Car Repair Management
            </p>
          </div>
        </div>
      </div>

   
      <nav style={{ flex: 1, padding: '0 15px', display: 'flex', flexDirection: 'column', gap: '4px' }}>
        {menuItems.map((item) => (
          <Link 
            key={item.path}
            to={item.path} 
            style={{
              ...linkStyle,
              backgroundColor: isActive(item.path) ? '#2563eb' : 'transparent',
              color: isActive(item.path) ? '#fff' : '#94a3b8',
              borderRadius: '8px',
            }}
          >
            <span style={{ fontSize: '18px', width: '25px' }}>{item.icon}</span>
            {item.name}
          </Link>
        ))}
      </nav>

      
      <div style={{ 
        padding: '20px', 
        borderTop: '1px solid #1e293b',
        display: 'flex',
        alignItems: 'center',
        gap: '12px'
      }}>
        <div style={{
          width: '40px',
          height: '40px',
          borderRadius: '50%',
          backgroundColor: '#fff',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          fontSize: '20px'
        }}>
          👤
        </div>
       <div style={{ overflow: 'hidden' }}>
           <p style={{ margin: 0, fontSize: '14px', fontWeight: '600', whiteSpace: 'nowrap', textOverflow: 'ellipsis' }}>
               {localStorage.getItem('userEmail') || 'User'}
            </p>
            <p style={{ margin: 0, fontSize: '12px', color: '#94a3b8' }}>Administrator</p>
         </div>
      </div>
    </div>
  );
};

const linkStyle = {
  display: 'flex',
  alignItems: 'center',
  gap: '12px',
  padding: '12px 15px',
  textDecoration: 'none',
  fontSize: '14px',
  fontWeight: '500',
  transition: 'all 0.2s ease',
};

export default Sidebar;