// =============================================================================
// HeadlineSift.com — Admin Header
// =============================================================================
"use client";

import Link from "next/link";
import { useRouter } from "next/navigation";
import { useState } from "react";

interface AdminHeaderProps {
  userName?: string;
  userEmail?: string;
  userRole?: string;
  /** Called when the mobile hamburger is clicked. */
  onMenuToggle?: () => void;
}

export function AdminHeader({
  userName,
  userEmail,
  userRole,
  onMenuToggle,
}: AdminHeaderProps) {
  const router = useRouter();
  const [menuOpen, setMenuOpen] = useState(false);

  function handleLogout() {
    router.push("/admin/logout");
  }

  // Derive initials from name or email
  const initials = userName
    ? userName
        .split(" ")
        .map((n) => n[0])
        .join("")
        .toUpperCase()
        .slice(0, 2)
    : (userEmail?.[0]?.toUpperCase() ?? "A");

  return (
    <header className="sticky top-0 z-30 flex h-16 items-center justify-between border-b border-border bg-white px-4 sm:px-6">
      {/* Left side — mobile toggle + breadcrumb area */}
      <div className="flex items-center gap-3">
        {/* Mobile menu toggle */}
        <button
          type="button"
          onClick={onMenuToggle}
          className="rounded-md p-1.5 text-body hover:bg-surface-secondary lg:hidden"
          aria-label="Toggle sidebar"
        >
          <svg
            className="h-5 w-5"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
            strokeWidth={1.5}
          >
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
            />
          </svg>
        </button>
      </div>

      {/* Right side — User menu */}
      <div className="flex items-center gap-3 sm:gap-4">
        <Link
          href="/"
          className="hidden text-xs text-body-muted no-underline hover:text-body sm:inline"
          target="_blank"
          rel="noopener noreferrer"
        >
          View Site ↗
        </Link>

        {/* User dropdown */}
        <div className="relative">
          <button
            type="button"
            onClick={() => setMenuOpen(!menuOpen)}
            className="flex items-center gap-2 rounded-md p-1 text-sm transition-colors hover:bg-surface-secondary"
            aria-expanded={menuOpen}
            aria-haspopup="true"
          >
            <span className="flex h-8 w-8 items-center justify-center rounded-full bg-brand-100 text-sm font-medium text-brand-700">
              {initials}
            </span>
            <span className="hidden text-sm font-medium text-heading sm:inline">
              {userName ?? "Admin"}
            </span>
          </button>

          {menuOpen && (
            <>
              {/* Backdrop — click to close */}
              <div
                className="fixed inset-0 z-40"
                onClick={() => setMenuOpen(false)}
              />

              {/* Dropdown */}
              <div className="absolute right-0 z-50 mt-1 w-56 rounded-md bg-white shadow-lg ring-1 ring-black/5">
                <div className="border-b border-border px-4 py-3">
                  <p className="text-sm font-medium text-heading">
                    {userName ?? "Admin"}
                  </p>
                  <p className="mt-0.5 text-xs text-body-muted">
                    {userEmail ?? ""}
                  </p>
                  {userRole && (
                    <span className="mt-1 inline-block rounded bg-surface-tertiary px-1.5 py-0.5 text-2xs font-medium text-body-muted">
                      {userRole.replace(/_/g, " ")}
                    </span>
                  )}
                </div>
                <div className="p-1">
                  <button
                    type="button"
                    onClick={() => {
                      setMenuOpen(false);
                      handleLogout();
                    }}
                    className="flex w-full items-center gap-2 rounded px-3 py-2 text-sm text-body hover:bg-surface-secondary hover:text-heading"
                  >
                    <svg
                      className="h-4 w-4"
                      fill="none"
                      viewBox="0 0 24 24"
                      stroke="currentColor"
                      strokeWidth={1.5}
                    >
                      <path
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        d="M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15m3 0l3-3m0 0l-3-3m3 3H9"
                      />
                    </svg>
                    Sign out
                  </button>
                </div>
              </div>
            </>
          )}
        </div>
      </div>
    </header>
  );
}