---
export const prerender = false;
import Layout from '../../layouts/Layout.astro';
import AdminNav from '../../components/AdminNav.astro';
import { API_BASE as apiBase } from '../../lib/api';
---

<Layout title="Admin Settings - Likwid">
  <div class="admin-container">
    <AdminNav currentPage="/admin/settings" />

    <main class="admin-content">
      <header class="ui-page-header">
        <div class="ui-page-title">
          <h1>Instance Settings</h1>
          <p class="ui-subtitle">Configure global platform settings</p>
        </div>
      </header>

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

      <form id="settings-form" class="ui-form" style="display: none;">
        <!-- General Settings -->
        <section class="settings-section ui-card ui-card-soft ui-card-pad-md">
          <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 ui-card ui-card-soft ui-card-pad-md">
          <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 ui-card ui-card-soft ui-card-pad-md">
          <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 ui-card ui-card-soft ui-card-pad-md">
          <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" class="ui-btn ui-btn-primary">Save Settings</button>
          <span id="save-status"></span>
        </div>
      </form>
    </main>
  </div>
</Layout>

<style>
  .admin-container {
    display: flex;
    min-height: calc(100vh - 60px);
  }

  .admin-content {
    flex: 1;
    padding: 2rem;
  }

  .settings-section {
    border-radius: 8px;
    margin-bottom: 1.5rem;
  }

  .settings-section h2 {
    margin: 0 0 1rem 0;
    font-size: 1.1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--color-border);
  }

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

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

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

  .form-group input[type="text"],
  .form-group select {
    width: 100%;
    max-width: 400px;
    padding: 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    font-size: 1rem;
    background: var(--color-bg);
    color: var(--color-text);
  }

  .form-group input:focus,
  .form-group select:focus {
    outline: none;
    border-color: var(--color-primary);
  }

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

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

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

  #save-status {
    color: var(--color-success);
    font-weight: 500;
  }

  .error-box {
    background: color-mix(in srgb, var(--color-error) 18%, transparent);
    color: var(--color-error);
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
  }

  #loading {
    color: var(--color-text-muted);
    padding: 2rem;
    text-align: center;
  }
</style>

<script define:vars={{ apiBase }}>
  (function() {
    const API_BASE = apiBase;
    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');

    if (!form || !loadingEl || !errorEl || !saveStatus) return;

  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;

    if (saveBtn) 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 {
      if (saveBtn) saveBtn.disabled = false;
    }
  });

  loadSettings();
  })();
</script>