'use client'
import Link from 'next/link'
import { usePathname } from 'next/navigation'
import { LayoutDashboard, CalendarCheck, Wrench, Users, BarChart2, LogOut, UserCheck } from 'lucide-react'
import styles from './AdminSidebar.module.css'

const navItems = [
  { icon: LayoutDashboard, label: 'Dashboard', href: '/admin' },
  { icon: CalendarCheck, label: 'Booking', href: '/admin/bookings' },
  { icon: Wrench, label: 'Layanan', href: '/admin/services' },
  { icon: Users, label: 'Pelanggan', href: '/admin/customers' },
  { icon: UserCheck, label: 'Terapis', href: '/admin/therapists' },
  { icon: BarChart2, label: 'Laporan', href: '/admin/reports' },
]

export default function AdminSidebar() {
  const pathname = usePathname()

  function isActive(href: string) {
    if (href === '/admin') return pathname === '/admin'
    return pathname.startsWith(href)
  }

  return (
    <>
      {/* Desktop Sidebar */}
      <aside className={styles.sidebar}>
        <div className={styles.logo}>
          <span className={styles.logoLeaf}>🌿</span>
          <span className={styles.logoText}>Kembali SPA</span>
        </div>

        <nav className={styles.nav}>
          {navItems.map((item) => (
            <Link
              key={item.href}
              href={item.href}
              className={`${styles.navItem} ${isActive(item.href) ? styles.navActive : ''}`}
            >
              <item.icon size={18} strokeWidth={1.5} />
              <span>{item.label}</span>
            </Link>
          ))}
        </nav>

        <div className={styles.bottom}>
          <div className={styles.adminInfo}>
            <div className={styles.adminAvatar}>A</div>
            <div>
              <div className={styles.adminName}>Admin</div>
              <div className={styles.adminRole}>Super Admin</div>
            </div>
          </div>
          <Link href="/login" className={styles.logoutBtn}>
            <LogOut size={16} strokeWidth={1.5} />
            <span>Keluar</span>
          </Link>
        </div>
      </aside>

      {/* Mobile Bottom Navigation */}
      <nav className={styles.mobileBottomNav} aria-label="Admin navigasi mobile">
        <div className={styles.mobileNavList}>
          {navItems.map((item) => (
            <Link
              key={item.href}
              href={item.href}
              className={`${styles.mobileNavItem} ${isActive(item.href) ? styles.mobileNavActive : ''}`}
            >
              <span className={styles.mobileNavIcon}>
                <item.icon size={20} strokeWidth={1.5} />
              </span>
              <span>{item.label}</span>
            </Link>
          ))}
          <Link href="/login" className={styles.mobileNavItem}>
            <span className={styles.mobileNavIcon}>
              <LogOut size={20} strokeWidth={1.5} />
            </span>
            <span>Keluar</span>
          </Link>
        </div>
      </nav>
    </>
  )
}