// ✅ SSHKeyForm.js
import React, { useEffect, useState } from 'react';
import authApi from '../../api/authApi';

function SSHKeyForm({ form, onChange, onSubmit }) {
  const [keyInfo, setKeyInfo] = useState(null);

  useEffect(() => {
    const fetchKeyInfo = async () => {
      try {
        const res = await authApi.get('/api/auth/ssh-key/info/');
        setKeyInfo(res.data);
      } catch (err) {
        console.error("SSH 키 정보 조회 실패", err);
      }
    };

    fetchKeyInfo();
  }, []);

  const handleDelete = async () => {
    if (!window.confirm("등록된 SSH 키를 삭제하시겠습니까?")) return;

    try {
      await authApi.delete('/api/auth/ssh-key/');
      alert("SSH 키가 삭제되었습니다.");
      setKeyInfo(null);
    } catch (err) {
      console.error("삭제 실패", err);
      alert("SSH 키 삭제에 실패했습니다.");
    }
  };

  return (
    <form onSubmit={onSubmit} className="space-y-4">
      {keyInfo?.has_key && (
        <div className="p-4 bg-gray-100 rounded border border-gray-300">
          <p className="text-sm text-gray-700 mb-1">
            <strong>등록된 키 이름:</strong> {keyInfo.encrypted_private_key_name || '이름 없음'}
          </p>
          <p className="text-sm text-gray-600">
            <strong>마지막 사용 시각:</strong>{' '}
            {keyInfo.last_used_at ? new Date(keyInfo.last_used_at).toLocaleString() : '없음'}
          </p>
          <button
            type="button"
            onClick={handleDelete}
            className="mt-2 px-4 py-1 text-sm bg-red-500 text-white rounded hover:bg-red-600"
          >
            SSH 키 삭제
          </button>
        </div>
      )}

      <input
        name="encrypted_private_key_name"
        value={form.encrypted_private_key_name || ''}
        onChange={onChange}
        className="w-full px-4 py-2 border rounded"
        placeholder="SSH 키 이름"
      />

      <textarea
        name="private_key"
        value={form.private_key || ''}
        onChange={onChange}
        className="w-full px-4 py-2 border rounded font-mono"
        placeholder="-----BEGIN OPENSSH PRIVATE KEY-----"
        rows={6}
      />

      <button type="submit" className="w-full bg-green-600 text-white py-2 rounded hover:bg-green-700">
        키 등록
      </button>
    </form>
  );
}

export default SSHKeyForm;