{% extends "base.html" %}

{% block title %}Entrar no NaRégua · Acesso da Barbearia{% endblock %}

{% block content %}
<div class="min-h-screen bg-dark-bg flex flex-col justify-center items-center p-4 sm:p-6 relative selection:bg-brand selection:text-black">
  
  <!-- Fundo sutil com gradiente -->
  <div class="absolute inset-0 bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-amber-950/20 via-dark-bg to-dark-bg pointer-events-none"></div>

  <div class="w-full max-w-md relative z-10 space-y-6">
    
    <!-- Topo / Logo -->
    <div class="text-center space-y-2">
      <a href="/" class="inline-flex items-center gap-2.5 group">
        <div class="w-11 h-11 rounded-2xl bg-gradient-to-tr from-brand-600 to-amber-500 text-black flex items-center justify-center font-black shadow-xl shadow-brand/20 group-hover:scale-105 transition-transform">
          <i data-lucide="scissors" class="w-6 h-6"></i>
        </div>
        <span class="font-black text-2xl text-white tracking-tight flex items-center gap-0.5">
          Na<span class="text-brand">Régua</span>
        </span>
      </a>
      <h1 class="text-xl font-extrabold text-white tracking-tight mt-2">Acesso do Profissional</h1>
      <p class="text-xs text-stone-400">Entre com o email e senha da sua barbearia</p>
    </div>

    <!-- Card de Login -->
    <div class="p-6 sm:p-8 rounded-3xl bg-dark-card border border-dark-border shadow-2xl space-y-5">
      
      <form onsubmit="event.preventDefault(); submitLogin();" class="space-y-4 text-xs" id="login-form">
        
        <div id="login-error" class="hidden p-3 rounded-xl bg-red-950/50 border border-red-500/30 text-red-300 text-xs flex items-center gap-2">
          <i data-lucide="alert-circle" class="w-4 h-4 flex-shrink-0 text-red-400"></i>
          <span id="login-error-msg">Credenciais inválidas.</span>
        </div>

        <div>
          <label class="block font-semibold text-stone-300 mb-1.5">Email ou WhatsApp da Barbearia</label>
          <div class="relative">
            <input type="text" id="login_identifier" required placeholder="email@suabarbearia.com ou 11988887777"
                   class="w-full px-4 py-3 rounded-xl bg-dark-bg border border-dark-border focus:border-brand focus:ring-1 focus:ring-brand outline-none text-white text-sm placeholder-stone-600 transition-all pl-10">
            <i data-lucide="mail" class="w-4 h-4 text-stone-500 absolute left-3.5 top-3.5"></i>
          </div>
        </div>

        <div>
          <div class="flex items-center justify-between mb-1.5">
            <label class="font-semibold text-stone-300">Senha de Acesso</label>
            <a href="javascript:void(0)" onclick="alert('Para redefinir sua senha, solicite suporte pelo WhatsApp.')" class="text-[11px] text-brand hover:underline font-medium">Esqueceu?</a>
          </div>
          <div class="relative">
            <input type="password" id="login_password" required placeholder="••••••••"
                   class="w-full px-4 py-3 rounded-xl bg-dark-bg border border-dark-border focus:border-brand focus:ring-1 focus:ring-brand outline-none text-white text-sm placeholder-stone-600 transition-all pl-10">
            <i data-lucide="lock" class="w-4 h-4 text-stone-500 absolute left-3.5 top-3.5"></i>
          </div>
        </div>

        <button type="submit" id="btn-login" class="w-full py-3.5 px-4 rounded-xl bg-brand hover:bg-brand-400 text-black font-black text-sm transition-all shadow-lg shadow-brand/20 active:scale-95 flex items-center justify-center gap-2 mt-2">
          <span>Entrar no Sistema</span>
          <i data-lucide="arrow-right" class="w-4 h-4"></i>
        </button>

      </form>

      <!-- Divisória -->
      <div class="pt-2 border-t border-dark-border text-center space-y-3">
        <p class="text-xs text-stone-400">
          Ainda não tem conta na sua barbearia?
        </p>
        <a href="/cadastro" class="inline-flex items-center gap-1.5 text-xs font-bold text-brand hover:underline">
          <span>Criar barbearia e testar grátis por 7 dias</span>
          <i data-lucide="chevron-right" class="w-3.5 h-3.5"></i>
        </a>
      </div>

    </div>

  </div>

</div>
{% endblock %}

{% block scripts %}
<script>
  async function submitLogin() {
    const identifier = document.getElementById('login_identifier').value.trim();
    const password = document.getElementById('login_password').value.trim();
    const btn = document.getElementById('btn-login');
    const errBox = document.getElementById('login-error');
    const errMsg = document.getElementById('login-error-msg');

    errBox.classList.add('hidden');
    btn.disabled = true;
    btn.innerHTML = '<i data-lucide="loader" class="w-4 h-4 animate-spin"></i> Entrando...';
    if (window.lucide) lucide.createIcons();

    try {
      const res = await fetch('/api/auth/login', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ identifier, password })
      });
      const data = await res.json();
      if (res.ok && data.success) {
        window.location.href = `/admin?shop_id=${data.shop_id}`;
      } else {
        errMsg.innerText = data.detail || "Email ou senha incorretos.";
        errBox.classList.remove('hidden');
        btn.disabled = false;
        btn.innerHTML = '<span>Entrar no Sistema</span><i data-lucide="arrow-right" class="w-4 h-4"></i>';
        if (window.lucide) lucide.createIcons();
      }
    } catch (e) {
      console.error(e);
      errMsg.innerText = "Erro ao conectar com o servidor.";
      errBox.classList.remove('hidden');
      btn.disabled = false;
      btn.innerHTML = '<span>Entrar no Sistema</span><i data-lucide="arrow-right" class="w-4 h-4"></i>';
      if (window.lucide) lucide.createIcons();
    }
  }
</script>
{% endblock %}