likwid/frontend/src/pages/setup.astro

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

// Check if setup is needed
let setupRequired = true;
let instanceName = null;

try {
  const res = await fetch('http://127.0.0.1:3000/api/settings/setup/status');
  if (res.ok) {
    const data = await res.json();
    setupRequired = data.setup_required;
    instanceName = data.instance_name;
  }
} catch (e) {
  // Backend not available, assume setup needed
}

// Redirect if setup already complete
if (!setupRequired) {
  return Astro.redirect('/');
}
---

<Layout title="Setup - Likwid">
  <div class="setup-container">
    <div class="setup-card">
      <div class="setup-header">
        <h1>Welcome to Likwid</h1>
        <p>Let's configure your governance platform</p>
      </div>

      <form id="setup-form" class="setup-form">
        <!-- Step 1: Instance Identity -->
        <section class="setup-section" data-step="1">
          <h2>Instance Identity</h2>
          
          <div class="form-group">
            <label for="instance_name">Platform Name</label>
            <input type="text" id="instance_name" name="instance_name" required
                   placeholder="My Community Platform" />
            <span class="hint">This name will appear in the header and emails</span>
          </div>
        </section>

        <!-- Step 2: Platform Mode -->
        <section class="setup-section" data-step="2">
          <h2>Platform Mode</h2>
          <p class="section-desc">How should communities be created on this platform?</p>
          
          <div class="mode-options">
            <label class="mode-option">
              <input type="radio" name="platform_mode" value="open" checked />
              <div class="mode-card">
                <strong>Open</strong>
                <p>Any registered user can create communities</p>
              </div>
            </label>
            
            <label class="mode-option">
              <input type="radio" name="platform_mode" value="approval" />
              <div class="mode-card">
                <strong>Approval Required</strong>
                <p>Users can request to create communities, admins approve</p>
              </div>
            </label>
            
            <label class="mode-option">
              <input type="radio" name="platform_mode" value="admin_only" />
              <div class="mode-card">
                <strong>Admin Only</strong>
                <p>Only administrators can create communities</p>
              </div>
            </label>
            
            <label class="mode-option">
              <input type="radio" name="platform_mode" value="single_community" />
              <div class="mode-card">
                <strong>Single Community</strong>
                <p>Platform dedicated to one community</p>
              </div>
            </label>
          </div>

          <div id="single-community-name" class="form-group" style="display: none;">
            <label for="single_community_name">Community Name</label>
            <input type="text" id="single_community_name" name="single_community_name"
                   placeholder="My Community" />
          </div>
        </section>

        <!-- Admin Login Notice -->
        <section class="setup-section" data-step="3">
          <h2>Admin Account</h2>
          <p class="section-desc">
            You need to be logged in as an admin to complete setup.
            The first user registered becomes the admin.
          </p>
          
          <div id="auth-status" class="auth-status">
            <p>Checking authentication...</p>
          </div>
        </section>

        <div class="form-actions">
          <button type="submit" id="submit-btn" disabled>Complete Setup</button>
        </div>
      </form>
    </div>
  </div>
</Layout>

