import Image from "next/image";
import Link from "next/link";
import React from "react";
import logo from "@/assets/icons/logo.svg";
import {
  CircleDollarSign,
  Headphones,
  Heart,
  Home,
  LayoutGrid,
  LayoutDashboard,
  LogOut,
  Package,
  PackageCheck,
  ShoppingCart,
} from "lucide-react";
import { Button } from "@/components/ui/button";

const Drawer = ({
  isOpen,
  toggleDrawer,
  cartCount = 0,
  wishlistCount = 0,
  isAuthenticated = false,
  dashboardHref = null,
  onLogout = () => {},
}: {
  isOpen: boolean;
  toggleDrawer: () => void;
  cartCount?: number;
  wishlistCount?: number;
  isAuthenticated?: boolean;
  dashboardHref?: string | null;
  onLogout?: () => void;
}) => {
  return (
    <div className="relative z-50">
      <div
        className={`fixed inset-y-0 left-0 z-20 w-64 bg-white shadow-2xl transform transition-transform ease-in-out duration-300 ${
          isOpen ? "translate-x-0" : "-translate-x-full"
        }`}
      >
        <div className="flex h-full flex-col p-4">
          <div className="mb-10 flex w-full items-center justify-between border-b">
            <Image src={logo} alt="" width={500} height={500} className="w-3/4" />
            <button
              className="m-4 text-gray-500"
              onClick={toggleDrawer}
              aria-label="Close drawer"
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                className="h-6 w-6"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth={2}
                  d="M6 18L18 6M6 6l12 12"
                />
              </svg>
            </button>
          </div>
          <div className="flex grow flex-col gap-1 text-lg text-gray-700">
            <Link
              className="flex items-center gap-2 rounded p-2 font-semibold text-slate-900"
              href="/"
              onClick={toggleDrawer}
            >
              <Home className="size-5" />
              Home
            </Link>
            <Link
              className="flex items-center gap-2 rounded p-2 font-semibold text-slate-900"
              href="/product"
              onClick={toggleDrawer}
            >
              <Package className="size-5" />
              Products
            </Link>
            <Link
              className="flex items-center gap-2 rounded p-2 font-semibold text-slate-900"
              href="/services"
              onClick={toggleDrawer}
            >
              <LayoutGrid className="size-5" />
              Features
            </Link>
            <Link
              className="flex items-center gap-2 rounded p-2 font-semibold text-slate-900"
              href="/pricing"
              onClick={toggleDrawer}
            >
              <CircleDollarSign className="size-5" />
              Pricing
            </Link>
            <Link
              className="flex items-center gap-2 rounded p-2 font-semibold text-slate-900"
              href="/contact-us"
              onClick={toggleDrawer}
            >
              <Headphones className="size-5" />
              Contact Us
            </Link>
            <div className="flex items-center gap-4 px-2 py-2">
              <Link
                href="/checkout"
                className="relative inline-flex size-10 items-center justify-center rounded-md text-slate-900 hover:bg-slate-100"
                aria-label={`Cart${cartCount > 0 ? `, ${cartCount} items` : ""}`}
                onClick={toggleDrawer}
              >
                <ShoppingCart className="size-5" />
                {cartCount > 0 ? (
                  <span className="absolute -right-0.5 -top-0.5 flex h-4 min-w-[1rem] items-center justify-center rounded-full bg-primary px-1 text-[10px] font-bold text-primary-foreground">
                    {cartCount > 99 ? "99+" : cartCount}
                  </span>
                ) : null}
              </Link>
              <Link
                href="/account/wishlist"
                className="relative inline-flex size-10 items-center justify-center rounded-md text-slate-900 hover:bg-slate-100"
                aria-label={`Wishlist${wishlistCount > 0 ? `, ${wishlistCount} items` : ""}`}
                onClick={toggleDrawer}
              >
                <Heart className="size-5" />
                {wishlistCount > 0 ? (
                  <span className="absolute -right-0.5 -top-0.5 flex h-4 min-w-[1rem] items-center justify-center rounded-full bg-primary px-1 text-[10px] font-bold text-primary-foreground">
                    {wishlistCount > 99 ? "99+" : wishlistCount}
                  </span>
                ) : null}
              </Link>
            </div>
            {isAuthenticated ? (
              <Link
                className="flex items-center gap-2 rounded p-2 font-semibold text-slate-900"
                href="/account/orders"
                onClick={toggleDrawer}
              >
                <PackageCheck className="size-5" />
                Orders
              </Link>
            ) : null}
            {isAuthenticated && dashboardHref ? (
              <Link
                className="flex items-center gap-2 rounded p-2 font-semibold text-slate-900"
                href={dashboardHref}
                onClick={toggleDrawer}
              >
                <LayoutDashboard className="size-5" />
                Admin Dashboard
              </Link>
            ) : null}
          </div>
          <hr className="my-4" />
          <div className="flex flex-col gap-2 text-gray-700">
            {isAuthenticated ? (
              <Button variant="outline" type="button" onClick={() => { onLogout(); toggleDrawer(); }}>
                <LogOut className="mr-2 size-4" />
                Log out
              </Button>
            ) : (
              <>
                <Link
                  href="/sign-in"
                  className="rounded p-2 font-medium text-center hover:bg-gray-50"
                  onClick={toggleDrawer}
                >
                  Login
                </Link>
                <Link
                  href="/register"
                  className="rounded p-2 font-medium text-center hover:bg-gray-50"
                  onClick={toggleDrawer}
                >
                  Sign Up
                </Link>
              </>
            )}
          </div>
        </div>
      </div>
    </div>
  );
};

export default Drawer;