<% const hasError = typeof errorMessage !== 'undefined' && errorMessage; %>
<% const hasSuccess = typeof successMessage !== 'undefined' && successMessage; %>
<% const isSignupDisabled = typeof signupDisabled !== 'undefined' && signupDisabled; %>
<% const isDev = process.env.NODE_ENV === 'development'; %>
<% const googleEnabled = typeof googleAuthEnabled !== 'undefined' && googleAuthEnabled; %>

<%- include('../partials/adminAuthAside') %>

<div class="flex-1 flex items-center justify-center p-8" style="background:#f0f4f8">
  <div class="w-full max-w-md fade-up">

    <div class="lg:hidden flex items-center gap-3 mb-8">
      <img src="/analytics-grade.png" alt="" class="h-9 w-9 object-contain shrink-0" width="36" height="36" aria-hidden="true" />
      <div>
        <p class="font-bold leading-none" style="color:#0b1f3a;font-size:1.1rem">Analytics Grade</p>
        <p class="text-[10px] font-medium" style="color:#9ca3af">by Analytics Grade</p>
      </div>
    </div>

    <div class="mb-7">
      <h1 class="text-2xl font-bold mb-1" style="color:#0b1f3a">Welcome back</h1>
      <p class="text-sm text-gray-500">Sign in to your Analytics Grade admin account</p>
    </div>

    <div id="success-alert" class="<%= hasSuccess ? 'flex' : 'hidden' %> items-center gap-3 px-4 py-3 rounded-xl mb-5" style="background:rgba(19,179,180,.08);border:1.5px solid rgba(19,179,180,.25)">
      <svg class="w-4 h-4 flex-shrink-0" style="color:#0d9488" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
      <p class="text-sm font-medium" style="color:#0d9488"><%= hasSuccess ? successMessage : '' %></p>
    </div>

    <div id="error-alert" class="<%= hasError ? 'flex' : 'hidden' %> items-center gap-3 px-4 py-3 rounded-xl mb-5" style="background:rgba(239,68,68,.08);border:1.5px solid rgba(239,68,68,.25)">
      <svg class="w-4 h-4 flex-shrink-0" style="color:#ef4444" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="10"/><path stroke-linecap="round" stroke-linejoin="round" d="M12 8v4m0 4h.01"/></svg>
      <p id="error-msg" class="text-sm font-medium" style="color:#dc2626"><%= hasError ? errorMessage : '' %></p>
    </div>

    <% if (googleEnabled) { %>
    <a href="/auth/google" class="btn-google">
      <svg class="w-5 h-5 flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
        <path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/>
        <path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/>
        <path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/>
        <path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/>
      </svg>
      Continue with Google
    </a>
    <div class="divider">
      <div class="divider-line"></div>
      <span class="divider-text">or sign in with email</span>
      <div class="divider-line"></div>
    </div>
    <% } %>

    <form id="login-form" action="/auth/login" method="post" novalidate>
      <div class="space-y-4">
        <div>
          <label for="email" class="block text-xs font-semibold mb-1.5" style="color:#0b1f3a">Email Address</label>
          <div class="relative">
            <svg class="input-icon" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true">
              <path stroke-linecap="round" stroke-linejoin="round" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
            </svg>
            <input type="email" id="email" name="email" class="form-input" placeholder="you@company.com" autocomplete="email" required value="<%= typeof email !== 'undefined' ? email : '' %>" />
          </div>
          <p id="email-error" class="hidden text-xs mt-1.5" style="color:#dc2626">Please enter a valid email address.</p>
        </div>

        <div>
          <label for="password" class="block text-xs font-semibold mb-1.5" style="color:#0b1f3a">Password</label>
          <div class="relative">
            <svg class="input-icon" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true">
              <rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path stroke-linecap="round" stroke-linejoin="round" d="M7 11V7a5 5 0 0110 0v4"/>
            </svg>
            <input type="password" id="password" name="password" class="form-input" placeholder="Enter your password" autocomplete="current-password" required />
            <button type="button" id="toggle-pw" class="absolute right-3.5 top-1/2 -translate-y-1/2 transition-colors" style="color:#9ca3af" aria-label="Show password">
              <svg id="icon-eye" class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
              </svg>
              <svg id="icon-eye-off" class="w-4 h-4 hidden" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21"/>
              </svg>
            </button>
          </div>
          <p id="password-error" class="hidden text-xs mt-1.5" style="color:#dc2626">Please enter your password.</p>
        </div>

        <button type="submit" id="submit-btn" class="btn-signin mt-2">
          <span id="btn-text">Sign In</span>
          <svg id="btn-arrow" class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" d="M14 5l7 7m0 0l-7 7m7-7H3"/>
          </svg>
        </button>
      </div>
    </form>

    <p class="text-center text-sm mt-6" style="color:#6b7280">
      <% if (isSignupDisabled) { %>
      New account registration is temporarily unavailable.
      <% } else { %>
      Don't have an account?
      <a href="/auth/register" class="font-semibold hover:underline" style="color:#8065f8">Sign up</a>
      <% } %>
    </p>

    <% if (isDev) { %>
    <div class="mt-5 p-3 rounded-xl" style="background:rgba(128,101,248,.07);border:1.5px solid rgba(128,101,248,.15)">
      <p class="text-xs font-semibold mb-1" style="color:#7c5cf6">Development only</p>
      <p class="text-xs" style="color:#6b7280">Use an admin account from your database (<code>role: admin</code>).</p>
    </div>
    <% } %>

    <p class="text-center text-xs mt-6" style="color:#9ca3af">Protected by Analytics Grade security</p>
  </div>
</div>
