"use client";

import { useSession, signOut } from "next-auth/react";
import Link from "next/link";
import { usePathname } from "next/navigation";
import styles from "./admin.module.css";

function AdminSidebar() {
  const { data: session } = useSession();
  const pathname = usePathname();

  const navItems = [
    {
      section: "Main",
      links: [
        {
          href: "/admin/dashboard",
          label: "Dashboard",
          icon: (
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
              <rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/>
              <rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/>
            </svg>
          ),
        },
      ],
    },
    {
      section: "Content",
      links: [
        {
          href: "/admin/apps",
          label: "Apps",
          icon: (
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
              <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/>
            </svg>
          ),
        },
        {
          href: "/admin/categories",
          label: "Categories",
          icon: (
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
              <path d="M4 6h16M4 10h16M4 14h16M4 18h16"/>
            </svg>
          ),
        },
      ],
    },
    {
      section: "System",
      links: [
        {
          href: "/admin/settings",
          label: "Settings",
          icon: (
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
              <circle cx="12" cy="12" r="3"/>
              <path d="M19.07 4.93a10 10 0 0 1 0 14.14M4.93 4.93a10 10 0 0 0 0 14.14"/>
            </svg>
          ),
        },
      ],
    },
  ];

  return (
    <aside className={styles.sidebar}>
      {/* Logo */}
      <div className={styles.sidebarHeader}>
        <div className={styles.sidebarLogoIcon}>O</div>
        <div>
          <div className={styles.sidebarLogoText}>
            Oxy<span className={styles.sidebarLogoSub}>lab</span>
          </div>
          <div className={styles.sidebarBadge}>Admin</div>
        </div>
      </div>

      {/* Navigation */}
      <nav className={styles.sidebarNav}>
        {navItems.map((section) => (
          <div key={section.section} className={styles.navSection}>
            <div className={styles.navSectionTitle}>{section.section}</div>
            {section.links.map((link) => (
              <Link
                key={link.href}
                href={link.href}
                className={`${styles.navItem} ${pathname.startsWith(link.href) ? styles.active : ""}`}
              >
                <span className={styles.navItemIcon}>{link.icon}</span>
                {link.label}
              </Link>
            ))}
          </div>
        ))}
      </nav>

      {/* User Footer */}
      <div className={styles.sidebarFooter}>
        <div className={styles.userInfo}>
          <div className={styles.userAvatar}>
            {session?.user?.name?.charAt(0) ?? "A"}
          </div>
          <div className={styles.userDetails}>
            <div className={styles.userName}>{session?.user?.name ?? "Admin"}</div>
            <div className={styles.userRole}>Administrator</div>
          </div>
        </div>
        <button
          className={styles.logoutBtn}
          onClick={() => signOut({ callbackUrl: "/admin/login" })}
        >
          <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/>
            <polyline points="16 17 21 12 16 7"/>
            <line x1="21" y1="12" x2="9" y2="12"/>
          </svg>
          Sign Out
        </button>
      </div>
    </aside>
  );
}

export default AdminSidebar;