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

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

  function normalizeAndValidateGiteaUrl(rawUrl) {
    const value = (rawUrl || '').trim();
    if (!value) return { ok: true, value: '' };

    let parsed;
    try {
      parsed = new URL(value);
    } catch (_) {
      return {
        ok: false,
        error: 'Ungültige Gitea-URL. Beispiel für IPv6: http://[2001:db8::1]:3000',
      };
    }

    if (parsed.protocol !== 'http:' && parsed.protocol !== 'https:') {
      return {
        ok: false,
        error: 'Die Gitea-URL muss mit http:// oder https:// beginnen.',
      };
    }

    return { ok: true, value: value.replace(/\/$/, '') };
  }

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

  function save() {
    const checkedUrl = normalizeAndValidateGiteaUrl(giteaURL);
    if (!checkedUrl.ok) {
      alert(checkedUrl.error);
      return;
    }
    window.electronAPI.saveCredentials({ githubToken, giteaToken, giteaURL: checkedUrl.value });
    setSavedOk(true);
    setTimeout(() => setSavedOk(false), 2500);
  }

  return (
    <div className="modalContent card settings-modal-content">

      <div className="settings-header">
        <div>
          <div className="settings-eyebrow">Konfiguration</div>
          <h2>⚙️ Einstellungen</h2>
          <p className="settings-subtitle">
            Zugangsdaten für GitHub und Gitea hinterlegen.
          </p>
        </div>
      </div>

      <div className="settings-layout">
        <div className="settings-column settings-column--left">
          <section className="settings-panel settings-panel--credentials">
            <div className="settings-panel-header">
              <div>
                <h3>Zugangsdaten</h3>
                <p>API-Zugriffe für GitHub und Gitea konfigurieren.</p>
              </div>
            </div>

            <div className="settings-fields-grid">
              <div className="input-group">
                <label htmlFor="react-githubToken">GitHub Token</label>
                <input
                  id="react-githubToken"
                  type="password"
                  placeholder="ghp_…"
                  value={githubToken}
                  onChange={e => setGithubToken(e.target.value)}
                />
              </div>

              <div className="input-group">
                <label htmlFor="react-giteaToken">Gitea Token</label>
                <input
                  id="react-giteaToken"
                  type="password"
                  placeholder="Token hier einfügen"
                  value={giteaToken}
                  onChange={e => setGiteaToken(e.target.value)}
                />
              </div>
            </div>

            <div className="input-group input-group--wide">
              <label htmlFor="react-giteaURL">Gitea URL</label>
              <input
                id="react-giteaURL"
                type="text"
                placeholder="https://gitea.example.com"
                value={giteaURL}
                onChange={e => setGiteaURL(e.target.value)}
              />
              <div className="settings-connection-tools">
                <div className="settings-inline-hint">
                  Hinweis: IPv6 mit Klammern eingeben, z.B. http://[2001:db8::1]:3000
                </div>
              </div>
            </div>
          </section>
        </div>
      </div>

      <div className="modal-buttons settings-modal-actions">
        <button
          className="accent-btn"
          onClick={save}
          style={savedOk ? { background: 'var(--success)', borderColor: 'var(--success)' } : {}}
        >
          {savedOk ? '✅ Gespeichert' : 'Speichern'}
        </button>
        {onClose && (
          <button className="secondary" onClick={onClose}>Abbrechen</button>
        )}
      </div>
    </div>
  );
}