{% extends "base.html" %}
{% block title %}Settings — Transcribe Studio{% endblock %}

{% block page_header %}
<h1 class="page-title">Settings</h1>
<p class="page-subtitle">Connect your own Supabase project for cloud backup and future sync</p>
{% endblock %}

{% block content %}
<section class="card form-card">
  <h2>Supabase</h2>
  <p class="field-hint" style="margin-bottom:16px">
    Paste credentials from your
    <a href="https://supabase.com/dashboard" target="_blank" rel="noopener">Supabase dashboard</a>
    → Project Settings → API. Stored locally on this server.
  </p>

  <form id="supabase-form" class="stack-form">
    <label class="field">
      <span>Project URL</span>
      <input type="url" name="supabase_url" id="supabase_url"
             value="{{ supabase.supabase_url }}"
             placeholder="https://xxxx.supabase.co">
    </label>
    <label class="field">
      <span>Anon (public) key</span>
      <input type="password" name="supabase_anon_key" id="supabase_anon_key"
             placeholder="{% if supabase.supabase_anon_key_set %}•••••••• (saved — leave blank to keep){% else %}eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9…{% endif %}"
             autocomplete="off">
      {% if supabase.supabase_anon_key_hint %}
      <span class="field-hint">Current key starts with {{ supabase.supabase_anon_key_hint }}</span>
      {% endif %}
    </label>
    <label class="field">
      <span>Database URL <span class="optional">(optional)</span></span>
      <input type="password" name="supabase_db_url" id="supabase_db_url"
             placeholder="postgresql://postgres:…@db.xxxx.supabase.co:5432/postgres">
      <span class="field-hint">For future Postgres sync — not required for REST connection test</span>
    </label>

    <div class="form-actions">
      <button type="button" id="btn-test-supabase" class="btn btn-ghost">Test connection</button>
      <button type="submit" class="btn btn-primary">Save</button>
    </div>
    <p id="settings-status" class="status-msg" hidden></p>
  </form>
</section>

{% if supabase.configured %}
<div class="hint-card">
  <strong>Status</strong>
  <p>Supabase configured for <code>{{ supabase.supabase_url }}</code></p>
</div>
{% endif %}
{% endblock %}

{% block scripts %}
<script>
const form = document.getElementById('supabase-form');
const status = document.getElementById('settings-status');

function bodyFromForm() {
  return {
    supabase_url: form.supabase_url.value.trim(),
    supabase_anon_key: form.supabase_anon_key.value.trim(),
    supabase_db_url: form.supabase_db_url.value.trim(),
  };
}

function showStatus(msg, isError) {
  status.hidden = false;
  status.textContent = msg;
  status.className = isError ? 'status-msg error' : 'status-msg';
}

document.getElementById('btn-test-supabase').addEventListener('click', async () => {
  showStatus('Testing…', false);
  try {
    const res = await fetch('/api/settings/supabase/test', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(bodyFromForm()),
    });
    const data = await res.json().catch(() => ({}));
    if (!res.ok) throw new Error(data.detail || 'Test failed');
    showStatus(data.message || 'Connected', false);
  } catch (e) {
    showStatus(e.message, true);
  }
});

form.addEventListener('submit', async (e) => {
  e.preventDefault();
  showStatus('Saving…', false);
  try {
    const res = await fetch('/api/settings/supabase', {
      method: 'PATCH',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(bodyFromForm()),
    });
    const data = await res.json().catch(() => ({}));
    if (!res.ok) throw new Error(data.detail || 'Save failed');
    showStatus('Saved', false);
    setTimeout(() => window.location.reload(), 600);
  } catch (e) {
    showStatus(e.message, true);
  }
});
</script>
{% endblock %}