"use client";
import * as React from "react";
import Link from "next/link";
import { usePathname, useRouter } from "next/navigation";
import { ChevronRight, LogOut, Plus, RefreshCw, ChevronDown } from "lucide-react";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";

export interface Crumb {
  label: string;
  href?: string;
}

export interface TopbarProps {
  crumbs?: Crumb[];
  actions?: React.ReactNode;
}

const FALLBACK_LABELS: Record<string, string> = {
  "/": "Tổng quan",
  "/projects": "Dự án",
  "/projects/new": "Thêm dự án",
  "/deploy-targets": "Máy chủ deploy",
  "/deploy-targets/new": "Thêm máy chủ",
  "/deployments": "Lượt deploy",
  "/admin": "Quản trị",
};

function autoCrumbs(pathname: string): Crumb[] {
  const segments = pathname.split("/").filter(Boolean);
  if (segments.length === 0) return [{ label: "Tổng quan" }];

  const crumbs: Crumb[] = [{ label: "Tổng quan", href: "/" }];
  let acc = "";
  for (let i = 0; i < segments.length; i++) {
    acc += "/" + segments[i];
    const fallback = FALLBACK_LABELS[acc];
    const label = fallback ?? decodeURIComponent(segments[i]).replace(/-/g, " ");
    crumbs.push({
      label: label.charAt(0).toUpperCase() + label.slice(1),
      href: i < segments.length - 1 ? acc : undefined,
    });
  }
  return crumbs;
}

export function Topbar({ crumbs, actions }: TopbarProps) {
  const pathname = usePathname();
  const items = crumbs ?? autoCrumbs(pathname);

  return (
    <header className="sticky top-0 z-30 flex h-16 items-center gap-4 border-b border-border bg-background/80 px-6 backdrop-blur-md">
      {/* Breadcrumbs */}
      <nav aria-label="Breadcrumb" className="flex min-w-0 flex-1 items-center gap-1.5 text-sm">
        {items.map((c, i) => {
          const last = i === items.length - 1;
          return (
            <React.Fragment key={i}>
              {i > 0 && (
                <ChevronRight className="h-3.5 w-3.5 shrink-0 text-muted-foreground/60" />
              )}
              {c.href && !last ? (
                <Link
                  href={c.href}
                  className="truncate text-muted-foreground transition-colors hover:text-foreground"
                >
                  {c.label}
                </Link>
              ) : (
                <span
                  className={cn(
                    "truncate font-medium",
                    last ? "text-foreground" : "text-muted-foreground",
                  )}
                >
                  {c.label}
                </span>
              )}
            </React.Fragment>
          );
        })}
      </nav>

      {/* Actions */}
      <div className="flex items-center gap-2">
        {actions ?? <DefaultActions pathname={pathname} />}
        <AccountMenu />
      </div>
    </header>
  );
}

function DefaultActions({ pathname }: { pathname: string }) {
  const router = useRouter();
  const [scanning, setScanning] = React.useState(false);

  // Hide on detail pages
  if (pathname.match(/^\/projects\/[^/]+$/) || pathname === "/projects/new") {
    return null;
  }

  const onScan = async () => {
    setScanning(true);
    try {
      await fetch("/api/scan", { method: "POST" });
      router.refresh();
    } catch {
      /* noop */
    } finally {
      setScanning(false);
    }
  };

  return (
    <>
      {pathname === "/" && (
        <Button variant="ghost" size="sm" onClick={onScan} disabled={scanning}>
          <RefreshCw className={cn("h-3.5 w-3.5", scanning && "animate-spin")} />
          {scanning ? "Đang quét…" : "Quét lại"}
        </Button>
      )}
      {(pathname === "/" || pathname.startsWith("/projects")) && (
        <Link href="/projects/new">
          <Button size="sm">
            <Plus className="h-3.5 w-3.5" />
            Thêm dự án
          </Button>
        </Link>
      )}
      {pathname.startsWith("/deploy-targets") && pathname !== "/deploy-targets/new" && (
        <Link href="/deploy-targets/new">
          <Button size="sm">
            <Plus className="h-3.5 w-3.5" />
            Thêm máy chủ
          </Button>
        </Link>
      )}
    </>
  );
}

function AccountMenu() {
  const [open, setOpen] = React.useState(false);
  const ref = React.useRef<HTMLDivElement>(null);
  const router = useRouter();

  React.useEffect(() => {
    if (!open) return;
    const onClick = (e: MouseEvent) => {
      if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false);
    };
    document.addEventListener("mousedown", onClick);
    return () => document.removeEventListener("mousedown", onClick);
  }, [open]);

  const onLogout = async () => {
    await fetch("/api/auth/logout", { method: "POST" });
    router.push("/login");
    router.refresh();
  };

  return (
    <div ref={ref} className="relative">
      <button
        type="button"
        onClick={() => setOpen((v) => !v)}
        className={cn(
          "flex items-center gap-2 rounded-md border border-border bg-surface px-2.5 py-1.5 text-xs font-medium text-foreground/85 transition-colors hover:border-border/80 hover:bg-accent",
          open && "border-primary/40",
        )}
      >
        <span
          aria-hidden
          className="flex h-5 w-5 items-center justify-center rounded-full bg-primary/20 text-2xs text-primary"
        >
          A
        </span>
        admin
        <ChevronDown className="h-3 w-3 opacity-60" />
      </button>
      {open && (
        <div className="absolute right-0 top-full z-50 mt-1.5 w-44 overflow-hidden rounded-md border border-border bg-surface-elevated shadow-lg animate-fade-in">
          <button
            type="button"
            onClick={onLogout}
            className="flex w-full items-center gap-2 px-3 py-2 text-left text-xs text-foreground/85 transition-colors hover:bg-accent"
          >
            <LogOut className="h-3.5 w-3.5" />
            Đăng xuất
          </button>
        </div>
      )}
    </div>
  );
}