import { NavLink, Outlet, useNavigate } from 'react-router-dom'
import { supabase } from '../../lib/supabase'
import styles from './AdminLayout.module.css'

const NAV_ITEMS = [
  { to: '/admin/products', label: 'Products' },
  { to: '/admin/services', label: 'Services' },
  { to: '/admin/schedule', label: 'Schedule' },
  { to: '/admin/bookings', label: 'Bookings' },
  { to: '/admin/inquiries', label: 'Inquiries' },
]

function AdminLayout() {
  const navigate = useNavigate()

  async function handleSignOut() {
    const { error } = await supabase.auth.signOut()
    if (!error) navigate('/admin/login')
  }

  return (
    <div className={styles.layout}>
      <aside className={styles.sidebar}>
        <p className={styles.brand}>Braids by Mira</p>
        <nav>
          {NAV_ITEMS.map((item) => (
            <NavLink
              key={item.to}
              to={item.to}
              className={({ isActive }) => (isActive ? `${styles.navLink} ${styles.navLinkActive}` : styles.navLink)}
            >
              {item.label}
            </NavLink>
          ))}
        </nav>
        <button type="button" className={styles.signOut} onClick={handleSignOut}>
          Sign out
        </button>
      </aside>
      <main className={styles.content}>
        <Outlet />
      </main>
    </div>
  )
}

export default AdminLayout