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

const props = defineProps({
  title: String,
  ajustador: Object,
});

const passwordForm = useForm({
  current_password: '',
  password: '',
  password_confirmation: '',
});

const updatePassword = () => {
  passwordForm.put(route('ajustador.profile.password'), {
    preserveScroll: true,
    onSuccess: () => passwordForm.reset(),
  });
};
</script>

<template>
  <AjustadorLayout :title="title" :ajustador="ajustador">
    <div class="max-w-2xl mx-auto">
      <!-- Header -->
      <div class="mb-8">
        <h1 class="text-2xl font-bold text-slate-800">Mi Perfil</h1>
        <p class="text-slate-500 mt-1">Gestiona tu información y seguridad</p>
      </div>

      <!-- Success Message -->
      <div v-if="$page.props.flash?.message" class="mb-6 p-4 bg-emerald-50 border border-emerald-200 rounded-xl flex items-center gap-3">
        <svg class="w-5 h-5 text-emerald-600 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
        <p class="text-sm text-emerald-700 font-medium">{{ $page.props.flash.message }}</p>
      </div>

      <!-- Profile Info Card -->
      <div class="bg-white rounded-2xl border border-slate-200 shadow-sm p-6 mb-6">
        <h3 class="text-sm font-bold text-slate-400 uppercase tracking-widest mb-4">Información Personal</h3>
        <dl class="grid grid-cols-1 sm:grid-cols-2 gap-4">
          <div>
            <dt class="text-xs text-slate-500">Nombre</dt>
            <dd class="font-semibold text-slate-700">{{ ajustador.nombre }}</dd>
          </div>
          <div>
            <dt class="text-xs text-slate-500">Email</dt>
            <dd class="font-semibold text-slate-700">{{ ajustador.email }}</dd>
          </div>
          <div>
            <dt class="text-xs text-slate-500">Teléfono</dt>
            <dd class="font-semibold text-slate-700">{{ ajustador.telefono || 'No registrado' }}</dd>
          </div>
          <div>
            <dt class="text-xs text-slate-500">Ciudad</dt>
            <dd class="font-semibold text-slate-700">{{ ajustador.ciudad || 'No registrada' }}</dd>
          </div>
        </dl>
      </div>

      <!-- Change Password Card -->
      <div class="bg-white rounded-2xl border border-slate-200 shadow-sm p-6">
        <h3 class="text-sm font-bold text-slate-400 uppercase tracking-widest mb-4">Cambiar Contraseña</h3>
        
        <form @submit.prevent="updatePassword" class="space-y-5">
          <div>
            <label class="block text-sm font-semibold text-slate-700 mb-2">Contraseña Actual</label>
            <input 
              v-model="passwordForm.current_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
            />
            <p v-if="passwordForm.errors.current_password" class="text-red-500 text-xs mt-1">{{ passwordForm.errors.current_password }}</p>
          </div>

          <div>
            <label class="block text-sm font-semibold text-slate-700 mb-2">Nueva Contraseña</label>
            <input 
              v-model="passwordForm.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="Mínimo 8 caracteres"
              required
            />
            <p v-if="passwordForm.errors.password" class="text-red-500 text-xs mt-1">{{ passwordForm.errors.password }}</p>
          </div>

          <div>
            <label class="block text-sm font-semibold text-slate-700 mb-2">Confirmar Nueva Contraseña</label>
            <input 
              v-model="passwordForm.password_confirmation"
              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="Repite la nueva contraseña"
              required
            />
          </div>

          <div class="flex items-center gap-4 pt-2">
            <button 
              type="submit" 
              :disabled="passwordForm.processing"
              class="px-8 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="passwordForm.processing">Actualizando...</span>
              <span v-else>Actualizar Contraseña</span>
            </button>
          </div>
        </form>
      </div>
    </div>
  </AjustadorLayout>
</template>
