import { t } from '../i18n/t';
import '../styles/Header.css';

/**
 * Pawfectly Yours top bar.
 *
 * Layout:
 *   [logo + tagline]   [page title]   [preview] [download] [Share] [cart]
 *
 * On mobile (<768px) collapses to:
 *   [logo]                                                          [cart]
 *
 * What's here vs what's gone
 * ──────────────────────────
 * Buttons removed during the module-split cleanup (May 2026):
 *
 *   • Save — was redundant with Download (both fired the same export
 *     pipeline). The module's onSave callback prop on <ApparelDesigner>
 *     remains as the right integration point for real "commit this
 *     design" semantics when there's a backend to commit to.
 *
 *   • Clear — clearing the canvas is editor state, not host chrome.
 *     Re-introducing it requires the module to expose a clear()
 *     method on its editor ref and a canClear callback so the host
 *     can disable the button when there's nothing to clear. Until
 *     that lands, removing the button is better than leaving a
 *     non-functional one in the chrome.
 *
 *   • Menu — opened the host's mobile bottom sheet, which now lives
 *     inside the module. The module owns its own mobile UI; the
 *     host had nothing left to put behind a menu.
 *
 * Preview / Download are still here because they're host-surfaced
 * controls that drive the editor via the editorRef.preview() and
 * editorRef.testDownload() imperative API. They're disabled during
 * an in-flight export (`isExporting`).
 *
 * i18n
 * ────
 * All visible text comes from the host's message catalog via t().
 * Catalog lives in src/i18n/messages.js — host-owned, separate from
 * the editor module's internal catalog.
 */
export function Header({
  cartCount = 0,
  onShare, onOpenCart,
  onTestDownload, isExporting = false,
  onPreview,
}) {
  // App name is reused for both the logo and the aria-label, so we
  // resolve it once and interpolate into the aria-label below.
  const appName = t('header.app-name');

  // Cart aria has two distinct keys for singular vs plural so the
  // entire phrase translates as a unit ("Cart, 1 item" / "Cart,
  // 3 items"). See pluralization note in messages.js.
  const cartAria = t(
    cartCount === 1 ? 'header.cart-aria.singular' : 'header.cart-aria.plural',
    { count: cartCount },
  );

  return (
    <header className="ph-header" role="banner">
      <a
        className="ph-logo"
        href="#"
        onClick={(e) => e.preventDefault()}
        aria-label={t('header.logo-home-aria', { app: appName })}
      >
        <span className="ph-logo__mark" aria-hidden="true">🐾</span>
        <span className="ph-logo__wordmark">
          <span className="ph-logo__name">{appName}</span>
          <span className="ph-logo__tagline">{t('header.app-tagline')}</span>
        </span>
      </a>

      <h1 className="ph-title">
        {t('header.page-title')} <span aria-hidden="true">💕</span>
      </h1>

      <div className="ph-actions">
        {/* Print preview — server-renders the design at print resolution
         * and shows it in a modal so the user can verify what will
         * actually print before adding to cart. Disabled while another
         * export is in flight. */}
        <button
          type="button"
          className="ph-iconbtn"
          onClick={onPreview}
          disabled={isExporting}
          aria-label={t('header.preview')}
          title={t('header.preview-tooltip')}
        >
          <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
            <path d="M1 12s4-7 11-7 11 7 11 7-4 7-11 7S1 12 1 12z" />
            <circle cx="12" cy="12" r="3" />
          </svg>
        </button>

        {/* Download — dedicated print-test button. Same export pipeline
         * as Preview but auto-downloads instead of opening the modal.
         * Disabled while an export is in flight so rapid clicks don't
         * fire parallel POSTs. */}
        <button
          type="button"
          className="ph-iconbtn"
          onClick={onTestDownload}
          disabled={isExporting}
          aria-label={t('header.download')}
          title={t('header.download-tooltip')}
        >
          <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
            <path d="M7 10l5 5 5-5" />
            <path d="M12 15V3" />
          </svg>
        </button>

        {/* Share — opens the OS share sheet (or copies URL to clipboard
         * as a fallback). Handler lives in App.jsx with access to the
         * toast surface for "link copied" / "copy failed" feedback. */}
        <button type="button" className="ph-pillbtn ph-pillbtn--ghost" onClick={onShare}>
          <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
            <circle cx="18" cy="5" r="2.5" />
            <circle cx="6" cy="12" r="2.5" />
            <circle cx="18" cy="19" r="2.5" />
            <path d="M8.2 10.7l7.6-4.4" />
            <path d="M8.2 13.3l7.6 4.4" />
          </svg>
          <span>{t('header.share')}</span>
        </button>

        <button type="button" className="ph-cart" onClick={onOpenCart} aria-label={cartAria}>
          <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
            <circle cx="9" cy="20" r="1.6" />
            <circle cx="17" cy="20" r="1.6" />
            <path d="M3 4h2l2.4 11.5a2 2 0 0 0 2 1.5h7.6a2 2 0 0 0 2-1.5L21 8H6" />
          </svg>
          {cartCount > 0 && <span className="ph-cart__badge">{cartCount}</span>}
        </button>
      </div>
    </header>
  );
}
