<body>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Encryptor (HTMX)</title>

  <!-- CSS má být v <head> -->
  <link rel="stylesheet" href="/static/style.css">

  <!-- Tohle jsi omylem smazal; bez toho HTMX nefunguje -->
  <script src="https://unpkg.com/htmx.org@1.9.12"></script>
</head>


  <main class="grid">
    <div class="left-col">
      <section class="card">
        <h2>Můj veřejný klíč</h2>
        <div class="row">
          <a href="/public.pem" target="_blank">public.pem</a>
          <button onclick="copyFromUrl('/public.pem')">Copy</button>
        </div>
        <div class="row">
          <a href="/public.crt" target="_blank">identity.crt</a>
          <button onclick="copyFromUrl('/public.crt')">Copy</button>
        </div>
        <small>Pošli tohle kontaktům; můžou šifrovat pro tebe.</small>
      </section>

      <section class="card">
        <h2>Šifrovat pro cizí klíč</h2>
        <form hx-post="/encrypt" hx-target="#encryptResult" hx-swap="innerHTML">
          <label>Zpráva</label>
          <div class="row">
            <textarea id="msg" name="message" placeholder="Sem napiš zprávu..."></textarea>
            <button type="button" class="secondary" onclick="copyEl('msg')">Copy</button>
            <button type="button" class="secondary" onclick="clearEl('msg')">Clear</button>
          </div>

          <label>Veřejný klíč příjemce (PEM nebo CERT)</label>
          <div class="row">
            <textarea id="peerKey" name="pubkey" placeholder="-----BEGIN PUBLIC KEY----- ..."></textarea>
            <button type="button" class="secondary" onclick="copyEl('peerKey')">Copy</button>
            <button type="button" class="secondary" onclick="clearEl('peerKey')">Clear</button>
          </div>

          <button type="submit" class="primary">Encrypt</button>
        </form>
        <div id="encryptResult" class="result"></div>
      </section>
    </div>

    <div class="right-col">
      <section class="card">
        <h2>Dešifrovat</h2>
        <form hx-post="/decrypt" hx-target="#decryptResult" hx-swap="innerHTML">
          <label>Payload (JSON envelope)</label>
          <div class="row">
            <textarea id="payload" name="payload" placeholder='{"ek":"...","n":"...","ct":"..."}'></textarea>
            <button type="button" class="secondary" onclick="copyEl('payload')">Copy</button>
            <button type="button" class="secondary" onclick="clearEl('payload')">Clear</button>
          </div>
          <button type="submit" class="primary">Decrypt</button>
        </form>
        <div id="decryptResult" class="result"></div>
      </section>
    </div>
  </main>

  <div id="toast">Zkopírováno</div>

  <script>
  function showToast(msg='Zkopírováno') {
    const t = document.getElementById('toast');
    t.textContent = msg;
    t.classList.add('show');
    setTimeout(() => t.classList.remove('show'), 1200);
  }

  async function copyText(text) {
    try {
      if (navigator.clipboard && window.isSecureContext) {
        await navigator.clipboard.writeText(text);
      } else {
        const ta = document.createElement('textarea');
        ta.value = text;
        ta.style.position = 'fixed';
        ta.style.left = '-9999px';
        document.body.appendChild(ta);
        ta.focus();
        ta.select();
        document.execCommand('copy');
        document.body.removeChild(ta);
      }
      showToast();
    } catch (e) {
      console.error('copyText error:', e);
      alert('Nepodařilo se zkopírovat do schránky.\n' + e);
    }
  }

  async function copyEl(id) {
    const el = document.getElementById(id);
    const val = (el && (el.tagName === 'TEXTAREA' || el.tagName === 'INPUT'))
      ? el.value
      : (el?.textContent ?? '');
    await copyText(val);
  }

  async function copyFromUrl(url) {
    try {
      const res = await fetch(url, {cache: 'no-store'});
      if (!res.ok) throw new Error('HTTP ' + res.status);
      const text = await res.text();
      await copyText(text);
    } catch (e) {
      console.error('copyFromUrl error:', e);
      alert('Nepodařilo se načíst obsah ke zkopírování.\n' + e);
    }
  }

  function clearEl(id) {
    const el = document.getElementById(id);
    if (el && (el.tagName === 'TEXTAREA' || el.tagName === 'INPUT')) {
      el.value = '';
    } else if (el) {
      el.textContent = '';
    }
  }
</script>

</body>
