import { NavLink, useNavigate } from 'react-router-dom'
import { Home, Building2, Users, Globe, FileText, MessageSquareText, Settings, HelpCircle, LogOut } from 'lucide-react'
import { useAuth } from '../context/AuthContext'
import meshkeeLogo from '../assets/meshkee-logo.png'
import styles from './Sidebar.module.css'

const navItems = [
  { icon: Home, label: 'Home', to: '/' },
  { icon: Building2, label: 'Businesses', to: '/businesses' },
  { icon: Users, label: 'Users', to: '/users' },
  { icon: Globe, label: 'Websites', to: '/websites' },
  { icon: FileText, label: 'Templates', to: '/templates' },
  { icon: MessageSquareText, label: 'SMS Templates', to: '/sms-templates' },
  { icon: Settings, label: 'Settings', to: '/settings' },
]

const footerItems = [
  { icon: HelpCircle, label: 'Help Center' },
  { icon: LogOut, label: 'Logout' },
]

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

  return (
    <aside className={styles.sidebar}>
      <div className={styles.brand}>
        <img src={meshkeeLogo} alt="Meshkee" className={styles.brandLogo} />
        <div className={styles.brandText}>
          <span className={styles.brandDomain}>Super Admin</span>
          <span className={styles.brandName}>Meshkee.app</span>
        </div>
      </div>

      <nav className={styles.nav}>
        {navItems.map((item) => (
          <NavLink
            key={item.label}
            to={item.to}
            end={item.to === '/'}
            className={({ isActive }) =>
              `${styles.navItem} ${isActive ? styles.active : ''}`
            }
          >
            <item.icon size={20} />
            <span>{item.label}</span>
          </NavLink>
        ))}
      </nav>

      <div className={styles.footer}>
        {footerItems.map(({ icon: Icon, label }) => (
          <button
            key={label}
            type="button"
            className={styles.navItem}
            onClick={() => {
              if (label === 'Logout') {
                logout()
                navigate('/login')
              }
            }}
          >
            <Icon size={20} />
            <span>{label}</span>
          </button>
        ))}
      </div>
    </aside>
  )
}