{% extends "base.html" %}
{% load static %}

{% block title %}로그인 · H2-Flex AX{% endblock %}

{% block head_extra %}
<style>
  .login-shell {
    min-height: 100vh;
    display: grid;
    place-items: center;
    background: linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
    padding: 2rem 1rem;
  }
  :root[data-theme='dark'] .login-shell {
    background: linear-gradient(180deg, #020617 0%, #0f172a 100%);
  }
  .login-card {
    width: 100%;
    max-width: 420px;
    padding: 2.5rem;
    background: white;
    border-radius: 18px;
    box-shadow: 0 18px 48px rgba(15, 23, 42, 0.08), 0 0 0 1px rgba(15, 23, 42, 0.04);
  }
  :root[data-theme='dark'] .login-card {
    background: #0f172a;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.06);
  }
  .login-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    color: #0a2540;
  }
  :root[data-theme='dark'] .login-brand { color: #e0e7ff; }
  .login-brand__logo {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: linear-gradient(135deg, #3b82f6, #00d4aa);
    display: grid;
    place-items: center;
    color: white;
  }
  .login-title {
    font-size: 1.5rem;
    font-weight: 800;
    margin: 0;
    color: #0a2540;
  }
  :root[data-theme='dark'] .login-title { color: #e0e7ff; }
  .login-tagline {
    margin: 0 0 1.75rem;
    font-size: 0.85rem;
    color: #64748b;
  }
  .login-field { display: block; margin-bottom: 1rem; }
  .login-field__label {
    display: block;
    margin-bottom: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #475569;
    letter-spacing: 0.02em;
  }
  :root[data-theme='dark'] .login-field__label { color: #94a3b8; }
  .login-field__input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    font-size: 0.9rem;
    background: white;
    color: #1e293b;
    transition: border-color 0.15s, box-shadow 0.15s;
  }
  .login-field__input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18);
  }
  :root[data-theme='dark'] .login-field__input {
    background: #1e293b;
    border-color: #334155;
    color: #f1f5f9;
  }
  .login-submit {
    width: 100%;
    padding: 11px;
    border: none;
    border-radius: 10px;
    background: #0a2540;
    color: white;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s;
  }
  .login-submit:hover { background: #0f3358; }
  .login-helper {
    margin-top: 1.25rem;
    text-align: center;
    font-size: 0.75rem;
    color: #94a3b8;
  }
  .login-footer {
    margin-top: 1.75rem;
    padding-top: 1.25rem;
    border-top: 1px dashed #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 0.7rem;
    color: #94a3b8;
  }
  :root[data-theme='dark'] .login-footer { border-top-color: #334155; color: #64748b; }
  .login-error {
    margin: 0 0 1rem;
    padding: 10px 12px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 10px;
    font-size: 0.8rem;
    color: #991b1b;
  }
</style>
{% endblock %}

{% block content %}
<main class="login-shell">
  <div class="login-card" x-data>
    <div class="login-brand">
      <span class="login-brand__logo">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
          <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon>
        </svg>
      </span>
      <h1 class="login-title">H2-Flex <span style="color:#00d4aa;">AX</span></h1>
    </div>
    <p class="login-tagline">AI-Driven Hydrogen Network · 정책 실행 AI 도구</p>

    <form id="loginForm" novalidate>
      {% csrf_token %}
      <p class="login-error" id="loginError" hidden></p>

      <label class="login-field">
        <span class="login-field__label">사용자 이름</span>
        <input class="login-field__input" type="text" name="username" autocomplete="username" required>
      </label>

      <label class="login-field">
        <span class="login-field__label">비밀번호</span>
        <input class="login-field__input" type="password" name="password" autocomplete="current-password" required>
      </label>

      <button class="login-submit" type="submit">로그인</button>
    </form>

    <p class="login-helper">관리자 계정은 시스템 관리자에게 문의하세요.</p>

    <div class="login-footer" style="flex-direction: column; align-items: flex-start; gap: 8px;">
      <div style="line-height: 1.5;">
        이 시스템은 현재 <strong>{{ deployment.label }}</strong> 단계로 운영 중입니다.<br>
        <span style="opacity: 0.8;">ux가 최적화 안되어 있어서요. · {{ deployment.trust }}</span>
      </div>
      {% include "partials/deployment/tier_badge.html" %}
    </div>
  </div>
</main>
{% endblock %}

{% block scripts_extra %}
<script>
  (function() {
    const form = document.getElementById('loginForm');
    const errorEl = document.getElementById('loginError');
    if (!form) return;
    form.addEventListener('submit', async (e) => {
      e.preventDefault();
      errorEl.hidden = true;
      const fd = new FormData(form);
      try {
        const res = await fetch('/api/v1/auth/token/', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({
            username: fd.get('username'),
            password: fd.get('password'),
          })
        });
        const data = await res.json();
        if (!res.ok) {
          errorEl.textContent = data.detail || '로그인에 실패했습니다.';
          errorEl.hidden = false;
          return;
        }
        try {
          localStorage.setItem('h2flex_access', data.access);
          localStorage.setItem('h2flex_refresh', data.refresh);
        } catch (_) {}
        window.location.href = '/dashboard/policy/';
      } catch (err) {
        errorEl.textContent = '네트워크 오류 — 잠시 후 다시 시도해 주세요.';
        errorEl.hidden = false;
      }
    });
  })();
</script>
{% endblock %}