---
import Layout from '../../layouts/Layout.astro';
import { API_BASE as apiBase } from '../../lib/api';
---

<Layout title="Create Community">
  <section class="create-page">
    <div class="create-card ui-card ui-card-pad-xl">
      <h1>Create Community</h1>
      <form id="create-form" class="ui-form" style="--ui-form-group-mb: 1rem;">
        <div class="form-group">
          <label for="name">Community Name</label>
          <input type="text" id="name" name="name" required />
        </div>
        <div class="form-group">
          <label for="slug">URL Slug</label>
          <input type="text" id="slug" name="slug" required pattern="[a-z0-9-]+" />
          <small class="help-text">Lowercase letters, numbers, and hyphens only</small>
        </div>
        <div class="form-group">
          <label for="description">Description (optional)</label>
          <textarea id="description" name="description" rows="3"></textarea>
        </div>
        <div id="error" class="error"></div>
        <button type="submit" class="ui-btn ui-btn-primary create-submit-btn">Create Community</button>
      </form>
    </div>
  </section>
</Layout>

<script define:vars={{ apiBase }}>
  // Check if user is logged in
  const token = localStorage.getItem('token');
  if (!token) {
    window.location.href = '/login';
  }

  const form = document.getElementById('create-form');
  const errorEl = document.getElementById('error');
  const nameInput = document.getElementById('name');
  const slugInput = document.getElementById('slug');

  // Auto-generate slug from name
  nameInput?.addEventListener('input', () => {
    const slug = nameInput.value
      .toLowerCase()
      .replace(/[^a-z0-9]+/g, '-')
      .replace(/^-|-$/g, '');
    slugInput.value = slug;
  });

  form?.addEventListener('submit', async (e) => {
    e.preventDefault();
    errorEl.textContent = '';

    const formData = new FormData(form);
    const data = {
      name: formData.get('name'),
      slug: formData.get('slug'),
      description: formData.get('description') || null,
    };

    try {
      const res = await fetch(`${apiBase}/api/communities`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'Authorization': `Bearer ${token}`,
        },
        body: JSON.stringify(data),
      });

      if (!res.ok) {
        const err = await res.text();
        errorEl.textContent = err || 'Failed to create community';
        return;
      }

      window.location.href = '/communities';
    } catch (err) {
      errorEl.textContent = 'Connection error. Is the backend running?';
    }
  });
</script>

<style>
  .create-page {
    display: flex;
    justify-content: center;
    padding: 2rem 0;
  }

  .create-card {
    border-radius: 12px;
    width: 100%;
    max-width: 500px;
  }

  h1 {
    margin-bottom: 1.5rem;
  }

  .create-submit-btn {
    width: 100%;
    margin-top: 1rem;
  }

  .error {
    color: var(--color-error);
    font-size: 0.875rem;
    min-height: 1.25rem;
  }
</style>