import type { CSSProperties } from "react";

interface ZoomControlsProps {
  /** Callback when zoom in button is clicked */
  onZoomIn: () => void;
  /** Callback when zoom out button is clicked */
  onZoomOut: () => void;
  /** Callback when reset button is clicked */
  onReset: () => void;
  /** Whether to show the reset button */
  showResetButton: boolean;
  /** Current zoom level (1 = 100%) */
  zoom: number;
  /** Minimum zoom level */
  minZoom: number;
  /** Maximum zoom level */
  maxZoom: number;
  /** Whether the controls are visible (for fade effect) */
  isVisible: boolean;
}

const buttonBaseStyle: CSSProperties = {
  width: 32,
  height: 32,
  display: "flex",
  alignItems: "center",
  justifyContent: "center",
  backgroundColor: "rgba(255, 255, 255, 0.9)",
  border: "1px solid #d1d5db",
  borderRadius: 6,
  cursor: "pointer",
  fontSize: 18,
  fontWeight: "bold",
  color: "#374151",
  transition: "background-color 0.15s ease",
  userSelect: "none",
};

const buttonDisabledStyle: CSSProperties = {
  ...buttonBaseStyle,
  opacity: 0.4,
  cursor: "not-allowed",
};

const getContainerStyle = (isVisible: boolean): CSSProperties => ({
  position: "absolute",
  bottom: 12,
  right: 12,
  display: "flex",
  flexDirection: "column",
  gap: 4,
  zIndex: 10,
  opacity: isVisible ? 1 : 0,
  transition: "opacity 0.2s ease-in-out",
  pointerEvents: isVisible ? "auto" : "none",
});

const getResetContainerStyle = (isVisible: boolean): CSSProperties => ({
  position: "absolute",
  bottom: 12,
  left: 12,
  zIndex: 10,
  opacity: isVisible ? 1 : 0,
  transition: "opacity 0.2s ease-in-out",
  pointerEvents: isVisible ? "auto" : "none",
});

const resetButtonStyle: CSSProperties = {
  ...buttonBaseStyle,
  width: "auto",
  padding: "6px 12px",
  fontSize: 12,
  fontWeight: 500,
};

/**
 * Zoom control buttons component
 * Displays +/- buttons in bottom right, reset button in bottom left
 */
export function ZoomControls({
  onZoomIn,
  onZoomOut,
  onReset,
  showResetButton,
  zoom,
  minZoom,
  maxZoom,
  isVisible,
}: ZoomControlsProps) {
  const isMinZoom = zoom <= minZoom;
  const isMaxZoom = zoom >= maxZoom;

  return (
    <>
      {/* Zoom in/out buttons - bottom right */}
      <div style={getContainerStyle(isVisible)}>
        <button
          type="button"
          onClick={onZoomIn}
          disabled={isMaxZoom}
          style={isMaxZoom ? buttonDisabledStyle : buttonBaseStyle}
          aria-label="Zoom in"
        >
          +
        </button>
        <button
          type="button"
          onClick={onZoomOut}
          disabled={isMinZoom}
          style={isMinZoom ? buttonDisabledStyle : buttonBaseStyle}
          aria-label="Zoom out"
        >
          −
        </button>
      </div>

      {/* Reset button - bottom left (only shown when not at default zoom) */}
      <div style={getResetContainerStyle(isVisible && showResetButton)}>
        <button type="button" onClick={onReset} style={resetButtonStyle} aria-label="Reset zoom">
          ↺
        </button>
      </div>
    </>
  );
}