import React, { useState } from 'react';
import { GenerationParams, DEFAULT_SYSTEM_PROMPT } from '../types';
import { ChevronDown, ChevronUp, Settings, RotateCcw } from 'lucide-react';

interface AdvancedSettingsProps {
  params: GenerationParams;
  systemPrompt: string;
  onParamsChange: (params: GenerationParams) => void;
  onSystemPromptChange: (prompt: string) => void;
}

export const AdvancedSettings: React.FC<AdvancedSettingsProps> = ({
  params,
  systemPrompt,
  onParamsChange,
  onSystemPromptChange
}) => {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div className="border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden bg-white dark:bg-gray-800 transition-colors">
      <button
        onClick={() => setIsOpen(!isOpen)}
        className="w-full flex items-center justify-between px-4 py-3 text-left hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors"
      >
        <div className="flex items-center gap-2">
          <Settings size={18} className="text-gray-500 dark:text-gray-400" />
          <span className="font-medium text-gray-700 dark:text-gray-300">Gelişmiş Ayarlar</span>
        </div>
        {isOpen ? (
          <ChevronUp size={20} className="text-gray-400 dark:text-gray-500" />
        ) : (
          <ChevronDown size={20} className="text-gray-400 dark:text-gray-500" />
        )}
      </button>

      {isOpen && (
        <div className="px-4 pb-4 space-y-4 border-t border-gray-200 dark:border-gray-700 pt-4 bg-gray-50 dark:bg-gray-800/50">
          {/* System Prompt */}
          <div>
            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
              Sistem Prompt
            </label>
            <textarea
              value={systemPrompt}
              onChange={(e) => onSystemPromptChange(e.target.value)}
              rows={4}
              className="w-full px-3 py-2 border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 rounded-lg focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-600 focus:border-transparent resize-none transition-all text-sm"
              placeholder="Sistem talimatlarını buraya girin..."
            />
            <button
              onClick={() => onSystemPromptChange(DEFAULT_SYSTEM_PROMPT)}
              className="mt-2 flex items-center gap-1.5 text-xs text-primary-600 dark:text-primary-400 hover:text-primary-700 dark:hover:text-primary-300 transition-colors"
            >
              <RotateCcw size={12} />
              Varsayılana Dön
            </button>
          </div>

          {/* Temperature */}
          <div>
            <div className="flex justify-between items-center mb-2">
              <label className="text-sm font-medium text-gray-700 dark:text-gray-300">
                Temperature
              </label>
              <span className="text-sm font-mono text-primary-600 dark:text-primary-400 bg-primary-50 dark:bg-primary-900/20 px-2 py-0.5 rounded">
                {params.temperature.toFixed(1)}
              </span>
            </div>
            <input
              type="range"
              min="0"
              max="1"
              step="0.1"
              value={params.temperature}
              onChange={(e) =>
                onParamsChange({ ...params, temperature: parseFloat(e.target.value) })
              }
              className="w-full h-2 bg-gray-200 dark:bg-gray-700 rounded-lg appearance-none cursor-pointer accent-primary-600"
            />
            <p className="text-xs text-gray-500 dark:text-gray-400 mt-1.5">
              Düşük: daha tutarlı • Yüksek: daha yaratıcı
            </p>
          </div>

          {/* Max Tokens */}
          <div>
            <div className="flex justify-between items-center mb-2">
              <label className="text-sm font-medium text-gray-700 dark:text-gray-300">
                Max New Tokens
              </label>
              <span className="text-sm font-mono text-primary-600 dark:text-primary-400 bg-primary-50 dark:bg-primary-900/20 px-2 py-0.5 rounded">
                {params.maxTokens}
              </span>
            </div>
            <input
              type="range"
              min="64"
              max="4096"
              step="64"
              value={params.maxTokens}
              onChange={(e) =>
                onParamsChange({ ...params, maxTokens: parseInt(e.target.value) })
              }
              className="w-full h-2 bg-gray-200 dark:bg-gray-700 rounded-lg appearance-none cursor-pointer accent-primary-600"
            />
          </div>

          {/* Top-p */}
          <div>
            <div className="flex justify-between items-center mb-2">
              <label className="text-sm font-medium text-gray-700 dark:text-gray-300">
                Top-p (Nucleus Sampling)
              </label>
              <span className="text-sm font-mono text-primary-600 dark:text-primary-400 bg-primary-50 dark:bg-primary-900/20 px-2 py-0.5 rounded">
                {params.topP.toFixed(2)}
              </span>
            </div>
            <input
              type="range"
              min="0.1"
              max="1"
              step="0.05"
              value={params.topP}
              onChange={(e) =>
                onParamsChange({ ...params, topP: parseFloat(e.target.value) })
              }
              className="w-full h-2 bg-gray-200 dark:bg-gray-700 rounded-lg appearance-none cursor-pointer accent-primary-600"
            />
          </div>

          {/* Top-k */}
          <div>
            <div className="flex justify-between items-center mb-2">
              <label className="text-sm font-medium text-gray-700 dark:text-gray-300">
                Top-k
              </label>
              <span className="text-sm font-mono text-primary-600 dark:text-primary-400 bg-primary-50 dark:bg-primary-900/20 px-2 py-0.5 rounded">
                {params.topK}
              </span>
            </div>
            <input
              type="range"
              min="1"
              max="100"
              step="1"
              value={params.topK}
              onChange={(e) =>
                onParamsChange({ ...params, topK: parseInt(e.target.value) })
              }
              className="w-full h-2 bg-gray-200 dark:bg-gray-700 rounded-lg appearance-none cursor-pointer accent-primary-600"
            />
          </div>
        </div>
      )}
    </div>
  );
};