"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { cn } from "@/lib/utils";
import {
  LayoutDashboard,
  Activity,
  Box,
  Map,
  FileCode,
  BarChart3,
  Settings,
  HelpCircle,
} from "lucide-react";
import { ScrollArea } from "@/components/ui/scroll-area";
import { Separator } from "@/components/ui/separator";
import { Button } from "@/components/ui/button";

interface ProjectSidebarProps {
  projectId: string;
}

const menuItems = [
  {
    title: "Overview",
    icon: LayoutDashboard,
    href: "/overview",
    description: "Project dashboard and stats",
  },
  {
    title: "Sessions",
    icon: Activity,
    href: "/sessions",
    description: "AI coding sessions",
  },
  {
    title: "Features",
    icon: Box,
    href: "/features",
    description: "Feature planning and tracking",
  },
  {
    title: "API Map",
    icon: Map,
    href: "/api-map",
    description: "Auto-generated API docs",
  },
  {
    title: "Architecture",
    icon: FileCode,
    href: "/architecture",
    description: "Living architecture docs",
  },
  {
    title: "Analytics",
    icon: BarChart3,
    href: "/analytics",
    description: "Costs and metrics",
  },
];

export function ProjectSidebar({ projectId }: ProjectSidebarProps) {
  const pathname = usePathname();

  return (
    <div className="flex h-full flex-col">
      {/* Project Header */}
      <div className="flex h-14 items-center justify-between border-b px-4">
        <div>
          <h2 className="text-lg font-semibold">AI Proxy</h2>
          <p className="text-xs text-muted-foreground">Project Dashboard</p>
        </div>
      </div>

      {/* Navigation */}
      <ScrollArea className="flex-1 px-3 py-4">
        <div className="space-y-1">
          {menuItems.map((item) => {
            const href = `/${projectId}${item.href}`;
            const isActive = pathname === href;

            return (
              <Link
                key={item.href}
                href={href}
                className={cn(
                  "group flex items-center gap-3 rounded-md px-3 py-2 text-sm transition-all hover:bg-accent",
                  isActive
                    ? "bg-accent text-accent-foreground font-medium"
                    : "text-muted-foreground hover:text-accent-foreground"
                )}
                title={item.description}
              >
                <item.icon className="h-4 w-4 shrink-0" />
                <span className="truncate">{item.title}</span>
              </Link>
            );
          })}
        </div>

        <Separator className="my-4" />

        {/* Settings Section */}
        <div className="space-y-1">
          <Link
            href={`/${projectId}/settings`}
            className="flex items-center gap-3 rounded-md px-3 py-2 text-sm text-muted-foreground transition-all hover:bg-accent hover:text-accent-foreground"
          >
            <Settings className="h-4 w-4" />
            <span>Settings</span>
          </Link>
        </div>
      </ScrollArea>

      {/* Footer */}
      <div className="flex h-14 items-center justify-between border-t px-4">
        <div className="flex items-center gap-2 text-xs text-muted-foreground">
          <span>v1.0.0</span>
          <Separator orientation="vertical" className="h-4" />
          <span>Powered by AI</span>
        </div>
        <Button variant="ghost" size="icon" className="h-8 w-8">
          <HelpCircle className="h-4 w-4" />
        </Button>
      </div>
    </div>
  );
}