{{define "web-upload"}}
<h2>📤 Web Upload</h2>
<p>Upload a file directly from your browser. Files are temporary and automatically deleted after 24 hours.</p>

<div class="upload-card">
  <form id="web-upload-form" class="upload-form" aria-label="Web upload form">
    <div class="form-row">
      <input type="file" id="file-input" name="file" required aria-label="Choose a file to upload" data-rybbit-event="Select file">
    </div>
    <div class="form-row">
      <button type="submit" id="upload-btn" class="btn-primary" data-rybbit-event="Upload">Upload</button>
    </div>
  </form>

  <div id="upload-status" class="upload-status" role="status" aria-live="polite" hidden></div>

  <div id="upload-result" class="upload-result" hidden>
    <p><strong>File uploaded successfully!</strong></p>
    <p>
      <span>Download URL:</span>
      <a id="download-link" href="#" target="_blank" rel="noopener noreferrer">open</a>
    </p>
    <div class="actions">
      <button id="copy-link-btn" class="btn-secondary" type="button">Copy link</button>
    </div>
  </div>
</div>

<script>
(function(){
  const form = document.getElementById('web-upload-form');
  const fileInput = document.getElementById('file-input');
  const statusEl = document.getElementById('upload-status');
  const resultEl = document.getElementById('upload-result');
  const linkEl = document.getElementById('download-link');
  const copyBtn = document.getElementById('copy-link-btn');
  const uploadBtn = document.getElementById('upload-btn');

  function showStatus(msg, type) {
    statusEl.textContent = msg;
    statusEl.hidden = false;
    statusEl.className = 'upload-status ' + (type || '');
  }
  function clearStatus(){
    statusEl.hidden = true;
    statusEl.textContent = '';
  }
  function setLoading(isLoading){
    uploadBtn.disabled = isLoading;
    uploadBtn.textContent = isLoading ? 'Uploading…' : 'Upload';
  }

  form.addEventListener('submit', async function(e){
    e.preventDefault();
    clearStatus();
    resultEl.hidden = true;

    const file = fileInput.files && fileInput.files[0];
    if(!file){
      showStatus('Please choose a file first.', 'error');
      return;
    }

    const data = new FormData();
    data.append('file', file);

    setLoading(true);
    try {
      const resp = await fetch('/upload', { method: 'POST', body: data });
      const contentType = resp.headers.get('content-type') || '';
      if(!resp.ok){
        let message = 'Upload failed';
        if (contentType.includes('application/json')) {
          const errJson = await resp.json().catch(()=>({}));
          if (errJson && errJson.error) message = errJson.error;
        } else {
          message = await resp.text();
        }
        showStatus(message || 'Upload failed', 'error');
        return;
      }

      const json = contentType.includes('application/json') ? await resp.json() : null;
      const url = json && json.url ? json.url : null;
      if(!url){
        showStatus('Upload succeeded but no URL was returned by the server.', 'error');
        return;
      }

      linkEl.href = url;
      linkEl.textContent = url;
      resultEl.hidden = false;
      showStatus('Done.', 'success');
    } catch (err) {
      showStatus('Network error. Please try again.', 'error');
    } finally {
      setLoading(false);
    }
  });

  copyBtn.addEventListener('click', function(){
    const url = linkEl.href;
    if(!url) return;
    navigator.clipboard.writeText(url).then(()=>{
      const original = copyBtn.textContent;
      copyBtn.textContent = 'Copied!';
      copyBtn.classList.add('copied');
      setTimeout(()=>{ copyBtn.textContent = original; copyBtn.classList.remove('copied'); }, 1500);
    }).catch(()=>{
      const original = copyBtn.textContent;
      copyBtn.textContent = 'Failed';
      setTimeout(()=>{ copyBtn.textContent = original; }, 1500);
    });
  });
})();
</script>
{{end}}