<script setup>
import { useForm } from '@inertiajs/vue3';

defineProps({
  title: String,
});

const form = useForm({
  email: '',
  password: '',
  remember: false,
});

const submit = () => {
  form.post(route('ajustador.login.post'), {
    onFinish: () => form.reset('password'),
  });
};
</script>

<template>
  <div class="min-h-screen bg-gradient-to-br from-slate-900 via-blue-900 to-slate-900 flex items-center justify-center p-4">
    <div class="w-full max-w-md">
      <!-- Logo / Brand -->
      <div class="text-center mb-8">
        <div class="inline-flex items-center justify-center w-16 h-16 bg-blue-600 rounded-2xl shadow-lg shadow-blue-600/30 mb-4">
          <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
          </svg>
        </div>
        <h1 class="text-2xl font-bold text-white">INNOVA</h1>
        <p class="text-blue-300 text-sm mt-1">Portal del Ajustador</p>
      </div>

      <!-- Login Card -->
      <div class="bg-white rounded-3xl shadow-2xl p-8">
        <h2 class="text-xl font-bold text-slate-800 mb-2">Iniciar Sesión</h2>
        <p class="text-slate-500 text-sm mb-6">Ingresa tus credenciales para acceder a tus casos asignados</p>

        <form @submit.prevent="submit" class="space-y-5">
          <div>
            <label class="block text-sm font-semibold text-slate-700 mb-2">Correo Electrónico</label>
            <input 
              v-model="form.email"
              type="email" 
              class="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all text-slate-700"
              placeholder="ajustador@ejemplo.com"
              required
              autofocus
            />
            <p v-if="form.errors.email" class="text-red-500 text-xs mt-1">{{ form.errors.email }}</p>
          </div>

          <div>
            <label class="block text-sm font-semibold text-slate-700 mb-2">Contraseña</label>
            <input 
              v-model="form.password"
              type="password" 
              class="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all text-slate-700"
              placeholder="••••••••"
              required
            />
          </div>

          <div class="flex items-center justify-between">
            <label class="flex items-center gap-2 cursor-pointer">
              <input v-model="form.remember" type="checkbox" class="w-4 h-4 text-blue-600 rounded focus:ring-blue-500 border-slate-300" />
              <span class="text-sm text-slate-600">Recordarme</span>
            </label>
          </div>

          <button 
            type="submit" 
            :disabled="form.processing"
            class="w-full py-3 bg-blue-600 text-white font-bold rounded-xl hover:bg-blue-700 transition-all disabled:opacity-50 disabled:cursor-not-allowed shadow-lg shadow-blue-600/20"
          >
            <span v-if="form.processing">Ingresando...</span>
            <span v-else>Ingresar</span>
          </button>
        </form>
      </div>

      <p class="text-center text-slate-500 text-xs mt-6">
        ¿Problemas para ingresar? Contacta a tu coordinador
      </p>
    </div>
  </div>
</template>
