"use client";

import Link from "next/link";

/**
 * The context-report shortcut. One row of pill buttons that link to
 * pre-filtered /reportes/[slug] pages. Used in the page header of
 * domain pages (clientes, polizas, servicios, estado-cuenta, banco).
 *
 * `entries` accepts both static links (slug + label) and pre-filtered
 * links (slug + params object). Pre-filtered ones build the query
 * string automatically; the runner pre-fills the form.
 */
export interface ReportLink {
  slug: string;
  label: string;
  /** Optional pre-fill for the report's filter form. */
  params?: Record<string, string>;
  /** When true, opens the report in a new tab (for "see the catalog"
   *  style entries where the user is going to look around). */
  external?: boolean;
}

export function ContextReports({
  label = "Reportes",
  entries,
}: {
  label?: string;
  entries: ReportLink[];
}) {
  if (entries.length === 0) return null;
  return (
    <div className="context-reports" aria-label={label}>
      <span className="context-reports-label">{label}</span>
      {entries.map((e) => {
        const qs = e.params
          ? "?" +
            new URLSearchParams(
              Object.entries(e.params).filter(([, v]) => v != null && v !== ""),
            ).toString()
          : "";
        const href = `/reportes/${e.slug}${qs}`;
        return (
          <Link
            key={`${e.slug}-${JSON.stringify(e.params ?? {})}`}
            href={href}
            className="context-report-link"
            target={e.external ? "_blank" : undefined}
            rel={e.external ? "noopener" : undefined}
          >
            {e.label}
          </Link>
        );
      })}
    </div>
  );
}