import React, { useState, useEffect } from 'react';

export default function Settings() {
  const [githubToken, setGithubToken] = useState('');
  const [giteaToken, setGiteaToken] = useState('');
  const [giteaURL, setGiteaURL] = useState('');

  useEffect(() => {
    window.electronAPI.loadCredentials().then(data => {
      if (data) {
        setGithubToken(data.githubToken || '');
        setGiteaToken(data.giteaToken || '');
        setGiteaURL(data.giteaURL || '');
      }
    });
  }, []);

  const save = () => {
    window.electronAPI.saveCredentials({ githubToken, giteaToken, giteaURL });
    alert('Settings saved securely!');
  }

  return (
    <div style={{ padding: 20 }}>
      <h2>Settings</h2>
      <div>
        <label>GitHub Token:</label>
        <input type="password" value={githubToken} onChange={e => setGithubToken(e.target.value)} />
      </div>
      <div>
        <label>Gitea Token:</label>
        <input type="password" value={giteaToken} onChange={e => setGiteaToken(e.target.value)} />
      </div>
      <div>
        <label>Gitea URL:</label>
        <input type="text" value={giteaURL} onChange={e => setGiteaURL(e.target.value)} />
      </div>
      <button onClick={save} style={{ marginTop: 10 }}>Save</button>
    </div>
  );
}