import type { EventerSession } from "./auth-oidc/types";

function escapeHtml(value: string): string {
  return value
    .replace(/&/g, "&amp;")
    .replace(/</g, "&lt;")
    .replace(/>/g, "&gt;")
    .replace(/"/g, "&quot;")
    .replace(/'/g, "&#39;");
}

// The real submission form -- only reachable past requireOidcSession +
// requireTeamAccess (see server.ts), so username/email are already
// verified identity, not user input. Escaped anyway before going into HTML
// as defense in depth. Plain server-rendered HTML + vanilla JS: no
// framework in this app already, so no reason to add one for one page.
export function renderSubmitPage(session: EventerSession & { teams: string[] }): string {
  const username = escapeHtml(session.username);
  const email = escapeHtml(session.email ?? `${session.username}@uwaterloo.ca`);
  // The actual matched team(s) from the live LDAP check that just ran, not
  // a hardcoded assumption -- this used to always say "progcom" regardless
  // of what ALLOWED_TEAMS was actually configured to, which is exactly the
  // kind of stale/inaccurate status text this project has been burned by
  // before.
  const teams = escapeHtml(session.teams.join(", "));

  return `<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>EventCentral</title>
<style>
  body { font-family: system-ui, sans-serif; max-width: 640px; margin: 2rem auto; padding: 0 1rem; }
  .field { margin-bottom: 1rem; display: flex; flex-direction: column; gap: 0.25rem; }
  label { font-weight: 600; }
  input, textarea { padding: 0.5rem; font: inherit; }
  .row { display: flex; gap: 1rem; }
  .row .field { flex: 1; }
  .hint { color: #555; font-size: 0.9rem; }
  .result { margin-top: 1rem; padding: 0.75rem; border-radius: 4px; white-space: pre-wrap; }
  .result.success { background: #e6ffed; border: 1px solid #4caf50; }
  .result.error { background: #ffecec; border: 1px solid #e53935; }
  button { padding: 0.6rem 1.2rem; font: inherit; cursor: pointer; }
</style>
</head>
<body>
  <h1>EventCentral</h1>
  <p class="hint">Logged in as <strong>${username}</strong> (${email}), verified against ${teams} membership.</p>

  <form id="event-form">
    <div class="field">
      <label for="name">Event name</label>
      <input id="name" required />
    </div>
    <div class="field">
      <label for="short">Short description</label>
      <input id="short" required />
    </div>
    <div class="row">
      <div class="field">
        <label for="start">Start</label>
        <input id="start" type="datetime-local" required />
      </div>
      <div class="field">
        <label for="end">End (optional)</label>
        <input id="end" type="datetime-local" />
      </div>
    </div>
    <div class="field">
      <label><input id="online" type="checkbox" /> Online event</label>
    </div>
    <div class="field">
      <label for="location">Location</label>
      <input id="location" required placeholder="e.g. DC 1351, or Online" />
    </div>
    <div class="field">
      <label for="description">Description (Markdown)</label>
      <textarea id="description" rows="6" required></textarea>
    </div>
    <div class="field">
      <label for="registerLink">Registration link (optional, https://)</label>
      <input id="registerLink" />
    </div>
    <div class="field">
      <label for="poster">Poster (optional, square-ish JPEG/PNG, max 15MB)</label>
      <input id="poster" type="file" accept="image/png,image/jpeg" />
    </div>
    <button type="submit">Submit event</button>
  </form>

  <div id="result"></div>

<script>
(function () {
  var form = document.getElementById('event-form');
  var resultEl = document.getElementById('result');

  form.addEventListener('submit', function (e) {
    e.preventDefault();
    resultEl.className = '';
    resultEl.textContent = '';

    var startVal = document.getElementById('start').value;
    var endVal = document.getElementById('end').value;
    if (endVal && new Date(endVal).getTime() < new Date(startVal).getTime()) {
      alert('The end date/time must be after the start date/time.');
      return;
    }
    if (!confirm('You are about to submit this event. Continue?')) {
      return;
    }

    var submitButton = form.querySelector('button[type="submit"]');
    submitButton.disabled = true;

    (async function () {
      try {
        var poster = null;
        var posterInput = document.getElementById('poster');
        if (posterInput.files && posterInput.files[0]) {
          var uploadBody = new FormData();
          uploadBody.append('poster', posterInput.files[0]);
          var uploadRes = await fetch('/upload', { method: 'POST', body: uploadBody });
          var uploadJson = await uploadRes.json();
          if (!uploadRes.ok) {
            throw new Error((uploadJson && uploadJson.error && uploadJson.error.message) || 'Poster upload failed');
          }
          poster = uploadJson;
        }

        var payload = {
          name: document.getElementById('name').value,
          short: document.getElementById('short').value,
          startLocal: startVal,
          endLocal: endVal || null,
          online: document.getElementById('online').checked,
          location: document.getElementById('location').value,
          descriptionMarkdown: document.getElementById('description').value,
          registerLink: document.getElementById('registerLink').value || null,
          poster: poster,
        };

        var res = await fetch('/submit', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify(payload),
        });
        var json = await res.json();

        resultEl.className = 'result ' + (json.ok ? 'success' : 'error');
        resultEl.textContent = json.ok
          ? 'Submitted! ' + json.message + (json.pullRequestUrl ? '\\nPR: ' + json.pullRequestUrl : '')
          : 'Error: ' + json.message;

        if (json.ok) {
          form.reset();
        }
      } catch (err) {
        resultEl.className = 'result error';
        resultEl.textContent = 'Error: ' + (err && err.message ? err.message : String(err));
      } finally {
        submitButton.disabled = false;
      }
    })();
  });
})();
</script>
</body>
</html>`;
}
