// Panel admina: ustawienia serwisu - integracja z rejestrem REGON (GUS BIR1.1).
import { useCallback, useEffect, useState } from 'react';
import { apiFetch } from '../auth';

type IconComponent = (props: { name: string }) => JSX.Element | null;

type GusCfg = { userKeySet: boolean; sandbox: boolean };

const em = (e: unknown) => (e instanceof Error ? e.message : 'Wystąpił błąd.');

export function AdminSettingsView({ Icon }: { Icon: IconComponent }) {
  const [error, setError] = useState<string | null>(null);
  const [note, setNote] = useState<string | null>(null);
  const [gus, setGus] = useState({ userKey: '', sandbox: true });
  const [keySet, setKeySet] = useState(false);

  const load = useCallback(async () => {
    try {
      const cfg = await apiFetch<GusCfg>('/admin/gus-config');
      setKeySet(cfg.userKeySet);
      setGus({ userKey: '', sandbox: cfg.sandbox });
    } catch (e) {
      setError(em(e));
    }
  }, []);
  useEffect(() => { load(); }, [load]);

  const save = async () => {
    try {
      const body = JSON.stringify({ userKey: gus.userKey || null, sandbox: gus.sandbox });
      const cfg = await apiFetch<GusCfg>('/admin/gus-config', { method: 'PUT', body });
      setKeySet(cfg.userKeySet);
      setGus({ userKey: '', sandbox: cfg.sandbox });
      setError(null);
      setNote('Zapisano konfigurację GUS.');
    } catch (e) {
      setError(em(e));
    }
  };

  return (
    <div className="mkt-wrap">
      {(error || note) && (error ? <p className="mkt-error">{error}</p> : <p className="mkt-ok">{note}</p>)}

      <div className="admin-card mkt-card mkt-config">
        <div className="admin-card-head mkt-config-head">
          <span className="mkt-config-icon"><Icon name="document" /></span>
          <h2>Rejestr REGON (GUS) - pobieranie danych firmy po NIP</h2>
        </div>
        <p className="banner-slot-hint">
          <Icon name="lock" /> Klucz użytkownika otrzymasz od GUS (usługa BIR1.1). W trybie testowym używamy środowiska
          testowego GUS i klucza testowego - zwraca ono wyłącznie dane przykładowe.
        </p>
        <div className="mkt-config-grid">
          <label>Klucz użytkownika {keySet && <span className="mkt-badge-set"><Icon name="lock" /> ustawiony</span>}
            <input
              type="password"
              value={gus.userKey}
              onChange={(e) => setGus({ ...gus, userKey: e.target.value })}
              placeholder={keySet ? 'wpisz, aby zmienić' : 'klucz produkcyjny z GUS'}
            />
          </label>
          <label>Środowisko
            <select value={gus.sandbox ? 'sandbox' : 'prod'} onChange={(e) => setGus({ ...gus, sandbox: e.target.value === 'sandbox' })}>
              <option value="sandbox">Testowe (dane przykładowe)</option>
              <option value="prod">Produkcyjne</option>
            </select>
          </label>
        </div>
        <div className="mkt-config-save">
          <button type="button" className="admin-btn approve" onClick={save}>Zapisz konfigurację</button>
        </div>
      </div>
    </div>
  );
}