import { Database, KeyRound, Server } from "lucide-react";
import { Badge } from "@/app/components/ui/badge";
import { Button } from "@/app/components/ui/button";
import { Separator } from "@/app/components/ui/separator";

type Tab = "database" | "athena-clients" | "api-keys";

type AppSidebarProps = {
  activeTab: Tab;
  onChangeTab: (tab: Tab) => void;
  busy: boolean;
};

const navItems: { id: Tab; label: string; icon: typeof Database }[] = [
  { id: "database", label: "Database", icon: Database },
  { id: "athena-clients", label: "Athena Clients", icon: Server },
  { id: "api-keys", label: "API Keys", icon: KeyRound },
];

export default function AppSidebar({
  activeTab,
  onChangeTab,
  busy,
}: AppSidebarProps) {
  return (
    <aside className="flex h-full w-72 flex-col border-r border-border bg-surface-elevated p-4">
      <div>
        <p className="text-body-sm uppercase tracking-[0.3em] text-muted-foreground">
          Athena Studio
        </p>
        <h1 className="mt-2 text-xl font-semibold text-foreground">
          Admin Console
        </h1>
        <p className="mt-1 text-xs text-muted-foreground">
          Shadcn-style full-screen workspace
        </p>
      </div>
      <Separator className="my-4" />
      <nav className="space-y-1">
        {navItems.map((item) => {
          const Icon = item.icon;
          return (
            <Button
              key={item.id}
              variant={activeTab === item.id ? "default" : "ghost"}
              className="w-full justify-start"
              onClick={() => onChangeTab(item.id)}
            >
              <Icon className="h-4 w-4" />
              {item.label}
            </Button>
          );
        })}
      </nav>
      <div className="mt-auto flex items-center justify-between rounded-lg border border-border bg-muted-card px-3 py-2">
        <span className="text-xs text-muted-foreground">Requests</span>
        {busy ? (
          <Badge variant="secondary">Running</Badge>
        ) : (
          <Badge>Idle</Badge>
        )}
      </div>
    </aside>
  );
}
