"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { logoutCustomer } from "@/lib/actions/customer-auth";

const ITEMS = [
  {
    href: "/account",
    label: "My Orders",
    path: "M9 12h3.75M9 15h3.75M9 18h3.75M3.75 4.5h16.5v15a1.5 1.5 0 01-1.5 1.5H5.25a1.5 1.5 0 01-1.5-1.5v-15zM3.75 4.5L5.25 3h13.5l1.5 1.5",
  },
  {
    href: "/account/profile",
    label: "Profile",
    path: "M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z",
  },
  {
    href: "/account/addresses",
    label: "Manage Addresses",
    path: "M15 10.5a3 3 0 11-6 0 3 3 0 016 0z M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z",
  },
  {
    href: "/account/custom-orders",
    label: "Custom Orders",
    path: "M9.53 16.122a3 3 0 00-5.78 1.128 2.25 2.25 0 01-2.4 2.245 4.5 4.5 0 008.4-2.245c0-.399-.078-.78-.22-1.128zm0 0a15.998 15.998 0 003.388-1.62m-5.043-.025a15.994 15.994 0 011.622-3.395m3.42 3.42a15.995 15.995 0 004.764-4.648l3.876-5.814a1.151 1.151 0 00-1.597-1.597L14.146 6.32a15.996 15.996 0 00-4.649 4.763m3.42 3.42a6.776 6.776 0 00-3.42-3.42",
  },
  {
    href: "/account/support",
    label: "Support",
    path: "M8.625 12a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H8.25m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H12m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0h-.375M21 12c0 4.556-4.03 8.25-9 8.25a9.764 9.764 0 01-2.555-.337A5.972 5.972 0 015.41 20.97a5.969 5.969 0 01-.474-.065 4.48 4.48 0 00.978-2.025c.09-.457-.133-.901-.467-1.226C3.93 16.178 3 14.189 3 12c0-4.556 4.03-8.25 9-8.25s9 3.694 9 8.25z",
  },
];

const LOGOUT_PATH = "M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15M12 9l3 3m0 0l-3 3m3-3H3";

export default function AccountSidebar({ email }: { email: string }) {
  const pathname = usePathname();

  return (
    <aside className="h-fit overflow-hidden rounded-xl border border-rose-100 bg-white shadow-sm">
      <div className="border-b border-rose-100 bg-rose-50/60 px-4 py-3">
        <p className="font-[family-name:var(--font-heading)] text-base font-bold text-rose-800">My Account</p>
        <p className="mt-0.5 truncate text-xs text-stone-500">{email}</p>
      </div>
      <nav className="space-y-0.5 p-2">
        {ITEMS.map((item) => {
          const isActive = pathname === item.href;
          return (
            <Link
              key={item.href}
              href={item.href}
              className={`flex items-center gap-3 rounded-lg border-l-2 px-3 py-2.5 text-sm font-medium transition-colors ${
                isActive
                  ? "border-rose-700 bg-rose-50 text-rose-800"
                  : "border-transparent text-stone-600 hover:bg-stone-50"
              }`}
            >
              <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 shrink-0" fill="none" viewBox="0 0 24 24" strokeWidth={1.8} stroke="currentColor">
                <path strokeLinecap="round" strokeLinejoin="round" d={item.path} />
              </svg>
              {item.label}
            </Link>
          );
        })}
        <form action={logoutCustomer} className="mt-1 border-t border-rose-100 pt-1">
          <button type="submit" className="flex w-full items-center gap-3 rounded-lg border-l-2 border-transparent px-3 py-2.5 text-sm font-medium text-red-600 hover:bg-red-50">
            <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 shrink-0" fill="none" viewBox="0 0 24 24" strokeWidth={1.8} stroke="currentColor">
              <path strokeLinecap="round" strokeLinejoin="round" d={LOGOUT_PATH} />
            </svg>
            Logout
          </button>
        </form>
      </nav>
    </aside>
  );
}