import React from 'react';
import NumericInput from './NumericInput.js';

const Settings = ({
  pkParams,
  therapeuticRange,
  uiSettings,
  onUpdatePkParams,
  onUpdateTherapeuticRange,
  onUpdateUiSetting,
  onReset
}) => {
  const { showDayTimeXAxis, yAxisMin, yAxisMax, simulationDays, displayedDays } = uiSettings;

  return (
    <div className="bg-white p-5 rounded-lg shadow-sm border">
      <h2 className="text-xl font-semibold mb-4 text-gray-700">Erweiterte Einstellungen</h2>
      <div className="space-y-4 text-sm">
        <div className="flex items-center">
          <input
            type="checkbox"
            id="showDayTimeXAxis"
            checked={showDayTimeXAxis}
            onChange={e => onUpdateUiSetting('showDayTimeXAxis', e.target.checked)}
            className="h-4 w-4 rounded border-gray-300 text-sky-600 focus:ring-sky-500"
          />
          <label htmlFor="showDayTimeXAxis" className="ml-3 block font-medium text-gray-600">
            24h-Zeitachse anzeigen
          </label>
        </div>

        <label className="block font-medium text-gray-600 pt-2">Simulationsdauer</label>
        <div className="w-40">
          <NumericInput
            value={simulationDays}
            onChange={val => onUpdateUiSetting('simulationDays', val)}
            increment={'1'}
            min={2}
            max={7}
            unit="Tage"
          />
        </div>

        <label className="block font-medium text-gray-600">Angezeigte Tage</label>
        <div className="w-40">
          <NumericInput
            value={displayedDays}
            onChange={val => onUpdateUiSetting('displayedDays', val)}
            increment={'1'}
            min={1}
            max={parseInt(simulationDays, 10) || 1}
            unit="Tage"
          />
        </div>

        <label className="block font-medium text-gray-600 pt-2">Y-Achsen-Bereich</label>
        <div className="flex items-center space-x-2 mt-1">
          <div className="w-32">
            <NumericInput
              value={yAxisMin}
              onChange={val => onUpdateUiSetting('yAxisMin', val)}
              increment={'5'}
              min={0}
              placeholder="Auto"
              unit="ng/ml"
            />
          </div>
          <span className="text-gray-500">-</span>
          <div className="w-32">
            <NumericInput
              value={yAxisMax}
              onChange={val => onUpdateUiSetting('yAxisMax', val)}
              increment={'5'}
              min={0}
              placeholder="Auto"
              unit="ng/ml"
            />
          </div>
        </div>

        <label className="block font-medium text-gray-600">Therapeutischer Bereich</label>
        <div className="flex items-center space-x-2 mt-1">
          <div className="w-32">
            <NumericInput
              value={therapeuticRange.min}
              onChange={val => onUpdateTherapeuticRange('min', val)}
              increment={'0.5'}
              min={0}
              placeholder="Min"
              unit="ng/ml"
            />
          </div>
          <span className="text-gray-500">-</span>
          <div className="w-32">
            <NumericInput
              value={therapeuticRange.max}
              onChange={val => onUpdateTherapeuticRange('max', val)}
              increment={'0.5'}
              min={0}
              placeholder="Max"
              unit="ng/ml"
            />
          </div>
        </div>

        <h3 className="text-lg font-semibold mt-4 pt-4 border-t">d-Amphetamin Parameter</h3>
        <div className="w-40">
          <label className="block font-medium text-gray-600">Halbwertszeit</label>
          <NumericInput
            value={pkParams.damph.halfLife}
            onChange={val => onUpdatePkParams('damph', { halfLife: val })}
            increment={'0.5'}
            min={0.1}
            unit="h"
          />
        </div>

        <h3 className="text-lg font-semibold mt-4 pt-4 border-t">Lisdexamfetamin Parameter</h3>
        <div className="w-40">
          <label className="block font-medium text-gray-600">Umwandlungs-Halbwertszeit</label>
          <NumericInput
            value={pkParams.ldx.halfLife}
            onChange={val => onUpdatePkParams('ldx', { halfLife: val })}
            increment={'0.1'}
            min={0.1}
            unit="h"
          />
        </div>
        <div className="w-40">
          <label className="block font-medium text-gray-600">Absorptionsrate</label>
          <NumericInput
            value={pkParams.ldx.absorptionRate}
            onChange={val => onUpdatePkParams('ldx', { absorptionRate: val })}
            increment={'0.1'}
            min={0.1}
            unit="(schneller >)"
          />
        </div>

        <div className="pt-4">
          <button
            onClick={onReset}
            className="w-full bg-red-600 text-white py-2 rounded-md hover:bg-red-700 text-sm"
          >
            Alle Einstellungen zurücksetzen
          </button>
        </div>
      </div>
    </div>
  );
};

export default Settings;