<template>
  <div class="min-h-screen flex flex-col lg:flex-row bg-canvas">
    <!-- Brand panel -->
    <aside
      class="relative flex flex-col justify-between bg-navy text-white px-8 py-10 lg:w-[45%] lg:min-h-screen lg:px-12 lg:py-14"
    >
      <div
        class="pointer-events-none absolute inset-0 opacity-[0.07]"
        aria-hidden="true"
        style="background-image: radial-gradient(circle at 20% 20%, #155EEF 0%, transparent 45%), radial-gradient(circle at 80% 70%, #EEF4FF 0%, transparent 40%);"
      />

      <div class="relative">
        <div class="flex items-center gap-3">
          <svg viewBox="0 0 32 32" class="w-9 h-9 shrink-0" aria-hidden="true">
            <path fill="#155EEF" d="M16 2 4 6.5v8.2c0 8 5.1 14.6 12 15.3 6.9-.7 12-7.3 12-15.3V6.5z"/>
            <path fill="white" d="M16 8.5c-3.6 0-6.6 2.8-6.6 6.3 0 3.4 2.7 6.4 6.6 9.6 3.9-3.2 6.6-6.2 6.6-9.6 0-3.5-3-6.3-6.6-6.3m0 3.4c1.7 0 3.1 1.3 3.1 2.9s-1.4 2.9-3.1 2.9-3.1-1.3-3.1-2.9 1.4-2.9 3.1-2.9"/>
          </svg>
          <div class="leading-tight">
            <p class="font-bold text-lg tracking-tight">VigilCare</p>
            <p class="text-sm text-white/60">Records</p>
          </div>
        </div>

        <div class="mt-10 lg:mt-20 max-w-md">
          <h1 class="text-[2rem] sm:text-[2.5rem] lg:text-[2.625rem] font-bold leading-tight tracking-tight">
            Digitize. Verify. Trust.
          </h1>
          <p class="mt-4 text-base text-white/70 leading-relaxed">
            Scanned clinical records become governed, structured data your teams can verify and trust.
          </p>
        </div>
      </div>

      <!-- Restrained flow hint (desktop) -->
      <div
        class="relative hidden lg:flex items-center gap-3 mt-16 text-sm text-white/50"
        aria-hidden="true"
      >
        <span class="rounded-input border border-white/15 bg-white/5 px-3 py-1.5">Paper record</span>
        <span class="text-white/30">→</span>
        <span class="rounded-input border border-white/15 bg-white/5 px-3 py-1.5">Verified digital</span>
      </div>
    </aside>

    <!-- Auth panel -->
    <div class="flex flex-1 items-center justify-center px-4 py-10 sm:px-8">
      <div class="w-full max-w-[440px] bg-surface border border-line rounded-card shadow-card p-6 sm:p-8">
        <div class="mb-8">
          <h2 class="text-[1.75rem] font-semibold text-ink-strong leading-tight">Sign in</h2>
          <p class="mt-2 text-sm text-ink-secondary">
            Use your VigilCare workstation credentials.
          </p>
        </div>

        <form @submit.prevent="handleLogin" class="space-y-5">
          <div>
            <label for="login-username" class="block text-sm font-semibold text-ink mb-2">
              Username
            </label>
            <input
              id="login-username"
              v-model="username"
              type="text"
              autocomplete="username"
              class="form-input"
              placeholder="e.g. intake1, entry1, verifier1"
              required
            />
          </div>
          <div>
            <label for="login-password" class="block text-sm font-semibold text-ink mb-2">
              Password
            </label>
            <input
              id="login-password"
              v-model="password"
              type="password"
              autocomplete="current-password"
              class="form-input"
              required
            />
          </div>

          <div
            v-if="errorMessage"
            class="rounded-input bg-clinical-danger-bg border border-clinical-danger/20 px-3 py-2 text-sm text-clinical-danger"
            role="alert"
          >
            {{ errorMessage }}
          </div>

          <button type="submit" class="btn-primary w-full" :disabled="loading">
            {{ loading ? 'Signing in...' : 'Sign In' }}
          </button>
        </form>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useAuthStore } from '../stores/auth'

const auth = useAuthStore()
const username = ref('')
const password = ref('')
const loading = ref(false)
const errorMessage = ref('')

async function handleLogin() {
  loading.value = true
  errorMessage.value = ''
  try {
    await auth.login({ username: username.value, password: password.value })
  } catch (e: unknown) {
    errorMessage.value = e instanceof Error ? e.message : 'Login failed'
  } finally {
    loading.value = false
  }
}
</script>
