<script lang="ts">
  import type { ActionData, PageData } from './$types';
  let { data, form }: { data: PageData; form?: ActionData } = $props();
  let selectedGrades = $state<string[]>([]);
  const months = [
    ['enero', 'Enero'], ['febrero', 'Febrero'], ['marzo', 'Marzo'], ['abril', 'Abril'],
    ['mayo', 'Mayo'], ['junio', 'Junio'], ['julio', 'Julio'], ['agosto', 'Agosto'],
    ['septiembre', 'Septiembre'], ['octubre', 'Octubre'], ['noviembre', 'Noviembre'], ['diciembre', 'Diciembre']
  ];
  const monthAbbreviations: Record<string, string> = { enero: 'Ene', febrero: 'Feb', marzo: 'Mar', abril: 'Abr', mayo: 'May', junio: 'Jun', julio: 'Jul', agosto: 'Ago', septiembre: 'Sep', octubre: 'Oct', noviembre: 'Nov', diciembre: 'Dic' };
  const baseUrl = $derived(`/sedes/${encodeURIComponent(data.sede.id)}/cartera/configuracion?ano=${encodeURIComponent(data.ano)}`);
  const value = (row: Record<string, unknown> | null, field: string, fallback = '') => String(row?.[field] ?? fallback);
  const money = (raw: unknown) => Number(raw || 0).toLocaleString('es-CO', { style: 'currency', currency: 'COP', maximumFractionDigits: 0 });
  const selectAllGrades = () => { selectedGrades = data.billingGroups.grupos.map((group) => String(group.grado)); };
  const clearGrades = () => { selectedGrades = []; };
  const applyGradePreset = (codes: string[]) => { selectedGrades = data.billingGroups.grupos.map((group) => String(group.grado)).filter((grade) => codes.includes(grade)); };
</script>

<svelte:head><title>Tarifas y conceptos · Cartera · {data.sede.nombre}</title></svelte:head>

<div class="mb-6 flex flex-wrap items-end justify-between gap-4">
  <div><p class="eyebrow">{data.sede.nombre} · {data.ano}</p><h1 class="mt-1">Configuración de Cartera</h1><p class="muted mt-2">Administra los conceptos y las tarifas usadas para calcular las cuentas.</p></div>
  <a class="rounded-lg border border-stone-300 px-4 py-2 text-sm font-semibold" href={`/sedes/${encodeURIComponent(data.sede.id)}/cartera?ano=${encodeURIComponent(data.ano)}`}>Volver a Cartera</a>
</div>

<nav class="mb-5 flex flex-wrap gap-2" aria-label="Configuración de cartera">
  <a class={`rounded-lg px-4 py-2 text-sm font-semibold ${data.tab === 'tarifas' ? 'bg-school text-white' : 'border border-stone-300'}`} href={`${baseUrl}&tab=tarifas`}>Tarifas</a>
  <a class={`rounded-lg px-4 py-2 text-sm font-semibold ${data.tab === 'conceptos' ? 'bg-school text-white' : 'border border-stone-300'}`} href={`${baseUrl}&tab=conceptos`}>Conceptos</a>
</nav>