<style>
  .setup-container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  }

  .setup-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    max-width: 600px;
    width: 100%;
    overflow: hidden;
  }

  .setup-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 2rem;
    text-align: center;
  }

  .setup-header h1 {
    margin: 0 0 0.5rem 0;
    font-size: 1.75rem;
  }

  .setup-header p {
    margin: 0;
    opacity: 0.9;
  }

  .setup-form {
    padding: 2rem;
  }

  .setup-section {
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid #eee;
  }

  .setup-section:last-of-type {
    border-bottom: none;
  }

  .setup-section h2 {
    font-size: 1.25rem;
    margin: 0 0 0.5rem 0;
    color: #333;
  }

  .section-desc {
    color: #666;
    margin: 0 0 1rem 0;
  }

  .form-group {
    margin-bottom: 1rem;
  }

  .form-group label {
    display: block;
    font-weight: 500;
    margin-bottom: 0.5rem;
    color: #333;
  }

  .form-group input[type="text"] {
    width: 100%;
    padding: 0.75rem;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 1rem;
    transition: border-color 0.2s;
  }

  .form-group input[type="text"]:focus {
    outline: none;
    border-color: #667eea;
  }

  .hint {
    display: block;
    font-size: 0.85rem;
    color: #888;
    margin-top: 0.25rem;
  }

  .mode-options {
    display: grid;
    gap: 1rem;
  }

  .mode-option {
    cursor: pointer;
  }

  .mode-option input {
    display: none;
  }

  .mode-card {
    padding: 1rem;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    transition: all 0.2s;
  }

  .mode-option input:checked + .mode-card {
    border-color: #667eea;
    background: #f8f9ff;
  }

  .mode-card strong {
    display: block;
    color: #333;
  }

  .mode-card p {
    margin: 0.25rem 0 0 0;
    font-size: 0.9rem;
    color: #666;
  }

  .auth-status {
    padding: 1rem;
    border-radius: 8px;
    background: #f5f5f5;
  }

  .auth-status.success {
    background: #e8f5e9;
    color: #2e7d32;
  }

  .auth-status.error {
    background: #ffebee;
    color: #c62828;
  }

  .form-actions {
    margin-top: 2rem;
  }

  .form-actions button {
    width: 100%;
    padding: 1rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.2s;
  }

  .form-actions button:hover:not(:disabled) {
    opacity: 0.9;
    transform: translateY(-1px);
  }

  .form-actions button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
</style>

<script>
  const form = document.getElementById('setup-form');
  const submitBtn = document.getElementById('submit-btn');
  const authStatus = document.getElementById('auth-status');
  const singleCommunityName = document.getElementById('single-community-name');
  const platformModeInputs = document.querySelectorAll('input[name="platform_mode"]');

  // Show/hide single community name field
  platformModeInputs.forEach(input => {
    input.addEventListener('change', (e) => {
      const target = e.target;
      singleCommunityName.style.display = target.value === 'single_community' ? 'block' : 'none';
    });
  });

  // Check auth status
  async function checkAuth() {
    const token = localStorage.getItem('token');
    if (!token) {
      authStatus.className = 'auth-status error';
      authStatus.innerHTML = `
        <p>You need to log in first. <a href="/login">Go to login</a></p>
        <p>If you haven't registered yet, <a href="/register">register first</a> (first user becomes admin).</p>
      `;
      return false;
    }

    try {
      const res = await fetch('http://127.0.0.1:3000/api/users/me', {
        headers: { 'Authorization': `Bearer ${token}` }
      });
      
      if (!res.ok) {
        throw new Error('Invalid token');
      }

      const user = await res.json();
      
      // Check if user is admin
      const adminRes = await fetch(`http://127.0.0.1:3000/api/settings/instance`, {
        headers: { 'Authorization': `Bearer ${token}` }
      });
      
      if (adminRes.status === 403) {
        authStatus.className = 'auth-status error';
        authStatus.innerHTML = `<p>You are logged in as ${user.username}, but you need admin privileges.</p>`;
        return false;
      }

      authStatus.className = 'auth-status success';
      authStatus.innerHTML = `<p>Logged in as <strong>${user.username}</strong> (admin)</p>`;
      submitBtn.disabled = false;
      return true;
    } catch (e) {
      authStatus.className = 'auth-status error';
      authStatus.innerHTML = `
        <p>Session expired. <a href="/login">Please log in again</a></p>
      `;
      return false;
    }
  }

  checkAuth();

  // Form submission
  form.addEventListener('submit', async (e) => {
    e.preventDefault();
    
    const token = localStorage.getItem('token');
    if (!token) {
      alert('Please log in first');
      return;
    }

    const formData = new FormData(form);
    const data = {
      instance_name: formData.get('instance_name'),
      platform_mode: formData.get('platform_mode'),
      single_community_name: formData.get('single_community_name') || undefined
    };

    submitBtn.disabled = true;
    submitBtn.textContent = 'Setting up...';

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

      if (!res.ok) {
        const error = await res.text();
        throw new Error(error);
      }

      // Success - redirect to home
      window.location.href = '/';
    } catch (err) {
      alert('Setup failed: ' + err.message);
      submitBtn.disabled = false;
      submitBtn.textContent = 'Complete Setup';
    }
  });
</script>