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

<Layout title="Admin Settings - Likwid">
  <div class="admin-container">
    <aside class="admin-sidebar">
      <h2>Admin</h2>
      <nav>
        <a href="/admin/settings" class="active">Instance Settings</a>
        <a href="/admin/users">Users</a>
        <a href="/admin/communities">Communities</a>
      </nav>
    </aside>

    <main class="admin-main">
      <header class="admin-header">
        <h1>Instance Settings</h1>
        <p>Configure global platform settings</p>
      </header>

      <div id="loading">Loading settings...</div>
      <div id="error" class="error-box" style="display: none;"></div>

      <form id="settings-form" style="display: none;">
        <!-- General Settings -->
        <section class="settings-section">
          <h2>General</h2>
          
          <div class="form-group">
            <label for="instance_name">Platform Name</label>
            <input type="text" id="instance_name" name="instance_name" />
          </div>
        </section>

        <!-- Platform Mode -->
        <section class="settings-section">
          <h2>Community Creation</h2>
          
          <div class="form-group">
            <label for="platform_mode">Platform Mode</label>
            <select id="platform_mode" name="platform_mode">
              <option value="open">Open - Anyone can create communities</option>
              <option value="approval">Approval - Requests require admin approval</option>
              <option value="admin_only">Admin Only - Only admins can create</option>
              <option value="single_community">Single Community - Dedicated platform</option>
            </select>
          </div>
        </section>

        <!-- Registration -->
        <section class="settings-section">
          <h2>Registration</h2>
          
          <div class="form-group">
            <label class="checkbox-label">
              <input type="checkbox" id="registration_enabled" name="registration_enabled" />
              <span>Enable user registration</span>
            </label>
          </div>

          <div class="form-group">
            <label for="registration_mode">Registration Mode</label>
            <select id="registration_mode" name="registration_mode">
              <option value="open">Open - Anyone can register</option>
              <option value="invite_only">Invite Only - Requires invitation</option>
              <option value="approval">Approval - Requires admin approval</option>
            </select>
          </div>
        </section>

        <!-- Defaults -->
        <section class="settings-section">
          <h2>Defaults</h2>
          
          <div class="form-group">
            <label for="default_community_visibility">Default Community Visibility</label>
            <select id="default_community_visibility" name="default_community_visibility" disabled>
              <option value="public">Public</option>
              <option value="unlisted">Unlisted</option>
              <option value="private">Private</option>
            </select>
          </div>

          <div class="form-group">
            <label for="default_plugin_policy">Default Plugin Policy</label>
            <select id="default_plugin_policy" name="default_plugin_policy" disabled>
              <option value="permissive">Permissive - All plugins allowed</option>
              <option value="curated">Curated - Only approved plugins</option>
              <option value="strict">Strict - Signed plugins only</option>
            </select>
          </div>

          <div class="form-group">
            <label for="default_moderation_mode">Default Moderation Mode</label>
            <select id="default_moderation_mode" name="default_moderation_mode" disabled>
              <option value="community">Community - Self-moderation</option>
              <option value="centralized">Centralized - Admin moderation</option>
              <option value="hybrid">Hybrid - Mixed approach</option>
            </select>
          </div>
        </section>

        <div class="form-actions">
          <button type="submit" id="save-btn">Save Settings</button>
          <span id="save-status"></span>
        </div>
      </form>
    </main>
  </div>
</Layout>

