"use client";

import Link from "next/link";
import { useDashboardNav } from "@/components/dashboard/nav-context";
import { PublicStudioLink } from "@/components/dashboard/public-studio-link";

export function DashboardTopBar({
  studioName,
  userName,
  userRole,
  siteUrl,
  tenantSlug,
  newInquiryCount = 0,
}: {
  studioName: string;
  userName: string | null | undefined;
  userRole: string;
  siteUrl: string;
  tenantSlug: string;
  newInquiryCount?: number;
}) {
  const { open, toggle } = useDashboardNav();
  const displayName =
    userName?.trim().split(/\s+/)[0] || studioName.split(/\s+/)[0] || "Studio";

  return (
    <header className="sticky top-0 z-20 shrink-0 border-b border-[var(--archi-line)] bg-[var(--archi-cream-soft)]/95 px-[max(1rem,env(safe-area-inset-left))] py-3 pr-[max(1rem,env(safe-area-inset-right))] pt-[max(0.75rem,env(safe-area-inset-top))] backdrop-blur-md lg:px-8">
      <div className="flex items-center justify-between gap-3">
        <div className="flex min-w-0 items-center gap-3">
          <button
            type="button"
            className={`archi-dash-hamburger lg:hidden ${open ? "is-open" : ""}`}
            aria-expanded={open}
            aria-label={open ? "Close menu" : "Open menu"}
            onClick={toggle}
          >
            <span />
            <span />
            <span />
          </button>
          <div className="min-w-0">
            <p className="truncate text-sm font-semibold text-[var(--archi-ink)]">
              Dashboard
              <span className="hidden font-normal text-[var(--archi-ink-muted)] sm:inline">
                {" "}
                · Welcome back, {displayName}
              </span>
            </p>
            <p className="truncate text-[11px] text-[var(--archi-ink-muted)]">
              {studioName}
            </p>
          </div>
        </div>

        <div className="flex items-center gap-2">
          <PublicStudioLink
            slug={tenantSlug}
            href={siteUrl}
            target="_blank"
            rel="noreferrer"
            className="hidden h-10 items-center justify-center border border-[var(--archi-line)] bg-white px-3 text-sm text-[var(--archi-ink-muted)] transition hover:border-[var(--archi-gold)]/40 hover:text-[var(--archi-ink)] md:inline-flex"
          >
            Live site ↗
          </PublicStudioLink>
          <Link
            href="/dashboard/projects/new"
            className="inline-flex h-10 items-center justify-center border border-[var(--archi-line)] bg-white px-3 text-sm font-medium text-[var(--archi-ink)] transition hover:border-[var(--archi-gold)]/40 sm:px-4"
          >
            <span className="sm:hidden">New</span>
            <span className="hidden sm:inline">New project</span>
          </Link>
          <Link
            href="/dashboard/inquiries"
            className="relative inline-flex h-10 w-10 items-center justify-center border border-[var(--archi-line)] bg-white text-[var(--archi-ink)]"
            aria-label={
              newInquiryCount > 0
                ? `${newInquiryCount} new inquiries`
                : "Inquiries"
            }
          >
            <BellIcon />
            {newInquiryCount > 0 ? (
              <span className="absolute -top-1 -right-1 inline-flex min-w-4 items-center justify-center rounded-full bg-[var(--archi-gold)] px-1 text-[9px] font-bold text-[var(--archi-dark)]">
                {newInquiryCount > 9 ? "9+" : newInquiryCount}
              </span>
            ) : null}
          </Link>
          <div className="hidden items-center gap-2 border border-[var(--archi-line)] bg-white px-2.5 py-1.5 sm:flex">
            <span className="flex h-8 w-8 items-center justify-center rounded-full bg-[var(--archi-gold)]/20 text-xs font-semibold text-[#8a7010]">
              {displayName.slice(0, 1).toUpperCase()}
            </span>
            <div className="min-w-0 pr-1">
              <p className="truncate text-xs font-semibold">{displayName}</p>
              <p className="truncate text-[10px] capitalize text-[var(--archi-ink-muted)]">
                {userRole.replaceAll("_", " ")}
              </p>
            </div>
          </div>
        </div>
      </div>
    </header>
  );
}

function BellIcon() {
  return (
    <svg
      viewBox="0 0 24 24"
      className="h-4 w-4"
      fill="none"
      aria-hidden
      stroke="currentColor"
      strokeWidth="1.5"
    >
      <path d="M6 9a6 6 0 0112 0c0 7 3 7 3 7H3s3 0 3-7" />
      <path d="M10 19a2 2 0 004 0" />
    </svg>
  );
}
