import React from 'react'
import { Plus, Minus, RotateCcw } from 'lucide-react'

export const ZOOM_MIN = 0.5
export const ZOOM_MAX = 2
const STORAGE_KEY = 'wpvfb_builder_zoom'

/** Zoom saved by the dock (50–200 %), or 1 when none / storage blocked. */
export function readStoredZoom() {
  try {
    const v = parseFloat(window.localStorage.getItem(STORAGE_KEY))
    return Number.isFinite(v) ? Math.min(ZOOM_MAX, Math.max(ZOOM_MIN, v)) : 1
  } catch (e) {
    return 1
  }
}
function storeZoom(v) {
  try { window.localStorage.setItem(STORAGE_KEY, String(v)) } catch (e) { /* private mode: keep it in memory only */ }
}

/**
 * Vertical zoom dock (the reference builder F:18849-18913): 50–200 %, remembers the level (localStorage), dark variant in preview.
 * Props: zoom (number, 1 = 100 %), onZoomChange(next), dark, className (position classes from App), style.
 */
export default function ZoomDock({ zoom = 1, onZoomChange, dark = false, className = 'fixed bottom-6 right-4', style }) {
  const set = (v) => {
    const next = Math.min(ZOOM_MAX, Math.max(ZOOM_MIN, parseFloat(v.toFixed(2))))
    storeZoom(next)
    if (onZoomChange) onZoomChange(next)
  }
  const btn = `w-8 h-7 rounded-lg flex items-center justify-center disabled:opacity-30 disabled:cursor-not-allowed transition-colors cursor-pointer ${dark ? 'text-slate-300 hover:bg-white/10 hover:text-white' : 'text-slate-500 hover:bg-slate-100 hover:text-slate-900'}`
  return (
    <div
      className={`${className} z-30 flex flex-col items-center gap-1 p-1 w-10 rounded-2xl backdrop-blur-sm border shadow-lg select-none ${dark ? 'bg-slate-800/90 border-slate-700 shadow-black/20' : 'bg-white/95 border-slate-200/90 shadow-slate-900/5'}`}
      style={style}
      role="group"
      aria-label="Canvas zoom"
      data-testid="zoom-dock"
    >
      <button type="button" onClick={() => set(zoom + 0.1)} disabled={zoom >= ZOOM_MAX} className={btn} aria-label="Zoom in" title="Zoom in (200% max)">
        <Plus className="w-3.5 h-3.5" aria-hidden="true" />
      </button>
      <span className={`text-[10px] font-bold tabular-nums text-center py-0.5 leading-none ${dark ? 'text-slate-100' : 'text-slate-700'}`} aria-live="polite" data-testid="zoom-value">{Math.round(zoom * 100)}%</span>
      <button type="button" onClick={() => set(zoom - 0.1)} disabled={zoom <= ZOOM_MIN} className={btn} aria-label="Zoom out" title="Zoom out (50% min)">
        <Minus className="w-3.5 h-3.5" aria-hidden="true" />
      </button>
      <button type="button" onClick={() => set(1)} disabled={zoom === 1} className={btn} aria-label="Reset zoom to 100%" title="Reset zoom to 100%">
        <RotateCcw className="w-3 h-3" aria-hidden="true" />
      </button>
    </div>
  )
}