<script lang="ts">
  import Icon from '#lib/components/Icon.svelte';
  export let data;
  export let form;

  type EditorField = { name: string; label: string; section: string; type: 'date' | 'number' | 'textarea' | 'select' | 'text'; options: string[]; maxLength: number | null; value: string };
  function signaturePad(node: HTMLCanvasElement) {
    const context = node.getContext('2d');
    if (!context) return {};
    const resize = () => {
      const rect = node.getBoundingClientRect();
      node.width = Math.max(1, Math.floor(rect.width));
      node.height = Math.max(1, Math.floor(rect.height));
      context.lineCap = 'round'; context.lineJoin = 'round'; context.lineWidth = 3; context.strokeStyle = '#111827';
    };
    let drawing = false;
    let dirty = false;
    const point = (event: PointerEvent) => {
      const rect = node.getBoundingClientRect();
      return { x: event.clientX - rect.left, y: event.clientY - rect.top };
    };
    const down = (event: PointerEvent) => { event.preventDefault(); node.setPointerCapture(event.pointerId); drawing = true; dirty = true; const p = point(event); context.beginPath(); context.moveTo(p.x, p.y); };
    const move = (event: PointerEvent) => { if (!drawing) return; event.preventDefault(); const p = point(event); context.lineTo(p.x, p.y); context.stroke(); };
    const up = () => {
      if (!drawing) return;
      drawing = false;
      if (dirty) {
        const input = node.parentElement?.querySelector<HTMLInputElement>('[data-signature-value]');
        if (input) input.value = node.toDataURL('image/png');
      }
    };
    resize();
    node.addEventListener('pointerdown', down); node.addEventListener('pointermove', move); node.addEventListener('pointerup', up); node.addEventListener('pointercancel', up);
    return { destroy() { node.removeEventListener('pointerdown', down); node.removeEventListener('pointermove', move); node.removeEventListener('pointerup', up); node.removeEventListener('pointercancel', up); } };
  }
  function clearSignature(event: MouseEvent) {
    const wrapper = (event.currentTarget as HTMLElement).closest('[data-signature-pad]');
    const canvas = wrapper?.querySelector('canvas');
    const context = canvas?.getContext('2d');
    if (context && canvas) context.clearRect(0, 0, canvas.width, canvas.height);
    const input = wrapper?.querySelector<HTMLInputElement>('[data-signature-value]');
    if (input) input.value = '';
  }

  const query = (page = 1) => {
    const params = new URLSearchParams({ ano: data.ano });
    if (data.grado) params.set('grado', data.grado);
    if (data.curso) params.set('curso', data.curso);
    if (data.search) params.set('buscar', data.search);
    if (page > 1) params.set('pagina', String(page));
    return `?${params}`;
  };
  const editorUrl = (studentId: string) => `/sedes/${encodeURIComponent(data.sede.id)}/piar?${new URLSearchParams({ ano: data.ano, form: 'edit', numidentif: studentId })}`;
  const periodUrl = (studentId: string, period: number, periodId?: number) => {
    const params = new URLSearchParams({ ano: data.ano, numidentif: studentId, periodo_ajuste: String(period) });
    if (periodId) params.set('period_id', String(periodId));
    return `/sedes/${encodeURIComponent(data.sede.id)}/piar?${params}`;
  };
  const signatureUrl = (periodEditor: Record<string, any>) => `/sedes/${encodeURIComponent(data.sede.id)}/piar/firma?${new URLSearchParams({ ano: data.ano, numidentif: String(periodEditor.student.numidentif), periodo: String(periodEditor.period), period_id: String(periodEditor.selected?.id || 0) })}`;
  const annexSignatureUrl = (studentId: string, scope: 'family' | 'plan', field: string) => `/sedes/${encodeURIComponent(data.sede.id)}/piar/firma?${new URLSearchParams({ ano: data.ano, numidentif: studentId, scope, field })}`;
  const value = (v: unknown) => v === null || v === undefined || v === '' ? '—' : String(v);
  const grouped = (fields: EditorField[]) => {
    const groups = new Map<string, EditorField[]>();
    for (const field of fields) groups.set(field.section, [...(groups.get(field.section) || []), field]);
    return [...groups.entries()].map(([title, items]) => ({ title, fields: items }));
  };
