frontend/src/TokenInput.js

import React, { useState, useContext, useRef, useEffect } from 'react';
import { HuggingfaceTokenContext } from './HuggingfaceTokenContext';
import './TokenInput.css';

const TokenInput = () => {
  const { token, setToken } = useContext(HuggingfaceTokenContext);
  const [isVisible, setIsVisible] = useState(false);
  const [inputValue, setInputValue] = useState(token);
  const inputRef = useRef(null);
  
  // Focus input when becoming visible
  useEffect(() => {
    if (isVisible && inputRef.current) {
      inputRef.current.focus();
    }
  }, [isVisible]);

  const toggleVisibility = () => {
    setIsVisible(!isVisible);
    if (!isVisible) {
      setInputValue(token);
    }
  };

  const handleSave = () => {
    setToken(inputValue);
    setIsVisible(false);
  };

  const handleCancel = () => {
    setInputValue(token);
    setIsVisible(false);
  };

  const handleKeyDown = (e) => {
    if (e.key === 'Enter') {
      handleSave();
    } else if (e.key === 'Escape') {
      handleCancel();
    }
  };

  return (
    <div className="token-container">
      {!isVisible ? (
        <button className="token-button" onClick={toggleVisibility}>
          {token ? 'Change HF Token' : 'Set HF Token'}
        </button>
      ) : (
        <div className="token-input-container">
          <input
            ref={inputRef}
            type="password"
            className="token-input"
            value={inputValue}
            onChange={(e) => setInputValue(e.target.value)}
            onKeyDown={handleKeyDown}
            placeholder="Enter Huggingface Space Token"
          />
          <div className="token-actions">
            <button className="token-save" onClick={handleSave}>Save</button>
            <button className="token-cancel" onClick={handleCancel}>Cancel</button>
          </div>
        </div>
      )}
    </div>
  );
};

export default TokenInput;