import React, { useState } from 'react';
import { KeyIcon, SaveIcon } from './Icons';

interface ApiKeySetupProps {
  onKeySave: (key: string) => void;
}

export const ApiKeySetup: React.FC<ApiKeySetupProps> = ({ onKeySave }) => {
  const [localApiKey, setLocalApiKey] = useState('');

  const handleSave = () => {
    if (localApiKey.trim()) {
      onKeySave(localApiKey.trim());
    }
  };

  return (
    <div className="max-w-md mx-auto animate-fade-in pt-10">
      <div className="bg-white/70 dark:bg-slate-800/60 backdrop-blur-md border border-white/20 dark:border-slate-700/50 shadow-xl p-6 sm:p-8 rounded-2xl relative overflow-hidden group">
        <div className="absolute inset-0 bg-gradient-to-br from-blue-500/10 to-purple-500/10 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>

        <div className="relative z-10">
          <h2 className="text-2xl font-display font-bold text-center mb-3 text-slate-800 dark:text-white">
            Configurar Chave de API
          </h2>
          <p className="text-sm text-slate-500 dark:text-slate-400 text-center mb-8">
            Para começar, insira sua chave de API do Google Gemini. Ela será mantida segura no seu navegador.
          </p>

          <div className="space-y-5">
            <div>
              <label htmlFor="api-key-setup" className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">
                Sua Chave de API
              </label>
              <div className="relative group/input">
                <div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
                  <KeyIcon className="h-5 w-5 text-slate-400 group-focus-within/input:text-blue-500 transition-colors" />
                </div>
                <input
                  type="password"
                  id="api-key-setup"
                  className="block w-full rounded-xl border-slate-300 dark:border-slate-600 bg-white/50 dark:bg-slate-700/50 py-3 pl-10 pr-3 text-slate-900 dark:text-slate-100 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm backdrop-blur-sm transition-all"
                  placeholder="Cole sua chave aqui"
                  value={localApiKey}
                  onChange={(e) => setLocalApiKey(e.target.value)}
                  onKeyDown={(e) => e.key === 'Enter' && handleSave()}
                  autoComplete="off"
                />
              </div>
              <p className="mt-3 text-xs text-center text-slate-500 dark:text-slate-400">
                Não tem uma chave? <a href="https://aistudio.google.com/app/apikey" target="_blank" rel="noopener noreferrer" className="font-semibold text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300 hover:underline">Obtenha no Google AI Studio</a>.
              </p>
            </div>

            <button
              onClick={handleSave}
              disabled={!localApiKey.trim()}
              className="w-full flex justify-center items-center gap-2 bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 text-white font-bold py-3.5 px-4 rounded-xl shadow-lg hover:shadow-blue-500/30 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-300 transform active:scale-[0.98]"
            >
              <SaveIcon className="h-5 w-5" />
              <span>Salvar e Continuar</span>
            </button>
          </div>
        </div>
      </div>
    </div>
  );
};