<%# app/views/devise/sessions/new.html.erb %>
<div class="min-h-screen bg-[#0a0a0a] flex items-center justify-center px-4">
  <div class="w-full max-w-md">

    <%# Logo / Header %>
    <div class="text-center mb-10">
      <%= image_tag '/logo-reem.png', alt: 'Reem Transporte',
            class: 'h-20 w-auto mx-auto mb-4 object-contain' %>
      <h1 class="text-3xl font-bold text-white">Reem Logística</h1>
      <p class="text-gray-400 mt-1 text-sm">Sistema de Controle de Custos</p>
    </div>

    <%# Flash messages %>
    <% if flash[:alert] %>
      <div class="mb-4 p-4 bg-red-900/40 border border-red-500/50 rounded-xl text-red-300 text-sm">
        <%= flash[:alert] %>
      </div>
    <% end %>

    <%# Tabs: Email / PIN %>
    <div class="bg-[#1a1a1a] rounded-2xl overflow-hidden border border-white/5">

      <%# Tab switcher %>
      <div class="flex border-b border-white/10">
        <button id="tab-email"
                onclick="switchTab('email')"
                class="flex-1 py-4 text-sm font-medium transition-colors tab-active text-[#f97316] border-b-2 border-[#f97316]">
          <%= icone :email, cor: nil %> E-mail
        </button>
        <button id="tab-pin"
                onclick="switchTab('pin')"
                class="flex-1 py-4 text-sm font-medium transition-colors text-gray-400 hover:text-white border-b-2 border-transparent">
          <%= icone :chave, cor: nil %> PIN Motorista
        </button>
      </div>

      <%# Login por e-mail %>
      <div id="form-email" class="p-8">
        <%= form_with(url: user_session_path, scope: :user, method: :post, data: { turbo: false }) do |f| %>
          <div class="space-y-5">
            <div>
              <%= f.label :email, 'E-mail', class: 'block text-sm font-medium text-gray-300 mb-1.5' %>
              <%= f.email_field :email,
                    autofocus: true,
                    autocomplete: 'email',
                    class: 'w-full px-4 py-3 bg-[#0a0a0a] border border-white/10 rounded-xl text-white
                            placeholder-gray-600 focus:outline-none focus:border-[#f97316] focus:ring-1
                            focus:ring-[#f97316] transition-colors text-base',
                    placeholder: 'admin@gade.com' %>
            </div>

            <div>
              <%= f.label :password, 'Senha', class: 'block text-sm font-medium text-gray-300 mb-1.5' %>
              <%= f.password_field :password,
                    autocomplete: 'current-password',
                    class: 'w-full px-4 py-3 bg-[#0a0a0a] border border-white/10 rounded-xl text-white
                            placeholder-gray-600 focus:outline-none focus:border-[#f97316] focus:ring-1
                            focus:ring-[#f97316] transition-colors text-base',
                    placeholder: '••••••••' %>
            </div>

            <div class="flex items-center justify-between">
              <label class="flex items-center gap-2 cursor-pointer">
                <%= f.check_box :remember_me,
                      class: 'w-4 h-4 rounded accent-[#f97316]' %>
                <span class="text-sm text-gray-400">Lembrar</span>
              </label>
              <%= link_to 'Esqueci a senha', new_user_password_path,
                    class: 'text-sm text-[#f97316] hover:text-orange-400 transition-colors' %>
            </div>

            <%= f.submit 'Entrar',
                  class: 'w-full py-3.5 bg-[#f97316] hover:bg-orange-500 text-white font-semibold
                          rounded-xl transition-colors cursor-pointer text-base min-h-[48px]' %>
          </div>
        <% end %>
      </div>

      <%# Login por PIN %>
      <div id="form-pin" class="p-8 hidden">
        <%= form_with(url: user_session_path, method: :post, data: { turbo: false }) do |f| %>
          <%= f.hidden_field :pin_login, value: '1' %>

          <div class="space-y-6">
            <div class="text-center">
              <p class="text-gray-400 text-sm mb-6">Digite seu PIN de 4 dígitos</p>

              <%# PIN display visual %>
              <div class="flex justify-center gap-3 mb-6" id="pin-display">
                <% 4.times do |i| %>
                  <div id="pin-dot-<%= i %>"
                       class="w-14 h-14 rounded-xl bg-[#0a0a0a] border-2 border-white/10
                              flex items-center justify-center text-2xl font-bold text-white
                              transition-all duration-150">
                  </div>
                <% end %>
              </div>

              <%= f.hidden_field :pin, id: 'pin-value' %>

              <%# Teclado numérico %>
              <div class="grid grid-cols-3 gap-3 max-w-[240px] mx-auto" id="pin-keypad">
                <% [1,2,3,4,5,6,7,8,9].each do |n| %>
                  <button type="button"
                          onclick="pinPress('<%= n %>')"
                          class="h-14 rounded-xl bg-[#0a0a0a] border border-white/10 text-white
                                 text-xl font-semibold hover:bg-[#f97316] hover:border-[#f97316]
                                 active:scale-95 transition-all min-h-[48px]">
                    <%= n %>
                  </button>
                <% end %>
                <button type="button"
                        onclick="pinClear()"
                        class="h-14 rounded-xl bg-[#0a0a0a] border border-white/10 text-gray-400
                               text-sm hover:bg-red-900/40 hover:border-red-500/50 hover:text-red-400
                               active:scale-95 transition-all">
                  <%= icone :fechar, cor: nil, tamanho: 'w-5 h-5', espaco: false %>
                </button>
                <button type="button"
                        onclick="pinPress('0')"
                        class="h-14 rounded-xl bg-[#0a0a0a] border border-white/10 text-white
                               text-xl font-semibold hover:bg-[#f97316] hover:border-[#f97316]
                               active:scale-95 transition-all">
                  0
                </button>
                <button type="button"
                        onclick="pinBackspace()"
                        class="h-14 rounded-xl bg-[#0a0a0a] border border-white/10 text-gray-400
                               text-lg hover:bg-white/5 active:scale-95 transition-all">
                  ⌫
                </button>
              </div>
            </div>

            <%= f.submit 'Entrar com PIN',
                  id: 'btn-pin-submit',
                  class: 'w-full py-3.5 bg-[#f97316] hover:bg-orange-500 text-white font-semibold
                          rounded-xl transition-colors cursor-pointer text-base min-h-[48px]
                          disabled:opacity-40 disabled:cursor-not-allowed',
                  disabled: true %>
          </div>
        <% end %>
      </div>
    </div>

    <p class="text-center text-gray-600 text-xs mt-6">
      Reem Transporte © <%= Date.today.year %>
    </p>
  </div>
</div>

<script>
  let pinDigits = [];

  function switchTab(tab) {
    const emailForm = document.getElementById('form-email');
    const pinForm   = document.getElementById('form-pin');
    const tabEmail  = document.getElementById('tab-email');
    const tabPin    = document.getElementById('tab-pin');

    if (tab === 'email') {
      emailForm.classList.remove('hidden');
      pinForm.classList.add('hidden');
      tabEmail.classList.add('text-[#f97316]', 'border-[#f97316]');
      tabEmail.classList.remove('text-gray-400', 'border-transparent');
      tabPin.classList.add('text-gray-400', 'border-transparent');
      tabPin.classList.remove('text-[#f97316]', 'border-[#f97316]');
    } else {
      pinForm.classList.remove('hidden');
      emailForm.classList.add('hidden');
      tabPin.classList.add('text-[#f97316]', 'border-[#f97316]');
      tabPin.classList.remove('text-gray-400', 'border-transparent');
      tabEmail.classList.add('text-gray-400', 'border-transparent');
      tabEmail.classList.remove('text-[#f97316]', 'border-[#f97316]');
    }
  }

  function updatePinDisplay() {
    for (let i = 0; i < 4; i++) {
      const dot = document.getElementById(`pin-dot-${i}`);
      if (pinDigits[i] !== undefined) {
        dot.textContent = '●';
        dot.classList.add('border-[#f97316]');
        dot.classList.remove('border-white/10');
      } else {
        dot.textContent = '';
        dot.classList.remove('border-[#f97316]');
        dot.classList.add('border-white/10');
      }
    }
    document.getElementById('pin-value').value = pinDigits.join('');
    const btn = document.getElementById('btn-pin-submit');
    btn.disabled = pinDigits.length !== 4;
  }

  function pinPress(digit) {
    if (pinDigits.length < 4) {
      pinDigits.push(digit);
      updatePinDisplay();
      if (pinDigits.length === 4) {
        document.getElementById('btn-pin-submit').click();
      }
    }
  }

  function pinBackspace() {
    pinDigits.pop();
    updatePinDisplay();
  }

  function pinClear() {
    pinDigits = [];
    updatePinDisplay();
  }

  // Suporte a teclado físico no PIN
  document.addEventListener('keydown', (e) => {
    if (!document.getElementById('form-pin').classList.contains('hidden')) {
      if (e.key >= '0' && e.key <= '9') pinPress(e.key);
      if (e.key === 'Backspace') pinBackspace();
    }
  });

  <% if @pin_login %>
    document.addEventListener('DOMContentLoaded', () => switchTab('pin'));
  <% end %>
</script>
