import '../../styles/ZoomControls.css';

/**
 * Inert zoom-percentage display + ± buttons plus the global snap-to-center
 * toggle. The Konva canvas is rendered at a fixed 300×300 design-pixel
 * resolution; "zoom" here scales the wrapper via CSS transform so the user
 * can get a closer or farther view without changing the underlying
 * coordinate system. That keeps the export math identical and keeps
 * drag/rotate hot-paths untouched.
 *
 * The snap toggle lives here (Change 5 — see [[Refinements_2026-05-20_Part2]])
 * because snap-to-center is a GLOBAL editor preference — enabling /
 * disabling it from a per-element panel sent the wrong signal that it
 * was a per-element setting. The zoom-controls toolbar is the natural
 * home for "editor view" controls that apply to the whole canvas
 * regardless of what's selected.
 */
export function ZoomControls({
  zoom,
  onZoomIn,
  onZoomOut,
  min = 0.5,
  max = 2,
  // Snap-to-center toggle. Optional; when omitted the toggle button
  // just doesn't render. snapEnabled defaults to true so we match the
  // app-level default (snap on) when callers haven't wired it up yet.
  snapEnabled = true,
  onToggleSnap,
}) {
  return (
    <div className="zoom-controls" role="toolbar" aria-label="Canvas view">
      <button
        type="button"
        className="zoom-controls__btn"
        onClick={onZoomOut}
        disabled={zoom <= min + 0.001}
        aria-label="Zoom out"
      >
        <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round">
          <path d="M5 12h14" />
        </svg>
      </button>
      <span className="zoom-controls__value" aria-live="polite">{Math.round(zoom * 100)}%</span>
      <button
        type="button"
        className="zoom-controls__btn"
        onClick={onZoomIn}
        disabled={zoom >= max - 0.001}
        aria-label="Zoom in"
      >
        <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round">
          <path d="M12 5v14" />
          <path d="M5 12h14" />
        </svg>
      </button>
      {/* Snap-to-center toggle (Change 5). Separated from the zoom
          buttons by a thin divider so the user reads them as two
          distinct affordances on the same toolbar. The button is
          marked active when snap is ON (the default), so toggling it
          once visibly turns it off — matching the user's mental model
          of "disable this feature". */}
      {onToggleSnap && (
        <>
          <span className="zoom-controls__divider" aria-hidden="true" />
          <button
            type="button"
            className={`zoom-controls__btn zoom-controls__btn--snap${snapEnabled ? ' is-active' : ''}`}
            onClick={onToggleSnap}
            aria-label={snapEnabled ? 'Turn off snap to center' : 'Turn on snap to center'}
            aria-pressed={snapEnabled}
            title={snapEnabled ? 'Snap to center: on' : 'Snap to center: off'}
          >
            {snapEnabled ? (
              <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
                {/* Crosshair + dot — the classic "snap to alignment"
                    glyph. Center dot signals "this is the target". */}
                <line x1="12" y1="2" x2="12" y2="6" />
                <line x1="12" y1="18" x2="12" y2="22" />
                <line x1="2" y1="12" x2="6" y2="12" />
                <line x1="18" y1="12" x2="22" y2="12" />
                <circle cx="12" cy="12" r="2" />
              </svg>
            ) : (
              <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
                {/* Same crosshair with a slash through it — the
                    universal "this feature is off" overlay. */}
                <line x1="12" y1="2" x2="12" y2="6" />
                <line x1="12" y1="18" x2="12" y2="22" />
                <line x1="2" y1="12" x2="6" y2="12" />
                <line x1="18" y1="12" x2="22" y2="12" />
                <circle cx="12" cy="12" r="2" />
                <line x1="4" y1="4" x2="20" y2="20" />
              </svg>
            )}
          </button>
        </>
      )}
    </div>
  );
}
