import React from 'react';
import { NavLink, useNavigate } from 'react-router-dom';
import { useAuth } from '../context/AuthContext';

export default function Sidebar({ user }) {
  const { logout } = useAuth();
  const navigate = useNavigate();

  const handleLogout = () => {
    logout();
    navigate('/login');
  };

  return (
    <aside className="w-60 bg-brand-900 text-white flex flex-col shrink-0">
      <div className="p-5 flex items-center gap-3">
        <div className="text-2xl">🌊</div>
        <div>
          <h1 className="text-lg font-bold tracking-tight">TeamFlow</h1>
          <p className="text-xs text-brand-300">Board Management</p>
        </div>
      </div>
      <nav className="flex-1 px-3 py-2 space-y-1">
        <SidebarLink to="/" icon="🏠" label="Boards" />
        {user?.role === 'admin' && (
          <>
            <SidebarLink to="/users" icon="👥" label="Users" />
            <SidebarLink to="/email-settings" icon="📧" label="Email Settings" />
          </>
        )}
      </nav>
      <div className="p-3 border-t border-brand-700">
        <button
          onClick={handleLogout}
          className="w-full flex items-center gap-3 px-3 py-2 text-sm text-brand-300 hover:text-white hover:bg-brand-800 rounded-lg transition-colors"
        >
          <span>🚪</span> Sign Out
        </button>
      </div>
    </aside>
  );
}

function SidebarLink({ to, icon, label }) {
  return (
    <NavLink
      to={to}
      className={({ isActive }) =>
        `flex items-center gap-3 px-3 py-2 text-sm rounded-lg transition-colors ${
          isActive ? 'bg-brand-700 text-white' : 'text-brand-300 hover:text-white hover:bg-brand-800'
        }`
      }
    >
      <span>{icon}</span> {label}
    </NavLink>
  );
}
