"use client";
import * as React from "react";
import Link from "next/link";
import { usePathname } from "next/navigation";
import {
  LayoutDashboard,
  FolderGit2,
  Server,
  Rocket,
  Settings,
  GitBranch,
  CircleDot,
} from "lucide-react";
import { cn } from "@/lib/utils";

interface NavItem {
  href: string;
  label: string;
  icon: React.ComponentType<{ className?: string }>;
  match?: (pathname: string) => boolean;
}

const items: NavItem[] = [
  {
    href: "/",
    label: "Tổng quan",
    icon: LayoutDashboard,
    match: (p) => p === "/",
  },
  {
    href: "/projects/new",
    label: "Dự án",
    icon: FolderGit2,
    match: (p) => p === "/projects/new" || p.startsWith("/projects/"),
  },
  {
    href: "/deploy-targets",
    label: "Máy chủ deploy",
    icon: Server,
    match: (p) => p.startsWith("/deploy-targets"),
  },
  {
    href: "/deployments",
    label: "Lượt deploy",
    icon: Rocket,
    match: (p) => p.startsWith("/deployments"),
  },
  {
    href: "/admin",
    label: "Quản trị",
    icon: Settings,
    match: (p) => p.startsWith("/admin"),
  },
];

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

  return (
    <aside className="hidden lg:flex h-screen w-[220px] shrink-0 flex-col border-r border-border bg-surface/50 backdrop-blur-sm">
      {/* Brand */}
      <div className="flex h-16 items-center gap-2.5 border-b border-border px-5">
        <span className="flex h-8 w-8 items-center justify-center rounded-md bg-primary/15 ring-1 ring-primary/30">
          <GitBranch className="h-4 w-4 text-primary" />
        </span>
        <div className="min-w-0">
          <div className="truncate text-sm font-semibold tracking-tight">
            Project Manager
          </div>
          <div className="text-2xs uppercase tracking-wider text-muted-foreground">
            self-hosted
          </div>
        </div>
      </div>

      {/* Nav */}
      <nav className="flex-1 space-y-0.5 overflow-y-auto px-3 py-4">
        {items.map((item) => {
          const active = item.match ? item.match(pathname) : pathname === item.href;
          const Icon = item.icon;
          return (
            <Link
              key={item.href}
              href={item.href}
              className={cn(
                "group relative flex items-center gap-2.5 rounded-md px-2.5 py-2 text-sm font-medium transition-colors",
                active
                  ? "bg-accent text-foreground"
                  : "text-muted-foreground hover:bg-accent/40 hover:text-foreground",
              )}
            >
              {active && (
                <span
                  aria-hidden
                  className="absolute left-0 top-1/2 h-5 w-0.5 -translate-y-1/2 rounded-r bg-primary shadow-glow"
                />
              )}
              <Icon
                className={cn(
                  "h-4 w-4 shrink-0",
                  active ? "text-primary" : "text-muted-foreground/80 group-hover:text-foreground",
                )}
              />
              <span className="truncate">{item.label}</span>
            </Link>
          );
        })}
      </nav>

      {/* Footer status */}
      <div className="border-t border-border px-5 py-3">
        <div className="flex items-center gap-2 text-xs text-muted-foreground">
          <CircleDot className="h-3 w-3 text-success animate-pulse-soft" />
          <span>Hệ thống đang hoạt động</span>
        </div>
      </div>
    </aside>
  );
}