---
import Base from '../layouts/Base.astro';

const extSlug = Astro.url.searchParams.get('ext') || '';
---

<Base title="Feedback — Greasy Sprocket">
  <section class="hero">
    <div class="container">
      <h1>Tell us why you left</h1>
      <p>Your feedback helps us improve. No email required, no account needed.</p>
    </div>
  </section>

  <section class="section">
    <div class="container">
      <div id="feedback-form" class="feedback-form">
        <form id="uninstall-feedback">
          <input type="hidden" name="ext" value={extSlug} />
          
          <div class="form-group">
            <label for="reason">Why did you uninstall? <span style="color:var(--text-muted)">(optional)</span></label>
            <select name="reason" id="reason">
              <option value="">Select a reason...</option>
              <option value="not-needed">Didn't need it</option>
              <option value="too-many">Too many extensions</option>
              <option value="bugs">Bugs or issues</option>
              <option value="alternative">Prefer an alternative</option>
              <option value="other">Other</option>
            </select>
          </div>

          <div class="form-group">
            <label for="text">Anything else? <span style="color:var(--text-muted)">(optional)</span></label>
            <textarea name="text" id="text" placeholder="Tell us more..." maxlength="500"></textarea>
          </div>

          <div class="form-actions">
            <a href="/" class="btn btn-outline">No thanks</a>
            <button type="submit" class="btn btn-primary">Send feedback</button>
          </div>
        </form>
      </div>

      <div id="feedback-success" class="form-success" hidden>
        <h2>✅ Thanks for your feedback!</h2>
        <p>We appreciate you taking the time. All our extensions are free — feel free to come back anytime.</p>
        <a href="/" class="btn btn-outline" style="margin-top:24px">Back to home</a>
      </div>
    </div>
  </section>

  <script is:inline>
    document.getElementById('uninstall-feedback').addEventListener('submit', async (e) => {
      e.preventDefault();
      const form = e.target;
      const data = new FormData(form);
      const payload = {
        ext: data.get('ext') || '',
        reason: data.get('reason') || '',
        text: data.get('text') || '',
      };
      try {
        await fetch('/feedback', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify(payload),
        });
      } catch (err) {
        // Silent fail — feedback is best-effort
      }
      document.getElementById('feedback-form').hidden = true;
      document.getElementById('feedback-success').hidden = false;
    });
  </script>
</Base>