export default function LayerControls({ layer, onChange, onReset }) {
  if (!layer) return <p className="text-sm text-slate-500">Select an artwork layer to edit placement.</p>;
  const sliders = [
    ['positionX', 'Horizontal', -1, 1, 0.01, 0],
    ['positionY', 'Vertical', -1, 1, 0.01, 0],
    ['scaleX', 'Width', 0.1, 3, 0.05, 1],
    ['scaleY', 'Height', 0.1, 3, 0.05, 1],
    ['rotation', 'Rotation', -180, 180, 1, 0],
    ['opacity', 'Opacity', 0, 1, 0.05, 1],
    ['embossHeight', 'Emboss height', 0.4, 4, 0.1, 1],
    ['engravingDepth', 'Engraving depth', 0.2, 3, 0.1, 0.5]
  ];
  return (
    <div className="space-y-4">
      <label className="form-label">Projection mode
        <select value={layer.projectionMode || 'planar'} onChange={e => onChange({ projectionMode: e.target.value })} className="field mt-1">
          <option value="planar">Planar</option>
          <option value="cylindrical">Cylindrical</option>
          <option value="surface">Surface wrap</option>
        </select>
        {layer.projectionMode === 'surface' && <span className="mt-1 block text-xs text-amber-300">Surface wrap requires the live geometry engine — preview only until then.</span>}
      </label>
      <label className="flex items-center gap-2 text-xs text-slate-400">
        <input type="checkbox" checked={layer.mirrored || false} onChange={e => onChange({ mirrored: e.target.checked })} className="h-4 w-4 accent-cyan-400" />Mirror artwork
      </label>
      {sliders.map(([key, label, min, max, step, fallback]) => (
        <label key={key} className="block text-xs text-slate-400">
          <span className="flex justify-between"><span>{label}</span><b className="mono text-slate-200">{(layer[key] ?? fallback).toFixed(2)}</b></span>
          <input type="range" min={min} max={max} step={step} value={layer[key] ?? fallback} onChange={e => onChange({ [key]: Number(e.target.value) })} className="mt-2 w-full accent-cyan-400" />
        </label>
      ))}
      <button onClick={onReset} className="tool-button w-full justify-center">Reset placement</button>
    </div>
  );
}