"use client"

import {
  BarChart2,
  Package,
  ShoppingCart,
  Users,
  Settings,
  HelpCircle,
  Menu,
  Home,
  Truck,
  Box,
  DollarSign,
  LogOut,
  SunMoon,
} from "lucide-react"
import Link from "next/link"
import { useState } from "react"
import { useRouter } from "next/navigation"
import type React from "react"

export default function Sidebar() {
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false)
  const router = useRouter()

  function handleNavigation() {
    setIsMobileMenuOpen(false)
  }

  async function handleLogout() {
    try {
      const authToken = document.cookie.split("authToken=")[1]

      const res = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/logout`, {
        method: "POST",
        headers: { "Authorization": `Bearer ${authToken}` },
        credentials: "include",
      })

      if (!res.ok) throw new Error("Logout failed")

      document.cookie = "authToken=; Path=/; Expires=Thu, 01 Jan 1970 00:00:00 GMT;" // Clear cookie
      router.push("/login") 
    } catch (error) {
      console.error("Error logging out:", error)
    }
  }

  function NavItem({
    href,
    icon: Icon,
    children,
  }: {
    href: string
    icon: any
    children: React.ReactNode
  }) {
    return (
      <Link
        href={href}
        onClick={handleNavigation}
        className="flex items-center px-3 py-2 text-sm rounded-md transition-colors text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white hover:bg-gray-50 dark:hover:bg-[#1F1F23]"
      >
        <Icon className="h-4 w-4 mr-3 flex-shrink-0" />
        {children}
      </Link>
    )
  }

  return (
    <>
      <button
        type="button"
        className="lg:hidden fixed top-4 left-4 z-[70] p-2 rounded-lg bg-white dark:bg-[#0F0F12] shadow-md"
        onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
      >
        <Menu className="h-5 w-5 text-gray-600 dark:text-gray-300" />
      </button>
      <nav
        className={`
          fixed inset-y-0 left-0 z-[70] w-64 bg-white dark:bg-[#0F0F12] transform transition-transform duration-200 ease-in-out
          lg:translate-x-0 lg:static lg:w-64 border-r border-gray-200 dark:border-[#1F1F23]
          ${isMobileMenuOpen ? "translate-x-0" : "-translate-x-full"}
        `}
      >
        <div className="h-full flex flex-col">
          <Link
            href="/dashboard"
            className="h-16 px-6 flex items-center border-b border-gray-200 dark:border-[#1F1F23]"
          >
            <div className="flex items-center gap-3">
              <ShoppingCart className="h-6 w-6 text-gray-900 dark:text-white" />
              <span className="text-lg font-semibold hover:cursor-pointer text-gray-900 dark:text-white">
                Ember
              </span>
            </div>
          </Link>

          <div className="flex-1 overflow-y-auto py-4 px-4">
            <div className="space-y-6">
              <div>
                <div className="px-3 mb-2 text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400">
                  Overview
                </div>
                <div className="space-y-1">
                  <NavItem href="/dashboard" icon={Home}>
                    Dashboard
                  </NavItem>
                  <NavItem href="/dashboard/orders" icon={Package}>
                    Orders
                  </NavItem>
                </div>
              </div>

              {/* Management Section */}
              <div>
                <div className="px-3 mb-2 text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400">
                  Management
                </div>
                <div className="space-y-1">
                  <NavItem href="/dashboard/products" icon={Box}>
                    Products
                  </NavItem>
                  <NavItem href="/dashboard/shipping" icon={Truck}>
                    Shipping Options
                  </NavItem>
                  <NavItem href="/dashboard/storefront" icon={Settings}>
                    Manage Storefront
                  </NavItem>
                </div>
              </div>
            </div>
          </div>

          {/* Theme Toggle & Logout at Bottom */}
          <div className="p-4 border-t border-gray-200 dark:border-[#1F1F23] flex flex-col space-y-2">
            <button
              onClick={handleLogout}
              className="w-full flex items-center px-3 py-2 text-sm rounded-md transition-colors text-red-600 dark:text-red-400 hover:text-red-800 dark:hover:text-red-500 hover:bg-gray-50 dark:hover:bg-[#1F1F23]"
            >
              <LogOut className="h-5 w-5 mr-3 flex-shrink-0" />
              Logout
            </button>
          </div>
        </div>
      </nav>

      {isMobileMenuOpen && (
        <div
          className="fixed inset-0 bg-black bg-opacity-50 z-[65] lg:hidden"
          onClick={() => setIsMobileMenuOpen(false)}
        />
      )}
    </>
  )
}