---
import AppLayout from '@/layouts/AppLayout.astro';
import MaestroForm from '@/components/admin/maestros/MaestroForm.tsx';
import EliminarMaestro from '@/components/admin/maestros/EliminarMaestro.tsx';

type MaestroRow = {
  id: number;
  nombre: string;
  activo: boolean;
  alumnos: { count: number }[];
};

const { data, error } = await Astro.locals.supabase
  .from('maestros')
  .select('id, nombre, activo, alumnos:profiles!tutor_id(count)')
  .order('nombre');

const maestros = ((data ?? []) as unknown as MaestroRow[]).map((m) => ({
  id: m.id,
  nombre: m.nombre,
  activo: m.activo,
  count: m.alumnos?.[0]?.count ?? 0,
}));
---
<AppLayout title="Maestros — Admin">
  <div class="max-w-4xl">
    <header class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-4">
      <div>
        <h1 class="text-2xl md:text-3xl font-semibold">Maestros</h1>
        <p class="text-sm opacity-70 mt-1">Catálogo de tutores que los alumnos eligen en su perfil.</p>
      </div>
      <MaestroForm mode="create" client:load />
    </header>

    <nav class="flex gap-2 mb-6 border-b" style="border-color: color-mix(in oklab, var(--color-ink) 10%, transparent);" aria-label="Sub-navegación de inventario">
      <a href="/admin/inventario" class="px-4 py-2 text-sm font-medium border-b-2 border-transparent opacity-70 transition-colors duration-150 hover:opacity-100">
        Materiales
      </a>
      <a href="/admin/inventario/categorias" class="px-4 py-2 text-sm font-medium border-b-2 border-transparent opacity-70 transition-colors duration-150 hover:opacity-100">
        Categorías
      </a>
      <a href="/admin/maestros" class="px-4 py-2 text-sm font-medium border-b-2" style="border-color: var(--color-primary); color: var(--color-primary);">
        Maestros
      </a>
    </nav>

    {error && (
      <div class="card mb-6" role="alert" style="border-color: color-mix(in oklab, var(--color-danger) 30%, transparent);">
        <p class="text-sm" style="color: var(--color-danger-text);">
          No se pudieron cargar los maestros. Recarga la página.
        </p>
      </div>
    )}

    {!error && maestros.length === 0 && (
      <div class="card text-center">
        <h2 class="text-lg font-semibold mb-1">Sin maestros aún</h2>
        <p class="text-sm opacity-70">Agrega el primero para que los alumnos puedan elegirlo como tutor.</p>
      </div>
    )}

    {!error && maestros.length > 0 && (
      <>
        <div class="hidden md:block card p-0 overflow-hidden">
          <table class="w-full text-sm">
            <thead class="text-left" style="background: color-mix(in oklab, var(--color-ink) 4%, transparent);">
              <tr>
                <th class="px-4 py-3 font-medium">Nombre</th>
                <th class="px-4 py-3 font-medium">Estado</th>
                <th class="px-4 py-3 font-medium text-right"># Alumnos</th>
                <th class="px-4 py-3 font-medium text-right">Acciones</th>
              </tr>
            </thead>
            <tbody>
              {maestros.map((m) => (
                <tr class="border-t" style="border-color: color-mix(in oklab, var(--color-ink) 8%, transparent);">
                  <td class="px-4 py-3 font-medium">{m.nombre}</td>
                  <td class="px-4 py-3">
                    {m.activo ? (
                      <span class="text-xs uppercase tracking-wide" style="color: var(--color-primary);">Activo</span>
                    ) : (
                      <span class="text-xs uppercase tracking-wide opacity-60">Inactivo</span>
                    )}
                  </td>
                  <td class="px-4 py-3 text-right" style="font-variant-numeric: tabular-nums;">
                    {m.count > 0 ? m.count : <span class="opacity-60">0</span>}
                  </td>
                  <td class="px-4 py-3">
                    <div class="flex gap-2 justify-end">
                      <MaestroForm mode="edit" maestro={{ id: m.id, nombre: m.nombre, activo: m.activo }} client:load />
                      <EliminarMaestro id={m.id} nombre={m.nombre} alumnosCount={m.count} client:load />
                    </div>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>

        <div class="md:hidden flex flex-col gap-3">
          {maestros.map((m) => (
            <article class="card flex items-start justify-between gap-3">
              <div>
                <h3 class="font-semibold">{m.nombre}</h3>
                <p class="text-xs opacity-70 mt-1">
                  {m.activo ? 'Activo' : 'Inactivo'} · {m.count} alumno{m.count === 1 ? '' : 's'}
                </p>
              </div>
              <div class="flex flex-col gap-2 shrink-0">
                <MaestroForm mode="edit" maestro={{ id: m.id, nombre: m.nombre, activo: m.activo }} client:load />
                <EliminarMaestro id={m.id} nombre={m.nombre} alumnosCount={m.count} client:load />
              </div>
            </article>
          ))}
        </div>
      </>
    )}
  </div>
</AppLayout>