import Image from "next/image";
import Link from "next/link";
import { Suspense } from "react";

import { Button } from "@/components/ui/button";
import { VisitorPresence } from "@/components/public/visitor-presence";
import { getAdminSession } from "@/lib/auth/server";
import { withBasePath } from "@/lib/base-path";

async function AdminEditLink({ editHref }: { editHref: string }) {
  if (process.env.PUBLIC_MIRROR === "true") return null;
  const isAdmin = Boolean(await getAdminSession());

  return isAdmin ? (
    <Button
      variant="ghost"
      size="sm"
      nativeButton={false}
      render={<Link href={editHref} />}
    >
      ไปหน้าแก้ไข
    </Button>
  ) : null;
}

export function SiteHeader({ editHref = "/admin", guideId }: { editHref?: string; guideId?: string } = {}) {
  return (
    <header className="border-b bg-background/95 supports-backdrop-filter:backdrop-blur">
      <div className="mx-auto flex min-h-16 w-full max-w-7xl flex-wrap items-center gap-2 px-4 py-2 sm:px-6">
        <Link
          href="/"
          className="mr-auto flex min-h-11 items-center gap-3 rounded-lg font-heading font-semibold focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
        >
          <Image src={withBasePath("/icon.png")} alt="" width={36} height={36} className="size-9 object-contain" />
          <span className="hidden sm:inline">ไกด์เกนชินไม่ใช่เกมมือถือ</span>
        </Link>
        <nav aria-label="Public navigation" className="flex items-center gap-1">
          <VisitorPresence guideId={guideId} />
          <Suspense fallback={null}>
            <AdminEditLink editHref={editHref} />
          </Suspense>
        </nav>
      </div>
    </header>
  );
}