<script>
  import { onMount } from 'svelte'
  import { api } from '../lib/api.js'
  import { notify } from '../lib/store.js'

  const providers = [
    { key: 'finnhub_api_key',  label: 'Finnhub',             provider: 'finnhub',      placeholder: 'c_xxxxxxxxxxxxxxxx' },
    { key: 'alphavantage_key', label: 'Alpha Vantage',        provider: 'alphavantage', placeholder: 'XXXXXXXXXXXX' },
    { key: 'etoro_api_key',    label: 'eToro — Public Key',   provider: 'etoro',        placeholder: 'x-api-key (clé publique)' },
    { key: 'etoro_user_key',   label: 'eToro — User Key',     provider: null,           placeholder: 'eyJjaSI6… (clé utilisateur)' },
  ]

  let values = {}
  let testing = {}
  let testResults = {}
  let saving = false

  onMount(async () => {
    try {
      const data = await api.getSettings()
      for (const p of providers) {
        values[p.key] = data[p.key] === '********' ? '' : (data[p.key] ?? '')
      }
    } catch(e) {
      notify('Impossible de charger les settings : ' + e.message, 'error')
    }
  })

  async function save() {
    saving = true
    try {
      const body = {}
      for (const p of providers) {
        if (values[p.key]) body[p.key] = values[p.key]
      }
      await api.saveSettings(body)
      notify('Settings sauvegardés', 'success')
    } catch(e) {
      notify('Erreur sauvegarde : ' + e.message, 'error')
    } finally {
      saving = false
    }
  }

  async function testKey(p) {
    testing[p.provider] = true
    testResults[p.provider] = null
    try {
      const r = await api.testKey(p.provider)
      testResults[p.provider] = r.status === 'ok' ? 'ok' : 'error'
      notify(`${p.label} : ${r.status === 'ok' ? 'clé valide' : r.message}`, r.status === 'ok' ? 'success' : 'error')
    } catch(e) {
      testResults[p.provider] = 'error'
      notify(`${p.label} : erreur de connexion`, 'error')
    } finally {
      testing[p.provider] = false
    }
  }
</script>

<div class="page">
  <h1>Settings</h1>

  <form on:submit|preventDefault={save}>
    <section>
      <h2>Clés API</h2>
      <p class="hint">Les clés sont stockées chiffrées (AES-256). Les champs vides conservent la valeur existante.</p>

      {#each providers as p}
        <div class="field">
          <label for={p.key}>{p.label}</label>
          <div class="input-row">
            <input
              id={p.key}
              type="password"
              bind:value={values[p.key]}
              placeholder={p.placeholder}
              autocomplete="off"
            />
            {#if p.provider}
            <button
              type="button"
              class="btn-test"
              class:ok={testResults[p.provider] === 'ok'}
              class:error={testResults[p.provider] === 'error'}
              disabled={testing[p.provider]}
              on:click={() => testKey(p)}
            >
              {testing[p.provider] ? '…' : testResults[p.provider] === 'ok' ? '✓' : testResults[p.provider] === 'error' ? '✗' : 'Tester'}
            </button>
            {/if}
          </div>
        </div>
      {/each}
    </section>

    <div class="actions">
      <button type="submit" class="btn-primary" disabled={saving}>
        {saving ? 'Sauvegarde…' : 'Sauvegarder'}
      </button>
    </div>
  </form>
</div>

<style>
  .page h1 { color: #1f2328; font-size: 1.4rem; }

  form { max-width: 560px; }

  section { margin-bottom: 2rem; }
  h2 { font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.08em; color: #57606a; border-bottom: 1px solid #d0d7de; padding-bottom: 0.5rem; margin-bottom: 1.25rem; }

  .hint { font-size: 0.8rem; color: #8c959f; margin: -0.75rem 0 1.25rem; }

  .field { margin-bottom: 1.25rem; }
  label { display: block; font-size: 0.875rem; color: #57606a; margin-bottom: 0.4rem; }

  .input-row { display: flex; gap: 0.5rem; }

  input {
    flex: 1;
    background: #ffffff;
    border: 1px solid #c6cdd5;
    border-radius: 6px;
    color: #1f2328;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    outline: none;
    transition: border-color 0.15s;
  }
  input:focus { border-color: #0969da; }
  input::placeholder { color: #8c959f; }

  .btn-test {
    background: #d0d7de;
    border: 1px solid #c6cdd5;
    border-radius: 6px;
    color: #57606a;
    padding: 0.5rem 0.75rem;
    font-size: 0.8rem;
    min-width: 64px;
    transition: background 0.15s, color 0.15s;
  }
  .btn-test:hover:not(:disabled) { background: #c6cdd5; color: #1f2328; }
  .btn-test.ok    { color: #1a7f37; border-color: #1a7f37; }
  .btn-test.error { color: #cf222e; border-color: #cf222e; }
  .btn-test:disabled { opacity: 0.5; }

  .actions { padding-top: 1rem; }

  .btn-primary {
    background: #1f6feb;
    border: none;
    border-radius: 6px;
    color: #fff;
    padding: 0.6rem 1.5rem;
    font-size: 0.9rem;
    font-weight: 500;
    transition: background 0.15s;
  }
  .btn-primary:hover:not(:disabled) { background: #388bfd; }
  .btn-primary:disabled { opacity: 0.5; }
</style>
