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

/**
 * Pawfectly Yours top bar.
 *
 * Layout:
 *   [logo + tagline]   [page title]                [clear] [preview] [download] [Save] [Share] [cart]
 *
 * On mobile (<768px) collapses to:
 *   [back arrow]       [page title]                [clear] [preview] [download] [menu]
 *
 * Undo/redo moved out of the header into the canvas-area bottom bar
 * (Change 19) — see HistoryControls.jsx. The header was getting
 * crowded with seven distinct actions; undo/redo were the most
 * obviously "editor view" rather than "ship the design" group, so
 * they pair more naturally with the zoom controls now.
 */
export function Header({
  cartCount = 0,
  onSave, onShare, onOpenCart, onOpenMobileMenu,
  onTestDownload, isExporting = false,
  onClear, canClear = false,
  onPreview,
}) {
  return (
    <header className="ph-header" role="banner">
      <a className="ph-logo" href="#" onClick={(e) => e.preventDefault()} aria-label={`${t('header.app-name')} home`}>
        <span className="ph-logo__mark" aria-hidden="true">🐾</span>
        <span className="ph-logo__wordmark">
          <span className="ph-logo__name">{t('header.app-name')}</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">
        {/* Clear canvas — wipes all elements + active template. The
         * actual confirm flow lives in App.jsx (two-tap with a toast
         * confirmation). The button is dimmed when there's nothing to
         * clear so the action's affordance matches its effect. (Fix
         * for #35.) */}
        <button
          type="button"
          className="ph-iconbtn"
          onClick={onClear}
          disabled={!canClear}
          aria-label={t('header.clear')}
          title={t('header.clear-tooltip')}
        >
          <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
            <path d="M3 6h18" />
            <path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
            <path d="M6 6l1 14a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2l1-14" />
          </svg>
        </button>

        {/* 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. (Fix for #33.) */}
        <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. exportDesign already
         * auto-downloads after the server returns, so this is functionally
         * a sibling of Save with explicit "give me the file" semantics.
         * Kept small (icon-only) so it reads as a utility/testing affordance,
         * not a primary CTA competing with Save. 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>

        <button type="button" className="ph-pillbtn ph-pillbtn--filled" onClick={onSave}>
          <svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor" aria-hidden="true">
            <path d="M12 21s-7-4.5-9.3-9A5.4 5.4 0 0 1 12 5.5 5.4 5.4 0 0 1 21.3 12C19 16.5 12 21 12 21z" />
          </svg>
          <span>{t('header.save')}</span>
        </button>

        <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={t('header.cart-aria', { count: cartCount, plural: cartCount === 1 ? 'item' : 'items' })}>
          <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>

        <button
          type="button"
          className="ph-iconbtn ph-iconbtn--menu"
          onClick={onOpenMobileMenu}
          aria-label={t('header.menu')}
        >
          <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" aria-hidden="true">
            <path d="M4 7h16" />
            <path d="M4 12h16" />
            <path d="M4 17h16" />
          </svg>
        </button>
      </div>
    </header>
  );
}
