---
import CrmLayout from '@/layouts/CrmLayout.astro';
import { storeCounts } from '@/lib/crm/store';

export const prerender = false;

const counts = storeCounts();
const labels: Record<string, string> = {
  contacts: 'Contactos',
  companies: 'Empresas',
  opportunities: 'Oportunidades',
  quotes: 'Cotizaciones',
  tasks: 'Tareas',
  activities: 'Actividades',
  auditLogs: 'Auditoría',
};
---

<CrmLayout title="Datos de prueba · CRM">
  <h1>Datos de prueba</h1>
  <p class="muted">
    Genera un set realista de leads, oportunidades, cotizaciones y tareas para
    revisar todas las etapas, KPIs y la operación del CRM. Borrar elimina
    <strong>solo</strong> los datos de prueba; los leads reales del cotizador no
    se tocan.
  </p>

  <div class="kpi-grid" id="counts" style="margin:18px 0">
    {
      Object.entries(counts).map(([k, v]) => (
        <div class="kpi">
          <div class="kpi-value" data-count={k}>{v}</div>
          <div class="kpi-label">{labels[k] ?? k}</div>
        </div>
      ))
    }
  </div>

  <div class="card pad" style="padding:18px;max-width:560px">
    <div style="display:flex;flex-direction:column;gap:12px">
      <button id="btn-seed" class="btn btn-primary">Generar leads de prueba</button>
      <button id="btn-clear" class="btn btn-secondary">Eliminar datos de prueba</button>
    </div>
    <p id="demo-msg" class="notice" style="display:none;margin-top:14px"></p>
  </div>

  <p class="muted" style="font-size:.82rem;margin-top:16px">
    Nota: en Etapa 1 los datos viven en memoria, así que se reinician al
    reiniciar el servidor. En Sprint 2 (PostgreSQL) persistirán.
  </p>

  <script>
    const seedBtn = document.getElementById('btn-seed') as HTMLButtonElement;
    const clearBtn = document.getElementById('btn-clear') as HTMLButtonElement;
    const msg = document.getElementById('demo-msg') as HTMLParagraphElement;

    function refreshCounts(totals: Record<string, number>) {
      for (const [k, v] of Object.entries(totals)) {
        const el = document.querySelector(`[data-count="${k}"]`);
        if (el) el.textContent = String(v);
      }
    }

    function show(text: string, ok = true) {
      msg.style.display = 'block';
      msg.textContent = text;
      msg.style.color = ok ? 'var(--pf-success)' : '#ff7a8a';
    }

    async function call(url: string, busyText: string, btn: HTMLButtonElement) {
      const original = btn.textContent;
      btn.disabled = true;
      seedBtn.disabled = true;
      clearBtn.disabled = true;
      btn.textContent = busyText;
      try {
        const res = await fetch(url, { method: 'POST' });
        const json = await res.json();
        if (!json.ok) {
          show(json.error || 'Ocurrió un error.', false);
          return;
        }
        refreshCounts(json.data.totals);
        if (json.data.created) {
          const c = json.data.created;
          show(
            `Listo: ${c.contacts} contactos, ${c.opportunities} oportunidades, ` +
              `${c.quotes} cotizaciones y ${c.tasks} tareas. Revisa el Dashboard y el Pipeline.`,
          );
        } else {
          show(`Datos de prueba eliminados (${json.data.removed} registros).`);
        }
      } catch {
        show('Error de red. Intenta de nuevo.', false);
      } finally {
        seedBtn.disabled = false;
        clearBtn.disabled = false;
        btn.textContent = original;
      }
    }

    seedBtn.addEventListener('click', () => call('/api/crm/dev/seed', 'Generando…', seedBtn));
    clearBtn.addEventListener('click', () => call('/api/crm/dev/clear', 'Eliminando…', clearBtn));
  </script>
</CrmLayout>