import { useState, useEffect, useRef } from 'react';
import { Input } from '../../ui/input';
import { useConfig } from '../../ConfigContext';
import { ELEVENLABS_API_KEY, isSecretKeyConfigured } from '../../../hooks/dictationConstants';
import { setElevenLabsKeyCache } from '../../../hooks/useDictationSettings';

export const ElevenLabsKeyInput = () => {
  const [elevenLabsApiKey, setElevenLabsApiKey] = useState('');
  const [isLoadingKey, setIsLoadingKey] = useState(false);
  const [hasElevenLabsKey, setHasElevenLabsKey] = useState(false);
  const elevenLabsApiKeyRef = useRef('');
  const { upsert, read } = useConfig();

  useEffect(() => {
    const loadKey = async () => {
      setIsLoadingKey(true);
      try {
        const response = await read(ELEVENLABS_API_KEY, true);
        if (isSecretKeyConfigured(response)) {
          setHasElevenLabsKey(true);
          setElevenLabsKeyCache(true);
        } else {
          setElevenLabsKeyCache(false);
        }
      } catch (error) {
        console.error('Error checking ElevenLabs API key:', error);
        setElevenLabsKeyCache(false);
      } finally {
        setIsLoadingKey(false);
      }
    };

    loadKey();
  }, [read]);

  // Save key on unmount to avoid losing unsaved changes
  useEffect(() => {
    return () => {
      if (elevenLabsApiKeyRef.current) {
        const keyToSave = elevenLabsApiKeyRef.current;
        if (keyToSave.trim()) {
          upsert(ELEVENLABS_API_KEY, keyToSave, true)
            .then(() => setElevenLabsKeyCache(true))
            .catch((error) => {
              console.error('Error saving ElevenLabs API key on unmount:', error);
            });
        }
      }
    };
  }, [upsert]);

  const handleElevenLabsKeyChange = (key: string) => {
    setElevenLabsApiKey(key);
    elevenLabsApiKeyRef.current = key;
    if (key.length > 0) {
      setHasElevenLabsKey(false);
    }
  };

  const saveElevenLabsKey = async () => {
    try {
      if (elevenLabsApiKey.trim()) {
        await upsert(ELEVENLABS_API_KEY, elevenLabsApiKey, true);
        setHasElevenLabsKey(true);
        setElevenLabsKeyCache(true);
      } else {
        await upsert(ELEVENLABS_API_KEY, null, true);
        setHasElevenLabsKey(false);
        setElevenLabsKeyCache(false);
      }
    } catch (error) {
      console.error('Error saving ElevenLabs API key:', error);
    }
  };

  return (
    <div className="py-2 px-2 bg-background-subtle rounded-lg">
      <div className="mb-2">
        <h4 className="text-text-default text-sm">ElevenLabs API Key</h4>
        <p className="text-xs text-text-muted mt-[2px]">
          Required for ElevenLabs voice recognition
          {hasElevenLabsKey && <span className="text-green-600 ml-2">(Configured)</span>}
        </p>
      </div>
      <Input
        type="password"
        value={elevenLabsApiKey}
        onChange={(e) => handleElevenLabsKeyChange(e.target.value)}
        onBlur={saveElevenLabsKey}
        placeholder={
          hasElevenLabsKey ? 'Enter new API key to update' : 'Enter your ElevenLabs API key'
        }
        className="max-w-md"
        disabled={isLoadingKey}
      />
    </div>
  );
};