<style>
  .admin-container {
    display: flex;
    min-height: 100vh;
  }

  .admin-sidebar {
    width: 240px;
    background: #1a1a2e;
    color: white;
    padding: 1.5rem;
    flex-shrink: 0;
  }

  .admin-sidebar h2 {
    margin: 0 0 1.5rem 0;
    font-size: 1.25rem;
    color: #667eea;
  }

  .admin-sidebar nav {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .admin-sidebar a {
    color: #aaa;
    text-decoration: none;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    transition: all 0.2s;
  }

  .admin-sidebar a:hover {
    background: rgba(255,255,255,0.1);
    color: white;
  }

  .admin-sidebar a.active {
    background: #667eea;
    color: white;
  }

  .admin-main {
    flex: 1;
    padding: 2rem;
    background: #f5f5f5;
  }

  .admin-header {
    margin-bottom: 2rem;
  }

  .admin-header h1 {
    margin: 0;
    color: #333;
  }

  .admin-header p {
    margin: 0.5rem 0 0 0;
    color: #666;
  }

  .settings-section {
    background: white;
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  }

  .settings-section h2 {
    margin: 0 0 1rem 0;
    font-size: 1.1rem;
    color: #333;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #eee;
  }

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

  .form-group:last-child {
    margin-bottom: 0;
  }

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

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

  .form-group input:focus,
  .form-group select:focus {
    outline: none;
    border-color: #667eea;
  }

  .checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-weight: normal !important;
  }

  .checkbox-label input {
    width: 18px;
    height: 18px;
  }

  .form-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1rem;
  }

  .form-actions button {
    padding: 0.75rem 2rem;
    background: #667eea;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s;
  }

  .form-actions button:hover {
    opacity: 0.9;
  }

  .form-actions button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  #save-status {
    color: #2e7d32;
    font-weight: 500;
  }

  .error-box {
    background: #ffebee;
    color: #c62828;
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
  }

  #loading {
    color: #666;
    padding: 2rem;
    text-align: center;
  }
</style>

<script>
  const API_BASE = 'http://127.0.0.1:3000';
  const form = document.getElementById('settings-form');
  const loadingEl = document.getElementById('loading')!;
  const errorEl = document.getElementById('error')!;
  const saveBtn = document.getElementById('save-btn');
  const saveStatus = document.getElementById('save-status')!;

  async function loadSettings() {
    const token = localStorage.getItem('token');
    if (!token) {
      window.location.href = '/login';
      return;
    }

    try {
      const res = await fetch(`${API_BASE}/api/settings/instance`, {
        headers: { 'Authorization': `Bearer ${token}` }
      });

      if (res.status === 401) {
        window.location.href = '/login';
        return;
      }

      if (res.status === 403) {
        errorEl.textContent = 'Admin access required';
        errorEl.style.display = 'block';
        loadingEl.style.display = 'none';
        return;
      }

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

      const settings = await res.json();
      
      // Populate form
      (document.getElementById('instance_name')).value = settings.instance_name;
      (document.getElementById('platform_mode')).value = settings.platform_mode;
      (document.getElementById('registration_enabled')).checked = settings.registration_enabled;
      (document.getElementById('registration_mode')).value = settings.registration_mode;
      (document.getElementById('default_community_visibility')).value = settings.default_community_visibility;
      (document.getElementById('default_plugin_policy')).value = settings.default_plugin_policy;
      (document.getElementById('default_moderation_mode')).value = settings.default_moderation_mode;

      loadingEl.style.display = 'none';
      form.style.display = 'block';
    } catch (err) {
      errorEl.textContent = 'Failed to load settings: ' + err.message;
      errorEl.style.display = 'block';
      loadingEl.style.display = 'none';
    }
  }

  form.addEventListener('submit', async (e) => {
    e.preventDefault();
    
    const token = localStorage.getItem('token');
    if (!token) return;

    saveBtn.disabled = true;
    saveStatus.textContent = 'Saving...';

    const data = {
      instance_name: (document.getElementById('instance_name')).value,
      platform_mode: (document.getElementById('platform_mode')).value,
      registration_enabled: (document.getElementById('registration_enabled')).checked,
      registration_mode: (document.getElementById('registration_mode')).value
    };

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

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

      saveStatus.textContent = 'Saved!';
      setTimeout(() => { saveStatus.textContent = ''; }, 3000);
    } catch (err) {
      saveStatus.textContent = 'Error: ' + err.message;
      saveStatus.style.color = '#c62828';
    } finally {
      saveBtn.disabled = false;
    }
  });

  loadSettings();
</script>