import React, { useState, useEffect } from "react";

interface TradingSettingsProps {
  settings: Record<string, any>;
  onSave: (key: string, value: any) => Promise<void>;
  saveError: string | null;
}

export default function TradingSettings({ settings, onSave, saveError }: TradingSettingsProps) {
  const [maxLossPercent, setMaxLossPercent] = useState(settings["trading.maxLossPercent"] ?? 2);
  const [positionSizePercent, setPositionSizePercent] = useState(settings["trading.positionSizePercent"] ?? 10);
  const [takeProfitPercent, setTakeProfitPercent] = useState(settings["trading.takeProfitPercent"] ?? 5);
  const [stopLossPercent, setStopLossPercent] = useState(settings["trading.stopLossPercent"] ?? 3);
  const [riskMethod, setRiskMethod] = useState(settings["trading.riskMethod"] ?? "percentage");

  useEffect(() => {
    setMaxLossPercent(settings["trading.maxLossPercent"] ?? 2);
    setPositionSizePercent(settings["trading.positionSizePercent"] ?? 10);
    setTakeProfitPercent(settings["trading.takeProfitPercent"] ?? 5);
    setStopLossPercent(settings["trading.stopLossPercent"] ?? 3);
    setRiskMethod(settings["trading.riskMethod"] ?? "percentage");
  }, [settings]);

  const save = async (key: string, value: any) => {
    await onSave(key, value);
  };

  return (
    <div className="space-y-6">
      <div>
        <h2 className="text-xl font-bold text-gray-900">Trading Defaults</h2>
        <p className="text-sm text-gray-600 mt-1">Default risk management and position sizing parameters.</p>
      </div>

      {saveError && (
        <div className="bg-red-50 text-red-700 px-4 py-2 rounded-lg text-sm">{saveError}</div>
      )}

      <div className="space-y-4">
        <div>
          <label className="block text-sm font-medium text-gray-700 mb-1">Max Loss %</label>
          <input
            type="number"
            min="0.1"
            max="100"
            step="0.1"
            value={maxLossPercent}
            onChange={(e) => {
              const v = parseFloat(e.target.value) || 0;
              setMaxLossPercent(v);
              save("trading.maxLossPercent", v);
            }}
            className="w-32 border border-gray-300 rounded-lg px-4 py-2.5 text-gray-900 focus:ring-2 focus:ring-blue-500"
          />
          <p className="text-xs text-gray-500 mt-1">Maximum portfolio percentage to risk on a single trade.</p>
        </div>

        <div>
          <label className="block text-sm font-medium text-gray-700 mb-1">Position Size %</label>
          <input
            type="number"
            min="1"
            max="100"
            step="1"
            value={positionSizePercent}
            onChange={(e) => {
              const v = parseInt(e.target.value) || 1;
              setPositionSizePercent(v);
              save("trading.positionSizePercent", v);
            }}
            className="w-32 border border-gray-300 rounded-lg px-4 py-2.5 text-gray-900 focus:ring-2 focus:ring-blue-500"
          />
          <p className="text-xs text-gray-500 mt-1">Default position size as percentage of available cash.</p>
        </div>

        <div>
          <label className="block text-sm font-medium text-gray-700 mb-1">Take Profit %</label>
          <input
            type="number"
            min="0.1"
            max="100"
            step="0.1"
            value={takeProfitPercent}
            onChange={(e) => {
              const v = parseFloat(e.target.value) || 0;
              setTakeProfitPercent(v);
              save("trading.takeProfitPercent", v);
            }}
            className="w-32 border border-gray-300 rounded-lg px-4 py-2.5 text-gray-900 focus:ring-2 focus:ring-blue-500"
          />
          <p className="text-xs text-gray-500 mt-1">Target profit percentage for auto take-profit orders.</p>
        </div>

        <div>
          <label className="block text-sm font-medium text-gray-700 mb-1">Stop Loss %</label>
          <input
            type="number"
            min="0.1"
            max="100"
            step="0.1"
            value={stopLossPercent}
            onChange={(e) => {
              const v = parseFloat(e.target.value) || 0;
              setStopLossPercent(v);
              save("trading.stopLossPercent", v);
            }}
            className="w-32 border border-gray-300 rounded-lg px-4 py-2.5 text-gray-900 focus:ring-2 focus:ring-blue-500"
          />
          <p className="text-xs text-gray-500 mt-1">Stop loss percentage below entry price.</p>
        </div>

        <div>
          <label className="block text-sm font-medium text-gray-700 mb-1">Risk Method</label>
          <select
            value={riskMethod}
            onChange={(e) => {
              setRiskMethod(e.target.value);
              save("trading.riskMethod", e.target.value);
            }}
            className="w-full border border-gray-300 rounded-lg px-4 py-2.5 text-gray-900 focus:ring-2 focus:ring-blue-500"
          >
            <option value="fixed">Fixed amount</option>
            <option value="percentage">Percentage of portfolio</option>
            <option value="atr">ATR-based (Average True Range)</option>
          </select>
        </div>
      </div>
    </div>
  );
}