// src/components/HeatmapControls.jsx

import React from 'react';

// Available color gradients
const GRADIENTS = [
  { label: 'Viridis', value: 'viridis' },
  { label: 'Hot', value: 'hot' },
  { label: 'Cool', value: 'cool' },
  { label: 'Rainbow', value: 'rainbow' },
];

export function HeatmapControls({ options, onChange }) {
  // Handlers for each control
  const handleRadiusChange = (e) => {
    onChange({ ...options, radius: Number(e.target.value) });
  };
  const handleIntensityChange = (e) => {
    onChange({ ...options, intensity: Number(e.target.value) });
  };
  const handleGradientChange = (e) => {
    onChange({ ...options, gradient: e.target.value });
  };
  const handlePointCountChange = (e) => {
    onChange({ ...options, pointCount: Number(e.target.value) });
  };
  const handleClustersChange = (e) => {
    onChange({ ...options, clusters: Number(e.target.value) });
  };

  return (
    <div className="heatmap-controls" style={{
      border: '1px solid #ddd',
      borderRadius: '8px',
      padding: '18px',
      marginBottom: '24px',
      maxWidth: '700px',
      background: 'linear-gradient(90deg, #f8fafc 60%, #e0e7ef 100%)',
      boxShadow: '0 2px 8px 0 #0001'
    }}>
      <h3 style={{ marginBottom: '14px', fontWeight: 600, color: '#2d3748' }}>Heatmap Settings</h3>

      {/* Point Count Slider */}
      <label style={{ display: 'block', marginBottom: '10px' }}>
        Points: {options.pointCount || 200}
        <input
          type="range"
          min="10"
          max="1000"
          step="10"
          value={options.pointCount || 200}
          onChange={handlePointCountChange}
          style={{ width: '100%', marginTop: '5px' }}
        />
      </label>

      {/* Clusters Slider */}
      <label style={{ display: 'block', marginBottom: '10px' }}>
        Clusters: {options.clusters || 3}
        <input
          type="range"
          min="1"
          max="10"
          step="1"
          value={options.clusters || 3}
          onChange={handleClustersChange}
          style={{ width: '100%', marginTop: '5px' }}
        />
      </label>

      {/* Radius Slider */}
      <label style={{ display: 'block', marginBottom: '10px' }}>
        Radius: {options.radius} px
        <input
          type="range"
          min="5"
          max="50"
          step="1"
          value={options.radius}
          onChange={handleRadiusChange}
          style={{ width: '100%', marginTop: '5px' }}
        />
      </label>

      {/* Intensity Slider */}
      <label style={{ display: 'block', marginBottom: '10px' }}>
        Intensity: {options.intensity}
        <input
          type="range"
          min="0"
          max="2"
          step="0.01"
          value={options.intensity}
          onChange={handleIntensityChange}
          style={{ width: '100%', marginTop: '5px' }}
        />
      </label>

      {/* Gradient Dropdown */}
      <label style={{ display: 'block', marginBottom: '10px' }}>
        Color Gradient:
        <select
          value={options.gradient}
          onChange={handleGradientChange}
          style={{ width: '100%', marginTop: '5px' }}
        >
          {GRADIENTS.map(grad => (
            <option key={grad.value} value={grad.value}>{grad.label}</option>
          ))}
        </select>
      </label>
    </div>
  );
}