import React, { useState, useEffect } from 'react';
import Settings from './Settings.jsx';

export default function App() {
  const [folder, setFolder] = useState('');
  const [repoName, setRepoName] = useState('');
  const [platform, setPlatform] = useState('github');
  const [status, setStatus] = useState('');
  const [showSettings, setShowSettings] = useState(false);
  const [branches, setBranches] = useState([]);
  const [selectedBranch, setSelectedBranch] = useState('master');
  const [logs, setLogs] = useState([]);
  const [progress, setProgress] = useState(0);

  async function selectFolder() {
    const selected = await window.electronAPI.selectFolder();
    if (selected) setFolder(selected);
    // Branches laden
    if (selected) {
      const branchList = await window.electronAPI.getBranches({ folder: selected });
      setBranches(branchList);
      if (branchList.includes('master')) setSelectedBranch('master');
    }
  }

  async function createRepoHandler() {
    if (!repoName) return alert('Repo Name required!');
    setStatus('Creating repository...');
    const result = await window.electronAPI.createRepo({ name: repoName, platform });
    setStatus(result ? 'Repository created!' : 'Failed to create repository.');
  }

  async function pushProjectHandler() {
    if (!folder) return alert('Select a project folder first!');
    setStatus('Pushing project...');
    setProgress(0);
    const onProgress = (p) => setProgress(p); // Callback für Fortschritt
    const result = await window.electronAPI.pushProject({ folder, branch: selectedBranch, onProgress });
    setStatus(result ? 'Project pushed!' : 'Failed to push project.');
    if (result) {
      const logList = await window.electronAPI.getCommitLogs({ folder });
      setLogs(logList);
    }
  }

  return (
    <div style={{ padding: 20 }}>
      <h1>Git Manager GUI - High-End</h1>
      <button onClick={() => setShowSettings(!showSettings)}>Settings</button>
      {showSettings && <Settings />}

      <div style={{ marginTop: 20 }}>
        <label>Platform:</label>
        <select value={platform} onChange={e => setPlatform(e.target.value)}>
          <option value="github">GitHub</option>
          <option value="gitea">Gitea</option>
        </select>
      </div>

      <div style={{ marginTop: 20 }}>
        <button onClick={selectFolder}>Select Project Folder</button>
        <span style={{ marginLeft: 10 }}>{folder}</span>
      </div>

      <div style={{ marginTop: 20 }}>
        <label>Branch:</label>
        <select value={selectedBranch} onChange={e => setSelectedBranch(e.target.value)}>
          {branches.map(b => <option key={b} value={b}>{b}</option>)}
        </select>
      </div>

      <div style={{ marginTop: 20 }}>
        <input 
          type="text" 
          placeholder="Repository Name" 
          value={repoName} 
          onChange={e => setRepoName(e.target.value)} />
        <button onClick={createRepoHandler} style={{ marginLeft: 10 }}>Create Repo</button>
      </div>

      <div style={{ marginTop: 20 }}>
        <button onClick={pushProjectHandler}>Push / Update Project</button>
      </div>

      <div style={{ marginTop: 10 }}>
        <label>Progress:</label>
        <progress value={progress} max="100" style={{ width: '100%' }} />
      </div>

      <div style={{ marginTop: 20 }}>
        <strong>Status: </strong>{status}
      </div>

      <div style={{ marginTop: 20 }}>
        <h3>Commit Logs:</h3>
        <ul>
          {logs.map((log, i) => (
            <li key={i}>{log}</li>
          ))}
        </ul>
      </div>
    </div>
  );
}