{% extends "base.html" %}

{% block title %}Criar Barbearia · Testar Grátis no NaRégua{% 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-lg relative z-10 space-y-6 my-8">
    
    <!-- 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-2xl font-black text-white tracking-tight mt-1">Crie sua barbearia em 1 minuto</h1>
      <p class="text-xs text-stone-400">Comece seu teste grátis de 7 dias sem precisar cadastrar cartão</p>
    </div>

    <!-- Card de Cadastro -->
    <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(); submitRegister();" class="space-y-4 text-xs" id="register-form">
        
        <div id="register-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="register-error-msg">Erro ao realizar cadastro.</span>
        </div>

        <!-- Seletor do Plano -->
        <div>
          <label class="block font-semibold text-stone-300 mb-2">Escolha o Plano Inicial (7 dias grátis):</label>
          <div class="grid grid-cols-3 gap-2">
            
            <label class="cursor-pointer">
              <input type="radio" name="plan_tier" value="basico" {% if selected_plan == 'basico' or not selected_plan %}checked{% endif %} class="peer sr-only">
              <div class="p-3 rounded-xl border border-dark-border peer-checked:border-brand peer-checked:bg-brand/10 text-center transition-all">
                <span class="block text-[11px] font-bold text-white peer-checked:text-brand">Básico</span>
                <span class="block text-[10px] text-stone-400 mt-0.5">R$ 49,90/mês</span>
                <span class="block text-[9px] text-stone-500 mt-0.5">1 Barbeiro</span>
              </div>
            </label>

            <label class="cursor-pointer">
              <input type="radio" name="plan_tier" value="intermediario" {% if selected_plan == 'intermediario' %}checked{% endif %} class="peer sr-only">
              <div class="p-3 rounded-xl border border-dark-border peer-checked:border-brand peer-checked:bg-brand/10 text-center transition-all relative">
                <span class="block text-[11px] font-bold text-white peer-checked:text-brand">Intermediário</span>
                <span class="block text-[10px] text-stone-400 mt-0.5">R$ 79,90/mês</span>
                <span class="block text-[9px] text-brand font-semibold mt-0.5">Até 5 Barbeiros</span>
              </div>
            </label>

            <label class="cursor-pointer">
              <input type="radio" name="plan_tier" value="profissional" {% if selected_plan == 'profissional' %}checked{% endif %} class="peer sr-only">
              <div class="p-3 rounded-xl border border-dark-border peer-checked:border-brand peer-checked:bg-brand/10 text-center transition-all">
                <span class="block text-[11px] font-bold text-white peer-checked:text-brand">Profissional</span>
                <span class="block text-[10px] text-stone-400 mt-0.5">R$ 119,90/mês</span>
                <span class="block text-[9px] text-stone-500 mt-0.5">Ilimitado</span>
              </div>
            </label>

          </div>
        </div>

        <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
          <div>
            <label class="block font-semibold text-stone-300 mb-1">Nome da Barbearia *</label>
            <input type="text" id="reg_name" required placeholder="Ex: Barbearia Elite" oninput="autoSlug(this.value)"
                   class="w-full px-3.5 py-2.5 rounded-xl bg-dark-bg border border-dark-border focus:border-brand focus:ring-1 focus:ring-brand outline-none text-white text-xs placeholder-stone-600 transition-all">
          </div>

          <div>
            <label class="block font-semibold text-stone-300 mb-1">Seu Nome (Proprietário) *</label>
            <input type="text" id="reg_owner" required placeholder="Ex: Marcos Silva"
                   class="w-full px-3.5 py-2.5 rounded-xl bg-dark-bg border border-dark-border focus:border-brand focus:ring-1 focus:ring-brand outline-none text-white text-xs placeholder-stone-600 transition-all">
          </div>
        </div>

        <div>
          <label class="block font-semibold text-stone-300 mb-1">Link do Cliente Desejado</label>
          <div class="flex items-center rounded-xl bg-dark-bg border border-dark-border focus-within:border-brand overflow-hidden">
            <span class="px-3 text-stone-500 text-[11px] font-mono select-none">naregua.com.br/b/</span>
            <input type="text" id="reg_slug" required placeholder="barbearia-elite"
                   class="w-full py-2.5 pr-3 bg-transparent outline-none text-white text-xs font-mono placeholder-stone-600">
          </div>
        </div>

        <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
          <div>
            <label class="block font-semibold text-stone-300 mb-1">Seu WhatsApp *</label>
            <input type="tel" id="reg_phone" required placeholder="11988887777"
                   class="w-full px-3.5 py-2.5 rounded-xl bg-dark-bg border border-dark-border focus:border-brand focus:ring-1 focus:ring-brand outline-none text-white text-xs placeholder-stone-600 transition-all">
          </div>

          <div>
            <label class="block font-semibold text-stone-300 mb-1">Seu E-mail *</label>
            <input type="email" id="reg_email" required placeholder="marcos@email.com"
                   class="w-full px-3.5 py-2.5 rounded-xl bg-dark-bg border border-dark-border focus:border-brand focus:ring-1 focus:ring-brand outline-none text-white text-xs placeholder-stone-600 transition-all">
          </div>
        </div>

        <div>
          <label class="block font-semibold text-stone-300 mb-1">Crie sua Senha de Acesso *</label>
          <input type="password" id="reg_password" required placeholder="Mínimo 4 caracteres"
                 class="w-full px-3.5 py-2.5 rounded-xl bg-dark-bg border border-dark-border focus:border-brand focus:ring-1 focus:ring-brand outline-none text-white text-xs placeholder-stone-600 transition-all">
        </div>

        <button type="submit" id="btn-register" 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-3">
          <span>Criar Barbearia & Acessar Painel</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-2">
        <p class="text-xs text-stone-400">
          Já possui conta cadastrada?
        </p>
        <a href="/entrar" class="inline-flex items-center gap-1.5 text-xs font-bold text-brand hover:underline">
          <span>Fazer login na barbearia</span>
          <i data-lucide="chevron-right" class="w-3.5 h-3.5"></i>
        </a>
      </div>

    </div>

  </div>

</div>
{% endblock %}

{% block scripts %}
<script>
  function autoSlug(text) {
    const slug = text.toLowerCase()
      .normalize("NFD").replace(/[\u0300-\u036f]/g, "")
      .replace(/[^a-z0-9]/g, "-")
      .replace(/-+/g, "-")
      .replace(/^-|-$/g, "");
    document.getElementById('reg_slug').value = slug;
  }

  async function submitRegister() {
    const btn = document.getElementById('btn-register');
    const errBox = document.getElementById('register-error');
    const errMsg = document.getElementById('register-error-msg');

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

    const selectedPlanEl = document.querySelector('input[name="plan_tier"]:checked');
    const plan_tier = selectedPlanEl ? selectedPlanEl.value : 'basico';

    const payload = {
      name: document.getElementById('reg_name').value.trim(),
      owner_name: document.getElementById('reg_owner').value.trim(),
      slug: document.getElementById('reg_slug').value.trim(),
      phone: document.getElementById('reg_phone').value.trim(),
      email: document.getElementById('reg_email').value.trim(),
      password: document.getElementById('reg_password').value.trim(),
      plan_tier: plan_tier
    };

    try {
      const res = await fetch('/api/auth/register', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(payload)
      });
      const data = await res.json();
      if (res.ok && data.success) {
        window.location.href = data.redirect_url || `/admin?shop_id=${data.shop_id}`;
      } else {
        errMsg.innerText = data.detail || "Erro ao realizar cadastro.";
        errBox.classList.remove('hidden');
        btn.disabled = false;
        btn.innerHTML = '<span>Criar Barbearia & Acessar Painel</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>Criar Barbearia & Acessar Painel</span><i data-lucide="arrow-right" class="w-4 h-4"></i>';
      if (window.lucide) lucide.createIcons();
    }
  }
</script>
{% endblock %}