<%# app/views/motorista/sessoes/new.html.erb — Login por PIN (mobile-first, público baixo tech) %>
<% content_for :title, 'Entrar — Motorista' %>

<div class="min-h-screen flex items-center justify-center p-4">
  <div class="w-full max-w-sm">

    <%# Logo %>
    <div class="text-center mb-8">
      <div class="w-16 h-16 bg-orange-500 rounded-2xl flex items-center justify-center font-black text-black text-3xl mx-auto mb-3">G</div>
      <h1 class="text-white font-bold text-2xl">Reem Logística</h1>
      <% if @motorista_pre %>
        <p class="text-white text-lg mt-1">Olá, <span class="font-bold text-orange-400"><%= @motorista_pre.nome.split.first %></span>!</p>
        <p class="text-gray-400 text-base">Confirme com seu PIN de 4 números</p>
      <% else %>
        <p class="text-gray-400 text-base mt-1">Digite seu PIN de 4 números</p>
      <% end %>
    </div>

    <%= form_with url: motorista_login_path, method: :post, id: 'form-pin' do |f| %>
      <%# Mostradores do PIN %>
      <div class="flex justify-center gap-3 mb-8" id="pin-display">
        <% 4.times do |i| %>
          <div class="pin-dot w-14 h-16 bg-[#1a1a1a] border-2 border-[#2a2a2a] rounded-xl flex items-center justify-center text-white text-3xl font-black"></div>
        <% end %>
      </div>
      <%= hidden_field_tag :pin, '', id: 'pin-valor' %>

      <%# Teclado numérico grande %>
      <div class="grid grid-cols-3 gap-3">
        <% [1,2,3,4,5,6,7,8,9].each do |n| %>
          <button type="button" onclick="digitar('<%= n %>')"
                  class="bg-[#1a1a1a] hover:bg-[#2a2a2a] active:bg-orange-500 active:text-black text-white font-bold text-2xl rounded-xl py-5 min-h-[64px] transition-colors">
            <%= n %>
          </button>
        <% end %>
        <button type="button" onclick="apagar()"
                class="bg-[#1a1a1a] hover:bg-red-900 text-white font-bold text-xl rounded-xl py-5 min-h-[64px]">
          ⌫
        </button>
        <button type="button" onclick="digitar('0')"
                class="bg-[#1a1a1a] hover:bg-[#2a2a2a] active:bg-orange-500 active:text-black text-white font-bold text-2xl rounded-xl py-5 min-h-[64px]">
          0
        </button>
        <button type="submit" id="btn-entrar" disabled
                class="bg-orange-500 disabled:bg-[#2a2a2a] disabled:text-gray-600 text-black font-bold text-xl rounded-xl py-5 min-h-[64px] transition-colors">
          <%= icone :confirmar, cor: nil, tamanho: 'w-7 h-7', espaco: false %>
        </button>
      </div>
    <% end %>

    <p class="text-gray-300 text-base text-center mt-6">
      <%= icone :dica %> Você também pode escanear o QR Code do seu extrato para entrar direto.
    </p>
    <p class="text-center mt-4">
      <%= link_to 'Sou administrador/gerente →', new_user_session_path, class: 'text-orange-500 hover:text-orange-400 text-sm' %>
    </p>
  </div>
</div>

<script>
  let pin = '';
  function digitar(n) {
    if (pin.length >= 4) return;
    pin += n;
    atualizar();
    if (pin.length === 4) {
      // Envia automaticamente após o 4º dígito
      setTimeout(() => document.getElementById('form-pin').requestSubmit(), 250);
    }
  }
  function apagar() { pin = pin.slice(0, -1); atualizar(); }
  function atualizar() {
    document.getElementById('pin-valor').value = pin;
    document.querySelectorAll('.pin-dot').forEach((d, i) => {
      d.textContent = pin[i] ? '●' : '';
      d.classList.toggle('border-orange-500', !!pin[i]);
    });
    document.getElementById('btn-entrar').disabled = pin.length !== 4;
  }
</script>
