{% extends "base.html" %}

{% block title %}Sign In - ThinkStorm{% endblock %}

{% block content %}
<div style="max-width:440px; margin:3rem auto;">
  <div class="glass-card" style="padding:2.5rem;">
    <div style="text-align:center; margin-bottom:2rem;">
      <div style="font-size:2.5rem; margin-bottom:0.5rem;">⚡</div>
      <h1 style="font-size:1.8rem; margin-bottom:0.4rem;">Sign in to ThinkStorm</h1>
      <p style="color:var(--text-secondary); font-size:0.9rem;">Authenticate to claim ideas and manage work tracks.</p>
    </div>

    <!-- Gitea SSO -->
    <div style="margin-bottom:1.75rem;">
      <button onclick="loginWithGitea()" class="btn btn-primary" style="width:100%; display:flex; justify-content:center; gap:0.75rem; background:linear-gradient(135deg, #609926 0%, #48721c 100%);">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.53 1.032 1.53 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"/></svg>
        <span>Sign in with Gitea</span>
      </button>
    </div>

    <div style="display:flex; align-items:center; gap:1rem; margin-bottom:1.75rem; color:var(--text-muted); font-size:0.85rem;">
      <div style="flex:1; height:1px; background:var(--border-glass);"></div>
      <span>OR LOCAL LOGIN</span>
      <div style="flex:1; height:1px; background:var(--border-glass);"></div>
    </div>

    <!-- Local Login Form -->
    <form id="local-login-form">
      <div class="form-group">
        <label class="form-label" for="login-username">Username</label>
        <input type="text" id="login-username" class="form-input" placeholder="admin or researcher" required>
      </div>

      <div class="form-group">
        <label class="form-label" for="login-password">Password</label>
        <input type="password" id="login-password" class="form-input" placeholder="••••••••" required>
      </div>

      <button type="submit" class="btn btn-secondary" style="width:100%; margin-top:0.5rem;">
        Sign In
      </button>
    </form>
  </div>
</div>

<script>
async function loginWithGitea() {
  try {
    const res = await fetch('/api/auth/gitea/url');
    const data = await res.json();
    window.location.href = data.auth_url;
  } catch (err) {
    showToast('Failed to get Gitea auth URL', 'danger');
  }
}

document.getElementById('local-login-form').addEventListener('submit', async (e) => {
  e.preventDefault();
  const username = document.getElementById('login-username').value.trim();
  const password = document.getElementById('login-password').value;

  try {
    const res = await fetch('/api/auth/login', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ username, password })
    });
    const data = await res.json();
    if (!res.ok) throw new Error(data.detail || 'Login failed');
    showToast('Signed in successfully!', 'success');
    setTimeout(() => window.location.href = '/', 600);
  } catch (err) {
    showToast(err.message, 'danger');
  }
});
</script>
{% endblock %}