"use client";

import { useSyncExternalStore } from "react";

function subscribe() {
  // navigator.userAgent ne change pas durant la session, pas d'abonnement réel.
  return () => {};
}

function getSnapshot(): boolean {
  return navigator.userAgent.includes("Mac");
}

function getServerSnapshot(): boolean {
  return false;
}

export function TopBar({ userEmail }: { userEmail: string }) {
  const isMac = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);

  return (
    <div className="flex h-12 shrink-0 items-center justify-between gap-3 border-b border-zinc-200 bg-white px-4">
      <div className="flex items-center gap-2 text-xs text-zinc-500">
        <span>Cmd&nbsp;K pour rechercher</span>
      </div>
      <div className="flex items-center gap-3">
        <button
          type="button"
          onClick={() => {
            const ev = new KeyboardEvent("keydown", {
              key: "k",
              metaKey: isMac,
              ctrlKey: !isMac,
              bubbles: true,
            });
            window.dispatchEvent(ev);
          }}
          className="hidden items-center gap-2 rounded border border-zinc-200 bg-zinc-50 px-2.5 py-1 text-xs text-zinc-600 hover:border-zinc-300 hover:bg-white sm:inline-flex"
        >
          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
            <circle cx="11" cy="11" r="7" />
            <path d="M21 21 L17 17" />
          </svg>
          Rechercher…
          <kbd className="rounded bg-zinc-200 px-1 text-[10px] text-zinc-600">
            {isMac ? "⌘K" : "Ctrl K"}
          </kbd>
        </button>
        <a href="/" className="text-xs text-zinc-500 hover:text-zinc-900" target="_blank" rel="noreferrer">
          ↗ Voir le site
        </a>
        <span className="text-xs text-zinc-500">{userEmail}</span>
      </div>
    </div>
  );
}