<script lang="ts">
  import Icon from '#lib/components/Icon.svelte';
  import type { PageData } from './$types';
  let { data }: { data: PageData } = $props();
  let search = $state('');
  let executingReport = $state<Record<string, unknown> | null>(null);
  let reportState = $state('');
  let reportGrade = $state('');
  let reportCourse = $state('');
  let reportTeacher = $state('');
  let reportSourceQ = $state('');
  let reportSourceSmart = $state('');
  $effect(() => { reportSourceSmart = data.sourceSmart; });
  let reportSortField = $state('');
  let reportSortDirection = $state('ASC');
  let reportGroupFields = $state<string[]>([]);
  let reportWhereExtra = $state('');
  let reportSqlExpression = $state('');
  let reportSqlAlias = $state('');
  $effect(() => { reportTeacher = data.sourceTeacher; });
  const query = $derived(new URLSearchParams({ ano: data.ano, ...data.filtros }).toString());
  const reports = [
    { tipo: 'estudiantes', title: 'Matriculados', icon: 'students', text: 'Estudiantes, estado y perd_def.' },
    { tipo: 'docentes', title: 'Docentes', icon: 'teachers', text: 'Docentes vinculados a la sede y su carga.' },
    { tipo: 'asignaturas', title: 'Asignaturas', icon: 'subjects', text: 'Asignaturas por grado, curso y docente.' },
    { tipo: 'grados', title: 'Grados y grupos', icon: 'groups', text: 'Grupos con estudiantes y métricas.' }
  ] as const;
  const filteredReports = $derived(data.reportesAcademicos.filter((report: Record<string, unknown>) => {
    const categories = String(report.filtro_sc || '').split(/[;,]/).map((category) => category.trim().toLocaleLowerCase()).filter(Boolean);
    const categoryMatches = !data.selectorMode || !data.filtroSc || categories.includes(String(data.filtroSc).trim().toLocaleLowerCase());
    return categoryMatches && `${report.nombre || ''} ${report.grupo_descripcion || ''} ${report.filtro_sc || ''}`.toLocaleLowerCase().includes(search.trim().toLocaleLowerCase());
  }));
  const hasTeacherCategory = (report: Record<string, unknown>) => /docentes|asignaturas/i.test(String(report.filtro_sc || '').replace(/[;,]/g, ' '));
  const hasMatriculatedCategory = (report: Record<string, unknown>) => /(?:^|[;,])\s*matriculados\s*(?:[;,]|$)/i.test(String(report.filtro_sc || ''));
  const gradeOptions = $derived([...new Set(data.grupos.map((group) => String(group.grado)))].sort());
  const courseOptions = $derived.by(() => {
    const groups = data.grupos;
    return [...new Set(groups.filter((group) => !reportGrade || String(group.grado) === reportGrade).map((group) => String(group.curso)))].sort();
  });
