"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { LogOut } from "lucide-react";

import { signOutMock } from "@/app/actions/auth";
import { Button } from "@/components/ui/button";
import { dashboardNavigation } from "@/lib/dashboard-navigation";
import type { MockSession } from "@/lib/mock-auth";
import { cn } from "@/lib/utils";

export function DashboardSidebar({ session }: { session: MockSession }) {
  const pathname = usePathname();

  return (
    <aside className="flex w-full shrink-0 flex-col border-b bg-sidebar text-sidebar-foreground md:sticky md:top-0 md:min-h-dvh md:w-72 md:border-b-0 md:border-r">
      <div className="flex h-16 items-center gap-3 border-b px-4">
        <div className="flex size-9 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
          W
        </div>
        <div className="min-w-0">
          <p className="truncate text-sm font-semibold">WebDev Pipeline</p>
          <p className="truncate text-xs text-muted-foreground">
            Akquise Workspace
          </p>
        </div>
      </div>

      <nav
        className="flex gap-1 overflow-x-auto p-3 md:grid md:overflow-visible"
        aria-label="Dashboard navigation"
      >
        {dashboardNavigation.map((item) => {
          const Icon = item.icon;
          const isActive =
            item.href === "/dashboard"
              ? pathname === item.href
              : pathname.startsWith(item.href);

          return (
            <Link
              aria-current={isActive ? "page" : undefined}
              className={cn(
                "flex h-9 shrink-0 items-center gap-2 rounded-lg px-3 text-sm font-medium transition-colors",
                isActive
                  ? "bg-sidebar-primary text-sidebar-primary-foreground"
                  : "text-muted-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
              )}
              href={item.href}
              key={item.href}
            >
              <Icon className="size-4" />
              <span>{item.label}</span>
            </Link>
          );
        })}
      </nav>

      <div className="border-t p-3 md:mt-auto">
        <div className="mb-3 rounded-lg border bg-background p-3 md:block">
          <p className="truncate text-sm font-medium">{session.name}</p>
          <p className="truncate text-xs text-muted-foreground">
            {session.email}
          </p>
        </div>
        <form action={signOutMock}>
          <Button className="w-full justify-start" variant="outline">
            <LogOut />
            Sign out
          </Button>
        </form>
      </div>
    </aside>
  );
}