</script>

<svelte:head><title>PIAR · {data.sede.nombre}</title></svelte:head>
<div class="mb-8"><p class="eyebrow">{data.sede.nombre} · {data.ano}</p><h1 class="flex items-center gap-3"><span class="flex h-11 w-11 items-center justify-center rounded-xl bg-teal-50 text-teal-800"><Icon name="reports" size={25} /></span>Plan Individual de Ajustes Razonables</h1><p class="muted mt-3">Consulta y administra los planes de los estudiantes matriculados en esta sede.</p></div>

{#if data.periodEditor}
  {@const periodEditor = data.periodEditor}
  {@const selected = periodEditor.selected}
  {@const canEdit = periodEditor.canEdit}
  <div class="mb-5 flex flex-wrap items-center justify-between gap-4"><a href={query()} class="text-sm font-semibold text-school">← Volver a PIAR</a><span class="rounded-full bg-teal-50 px-3 py-1 text-sm font-semibold text-teal-800">Periodo {periodEditor.period}</span></div>
  {#if data.saved}<p class="mb-4 rounded-lg border border-emerald-200 bg-emerald-50 p-3 text-emerald-900" role="status">Ajuste de periodo guardado.</p>{/if}
  {#if form?.message}<p class="mb-4 rounded-lg border border-red-200 bg-red-50 p-3 text-red-900" role="alert">{form.message}</p>{/if}
  <section class="panel mb-5">
    <div class="mb-5 border-b border-stone-200 pb-4"><p class="eyebrow">{periodEditor.student.numidentif} · Grado {periodEditor.student.grado}-{periodEditor.student.curso}</p><h2 class="mt-1 text-xl">Ajustes PIAR para {periodEditor.student.nombre}</h2><p class="muted mt-1">Año lectivo {data.ano} · Periodo {periodEditor.period}</p></div>
    {#if !canEdit}<p class="mb-5 rounded-lg border border-amber-200 bg-amber-50 p-3 text-amber-900">Este periodo está cerrado para cambios. El contenido existente se muestra en modo de solo lectura.</p>{/if}
    {#if periodEditor.adjustments.length > 1 || (!selected && periodEditor.adjustments.length)}
      <div class="mb-6 rounded-xl border border-stone-200 p-4"><h3 class="font-semibold">Ajustes existentes de este periodo</h3><ul class="mt-2 space-y-2">{#each periodEditor.adjustments as adjustment}<li><a class="text-sm font-medium text-school underline" href={periodUrl(String(periodEditor.student.numidentif), periodEditor.period, Number(adjustment.id))}>{adjustment.asignatura_nombre || adjustment.id_cod_asignatura || 'Asignatura'} · Ajuste #{adjustment.id}</a></li>{/each}</ul></div>
    {/if}
    <form method="POST" action="?/savePiarPeriod" class="space-y-5">
      <input type="hidden" name="_csrf" value={data.csrf} /><input type="hidden" name="ano" value={data.ano} /><input type="hidden" name="numidentif" value={periodEditor.student.numidentif} /><input type="hidden" name="periodo" value={periodEditor.period} /><input type="hidden" name="period_id" value={selected?.id || 0} />
      <label class="block text-sm font-medium">Asignatura<select name="id_cod_asignatura" class="mt-1 block w-full rounded-lg border border-stone-300 px-3 py-2" required disabled={!canEdit}><option value="">Seleccione...</option>{#each periodEditor.assignments as subject}<option value={subject.codigo} selected={String(subject.codigo) === String(selected?.id_cod_asignatura || '')}>{subject.descripcion}</option>{/each}</select></label>
      {#each [{ name: 'objetivos', label: 'Objetivos / Propósitos' }, { name: 'barreras', label: 'Barreras que se evidencian' }, { name: 'ajustes', label: 'Ajustes razonables' }, { name: 'evaluacion', label: 'Evaluación de los ajustes' }] as field}
        <label class="block text-sm font-medium">{field.label}<textarea name={field.name} rows="3" readonly={!canEdit} class="mt-1 block w-full rounded-lg border border-stone-300 px-3 py-2 read-only:bg-stone-50">{selected?.[field.name] || ''}</textarea></label>
      {/each}
      <fieldset><legend class="text-sm font-medium">Firma docente</legend>{#if selected?.firma_docente}<img class="my-2 max-h-20 rounded border border-stone-200 bg-white p-1" src={signatureUrl(periodEditor)} alt="Firma docente guardada" />{/if}{#if canEdit}<div data-signature-pad><canvas use:signaturePad class="mt-2 h-28 w-full max-w-md touch-none rounded border border-stone-300 bg-white"></canvas><input type="hidden" name="signature_firma_docente" data-signature-value /><button class="mt-2 rounded-lg border border-stone-300 px-3 py-1.5 text-sm" type="button" onclick={clearSignature}>Limpiar firma nueva</button></div><p class="muted mt-1 text-xs">Al dibujar y guardar, la firma existente se reemplaza. Si no dibujas una nueva, se conserva.</p>{:else if !selected?.firma_docente}<p class="muted mt-2">Sin firma docente.</p>{/if}</fieldset>
      <div class="flex flex-wrap justify-end gap-3 border-t border-stone-200 pt-5"><a href={query()} class="rounded-lg border border-stone-300 px-4 py-2">Volver</a>{#if canEdit}<button class="rounded-lg bg-school px-5 py-2 font-semibold text-white" type="submit">Guardar ajuste</button>{/if}</div>
    </form>
    {#if canEdit && selected}
      <form method="POST" action="?/deletePiarPeriod" class="mt-3 flex justify-end" onsubmit={(event) => { if (!confirm('¿Eliminar este ajuste de periodo?')) event.preventDefault(); }}><input type="hidden" name="_csrf" value={data.csrf} /><input type="hidden" name="ano" value={data.ano} /><input type="hidden" name="numidentif" value={periodEditor.student.numidentif} /><input type="hidden" name="periodo" value={periodEditor.period} /><input type="hidden" name="period_id" value={selected.id} /><button class="rounded-lg border border-red-300 px-4 py-2 font-semibold text-red-700" type="submit">Eliminar ajuste</button></form>
    {/if}
  </section>
{:else if data.editor}
  <div class="mb-5 flex items-center justify-between gap-4"><a href={query()} class="text-sm font-semibold text-school">← Volver a PIAR</a><span class="text-sm text-slate-600">Año lectivo {data.ano}</span></div>
  {#if data.saved}<p class="mb-4 rounded-lg border border-emerald-200 bg-emerald-50 p-3 text-emerald-900" role="status">PIAR guardado.</p>{/if}
  {#if form?.message}<p class="mb-4 rounded-lg border border-red-200 bg-red-50 p-3 text-red-900" role="alert">{form.message}</p>{/if}
  <section class="panel">
    <div class="mb-6 border-b border-stone-200 pb-4"><p class="eyebrow">{data.editor.student.numidentif} · Grado {data.editor.student.grado}-{data.editor.student.curso}</p><h2 class="mt-1 text-xl">{data.editor.student.nombre}</h2><p class="muted mt-1">Completa los apartados disponibles en las tablas PIAR existentes. Las firmas guardadas se conservan.</p></div>
    <form method="POST" action="?/savePiar" class="space-y-8">
      <input type="hidden" name="_csrf" value={data.csrf} />
      <input type="hidden" name="ano" value={data.ano} />
      <input type="hidden" name="numidentif" value={data.editor.student.numidentif} />
      {#if data.editor.hasEps}
        <div class="max-w-xl"><label class="block text-sm font-medium">EPS / ARS<input name="epsars" value={value(data.editor.student.epsars) === '—' ? '' : data.editor.student.epsars} maxlength="100" class="mt-1 block w-full rounded-lg border border-stone-300 px-3 py-2" /></label></div>
      {/if}
      <div>
        <h3 class="mb-4 text-lg font-semibold">Anexo 1 · Información familiar, salud y entorno</h3>
        {#if data.editor.familyFields.length === 0}<p class="muted">La tabla `piar_alumnos` no tiene campos editables reconocidos en esta instalación.</p>{/if}
        {#each grouped(data.editor.familyFields as EditorField[]) as section}
          <fieldset class="mb-5 rounded-xl border border-stone-200 p-4"><legend class="px-2 font-semibold">{section.title}</legend><div class="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
            {#each section.fields as field}
              <label class="block text-sm font-medium">{field.label}
                {#if field.name === 'id_docente'}
                  <select name={`family[${field.name}]`} value={field.value} class="mt-1 block w-full rounded-lg border border-stone-300 px-3 py-2"><option value="">Seleccione...</option>{#each data.editor.teachers as teacher}<option value={teacher.cedula}>{teacher.nombre}</option>{/each}</select>
                {:else if field.type === 'select' && field.options.length}
                  <select name={`family[${field.name}]`} value={field.value} class="mt-1 block w-full rounded-lg border border-stone-300 px-3 py-2"><option value="">Seleccione...</option>{#each field.options as option}<option value={option}>{option}</option>{/each}</select>
                {:else if field.type === 'textarea'}
                  <textarea name={`family[${field.name}]`} maxlength={field.maxLength ?? undefined} rows="3" class="mt-1 block w-full rounded-lg border border-stone-300 px-3 py-2">{field.value}</textarea>
                {:else}
                  <input name={`family[${field.name}]`} type={field.type} value={field.value} maxlength={field.maxLength ?? undefined} step={field.type === 'number' ? 'any' : undefined} class="mt-1 block w-full rounded-lg border border-stone-300 px-3 py-2" />
                {/if}
              </label>
            {/each}
          </div></fieldset>
        {/each}
        {#if data.editor.familySignatures.length}
          <fieldset class="mb-5 rounded-xl border border-stone-200 p-4"><legend class="px-2 font-semibold">Firmas del Anexo 1</legend><div class="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
            {#each data.editor.familySignatures as signature}
              <div data-signature-pad class="rounded-lg border border-stone-200 p-3"><p class="text-sm font-medium">{signature.label}</p>{#if signature.filename}<img class="my-2 max-h-20 rounded border border-stone-200 bg-white p-1" src={annexSignatureUrl(String(data.editor.student.numidentif), 'family', signature.name)} alt={`${signature.label} guardada`} />{/if}<canvas use:signaturePad class="mt-2 h-28 w-full touch-none rounded border border-stone-300 bg-white" aria-label={`Nueva ${signature.label}`}></canvas><input type="hidden" name={`signature_${signature.name}`} data-signature-value /><button class="mt-2 rounded-lg border border-stone-300 px-3 py-1.5 text-sm" type="button" onclick={clearSignature}>Reiniciar</button></div>
            {/each}
          </div></fieldset>
        {/if}
      </div>
      <div>
        <h3 class="mb-4 text-lg font-semibold">Anexos 2 y 3 · Plan individual y seguimiento</h3>
        {#if data.editor.planFields.length === 0}<p class="muted">La tabla `piar` no tiene campos editables reconocidos en esta instalación.</p>{/if}
        {#each grouped(data.editor.planFields as EditorField[]) as section}
          <fieldset class="mb-5 rounded-xl border border-stone-200 p-4"><legend class="px-2 font-semibold">{section.title}</legend><div class="grid gap-4 md:grid-cols-2">
            {#each section.fields as field}
              <label class="block text-sm font-medium">{field.label}
                {#if field.type === 'select' && field.options.length}
                  <select name={`plan[${field.name}]`} value={field.value} class="mt-1 block w-full rounded-lg border border-stone-300 px-3 py-2"><option value="">Seleccione...</option>{#each field.options as option}<option value={option}>{field.name === 'confirmacion_lectura' ? (option === '1' ? 'Sí' : 'No') : option}</option>{/each}</select>
                {:else if field.type === 'textarea'}
                  <textarea name={`plan[${field.name}]`} maxlength={field.maxLength ?? undefined} rows="4" class="mt-1 block w-full rounded-lg border border-stone-300 px-3 py-2">{field.value}</textarea>
                {:else}
                  <input name={`plan[${field.name}]`} type={field.type} value={field.value} maxlength={field.maxLength ?? undefined} step={field.type === 'number' ? 'any' : undefined} class="mt-1 block w-full rounded-lg border border-stone-300 px-3 py-2" />
                {/if}
              </label>
            {/each}
          </div></fieldset>
        {/each}
        {#if data.editor.planSignatures.length}
          <fieldset class="mb-5 rounded-xl border border-stone-200 p-4"><legend class="px-2 font-semibold">Firmas de los Anexos 2 y 3</legend><div class="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
            {#each data.editor.planSignatures as signature}
              <div data-signature-pad class="rounded-lg border border-stone-200 p-3"><p class="text-sm font-medium">{signature.label}</p>{#if signature.filename}<img class="my-2 max-h-20 rounded border border-stone-200 bg-white p-1" src={annexSignatureUrl(String(data.editor.student.numidentif), 'plan', signature.name)} alt={`${signature.label} guardada`} />{/if}<canvas use:signaturePad class="mt-2 h-28 w-full touch-none rounded border border-stone-300 bg-white" aria-label={`Nueva ${signature.label}`}></canvas><input type="hidden" name={`signature_${signature.name}`} data-signature-value /><button class="mt-2 rounded-lg border border-stone-300 px-3 py-1.5 text-sm" type="button" onclick={clearSignature}>Reiniciar</button></div>
            {/each}
          </div></fieldset>
        {/if}
      </div>
      <div class="flex flex-wrap justify-end gap-3 border-t border-stone-200 pt-5"><a href={query()} class="rounded-lg border border-stone-300 px-4 py-2">Cancelar</a><button class="rounded-lg bg-school px-5 py-2 font-semibold text-white" type="submit">Guardar PIAR</button></div>
    </form>
  </section>
{:else}
  <section class="panel mb-6">
    <div class="flex flex-wrap items-end justify-between gap-4"><div><h2>Planes registrados</h2><p class="muted mt-1">{data.piar.total} resultados</p></div><form class="flex flex-wrap items-end gap-3" method="GET"><input type="hidden" name="ano" value={data.ano} /><label class="text-xs font-medium">Grado<select name="grado" class="mt-1 block rounded-lg border border-stone-300 px-3 py-2"><option value="">Todos</option>{#each data.filters.grados as item}<option value={item} selected={item === data.grado}>{item}</option>{/each}</select></label><label class="text-xs font-medium">Curso<select name="curso" class="mt-1 block rounded-lg border border-stone-300 px-3 py-2"><option value="">Todos</option>{#each data.filters.cursos as item}<option value={item} selected={item === data.curso}>{item}</option>{/each}</select></label><label class="text-xs font-medium">Buscar<input name="buscar" value={data.search} placeholder="Estudiante o descripción" class="mt-1 block w-64 rounded-lg border border-stone-300 px-3 py-2" /></label><button class="rounded-lg bg-school px-4 py-2 font-semibold text-white" type="submit">Aplicar</button></form></div>
    {#if !data.piar.disponible}<p class="mt-6 rounded-lg bg-amber-50 p-4 text-amber-900">Las tablas PIAR no están disponibles en esta instalación.</p>{:else if data.piar.rows.length === 0}<p class="mt-6 rounded-lg bg-stone-50 p-4 text-slate-600">No hay planes con los filtros seleccionados.</p>{:else}<div class="mt-6 overflow-x-auto"><table class="w-full text-left text-sm"><thead class="border-b border-stone-200 text-xs uppercase text-slate-600"><tr><th class="p-3">Estudiante</th><th class="p-3">Grupo</th><th class="p-3">Fecha</th><th class="p-3">Periodos / ajustes</th><th class="p-3">Ficha familiar</th><th class="p-3">Lectura</th><th class="p-3">Descripción general</th><th class="p-3">Acción</th></tr></thead><tbody>{#each data.piar.rows as row}<tr class="border-b border-stone-100 align-top"><td class="p-3 font-medium">{value(row.estudiante)}</td><td class="p-3">{value(row.grado)}-{value(row.curso)}</td><td class="p-3 whitespace-nowrap">{value(row.fecha_elaboracion)}</td><td class="p-3"><div>{value(row.periodos)}</div><div class="mt-2 flex flex-wrap gap-1">{#each [1,2,3,4,5] as period}<a class="rounded border border-stone-300 px-2 py-1 text-xs font-medium text-school" href={periodUrl(String(row.id_numidentif), period)}>Per{period}</a>{/each}</div></td><td class="p-3">{Number(row.ficha_familiar || 0) > 0 ? 'Sí' : 'No'}</td><td class="p-3">{Number(row.confirmacion_lectura || 0) ? 'Confirmada' : 'Pendiente'}</td><td class="max-w-md p-3">{value(row.descripcion_general)}</td><td class="p-3"><a class="whitespace-nowrap font-semibold text-school" href={editorUrl(String(row.id_numidentif))}>Editar PIAR</a></td></tr>{/each}</tbody></table></div>{/if}
    {#if data.piar.total > data.piar.pageSize}<nav class="mt-5 flex items-center justify-between text-sm"><span>Página {data.piar.page}</span><div class="flex gap-2">{#if data.piar.page > 1}<a class="rounded border border-stone-300 px-3 py-2" href={query(data.piar.page - 1)}>Anterior</a>{/if}{#if data.piar.page * data.piar.pageSize < data.piar.total}<a class="rounded border border-stone-300 px-3 py-2" href={query(data.piar.page + 1)}>Siguiente</a>{/if}</div></nav>{/if}
  </section>

  {#if data.piar.disponible}
    <details class="panel"><summary class="cursor-pointer font-semibold">Registrar un estudiante matriculado en PIAR <span class="muted font-normal">({data.studentsWithoutPlan.length} candidatos)</span></summary>
      <form class="mt-4 flex flex-wrap items-end gap-3" method="GET"><input type="hidden" name="ano" value={data.ano} />{#if data.grado}<input type="hidden" name="grado" value={data.grado} />{/if}{#if data.curso}<input type="hidden" name="curso" value={data.curso} />{/if}<label class="text-sm font-medium">Buscar estudiante<input name="buscar" value={data.search} placeholder="Nombre o identificación" class="mt-1 block w-72 rounded-lg border border-stone-300 px-3 py-2" /></label><button class="rounded-lg border border-stone-300 px-4 py-2" type="submit">Buscar</button></form>
      {#if data.studentsWithoutPlan.length}<div class="mt-4 max-h-96 overflow-auto rounded-lg border border-stone-200"><table class="w-full text-left text-sm"><thead class="sticky top-0 bg-stone-50"><tr><th class="p-3">Estudiante</th><th class="p-3">Identificación</th><th class="p-3">Grupo</th><th class="p-3">Ajustes de periodo</th><th class="p-3"></th></tr></thead><tbody>{#each data.studentsWithoutPlan as student}<tr class="border-t border-stone-100"><td class="p-3">{student.estudiante}</td><td class="p-3">{student.numidentif}</td><td class="p-3">{student.grado}-{student.curso}</td><td class="p-3"><div class="flex flex-wrap gap-1">{#each [1,2,3,4,5] as period}<a class="rounded border border-stone-300 px-2 py-1 text-xs font-medium text-school" href={periodUrl(String(student.numidentif), period)}>Per{period}</a>{/each}</div></td><td class="p-3"><a class="font-semibold text-school" href={editorUrl(String(student.numidentif))}>Crear PIAR</a></td></tr>{/each}</tbody></table></div>{:else}<p class="muted mt-4">No se encontraron matrículas sin PIAR con esos filtros.</p>{/if}
    </details>
  {/if}
{/if}
