import { useState } from 'react';
import { useTranslation } from 'react-i18next';
import { Cpu, Save, Globe } from 'lucide-react';

export default function SettingsPage() {
  const [selectedModel] = useState('gpt-4o-mini');
  const [imageModel] = useState('stable-diffusion-v1-6');
  const { t, i18n } = useTranslation();

  const handleLanguageChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
    i18n.changeLanguage(e.target.value);
  };

  const handleSave = () => {
    // Settings are now fixed to cloud models
    alert('Cloud AI models are configured automatically!');
  };

  return (
    <div className="max-w-2xl mx-auto space-y-6">
      <div>
        <h2 className="text-2xl font-bold text-gray-900">{t('settings.title')}</h2>
        <p className="text-gray-500 mt-1">
          Cloud AI configuration and application preferences
        </p>
      </div>

      {/* Language Configuration */}
      <div className="card">
        <h3 className="text-lg font-semibold text-gray-900 mb-4 flex items-center gap-2">
          <Globe className="w-5 h-5" />
          {t('settings.language')}
        </h3>

        <div className="space-y-4">
          <div>
            <label className="label">{t('settings.languageSelect')}</label>
            <select
              value={i18n.language}
              onChange={handleLanguageChange}
              className="input bg-white"
            >
              <option value="en">{t('settings.english')}</option>
              <option value="es">{t('settings.spanish')}</option>
            </select>
          </div>
        </div>
      </div>

      {/* Cloud AI Configuration */}
      <div className="card">
        <h3 className="text-lg font-semibold text-gray-900 mb-4 flex items-center gap-2">
          <Cpu className="w-5 h-5" />
          Cloud AI Settings
        </h3>

        <div className="space-y-4">
          <div>
            <label className="label">Text Generation Model</label>
            <select
              value={selectedModel}
              disabled
              className="input bg-gray-100"
            >
              <option value="gpt-4o-mini">OpenAI GPT-4o Mini (via OpenRouter)</option>
            </select>
            <p className="text-sm text-gray-500 mt-1">
              Used for book outlines, chapters, and text generation (free tier)
            </p>
          </div>

          <div>
            <label className="label">Image Generation Model</label>
            <select
              value={imageModel}
              disabled
              className="input bg-gray-100"
            >
              <option value="stable-diffusion-v1-6">Stability AI Stable Diffusion v1.6</option>
            </select>
            <p className="text-sm text-gray-500 mt-1">
              Used for AI book cover generation (free credits available)
            </p>
          </div>
        </div>
      </div>

      {/* API Setup Help */}
      <div className="card bg-blue-50 border-blue-200">
        <h3 className="font-medium text-blue-900 mb-2">API Key Setup</h3>
        <p className="text-sm text-blue-700 mb-3">
          Configure your API key in the server/.env file:
        </p>
        <code className="block bg-white rounded p-3 text-sm font-mono text-blue-800">
          OPENROUTER_API_KEY=your_openrouter_api_key_here
        </code>
        <p className="text-sm text-blue-700 mt-2">
          Get a free API key from: <a href="https://openrouter.ai/keys" className="underline" target="_blank" rel="noopener noreferrer">OpenRouter</a>
        </p>
      </div>

      {/* Save Button */}
      <div className="flex justify-end">
        <button onClick={handleSave} className="btn-primary flex items-center gap-2">
          <Save className="w-4 h-4" />
          Save Settings
        </button>
      </div>
    </div>
  );
}