</script>
<svelte:head><title>Reportes | {data.sede.nombre}</title></svelte:head>
<div class="mb-8"><p class="eyebrow">{data.sede.nombre} · {data.ano}</p><div class="flex flex-wrap items-center justify-between gap-3"><div><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>Reportes</h1><p class="muted mt-3">Reportes generados con los filtros de la sede activa.</p>{#if data.selectorMode && data.sourceContext}<p class="mt-2 rounded-lg border border-teal-200 bg-teal-50 p-3 text-sm text-teal-900">Selector abierto desde {data.sourceContext}. El filtro se aplica solo a la ejecución.</p>{/if}{#if data.selectorMode && data.sourceSmart}<p class="muted mt-2 text-sm">Filtro inteligente de origen: {data.sourceSmart}</p>{/if}{#if data.selectorMode && data.sourceTeacher}<p class="muted mt-2 text-sm">Docente de origen: {data.sourceTeacherName}</p>{/if}</div>{#if data.canManageReports}<a class="button-primary inline-flex" href={`/sedes/${encodeURIComponent(data.sede.id)}/reportes/prueba-estudiantes?ano=${encodeURIComponent(data.ano)}`}>Administrar reportes</a>{/if}</div></div>
<div class="grid gap-5 sm:grid-cols-2">{#each reports as report}<article class="panel"><h2 class="flex items-center gap-3"><span class="flex h-10 w-10 items-center justify-center rounded-xl bg-teal-50 text-teal-800"><Icon name={report.icon} size={22} /></span>{report.title}</h2><p class="muted mt-3">{report.text}</p><a class="button-primary mt-6 inline-flex" href={`/sedes/${encodeURIComponent(data.sede.id)}/reportes/pdf?tipo=${report.tipo}&${query}`} target="_blank" rel="noreferrer">Abrir PDF</a></article>{/each}</div>
{#if data.reportesAcademicos.length > 0}
  <section class="panel mt-8">
    <div class="mb-4 flex flex-wrap items-end justify-between gap-3"><div><h2>Reportes académicos configurados</h2><p class="muted mt-1">Plantillas de reportes_academico. Prepara los filtros de cada ejecución sin cambiar el filtro general.</p>{#if data.selectorMode && data.filtroSc}<p class="muted mt-1 text-sm">Categoría: {data.filtroSc}</p>{/if}</div><label class="text-sm">Buscar reporte<input bind:value={search} type="search" placeholder="Nombre, grupo o acceso" class="mt-1 block w-full rounded-lg border border-stone-300 px-3 py-2" /></label></div>
    <p class="muted mb-2 text-sm">{filteredReports.length} reportes disponibles</p>
    <div class="overflow-x-auto"><table class="w-full text-left text-sm"><thead class="border-b border-stone-200 text-xs uppercase text-slate-500"><tr><th class="p-3">Reporte</th><th class="p-3">Grupo</th><th class="p-3">Filtro</th><th class="p-3">Acción</th></tr></thead><tbody>{#each filteredReports as reporte}<tr class="border-b border-stone-100 last:border-0"><td class="p-3 font-medium">{String(reporte.nombre || '')}</td><td class="p-3">{String(reporte.grupo_descripcion || 'General')}</td><td class="p-3">{String(reporte.filtro_sc || 'General')}</td><td class="p-3"><button class="button-primary inline-flex" type="button" onclick={() => { reportState = data.filtros.estado; reportGrade = data.filtros.grado; reportCourse = data.filtros.curso; reportTeacher = data.sourceTeacher; reportSourceQ = data.sourceQ; reportSortField = ''; reportSortDirection = 'ASC'; reportGroupFields = []; reportWhereExtra = ''; reportSqlExpression = ''; reportSqlAlias = ''; executingReport = reporte; }}>Preparar ejecución</button></td></tr>{:else}<tr><td colspan="4" class="p-4 text-center text-slate-500">No hay reportes que coincidan con la búsqueda.</td></tr>{/each}</tbody></table></div>
  </section>
{:else}
  <p class="panel muted mt-8">No hay reportes académicos activos disponibles en reportes_academico.</p>
{/if}

{#if executingReport}
  {@const reportToRun = executingReport}
  <div class="fixed inset-0 z-50 flex items-start justify-center overflow-y-auto bg-slate-950/50 p-4" role="presentation" onclick={(event) => { if (event.target === event.currentTarget) executingReport = null; }}>
    <dialog open class="my-6 w-full max-w-2xl rounded-2xl bg-white p-5 shadow-2xl" aria-modal="true" aria-labelledby="report-run-title">
      <div class="mb-5 flex items-start justify-between gap-4"><div><p class="eyebrow">Ejecución de reporte</p><h2 id="report-run-title">{String(reportToRun.nombre || '')}</h2><p class="muted mt-1 text-sm">Estos filtros aplican solo a este reporte.</p></div><button class="rounded-lg border border-stone-300 px-3 py-2" type="button" onclick={() => (executingReport = null)}>Cerrar</button></div>
      <form method="GET" action={`/sedes/${encodeURIComponent(data.sede.id)}/reportes/prueba-estudiantes/pdf`} target="_blank" class="grid gap-4">
        <input type="hidden" name="ano" value={data.ano} /><input type="hidden" name="sede" value={data.sede.id} /><input type="hidden" name="reporte_id" value={String(reportToRun.row_id)} /><input type="hidden" name="reporte" value={String(reportToRun.nombre || '')} />
        {#if data.sourceContext}<input type="hidden" name="source_context" value={data.sourceContext} />{:else if hasTeacherCategory(reportToRun)}<input type="hidden" name="source_context" value="docentes" />{/if}
        <div class="grid gap-3 sm:grid-cols-3">
          <label>Estado<select name="estado" bind:value={reportState} class="mt-1 block w-full rounded-lg border border-stone-300 px-3 py-2"><option value="">Todos</option>{#each data.estados as estado}<option value={estado.codigo}>{estado.descripcion}</option>{/each}</select></label>
          <label>Grado<select name="grado" bind:value={reportGrade} onchange={() => (reportCourse = '')} class="mt-1 block w-full rounded-lg border border-stone-300 px-3 py-2"><option value="">Todos</option>{#each gradeOptions as grade}<option value={grade}>{grade}</option>{/each}</select></label>
          <label>Curso<select name="curso" bind:value={reportCourse} class="mt-1 block w-full rounded-lg border border-stone-300 px-3 py-2"><option value="">Todos</option>{#each courseOptions as course}<option value={course}>{course}</option>{/each}</select></label>
        </div>
        <label>Buscar en los datos del reporte<input name="source_q" maxlength="100" bind:value={reportSourceQ} placeholder="Nombre, identificación, asignatura o curso" class="mt-1 block w-full rounded-lg border border-stone-300 px-3 py-2" /></label>
        {#if hasMatriculatedCategory(reportToRun)}<label>Filtro inteligente de matrículas<textarea name="source_smart" maxlength="300" rows="2" bind:value={reportSourceSmart} placeholder="Ej.: estudiantes de sexo femenino, edad entre 10 y 12, sin correo de acudiente" class="mt-1 block w-full rounded-lg border border-stone-300 px-3 py-2"></textarea><span class="muted mt-1 block text-xs">Combina criterios como sexo, edad, fecha de nacimiento, estado, grado, curso, contacto faltante, EPS, barrio o ciudad.</span></label>{/if}
        <label>Filtro adicional del reporte<input name="where_extra" maxlength="300" bind:value={reportWhereExtra} placeholder="Ej.: mat.grado = '03' AND mat.curso = '1N'" class="mt-1 block w-full rounded-lg border border-stone-300 px-3 py-2" /><span class="muted mt-1 block text-xs">Usa campos incluidos en la plantilla y condiciones con =, &lt;, &gt;, LIKE, IN, IS NULL, AND, OR o paréntesis. El servidor valida la expresión.</span></label>
        {#if data.canManageReports && hasTeacherCategory(reportToRun)}<label>Docente<select name="docente" bind:value={reportTeacher} class="mt-1 block w-full rounded-lg border border-stone-300 px-3 py-2"><option value="">Todos los docentes</option>{#each data.docentes as docente}<option value={docente.cedula}>{docente.nombre} · {docente.cedula}</option>{/each}</select></label>{/if}
        {#if data.canUseAdvancedReportSql}<fieldset class="grid gap-3 rounded-xl border border-amber-200 bg-amber-50/50 p-4"><legend class="px-2 font-semibold">Columna calculada avanzada</legend><p class="muted text-xs">Disponible para cuentas Gegar, como en PHP. Se permiten expresiones calculadas predefinidas y columnas existentes en el MRT.</p><div class="grid gap-3 sm:grid-cols-2"><label>Expresión<input name="fn_expr" maxlength="200" bind:value={reportSqlExpression} placeholder="TIMESTAMPDIFF(YEAR, al.fecha_nacimiento, CURRENT_DATE)" class="mt-1 block w-full rounded-lg border border-stone-300 px-3 py-2" /></label><label>Nombre de la columna<input name="fn_alias" maxlength="31" bind:value={reportSqlAlias} placeholder="edad_calculada" class="mt-1 block w-full rounded-lg border border-stone-300 px-3 py-2" /></label></div><span class="muted text-xs">Admite DATEDIFF, TIMESTAMPDIFF, YEAR, MONTH, DAY, UPPER, LOWER, TRIM, LENGTH, ABS, ROUND, COALESCE e IFNULL.</span></fieldset>{/if}
        {#if hasMatriculatedCategory(reportToRun)}<fieldset class="grid gap-3 rounded-xl border border-stone-200 p-4"><legend class="px-2 font-semibold">Orden temporal de filas</legend><p class="muted text-xs">Stimulsoft ordena en memoria sin cambiar la consulta ni la plantilla.</p><div class="grid gap-3 sm:grid-cols-2"><label>Ordenar por<select name="sort_field" bind:value={reportSortField} class="mt-1 block w-full rounded-lg border border-stone-300 px-3 py-2"><option value="">Orden de la plantilla</option><option value="mat.nombre">Nombre del estudiante</option><option value="mat.numlista">Número de lista</option><option value="mat.grado">Grado</option><option value="mat.curso">Curso</option><option value="mat.numidentif">Identificación</option><option value="mat.estadofinal">Estado final</option><option value="mat.ano_lectivo">Año lectivo</option></select></label><label>Dirección<select name="sort_dir" bind:value={reportSortDirection} disabled={!reportSortField} class="mt-1 block w-full rounded-lg border border-stone-300 px-3 py-2"><option value="ASC">Ascendente</option><option value="DESC">Descendente</option></select></label></div></fieldset>{/if}
        {#if hasMatriculatedCategory(reportToRun)}<fieldset class="grid gap-3 rounded-xl border border-stone-200 p-4"><legend class="px-2 font-semibold">Agrupar filas</legend><p class="muted text-xs">Agrupa temporalmente por grado o curso, como en el editor PHP. No cambia el archivo MRT.</p><div class="flex flex-wrap gap-5"><label class="flex items-center gap-2"><input type="checkbox" name="group_fields" value="mat.grado" bind:group={reportGroupFields} /> Grado</label><label class="flex items-center gap-2"><input type="checkbox" name="group_fields" value="mat.curso" bind:group={reportGroupFields} /> Curso</label></div></fieldset>{/if}
        {#if [1,2,3,4,5].some((index) => String(reportToRun['nombre' + index] || '').trim())}<fieldset class="grid gap-3 rounded-xl border border-stone-200 p-4"><legend class="px-2 font-semibold">Variables del reporte</legend>{#each [1,2,3,4,5] as index}{#if String(reportToRun['nombre' + index] || '').trim()}<label>{String(reportToRun['nombre' + index])}<input name={'contenido' + index} value={String(reportToRun['contenido' + index] || '')} class="mt-1 block w-full rounded-lg border border-stone-300 px-3 py-2" /></label>{/if}{/each}</fieldset>{/if}
        <label>Tamaño del papel<select name="paper_size" class="mt-1 block w-full rounded-lg border border-stone-300 px-3 py-2"><option value="">Definido por la plantilla</option><option value="carta">Carta</option><option value="oficio">Oficio</option></select><span class="muted mt-1 block text-xs">Se aplica solo a esta ejecución y conserva la orientación del reporte.</span></label>
        <fieldset class="rounded-xl border border-stone-200 p-4"><legend class="px-2 font-semibold">Salida</legend><div class="flex flex-wrap gap-5"><label class="flex items-center gap-2"><input type="radio" name="pdf" value="N" checked /> Abrir PDF en el navegador</label><label class="flex items-center gap-2"><input type="radio" name="pdf" value="S" /> Descargar PDF</label><label class="flex items-center gap-2"><input type="checkbox" name="codigo_qr" value="S" /> Guardar copia con código QR</label></div><p class="muted mt-2 text-xs">Requiere iniciar sesión. La copia queda privada y disponible mediante el identificador que se inserta en la variable <code>ggs_qr</code> de la plantilla, si existe.</p></fieldset>
        <div class="flex justify-end gap-2"><button class="rounded-lg border border-stone-300 px-4 py-2" type="button" onclick={() => (executingReport = null)}>Cancelar</button><button class="button-primary" type="submit">Ejecutar reporte</button></div>
      </form>
    </dialog>
  </div>
{/if}
