---
import AppLayout from '@/layouts/AppLayout.astro';

const supabase = Astro.locals.supabase;

const ALL = ['devuelto', 'rechazado', 'vencido'] as const;
type EstadoHist = typeof ALL[number];
const raw = Astro.url.searchParams.get('estado');
const estadoFiltro = (raw && (ALL as readonly string[]).includes(raw) ? raw : '') as EstadoHist | '';
const estados = estadoFiltro ? [estadoFiltro] : Array.from(ALL);

// ponytail: limit 200, paginar cuando pase de 500 filas
const { data, error } = await supabase
  .from('prestamos')
  .select(
    'id, cantidad, fecha_solicitud, fecha_devolucion_real, estado, notas, alumno:profiles!alumno_id(id, nombre, email, matricula), material:materiales!material_id(id, nombre, numero_inventario)'
  )
  .in('estado', estados)
  .order('fecha_solicitud', { ascending: false })
  .limit(200);

const filas = data ?? [];
const fmtFecha = new Intl.DateTimeFormat('es-MX', { dateStyle: 'medium', timeStyle: 'short' });

const path = Astro.url.pathname;
const tabs = [
  { href: '/admin/solicitudes', label: 'Pendientes' },
  { href: '/admin/solicitudes/activos', label: 'En préstamo' },
  { href: '/admin/solicitudes/historial', label: 'Historial' },
];

const estadoLabel: Record<string, string> = {
  devuelto: 'Devuelto',
  rechazado: 'Rechazado',
  vencido: 'Vencido',
};
---
<AppLayout title="Historial de solicitudes — LabPréstamos">
  <div class="max-w-6xl">
    <header class="mb-4">
      <div class="flex items-center gap-3 flex-wrap">
        <h1 class="text-2xl md:text-3xl font-semibold">Historial</h1>
        <span
          class="inline-flex items-center rounded-full px-2.5 py-0.5 text-sm font-semibold"
          style="background: color-mix(in oklab, var(--color-ink) 12%, transparent); color: var(--color-ink); font-variant-numeric: tabular-nums;"
          aria-label={`${filas.length} registros`}
        >
          {filas.length}
        </span>
      </div>
    </header>

    <nav aria-label="Vistas de solicitudes" class="mb-6 border-b flex gap-1 overflow-x-auto" style="border-color: color-mix(in oklab, var(--color-ink) 12%, transparent);">
      {tabs.map((t) => {
        const active = path === t.href;
        return (
          <a
            href={t.href}
            class:list={['px-4 py-2 text-sm font-medium whitespace-nowrap border-b-2 transition-colors -mb-px', active ? 'text-[color:var(--color-primary)]' : 'opacity-70 hover:opacity-100 border-transparent']}
            style={active ? 'border-color: var(--color-primary);' : ''}
            aria-current={active ? 'page' : undefined}
          >
            {t.label}
          </a>
        );
      })}
    </nav>

    <form method="get" class="mb-4 flex items-end gap-3 flex-wrap">
      <div class="flex-1 min-w-[200px] max-w-xs">
        <label class="label" for="estado">Filtrar por estado</label>
        <select
          id="estado"
          name="estado"
          class="input"
          onchange="this.form.submit()"
        >
          <option value="">Todos</option>
          <option value="devuelto" selected={estadoFiltro === 'devuelto'}>Devuelto</option>
          <option value="rechazado" selected={estadoFiltro === 'rechazado'}>Rechazado</option>
          <option value="vencido" selected={estadoFiltro === 'vencido'}>Vencido</option>
        </select>
      </div>
      <noscript>
        <button type="submit" class="btn btn-primary">Aplicar</button>
      </noscript>
    </form>

    {error && (
      <div role="alert" class="mb-4 rounded-lg p-3 text-sm" style="background: color-mix(in oklab, var(--color-danger) 12%, transparent); color: var(--color-danger);">
        Error cargando historial: {error.message}
      </div>
    )}

    {filas.length === 0 ? (
      <div class="card text-center py-12">
        <p class="font-medium">No hay registros para este filtro.</p>
      </div>
    ) : (
      <>
        <div class="card p-0 overflow-hidden hidden md:block">
          <table class="w-full text-sm">
            <thead class="text-left" style="background: color-mix(in oklab, var(--color-ink) 4%, transparent);">
              <tr>
                <th class="p-3 font-medium">Alumno</th>
                <th class="p-3 font-medium">Material</th>
                <th class="p-3 font-medium">Cant.</th>
                <th class="p-3 font-medium">Estado</th>
                <th class="p-3 font-medium">Solicitado</th>
                <th class="p-3 font-medium">Devuelto</th>
              </tr>
            </thead>
            <tbody>
              {filas.map((r: any) => (
                <tr class="border-t align-top" style="border-color: color-mix(in oklab, var(--color-ink) 10%, transparent);">
                  <td class="p-3">
                    <div class="font-medium">{r.alumno?.nombre ?? '—'}</div>
                    <div class="text-xs opacity-70">{r.alumno?.matricula ?? ''} {r.alumno?.email ? `· ${r.alumno.email}` : ''}</div>
                  </td>
                  <td class="p-3">
                    <div>{r.material?.nombre ?? '—'}</div>
                    <div class="text-xs opacity-70">Inv. {r.material?.numero_inventario ?? '—'}</div>
                  </td>
                  <td class="p-3" style="font-variant-numeric: tabular-nums;">{r.cantidad}</td>
                  <td class="p-3">{estadoLabel[r.estado] ?? r.estado}</td>
                  <td class="p-3 opacity-80">{fmtFecha.format(new Date(r.fecha_solicitud))}</td>
                  <td class="p-3 opacity-80">{r.fecha_devolucion_real ? fmtFecha.format(new Date(r.fecha_devolucion_real)) : '—'}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>

        <ul class="md:hidden flex flex-col gap-3">
          {filas.map((r: any) => (
            <li class="card">
              <div class="flex items-baseline justify-between gap-2">
                <div class="font-medium">{r.alumno?.nombre ?? '—'}</div>
                <span class="text-xs rounded-full px-2 py-0.5" style="background: color-mix(in oklab, var(--color-ink) 10%, transparent);">{estadoLabel[r.estado] ?? r.estado}</span>
              </div>
              <div class="text-xs opacity-70">{r.alumno?.matricula ?? ''} {r.alumno?.email ? `· ${r.alumno.email}` : ''}</div>
              <div class="text-sm mt-2">{r.material?.nombre ?? '—'} · Cantidad <strong style="font-variant-numeric: tabular-nums;">{r.cantidad}</strong></div>
              <div class="text-xs opacity-70 mt-2">Solicitado {fmtFecha.format(new Date(r.fecha_solicitud))}</div>
              {r.fecha_devolucion_real && <div class="text-xs opacity-70">Devuelto {fmtFecha.format(new Date(r.fecha_devolucion_real))}</div>}
            </li>
          ))}
        </ul>
      </>
    )}
  </div>
</AppLayout>