function Settings({ onNavigate }) {
  const { t } = useI18n();
  const { address, connect, disconnect, chainConfig } = useWallet();
  const [settings, setSettings] = React.useState(null);
  const [balance, setBalance] = React.useState(null);
  const [loadError, setLoadError] = React.useState(null);
  const [faucetBusy, setFaucetBusy] = React.useState(false);
  const [faucetError, setFaucetError] = React.useState(null);
  const [faucetTxHash, setFaucetTxHash] = React.useState(null);

  function loadSettings() {
    setLoadError(null);
    fetch('/api/settings', { credentials: 'include' })
      .then(async (r) => {
        const body = await r.json().catch(() => ({}));
        if (!r.ok) throw new Error(body.error || `Failed to load settings (HTTP ${r.status}).`);
        setSettings(body);
      })
      .catch((e) => setLoadError(e.message || String(e)));
  }

  function refreshBalance() {
    if (!address || !window.ethereum) return;
    new window.ethers.BrowserProvider(window.ethereum)
      .getBalance(address)
      .then((wei) => setBalance(window.ethers.formatEther(wei)))
      .catch(() => setBalance(null));
  }

  React.useEffect(() => {
    if (!address) { setSettings(null); return; }
    loadSettings();
    refreshBalance();
  }, [address]);

  async function requestFaucet() {
    setFaucetError(null);
    setFaucetTxHash(null);
    setFaucetBusy(true);
    try {
      const res = await fetch('/api/faucet', { method: 'POST', credentials: 'include' });
      const body = await res.json();
      if (!res.ok) throw new Error(body.error || `Faucet request failed (HTTP ${res.status}).`);
      setFaucetTxHash(body.txHash);
      refreshBalance();
    } catch (e) {
      setFaucetError(e.message || String(e));
    } finally {
      setFaucetBusy(false);
    }
  }

  async function updateSettings(patch) {
    const next = { ...settings, ...patch };
    setSettings(next);
    try {
      const res = await fetch('/api/settings', {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        credentials: 'include',
        body: JSON.stringify(next),
      });
      const body = await res.json();
      if (!res.ok) throw new Error(body.error || `Failed to save (HTTP ${res.status}).`);
      setSettings(body);
    } catch (e) {
      setLoadError(e.message || String(e));
    }
  }

  if (!address) {
    return (
      <div className="container py-48 text-center">
        <p className="ink-2 mb-24">{t('wallet.connectPrompt')}</p>
        <button className="btn btn-primary" onClick={connect}>{t('wallet.connect')}</button>
      </div>
    );
  }

  if (loadError) {
    return (
      <div className="container-narrow py-48 text-center">
        <p style={{ color: 'var(--error)' }} className="mb-24">{loadError}</p>
        <button className="btn btn-secondary" onClick={loadSettings}>{t('common.retry')}</button>
      </div>
    );
  }

  if (!settings) return <div className="container py-48" />;

  return (
    <div>
      <div className="container-narrow py-48">
        <div className="mb-48">
          <div className="eyebrow mb-8">{t('settings.eyebrow')}</div>
          <h1 className="h2 serif">{t('settings.title')}</h1>
        </div>

        {/* Wallet */}
        <div className="card mb-24" style={{ padding: 32 }}>
          <div className="between mb-24" style={{ flexWrap:'wrap', gap: 16 }}>
            <div>
              <div className="tiny mb-4">{t('settings.wallet')}</div>
              <div className="mono" style={{ fontSize: 20 }}>{address}</div>
              {balance !== null && <div className="mono small mt-4 ink-3">{Number(balance).toFixed(4)} MATIC</div>}
            </div>
            <div className="col gap-8" style={{ alignItems:'flex-end' }}>
              <span className="badge badge-verified"><span className="dot-verified" /> {t('settings.wallet.connected')}</span>
              <button className="btn btn-ghost btn-sm" onClick={disconnect}>{t('settings.wallet.disconnect')}</button>
            </div>
          </div>

          {chainConfig?.faucetAvailable && (
            <>
              <div className="divider-dashed mt-16" style={{ paddingTop: 16 }} />
              <div className="between" style={{ flexWrap: 'wrap', gap: 16, alignItems: 'flex-start' }}>
                <div style={{ maxWidth: 460 }}>
                  <div className="h4">{t('settings.faucet')}</div>
                  <div className="small ink-3 mt-4">{t('settings.faucet.desc')}</div>
                  {faucetError && <div className="small mt-8" style={{ color: 'var(--error)' }}>{faucetError}</div>}
                  {faucetTxHash && (
                    <div className="small mt-8" style={{ color: 'var(--success)' }}>
                      {t('settings.faucet.success')} <span className="mono">{faucetTxHash.slice(0, 10)}…</span>
                    </div>
                  )}
                </div>
                <button className="btn btn-secondary btn-sm" onClick={requestFaucet} disabled={faucetBusy}>
                  {faucetBusy ? t('common.loading') : t('settings.faucet.cta')}
                </button>
              </div>
            </>
          )}
        </div>

        {/* Defaults */}
        <div className="card mb-24" style={{ padding: 32 }}>
          <div className="h4 mb-24">{t('settings.defaults')}</div>

          <div className="col gap-24">
            <SettingRow label={t('settings.def.chain')} desc={t('settings.def.chain.desc')}>
              <div className="seg">
                <div className={'seg-item' + (settings.defaultChain === 'polygon' ? ' active' : '')} onClick={() => updateSettings({ defaultChain: 'polygon' })}>Polygon</div>
                <div className={'seg-item' + (settings.defaultChain === 'ethereum' ? ' active' : '')} onClick={() => updateSettings({ defaultChain: 'ethereum' })}>Ethereum</div>
              </div>
            </SettingRow>

            <SettingRow label={t('settings.def.autoHash')} desc={t('settings.def.autoHash.desc')}>
              <Toggle on={settings.autoHash} setOn={(v) => updateSettings({ autoHash: v })} />
            </SettingRow>

            <SettingRow label={t('settings.def.autoSeal')} desc={t('settings.def.autoSeal.desc')}>
              <Toggle on={settings.autoSeal} setOn={(v) => updateSettings({ autoSeal: v })} />
            </SettingRow>

            <SettingRow label={t('settings.def.publicIndex')} desc={t('settings.def.publicIndex.desc')}>
              <Toggle on={settings.publicIndex} setOn={(v) => updateSettings({ publicIndex: v })} />
            </SettingRow>
          </div>
        </div>

        {/* Export */}
        <div className="card" style={{ padding: 32, borderColor:'color-mix(in oklab, var(--error) 30%, var(--hairline))' }}>
          <div className="h4 mb-8">{t('settings.export')}</div>
          <p className="small ink-3 mb-24">{t('settings.export.body')}</p>
          <div className="row gap-8">
            <button className="btn btn-secondary btn-sm">{t('settings.export.json')}</button>
            <button className="btn btn-secondary btn-sm">{t('settings.export.pdf')}</button>
          </div>
        </div>
      </div>
    </div>
  );
}

function SettingRow({ label, desc, children }) {
  return (
    <div className="row between" style={{ alignItems:'flex-start', paddingBottom: 20, borderBottom:'1px dashed var(--hairline)', gap: 24 }}>
      <div style={{ maxWidth: 460 }}>
        <div className="h4">{label}</div>
        <div className="small ink-3 mt-4">{desc}</div>
      </div>
      <div>{children}</div>
    </div>
  );
}

function Toggle({ on, setOn }) {
  return (
    <button
      onClick={() => setOn(!on)}
      style={{
        width: 44, height: 24,
        borderRadius: 999,
        background: on ? 'var(--primary)' : 'var(--surface-card)',
        border:'none',
        position:'relative',
        cursor:'pointer',
        transition:'background 0.15s',
        padding: 0,
      }}
    >
      <div style={{
        position:'absolute',
        top: 3, left: on ? 23 : 3,
        width: 18, height: 18,
        borderRadius:'50%',
        background: 'var(--canvas)',
        transition: 'left 0.15s',
        boxShadow:'0 1px 3px rgba(20,20,19,0.15)',
      }} />
    </button>
  );
}

window.Settings = Settings;