<script lang="ts">
  import Icon from '#lib/components/Icon.svelte';
  import type { PageData, ActionData } from './$types';

  export let data: PageData;
  export let form: ActionData;
  let buscar = '';
  $: filtered = data.activities.filter((activity: Record<string, unknown>) => {
    const term = buscar.trim().toLocaleLowerCase('es');
    const matchesTerm = !term || [activity.titulo, activity.contenido, activity.numero]
      .some((value) => String(value ?? '').toLocaleLowerCase('es').includes(term));
    const matchesPeriod = data.filtroPeriodo === 'todos' || String(activity.periodo) === String(data.filtroPeriodo);
    return matchesTerm && matchesPeriod;
  });
  const date = (value: unknown) => value ? new Date(String(value)).toLocaleString('es-CO', { dateStyle: 'short', timeStyle: 'short' }) : 'Sin fecha';
  const value = (item: unknown) => item === null || item === undefined || item === '' ? '—' : String(item);
</script>

<svelte:head><title>Actividades · {data.assignment.asignatura} · {data.sede.nombre}</title></svelte:head>
<div class="mb-8">
  <p class="eyebrow">{data.sede.nombre} · {data.ano} · {data.grado}-{data.curso}</p>
  <h1 class="flex items-center gap-3"><span class="flex h-11 w-11 items-center justify-center rounded-xl bg-violet-50 text-violet-700"><Icon name="reports" size={25} /></span>Actividades</h1>
  <p class="muted mt-3">{data.assignment.asignatura} · Actividades definidas para esta asignatura y grupo.</p>
</div>

