"use client";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { tools, categories } from "@/lib/tools";
import { cn } from "@/lib/utils";
import { Wrench } from "lucide-react";

export function Sidebar() {
  const pathname = usePathname();

  return (
    <aside className="fixed left-0 top-0 h-full w-[var(--sidebar-width)] flex flex-col border-r border-border bg-card/50 backdrop-blur-xl z-40 overflow-y-auto">
      {/* Logo */}
      <div className="flex items-center gap-2.5 px-4 py-4 border-b border-border shrink-0">
        <div className="h-7 w-7 rounded-lg bg-white/10 flex items-center justify-center">
          <Wrench className="h-4 w-4 text-white" />
        </div>
        <div>
          <p className="text-sm font-semibold leading-none">Seakses Tools</p>
          <p className="text-[10px] text-muted-foreground mt-0.5">tools.seakses.com</p>
        </div>
      </div>

      {/* Nav */}
      <nav className="flex-1 py-3 px-2">
        {categories.map((cat) => (
          <div key={cat} className="mb-4">
            <p className="px-2 mb-1 text-[10px] font-semibold uppercase tracking-wider text-muted-foreground/60">
              {cat}
            </p>
            {tools
              .filter((t) => t.category === cat)
              .map((tool) => {
                const active = pathname === `/${tool.slug}` || pathname.startsWith(`/${tool.slug}/`);
                const Icon = tool.icon;
                return (
                  <Link
                    key={tool.slug}
                    href={`/${tool.slug}`}
                    className={cn(
                      "flex items-center gap-2.5 px-2 py-1.5 rounded-lg text-sm transition-colors mb-0.5",
                      active
                        ? "nav-active font-medium"
                        : "text-muted-foreground hover:text-foreground hover:bg-accent/50"
                    )}
                  >
                    <Icon className="h-3.5 w-3.5 shrink-0" />
                    <span className="truncate">{tool.name}</span>
                  </Link>
                );
              })}
          </div>
        ))}
      </nav>

      {/* Footer */}
      <div className="px-4 py-3 border-t border-border shrink-0">
        <p className="text-[10px] text-muted-foreground/50">seakses.com</p>
      </div>
    </aside>
  );
}