jorgecuadros-platform/apps/web/src/components/NotificationLogPanel.tsx

"use client";

import { useCallback, useEffect, useState } from "react";
import {
  listNotificationLog,
  type NotificationLogPage,
  type NotificationServicio,
} from "@/lib/api";
import {
  formatDateTime,
  NOTIFICATION_SERVICIO_LABELS,
  NOTIFICATION_STATUS_COLORS,
  NOTIFICATION_STATUS_LABELS,
  NOTIFICATION_TYPE_LABELS,
  notificationLevelLabel,
} from "@/lib/labels";

/**
 * "Registro de envíos" — the send history over `email_notification_log`.
 *
 * Every outbound email the platform sends writes to that one table (the four
 * bulk jobs and the renewal avisos alike), so this component is shared by
 * both /notificaciones tabs; each passes the `servicio` slice it owns. Rows
 * cover failures and skips too, which is the whole point: a notice that never
 * left is invisible everywhere else.
 */

const LOG_VIEWS = [
  { key: "all", label: "Todos" },
  { key: "sent", label: "Enviados" },
  { key: "failed", label: "Fallidos" },
  { key: "skipped", label: "Omitidos" },
] as const;

export type LogView = (typeof LOG_VIEWS)[number]["key"];

export function NotificationLogPanel({
  servicio,
  emptyHint = "Sin envíos con el filtro actual.",
  /** Bump to force a reload — the parent raises it after a send. */
  reloadToken = 0,
}: {
  servicio: NotificationServicio[];
  emptyHint?: string;
  reloadToken?: number;
}) {
  const [log, setLog] = useState<NotificationLogPage | null>(null);
  const [error, setError] = useState<string | null>(null);
  const [view, setView] = useState<LogView>("all");
  const [page, setPage] = useState(1);

  // `servicio` is a literal array at every call site, so a new identity each
  // render would re-fetch forever. Key the effect on its contents instead.
  const servicioKey = servicio.join(",");

  const refresh = useCallback(async () => {
    try {
      const data = await listNotificationLog({
        page,
        pageSize: 50,
        servicio: servicioKey.split(",") as NotificationServicio[],
        view: view === "all" ? undefined : view,
      });
      setLog(data);
      setError(null);
    } catch (e) {
      setError(e instanceof Error ? e.message : String(e));
    }
  }, [page, view, servicioKey]);

  useEffect(() => {
    void refresh();
  }, [refresh, reloadToken]);

  return (
    <section className="card" style={{ padding: 20 }}>
      <div
        style={{
          display: "flex",
          justifyContent: "space-between",
          alignItems: "center",
          gap: 12,
          flexWrap: "wrap",
        }}
      >
        <h2 className="section-title">Registro de envíos</h2>
        <div className="seg" role="tablist">
          {LOG_VIEWS.map((v) => (
            <button
              key={v.key}
              type="button"
              role="tab"
              aria-selected={view === v.key}
              className={`seg-btn ${view === v.key ? "active" : ""}`}
              onClick={() => {
                setView(v.key);
                setPage(1);
              }}
            >
              {v.label}
            </button>
          ))}
        </div>
      </div>

      {error && (
        <div className="state-box state-error" style={{ marginTop: 12 }}>
          {error}
        </div>
      )}

      <div className="tx-scroll" style={{ marginTop: 12 }}>
        <table className="tx-table">
          <thead>
            <tr>
              <th>Fecha</th>
              <th>Tipo</th>
              <th>Servicio</th>
              <th>Cliente</th>
              <th>Email</th>
              <th>Estado</th>
              <th>Asunto</th>
              <th>Provider</th>
            </tr>
          </thead>
          <tbody>
            {log?.items.map((row) => (
              <tr key={row.id}>
                <td>{formatDateTime(row.sendDate)}</td>
                <td>
                  {NOTIFICATION_TYPE_LABELS[row.notificationType]}
                  {notificationLevelLabel(row.notificationType, row.level)}
                </td>
                <td>{NOTIFICATION_SERVICIO_LABELS[row.servicio]}</td>
                <td>
                  {row.customerName}
                  {row.debug ? " · debug" : ""}
                </td>
                <td>{row.customerEmail || "—"}</td>
                <td style={{ color: NOTIFICATION_STATUS_COLORS[row.status] }}>
                  {NOTIFICATION_STATUS_LABELS[row.status]}
                </td>
                <td>{row.subject}</td>
                <td className="muted small">
                  {row.providerMessageId ?? row.error ?? "—"}
                </td>
              </tr>
            ))}
            {log && log.items.length === 0 && (
              <tr>
                <td colSpan={8}>
                  <span className="empty-inline">{emptyHint}</span>
                </td>
              </tr>
            )}
          </tbody>
        </table>
      </div>

      {log && log.pageCount > 1 && (
        <div className="pager" style={{ marginTop: 14 }}>
          <button
            type="button"
            className="btn btn-outline btn-sm"
            disabled={log.page <= 1}
            onClick={() => setPage((p) => Math.max(1, p - 1))}
          >
            ← Anterior
          </button>
          <span className="pager-info">
            {log.total} fila{log.total === 1 ? "" : "s"} · página {log.page} de{" "}
            {log.pageCount}
          </span>
          <button
            type="button"
            className="btn btn-outline btn-sm"
            disabled={log.page >= log.pageCount}
            onClick={() => setPage((p) => Math.min(log.pageCount, p + 1))}
          >
            Siguiente →
          </button>
        </div>
      )}
    </section>
  );
}