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

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

const AVAILABLE_MODELS = [
  "openai/gpt-oss-120b:free",
  "openrouter/free",
  "deepseek/deepseek-chat:free",
  "meta/llama-3.3-70b-instruct:free",
];

export default function LlmSettings({ settings, onSave, saveError }: LlmSettingsProps) {
  const [model, setModel] = useState(settings["llm.model"] ?? "openai/gpt-oss-120b:free");
  const [temperature, setTemperature] = useState(settings["llm.temperature"] ?? 0.7);
  const [maxDebateRounds, setMaxDebateRounds] = useState(settings["llm.maxDebateRounds"] ?? 3);

  useEffect(() => {
    setModel(settings["llm.model"] ?? "openai/gpt-oss-120b:free");
    setTemperature(settings["llm.temperature"] ?? 0.7);
    setMaxDebateRounds(settings["llm.maxDebateRounds"] ?? 3);
  }, [settings]);

  const saveModel = async (value: string) => {
    setModel(value);
    await onSave("llm.model", value);
  };

  const saveTemperature = async (value: number) => {
    setTemperature(value);
    await onSave("llm.temperature", value);
  };

  const saveMaxDebateRounds = async (value: number) => {
    const clamped = Math.min(10, Math.max(1, value));
    setMaxDebateRounds(clamped);
    await onSave("llm.maxDebateRounds", clamped);
  };

  return (
    <div className="space-y-6">
      <div>
        <h2 className="text-xl font-bold text-gray-900">LLM & Agents</h2>
        <p className="text-sm text-gray-600 mt-1">Configure the language model and agent behavior for trading analysis.</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">Model</label>
          <select
            value={model}
            onChange={(e) => saveModel(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 focus:border-blue-500"
          >
            {AVAILABLE_MODELS.map((m) => (
              <option key={m} value={m}>{m}</option>
            ))}
          </select>
        </div>

        <div>
          <label className="block text-sm font-medium text-gray-700 mb-1">
            Temperature: {temperature.toFixed(1)}
          </label>
          <input
            type="range"
            min="0"
            max="2"
            step="0.1"
            value={temperature}
            onChange={(e) => saveTemperature(parseFloat(e.target.value))}
            className="w-full"
          />
          <div className="flex justify-between text-xs text-gray-500">
            <span>0.0 (deterministic)</span>
            <span>2.0 (creative)</span>
          </div>
        </div>

        <div>
          <label className="block text-sm font-medium text-gray-700 mb-1">Max Debate Rounds</label>
          <input
            type="number"
            min="1"
            max="10"
            value={maxDebateRounds}
            onChange={(e) => saveMaxDebateRounds(parseInt(e.target.value) || 1)}
            className="w-32 border border-gray-300 rounded-lg px-4 py-2.5 text-gray-900 focus:ring-2 focus:ring-blue-500"
          />
        </div>
      </div>
    </div>
  );
}