---
import AppLayout from '@/layouts/AppLayout.astro';
import PerfilForm from '@/components/profile/PerfilForm.tsx';
import Avatar from '@/components/profile/Avatar.tsx';
import { avatarInfo } from '@/lib/avatar';

const user = Astro.locals.user!;
const profile = Astro.locals.profile!;

const googleAvatarUrl =
  (user.user_metadata as Record<string, unknown> | undefined)?.avatar_url as string | undefined ||
  (user.user_metadata as Record<string, unknown> | undefined)?.picture as string | undefined ||
  null;

const { data: maestrosData } = await Astro.locals.supabase
  .from('maestros')
  .select('id, nombre')
  .eq('activo', true)
  .eq('es_tutor', true)
  .order('nombre');
const maestros = (maestrosData ?? []) as { id: number; nombre: string }[];

const rolLabel =
  profile.rol === 'admin' ? 'Administrador' : profile.rol === 'docente' ? 'Docente' : 'Alumno';

const info = avatarInfo({
  email: profile.email,
  nombre: profile.nombre,
  fotoPath: profile.foto_path,
  googleAvatarUrl,
});
---
<AppLayout title="Mi perfil — LabPréstamos">
  <div class="max-w-xl mx-auto space-y-6">
    <header class="card p-6 flex items-center gap-5">
      <Avatar client:load info={info} size={80} className="w-20 h-20 rounded-full" />
      <div class="min-w-0 flex-1">
        <span class="eyebrow mb-1">Mi perfil</span>
        <h1 class="text-2xl md:text-3xl leading-tight truncate">
          {profile.nombre ?? profile.email.split('@')[0]}
        </h1>
        <p class="text-sm text-graphite/70 truncate">{profile.email}</p>
        <span class="badge mt-2">
          {rolLabel}
        </span>
      </div>
    </header>

    <section class="card p-6">
      <h2 class="text-xl md:text-2xl mb-4">Datos del perfil</h2>
      <PerfilForm
        client:load
        userId={user.id}
        email={profile.email}
        nombre={profile.nombre}
        rol={profile.rol}
        initialProfile={{
          matricula: profile.matricula,
          semestre: profile.semestre,
          tutor_id: profile.tutor_id,
          foto_path: profile.foto_path,
        }}
        maestros={maestros}
        googleAvatarUrl={googleAvatarUrl}
      />
    </section>
  </div>
</AppLayout>