{#if form?.message}<p class="mb-5 rounded-xl border border-rose-200 bg-rose-50 p-4 text-sm text-rose-900" role="alert">{form.message}</p>{/if}
{#if data.guardado}
  <p class="mb-5 rounded-xl border border-emerald-200 bg-emerald-50 p-4 text-sm text-emerald-900" role="status">Los cambios se guardaron.</p>
{/if}
{#if data.operacion === 'asignacion' || data.operacion === 'sincronizacion'}
  <p class="mb-5 rounded-xl border border-emerald-200 bg-emerald-50 p-4 text-sm text-emerald-900" role="status">
    {#if data.operacion === 'asignacion'}<span>Asignación terminada. Cursos actualizados: {data.asignados}. Matrículas activas actualizadas: {data.matriculas}.</span>{/if}
    {#if data.operacion === 'sincronizacion'}<span>Matrículas sincronizadas desde datoscurso: {data.sincronizados}.</span>{/if}
  </p>
{/if}
{#if data.operacion === 'generacion'}
  <p class="mb-5 rounded-xl border border-emerald-200 bg-emerald-50 p-4 text-sm text-emerald-900" role="status">Generación completada para {data.generados} matrículas atribuibles a esta sede: {data.cuentasCreadas} cuentas creadas y {data.cuentasActualizadas} cuentas actualizadas.</p>
{/if}

{#if !data.catalog.disponible}
  <section class="panel"><h2>No está disponible la configuración</h2><p class="muted mt-2">{data.catalog.detalle} No se modificó la estructura de la base de datos.</p></section>
{:else if data.tab === 'conceptos'}
  <div class="grid items-start gap-5 xl:grid-cols-[minmax(0,1.4fr)_minmax(22rem,1fr)]">
    <section class="panel overflow-x-auto">
      <h2>Conceptos definidos</h2><p class="muted mt-1">Año lectivo {data.ano}</p>
      {#if data.catalog.conceptos.length === 0}<p class="mt-4 rounded-lg bg-stone-50 p-4 text-sm text-slate-600">No hay conceptos para este año.</p>
      {:else}
        <table class="mt-4 w-full text-left text-sm"><thead class="border-b border-stone-200 text-xs uppercase text-slate-600"><tr><th class="p-2">Código</th><th class="p-2">Descripción</th><th class="p-2">Tipo</th><th class="p-2">Meses activos</th><th class="p-2">Estado</th><th class="p-2">Acción</th></tr></thead><tbody>
          {#each data.catalog.conceptos as concept}
            {@const activeMonths = months.filter(([key]) => String(concept[key] || 'N').toUpperCase() === 'S').map(([key]) => monthAbbreviations[key]).join(', ')}
            <tr class="border-b border-stone-100"><td class="p-2 font-semibold">{String(concept.codigo)}</td><td class="p-2">{String(concept.descripcion)}</td><td class="p-2">{String(concept.tipo_cobro)}</td><td class="p-2">{String(concept.tipo_cobro) === 'UNICO' ? 'Cobro anual único' : activeMonths || 'Ningún mes'}</td><td class="p-2">{String(concept.estado)}</td><td class="p-2"><a class="font-semibold text-teal-800 hover:underline" href={`${baseUrl}&tab=conceptos&editar_concepto=${encodeURIComponent(String(concept.codigo))}`}>Editar</a></td></tr>
          {/each}
        </tbody></table>
      {/if}
    </section>
    <section class="panel">
      <h2>{data.editConcept ? 'Editar concepto' : 'Crear concepto'}</h2>
      <form method="POST" action="?/saveConcept" class="mt-4 space-y-4">
        <input type="hidden" name="_csrf" value={data.csrf} /><input type="hidden" name="anolectivo" value={data.ano} />
        <div class="grid grid-cols-[7rem_1fr] gap-3">
          <label class="text-sm font-medium">Código<input name="codigo" maxlength="2" required value={value(data.editConcept, 'codigo')} class="mt-1 block w-full rounded-lg border border-stone-300 px-3 py-2" /></label>
          <label class="text-sm font-medium">Descripción<input name="descripcion" maxlength="30" required value={value(data.editConcept, 'descripcion')} class="mt-1 block w-full rounded-lg border border-stone-300 px-3 py-2" /></label>
        </div>
        <div class="grid gap-3 sm:grid-cols-2">
          <label class="text-sm font-medium">Tipo de cobro<select name="tipo_cobro" value={value(data.editConcept, 'tipo_cobro', 'MENSUAL')} class="mt-1 block w-full rounded-lg border border-stone-300 bg-white px-3 py-2"><option value="MENSUAL">Mensual</option><option value="UNICO">Único</option></select></label>
          <label class="text-sm font-medium">Estado<select name="estado" value={value(data.editConcept, 'estado', 'ACTIVO')} class="mt-1 block w-full rounded-lg border border-stone-300 bg-white px-3 py-2"><option value="ACTIVO">Activo</option><option value="INACTIVO">Inactivo</option></select></label>
        </div>
        <div class="grid gap-3 sm:grid-cols-2">
          <label class="text-sm font-medium">Cuenta contable<input name="cuenta" maxlength="15" value={value(data.editConcept, 'cuenta')} class="mt-1 block w-full rounded-lg border border-stone-300 px-3 py-2" /></label>
          <label class="text-sm font-medium">Genera interés<select name="interes" value={value(data.editConcept, 'interes', 'N')} class="mt-1 block w-full rounded-lg border border-stone-300 bg-white px-3 py-2"><option value="N">No</option><option value="S">Sí</option></select></label>
        </div>
        <fieldset><legend class="text-sm font-semibold">Meses en los que aplica</legend><div class="mt-2 grid grid-cols-2 gap-2 sm:grid-cols-3">{#each months as [key, label]}<label class="flex items-center gap-2 rounded-lg bg-stone-50 px-3 py-2 text-sm"><input type="checkbox" name={key} value="S" checked={data.editConcept ? String(data.editConcept[key] || 'N') === 'S' : true} />{label}</label>{/each}</div></fieldset>
        <div class="flex flex-wrap gap-2"><button class="rounded-lg bg-school px-4 py-2 font-semibold text-white" type="submit">Guardar concepto</button><a class="rounded-lg border border-stone-300 px-4 py-2" href={`${baseUrl}&tab=conceptos`}>Limpiar</a></div>
      </form>
    </section>
  </div>
{:else}
  <section class="panel mb-5 border-amber-200">
    <div class="flex flex-wrap items-start justify-between gap-4">
      <div><h2>Generación masiva de cartera anual</h2><p class="muted mt-1">Inicializa las cuentas de conceptos para estudiantes activos con las tarifas de este año. Las cuentas existentes con saldo conservan sus becas, pagos y porcentajes.</p><p class="mt-2 text-sm text-amber-900">Las matrículas sin una sede inequívoca por grupos duplicados se omiten, porque matriculados no guarda el código de sede.</p></div>
      <form method="POST" action="?/generateCartera" onsubmit={(event) => { if (!confirm(`Se crearán o sincronizarán cuentas para estudiantes activos de ${data.sede.nombre}, año ${data.ano}. La operación actualizará códigos de cobro y cuentas existentes sin saldo. ¿Continuar?`)) event.preventDefault(); }}>
        <input type="hidden" name="_csrf" value={data.csrf} /><input type="hidden" name="ano" value={data.ano} /><input type="hidden" name="sede" value={data.sede.id} /><input type="hidden" name="confirmar" value="GENERAR" />
        <button type="submit" class="rounded-lg bg-amber-800 px-4 py-2 text-sm font-semibold text-white">Generar cartera anual</button>
      </form>
    </div>
  </section>
  <section class="panel mb-5">
    <div class="flex flex-wrap items-start justify-between gap-3">
      <div><h2>Asignación masiva de códigos de cobro</h2><p class="muted mt-1">Actualiza el código oficial de los cursos seleccionados y sincroniza las matrículas activas de esta sede.</p></div>
      <form method="POST" action="?/syncCodes" onsubmit={(event) => { if (!confirm('Se copiará datoscurso.codigocobro a las matrículas de esta sede para el año seleccionado. ¿Continuar?')) event.preventDefault(); }}>
        <input type="hidden" name="_csrf" value={data.csrf} /><input type="hidden" name="ano" value={data.ano} />
        <button type="submit" class="rounded-lg border border-teal-700 px-3 py-2 text-sm font-semibold text-teal-800">Sincronizar matrículas desde cursos</button>
      </form>
    </div>
    {#if !data.billingGroups.disponible}
      <p class="mt-4 rounded-lg bg-amber-50 p-3 text-sm text-amber-900">El esquema no tiene las columnas requeridas para asignar códigos de cobro.</p>
    {:else if data.billingGroups.grupos.length === 0}
      <p class="mt-4 rounded-lg bg-stone-50 p-3 text-sm text-slate-600">No hay grupos registrados en esta sede y año.</p>
    {:else}
      <form method="POST" action="?/assignBillingCode" class="mt-4">
        <input type="hidden" name="_csrf" value={data.csrf} /><input type="hidden" name="ano" value={data.ano} />
        <div class="mb-3 flex flex-wrap items-center gap-2">
          <span class="muted mr-1 text-sm font-semibold">Selección rápida:</span>
          <button type="button" class="rounded-lg border border-stone-300 px-3 py-1.5 text-sm" onclick={() => applyGradePreset(['00'])}>Preescolar</button>
          <button type="button" class="rounded-lg border border-stone-300 px-3 py-1.5 text-sm" onclick={() => applyGradePreset(['01', '02', '03', '04', '05'])}>Primaria</button>
          <button type="button" class="rounded-lg border border-stone-300 px-3 py-1.5 text-sm" onclick={() => applyGradePreset(['06', '07', '08', '09'])}>Secundaria</button>
          <button type="button" class="rounded-lg border border-stone-300 px-3 py-1.5 text-sm" onclick={() => applyGradePreset(['10', '11'])}>Media</button>
          <button type="button" class="rounded-lg border border-stone-300 px-3 py-1.5 text-sm" onclick={selectAllGrades}>Todos</button>
          <button type="button" class="rounded-lg border border-stone-300 px-3 py-1.5 text-sm" onclick={clearGrades}>Ninguno</button>
        </div>
        <div class="grid gap-2 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
          {#each data.billingGroups.grupos as group}
            <label class="flex cursor-pointer items-center justify-between gap-3 rounded-xl border border-stone-200 p-3">
              <span class="flex items-center gap-2"><input type="checkbox" name="grados[]" value={String(group.grado)} bind:group={selectedGrades} /><span class="font-semibold">Grado {String(group.grado)}</span></span>
              <span class="text-right text-xs text-slate-500">{String(group.cursos || 'Sin cursos')}<strong class="mt-1 block text-slate-700">{group.codigocobro ? `Cobro ${String(group.codigocobro)}` : 'Sin cobro'} · {Number(group.total_alumnos || 0)} alumnos</strong></span>
            </label>
          {/each}
        </div>
        <div class="mt-4 flex flex-wrap items-end gap-3 rounded-xl bg-stone-50 p-4">
          <label class="text-sm font-medium">Código de cobro a asignar<input name="codigo_cobro" maxlength="2" required placeholder="Ej.: 01" list="codigos-cobro-masivo" class="mt-1 block w-40 rounded-lg border border-stone-300 bg-white px-3 py-2" /><datalist id="codigos-cobro-masivo">{#each data.catalog.codigosCobro as code}<option value={code}></option>{/each}</datalist></label>
          <button type="submit" disabled={!selectedGrades.length} class="rounded-lg bg-school px-4 py-2 font-semibold text-white disabled:cursor-not-allowed disabled:opacity-50" onclick={(event) => { if (!confirm(`Se asignará el código a ${selectedGrades.length} grados y se actualizarán sus matrículas activas. ¿Continuar?`)) event.preventDefault(); }}>Asignar a grados seleccionados</button>
        </div>
      </form>
    {/if}
  </section>
  <div class="grid items-start gap-5 xl:grid-cols-[minmax(0,1.4fr)_minmax(22rem,1fr)]">
    <section class="panel overflow-x-auto">
      <h2>Tarifas configuradas</h2><p class="muted mt-1">Año lectivo {data.ano}</p>
      {#if data.catalog.tarifas.length === 0}<p class="mt-4 rounded-lg bg-stone-50 p-4 text-sm text-slate-600">No hay tarifas para este año.</p>
      {:else}
        <table class="mt-4 w-full text-left text-sm"><thead class="border-b border-stone-200 text-xs uppercase text-slate-600"><tr><th class="p-2">Código cobro</th><th class="p-2">Concepto</th><th class="p-2 text-right">Tarifa base</th><th class="p-2">Día límite</th><th class="p-2 text-right">Descuento</th><th class="p-2">Acción</th></tr></thead><tbody>
          {#each data.catalog.tarifas as tariff}
            <tr class="border-b border-stone-100"><td class="p-2 font-semibold">{String(tariff.codigo_cobro)}</td><td class="p-2">{String(tariff.nom_concepto || `Concepto ${tariff.cod_concepto}`)}</td><td class="p-2 text-right">{money(tariff.valor)}</td><td class="p-2">{String(tariff.dia_limite)}</td><td class="p-2 text-right">{money(tariff.descuento_pronto_pago)}</td><td class="p-2"><a class="font-semibold text-teal-800 hover:underline" href={`${baseUrl}&tab=tarifas&editar_cobro=${encodeURIComponent(String(tariff.codigo_cobro))}&editar_tarifa=${encodeURIComponent(String(tariff.cod_concepto))}`}>Editar</a></td></tr>
          {/each}
        </tbody></table>
      {/if}
    </section>
    <section class="panel">
      <h2>{data.editTariff ? 'Editar tarifa' : 'Configurar tarifa'}</h2>
      <form method="POST" action="?/saveTariff" class="mt-4 space-y-4">
        <input type="hidden" name="_csrf" value={data.csrf} /><input type="hidden" name="ano_lectivo" value={data.ano} />
        <label class="block text-sm font-medium">Código de cobro<input name="codigo_cobro" maxlength="2" list="codigos-cobro-tarifa" required value={value(data.editTariff, 'codigo_cobro')} class="mt-1 block w-full rounded-lg border border-stone-300 px-3 py-2" /><datalist id="codigos-cobro-tarifa">{#each data.catalog.codigosCobro as code}<option value={code}></option>{/each}</datalist><span class="muted mt-1 block text-xs">Fuente: código de cobro asignado al curso en datoscurso.</span></label>
        <label class="block text-sm font-medium">Concepto<select name="cod_concepto" required value={value(data.editTariff, 'cod_concepto', String(data.catalog.conceptos[0]?.codigo || ''))} class="mt-1 block w-full rounded-lg border border-stone-300 bg-white px-3 py-2">{#each data.catalog.conceptos as concept}<option value={String(concept.codigo)}>{String(concept.codigo)} · {String(concept.descripcion)}</option>{/each}</select></label>
        <label class="block text-sm font-medium">Valor base<input name="valor" type="number" min="0" step="1" required value={value(data.editTariff, 'valor')} class="mt-1 block w-full rounded-lg border border-stone-300 px-3 py-2" /></label>
        <label class="block text-sm font-medium">Día límite de pago oportuno<input name="dia_limite" type="number" min="1" max="31" required value={value(data.editTariff, 'dia_limite', '10')} class="mt-1 block w-full rounded-lg border border-stone-300 px-3 py-2" /></label>
        <label class="block text-sm font-medium">Descuento por pronto pago<input name="descuento_pronto_pago" type="number" min="0" step="0.01" value={value(data.editTariff, 'descuento_pronto_pago', '0')} class="mt-1 block w-full rounded-lg border border-stone-300 px-3 py-2" /></label>
        <label class="block text-sm font-medium">Observaciones<textarea name="observacion" maxlength="500" rows="2" class="mt-1 block w-full rounded-lg border border-stone-300 px-3 py-2">{value(data.editTariff, 'observacion')}</textarea></label>
        <div class="flex flex-wrap gap-2"><button class="rounded-lg bg-school px-4 py-2 font-semibold text-white" type="submit" disabled={!data.catalog.conceptos.length}>Guardar tarifa</button><a class="rounded-lg border border-stone-300 px-4 py-2" href={`${baseUrl}&tab=tarifas`}>Limpiar</a></div>
      </form>
    </section>
  </div>
{/if}
