import { Outlet, useNavigate } from "react-router-dom"
import { useState } from "react"
import './admin.css'

export default function AdminLayout() {
  const [openProfile, setOpenProfile] = useState(false)
  const navigate = useNavigate()

  const logout = () => {
    localStorage.removeItem("token")
    navigate("/admin/login")
  }

  return (
    <div className="admin-wrapper">
      <aside className="sidebar">
        <div className="logo">Topper's Choice</div>
        <nav>
          <button onClick={() => navigate("/admin")}>Dashboard</button>
          <button onClick={() => navigate("/admin/batch")}>Batch</button>
          <button onClick={() => navigate("/admin/subjects")}>Subjects</button>
          <button onClick={() => navigate("/admin/courses")}>Courses</button>
          <button onClick={() => navigate("/admin/students")}>Student Details</button>
          <button onClick={() => navigate("/admin/archived")}>Archived Courses</button>
          <button onClick={() => navigate("/admin/archived-batches")}>Archived Batches</button>
        </nav>
      </aside>

      <main className="main">
        <header className="header">
          <input className="search" placeholder="Search here" />

          <div
            className="profile"
            onClick={() => setOpenProfile(p => !p)}
          >
            <img src="/avatar.png" width="32" />
            <div>
              <span>Deepak Negi</span>
              <small>Super Admin</small>
            </div>

            {openProfile && (
              <div className="dropdown">
                <button onClick={logout}>Logout</button>
              </div>
            )}
          </div>
        </header>

        <div className="content">
          <Outlet />
        </div>
      </main>
    </div>
  )
}