<section class="panel">
  <div class="flex flex-wrap items-end justify-between gap-4">
    <div><h2>Actividades del grupo</h2><p class="muted mt-1">{filtered.length} de {data.activities.length} actividades</p></div>
    <div class="flex flex-wrap items-end gap-3">
      <form method="GET" class="flex items-end gap-3">
        <input type="hidden" name="ano" value={data.ano} /><input type="hidden" name="grado" value={data.grado} />
        <input type="hidden" name="curso" value={data.curso} /><input type="hidden" name="asig_row_id" value={String(data.assignment.id)} />
        <input type="hidden" name="periodo" value={String(data.periodo)} />
        <label class="text-xs font-medium">Periodo de actividades<select name="filtro_periodo" value={data.filtroPeriodo} class="mt-1 block rounded-lg border border-stone-300 px-3 py-2"><option value="todos">Todos</option>{#each data.periodos as option}<option value={String(option)}>Periodo {option}</option>{/each}</select></label>
        <button class="rounded-lg border border-stone-300 px-3 py-2 text-sm" type="submit">Filtrar</button>
      </form>
      <label class="text-xs font-medium">Buscar<input bind:value={buscar} placeholder="Título o contenido" class="mt-1 block w-56 rounded-lg border border-stone-300 px-3 py-2" /></label>
      <a class="rounded-lg border border-stone-300 px-4 py-2 font-semibold text-school" href="/sedes/{encodeURIComponent(data.sede.id)}/notas?ano={encodeURIComponent(data.ano)}&grado={encodeURIComponent(data.grado)}&curso={encodeURIComponent(data.curso)}">Volver a notas</a>
    </div>
  </div>

  {#if filtered.length === 0}
    <p class="mt-6 rounded-lg bg-stone-50 p-4 text-slate-600">{data.activities.length ? 'No hay actividades con esos filtros.' : 'Esta asignatura todavía no tiene actividades registradas.'}</p>
  {:else}
    <div class="mt-6 overflow-x-auto">
      <table class="w-full text-left text-sm">
        <thead><tr class="border-b border-stone-200 text-xs uppercase text-slate-600"><th class="p-3">Periodo</th><th class="p-3">N.º</th><th class="p-3">Actividad</th><th class="p-3">Porcentaje</th><th class="p-3">Calificable</th><th class="p-3">Fechas</th><th class="p-3">Contenido</th></tr></thead>
        <tbody>{#each filtered as activity}
          <tr class="border-b border-stone-100 align-top">
            <td class="p-3">{activity.periodo}</td><td class="p-3">{activity.numero}</td><td class="p-3 font-medium">{activity.titulo || 'Sin título'}</td>
            <td class="p-3">{activity.porcentaje ?? 0}%</td><td class="p-3">{activity.calificable === 'S' ? 'Sí' : 'No'}</td>
            <td class="min-w-40 p-3 text-xs">Inicio: {date(activity.fecha_inicio)}<br />Cierre: {date(activity.fecha_venc)}</td>
            <td class="max-w-xl whitespace-pre-wrap p-3">{activity.contenido || 'Sin descripción'}</td>
          </tr>
        {/each}</tbody>
      </table>
    </div>
  {/if}
</section>

  {#if data.calificaActividades}
  <section class="panel mt-6">
    <div class="flex flex-wrap items-center justify-between gap-3">
      <div><h2>Registro de notas por actividades</h2><p class="muted mt-1">{data.grado}-{data.curso} · {data.assignment.asignatura}</p></div>
      <form method="GET" class="flex items-end gap-2">
        <input type="hidden" name="ano" value={data.ano} /><input type="hidden" name="grado" value={data.grado} />
        <input type="hidden" name="curso" value={data.curso} /><input type="hidden" name="asig_row_id" value={String(data.assignment.id)} />
        <input type="hidden" name="filtro_periodo" value={data.filtroPeriodo} />
        <label class="text-xs font-medium">Periodo de notas<select name="periodo" value={String(data.periodo)} class="mt-1 block rounded-lg border border-stone-300 px-3 py-2">{#each data.periodos as option}<option value={String(option)}>Periodo {option}</option>{/each}</select></label>
        <button class="rounded-lg border border-stone-300 px-3 py-2 text-sm" type="submit">Ver periodo</button>
      </form>
      {#if data.grid.disponible}<span class="muted">{data.grid.rows.length} estudiantes activos</span>{/if}
    </div>
    {#if form?.message}<p class="mt-4 rounded-lg bg-rose-50 p-3 text-sm text-rose-800" role="alert">{form.message}</p>
    {:else if data.guardado}<p class="mt-4 rounded-lg bg-emerald-50 p-3 text-sm text-emerald-800" role="status">Notas seleccionadas guardadas.</p>{/if}
    {#if !data.periodoActivities.length}
      <p class="mt-5 rounded-lg bg-stone-50 p-4 text-slate-600">No hay actividades registradas para este periodo.</p>
    {:else if !data.grid.disponible}
      <p class="mt-5 rounded-lg bg-amber-50 p-4 text-amber-900">No se pudo cargar la grilla de notas porque faltan columnas existentes. No se modificó la base de datos.</p>
    {:else if data.periodosEditables.includes(data.periodo) && data.grid.rows.length}
      <form method="POST" action="?/saveActivityNotes" class="mt-5">
        <input type="hidden" name="_csrf" value={data.csrf} /><input type="hidden" name="ano" value={data.ano} />
        <input type="hidden" name="grado" value={data.grado} /><input type="hidden" name="curso" value={data.curso} />
        <input type="hidden" name="assignment_id" value={String(data.assignment.id)} /><input type="hidden" name="periodo" value={String(data.periodo)} />
        <input type="hidden" name="activity_count" value={String(data.periodoActivities.length)} />
        <div class="mb-4 flex flex-wrap items-center justify-between gap-3 rounded-lg bg-stone-50 p-3 text-sm">
          <div>{#each data.periodoActivities as activity, index}<span class="mr-3">{activity.porcentaje ?? 0}% · Act {index + 1} · {activity.titulo || 'Sin título'}</span>{/each}</div>
          {#if data.periodosEditables.includes(data.periodo)}<button class="rounded-lg bg-school px-4 py-2 font-semibold text-white" type="submit">Guardar seleccionados</button>{/if}
        </div>
        <div class="overflow-x-auto">
          <table class="w-full text-left text-sm">
            <thead><tr class="border-b border-stone-200 text-xs uppercase text-slate-600"><th class="p-2">Lista</th><th class="p-2">Sel.</th><th class="p-2">Estudiante</th><th class="p-2">Nota P{data.periodo}</th><th class="p-2">Faltas</th>{#if data.recoveryEnabled}<th class="p-2">Recuperación</th>{/if}{#each data.periodoActivities as activity, index}<th class="p-2" title={String(activity.titulo || '')}>Act {index + 1}</th>{/each}{#if data.obsPartEnabled}<th class="p-2">Observación</th>{/if}{#if data.manualDefEnabled}<th class="p-2">Definitiva</th>{/if}</tr></thead>
            <tbody>{#each data.grid.rows as row, index}
              <tr class="border-b border-stone-100">
                <td class="p-2">{value(row.numlista) === '—' ? index + 1 : value(row.numlista)}</td>
                <td class="p-2"><input type="checkbox" name="selected" value={String(row.row_id)} aria-label="Seleccionar {row.estudiante}" /></td>
                <td class="min-w-56 p-2 font-medium">{row.estudiante}</td>
                <td class="p-2">{#if data.config.letterMode}<select name="notas[{row.row_id}][nota]" class="w-20 rounded border border-stone-300 px-1 py-1" aria-label="Nota de {row.estudiante}"><option value=""></option>{#each data.config.letters as letter}<option value={letter.value} selected={String(row[`nota${data.periodo}`] || '').toUpperCase() === letter.value.toUpperCase()}>{letter.value}</option>{/each}</select>{:else}<input name="notas[{row.row_id}][nota]" value={String(row[`nota${data.periodo}`] ?? '')} type="number" min="0" max={data.config.max} step="0.01" class="w-20 rounded border border-stone-300 px-2 py-1" aria-label="Nota de {row.estudiante}" />{/if}</td>
                <td class="p-2"><input name="notas[{row.row_id}][falta]" value={String(row[`falta${data.periodo}`] ?? '')} maxlength="3" class="w-16 rounded border border-stone-300 px-2 py-1" aria-label="Faltas de {row.estudiante}" /></td>
                {#if data.recoveryEnabled}<td class="p-2">{#if data.config.letterMode}<select name="notas[{row.row_id}][notaopc]" class="w-20 rounded border border-stone-300 px-1 py-1" aria-label="Nota de recuperación de {row.estudiante}"><option value=""></option>{#each data.config.letters as letter}<option value={letter.value} selected={String(row[`notaopc${data.periodo}`] || '').toUpperCase() === letter.value.toUpperCase()}>{letter.value}</option>{/each}</select>{:else}<input name="notas[{row.row_id}][notaopc]" value={String(row[`notaopc${data.periodo}`] ?? '')} type="number" min="0" max={data.config.max} step="0.01" class="w-20 rounded border border-stone-300 px-2 py-1" aria-label="Nota de recuperación de {row.estudiante}" />{/if}</td>{/if}
                {#each data.periodoActivities as activity, activityIndex}<td class="p-2"><input name="notas[{row.row_id}][obs][{activityIndex + 1}]" value={String(row[`obs${activityIndex + 1}per${data.periodo}`] ?? '')} maxlength="4" class="w-16 rounded border border-stone-300 px-2 py-1" aria-label="Actividad {activityIndex + 1} de {row.estudiante}" /></td>{/each}
                {#if data.obsPartEnabled}<td class="p-2"><input name="notas[{row.row_id}][obs_part]" value={String(row[`obs_part${data.periodo}`] ?? '')} maxlength="10000" class="w-36 rounded border border-stone-300 px-2 py-1" aria-label="Observación de {row.estudiante}" /></td>{/if}
                {#if data.manualDefEnabled}<td class="p-2">{#if data.config.letterMode}<select name="notas[{row.row_id}][nota_definitiva]" class="w-20 rounded border border-stone-300 px-1 py-1" aria-label="Definitiva de {row.estudiante}"><option value=""></option>{#each data.config.letters as letter}<option value={letter.value} selected={String(row[`nota${data.config.raw.def_per}`] || '').toUpperCase() === letter.value.toUpperCase()}>{letter.value}</option>{/each}</select>{:else}<input name="notas[{row.row_id}][nota_definitiva]" value={String(row[`nota${data.config.raw.def_per}`] ?? '')} type="number" min="0" max={data.config.max} step="0.01" class="w-20 rounded border border-stone-300 px-2 py-1" aria-label="Definitiva de {row.estudiante}" />{/if}</td>{/if}
              </tr>
            {/each}</tbody>
          </table>
        </div>
      </form>
    {:else if data.grid.rows.length === 0}
      <p class="mt-5 rounded-lg bg-stone-50 p-4 text-slate-600">No hay estudiantes activos con notas para esta asignatura.</p>
    {:else}
      <p class="mt-5 rounded-lg bg-amber-50 p-4 text-amber-900">Este periodo está en modo consulta según la configuración del año lectivo.</p>
    {/if}
  </section>
{/if}
