"use client";

import Link from "next/link";
import { ChevronDown, ChevronUp, Plus } from "lucide-react";
import { PresenceViewers } from "@/components/presence-viewers";
import { NotificationsBell } from "@/components/notifications-bell";
import { SignOutButton } from "@/components/sign-out-button";

/**
 * Single sticky top bar for a project page: project name, jump links, an
 * "Add Issue" button (opens the issues composer via a window event), and the
 * live viewers + signed-in user on the right.
 */
export function ProjectHeader({
  projectName,
  projectId,
  currentUserEmail,
  currentUserId,
}: {
  projectName: string;
  projectId: string;
  currentUserEmail: string | null;
  currentUserId: string | null;
}) {
  const jumpClass =
    "inline-flex items-center gap-1 rounded-md border px-2 py-1 text-xs transition-colors hover:bg-accent";

  return (
    <header className="sticky top-0 z-40 border-b bg-background/90 backdrop-blur">
      <div className="mx-auto flex w-full max-w-6xl flex-wrap items-center gap-x-3 gap-y-2 px-4 py-2 sm:px-6">
        <Link
          href="/"
          className="font-semibold tracking-tight hover:text-foreground/80"
        >
          {projectName}
        </Link>

        <nav className="flex items-center gap-1.5">
          <a href="#page-reviews" className={jumpClass}>
            <ChevronDown className="size-3" />
            Page Reviews
          </a>
          <a href="#features" className={jumpClass}>
            <ChevronDown className="size-3" />
            Features
          </a>
          <a href="#general-issues" className={jumpClass}>
            <ChevronUp className="size-3" />
            General Issues
          </a>
          <button
            type="button"
            onClick={() =>
              window.dispatchEvent(new CustomEvent("review:add-issue"))
            }
            className="inline-flex items-center gap-1 rounded-md bg-primary px-2 py-1 text-xs font-medium text-primary-foreground transition-opacity hover:opacity-90"
          >
            <Plus className="size-3" />
            Add Issue
          </button>
        </nav>

        <div className="ml-auto flex items-center gap-2 sm:gap-3">
          <PresenceViewers
            projectId={projectId}
            currentUserEmail={currentUserEmail}
            showLabel={false}
          />
          {currentUserEmail && (
            <span className="hidden text-sm text-muted-foreground md:inline">
              {currentUserEmail}
            </span>
          )}
          <NotificationsBell currentUserId={currentUserId} />
          <SignOutButton />
        </div>
      </div>
    </header>
  );
}