"use client";
import * as React from "react";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { Check, ChevronsUpDown, LogOut, Menu, Plus, Settings, User } from "lucide-react";
import { authClient } from "@/lib/auth-client";
import { selectProject } from "@/actions/projects";
import { Button } from "@/components/ui/button";
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
import { Dialog, DialogContent, DialogTitle } from "@/components/ui/dialog";
import { ThemeToggle } from "@/components/ui/theme";
import { Logo } from "@/components/ui/logo";
import { SidebarNav } from "./sidebar";
import { cn } from "@/lib/utils";

export interface TopbarProps {
  user: { name: string; email: string; image?: string | null };
  organization: { id: string; name: string; plan: string };
  projects: Array<{ id: string; name: string; environment: string }>;
  currentProjectId: string;
  isAdmin: boolean;
}

export function Topbar({ user, organization, projects, currentProjectId, isAdmin }: TopbarProps) {
  const router = useRouter();
  const [open, setOpen] = React.useState(false);
  const [pending, startTransition] = React.useTransition();
  const current = projects.find((p) => p.id === currentProjectId) ?? projects[0];

  return (
    <header className="sticky top-0 z-30 flex h-14 items-center gap-3 border-b border-border bg-bg/85 px-4 backdrop-blur sm:px-6">
      <Button variant="ghost" size="icon-sm" className="lg:hidden -ml-1.5" onClick={() => setOpen(true)} aria-label="Open navigation">
        <Menu />
      </Button>
      <div className="lg:hidden">
        <Logo href="/dashboard" size="sm" />
      </div>
      <div className="hidden items-center gap-1.5 text-[13px] text-fg-muted lg:flex">
        <span className="truncate max-w-[180px]">{organization.name}</span>
        <span className="text-fg-subtle">/</span>
      </div>
      <DropdownMenu>
        <DropdownMenuTrigger asChild>
          <Button variant="outline" size="sm" className={cn("gap-2 font-medium max-w-[220px]", pending && "opacity-70")} aria-label="Switch project">
            <span className={cn("size-1.5 rounded-full", current?.environment === "development" ? "bg-warning" : "bg-success")} />
            <span className="truncate">{current?.name ?? "Project"}</span>
            <ChevronsUpDown className="size-3.5 text-fg-subtle" />
          </Button>
        </DropdownMenuTrigger>
        <DropdownMenuContent align="start" className="w-64">
          <DropdownMenuLabel>Projects</DropdownMenuLabel>
          {projects.map((p) => (
            <DropdownMenuItem
              key={p.id}
              onClick={() => startTransition(async () => { await selectProject(p.id); router.refresh(); })}
              className="justify-between"
            >
              <span className="flex items-center gap-2 truncate">
                <span className={cn("size-1.5 rounded-full", p.environment === "development" ? "bg-warning" : "bg-success")} />
                <span className="truncate">{p.name}</span>
              </span>
              {p.id === currentProjectId ? <Check className="size-4" /> : null}
            </DropdownMenuItem>
          ))}
          <DropdownMenuSeparator />
          <DropdownMenuItem asChild>
            <Link href="/dashboard/projects?new=1"><Plus /> New project</Link>
          </DropdownMenuItem>
        </DropdownMenuContent>
      </DropdownMenu>
      <span className="hidden sm:inline-flex rounded-full border border-border px-2 py-0.5 text-[11px] font-medium uppercase tracking-wide text-fg-subtle">{organization.plan}</span>

      <div className="ml-auto flex items-center gap-1.5">
        <Button asChild variant="ghost" size="sm" className="hidden sm:inline-flex text-fg-muted">
          <Link href="/docs">Docs</Link>
        </Button>
        <ThemeToggle />
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <button className="flex size-8 items-center justify-center rounded-full bg-fg text-bg text-[12px] font-semibold uppercase ring-offset-bg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/40" aria-label="Account menu">
              {(user.name || user.email).slice(0, 1)}
            </button>
          </DropdownMenuTrigger>
          <DropdownMenuContent align="end" className="w-60">
            <div className="px-2 py-2">
              <div className="truncate text-[13px] font-medium">{user.name || "Account"}</div>
              <div className="truncate text-xs text-fg-muted">{user.email}</div>
            </div>
            <DropdownMenuSeparator />
            <DropdownMenuItem asChild><Link href="/dashboard/settings"><User /> Profile</Link></DropdownMenuItem>
            <DropdownMenuItem asChild><Link href="/dashboard/settings/security"><Settings /> Security</Link></DropdownMenuItem>
            {isAdmin ? <DropdownMenuItem asChild><Link href="/admin"><Settings /> Admin</Link></DropdownMenuItem> : null}
            <DropdownMenuSeparator />
            <DropdownMenuItem
              onClick={async () => {
                await authClient.signOut();
                router.push("/login");
                router.refresh();
              }}
            >
              <LogOut /> Sign out
            </DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>
      </div>

      <Dialog open={open} onOpenChange={setOpen}>
        <DialogContent size="sm" className="left-0 top-0 h-dvh max-w-[280px] translate-x-0 translate-y-0 rounded-none border-r p-4 data-[state=open]:animate-fade-in">
          <DialogTitle className="sr-only">Navigation</DialogTitle>
          <div className="mb-4 px-1"><Logo href="/dashboard" size="sm" /></div>
          <SidebarNav isAdmin={isAdmin} onNavigate={() => setOpen(false)} />
        </DialogContent>
      </Dialog>
    </header>
  );
}