import { describe, expect, it } from "vitest";
import { renderToStaticMarkup } from "react-dom/server";
import type { M7Dataset } from "@/lib/compliance/types";
import { ComplianceAlertsView } from "@/components/app/compliance-alerts-view";

function buildDataset(overrides?: Partial<M7Dataset>): M7Dataset {
  return {
    generatedAt: "2026-04-02T10:00:00.000Z",
    kpis: {
      activeLicitations: 2,
      completionRate: 64,
      criticalPending: 1,
      upcoming7Days: 3,
    },
    m3States: {
      consulted: 1,
      interested: 2,
      active: 1,
      new: 5,
    },
    tabs: {
      plazos: [
        {
          id: "plazo-1",
          proposalId: "p-1",
          licitationId: "l-1",
          title: "Cierre de convocatoria",
          description: "Fecha limite",
          dueAt: "2026-04-03T12:00:00.000Z",
          source: "milestone",
          status: "upcoming",
        },
      ],
      alertas: [
        {
          id: "alerta-1",
          proposalId: "p-1",
          licitationId: "l-1",
          title: "Vence pronto",
          description: "Requisito critico",
          severity: "high",
          kind: "deadline_soon",
          dueAt: "2026-04-03T12:00:00.000Z",
          createdAt: "2026-04-02T10:00:00.000Z",
        },
      ],
      checklist: [
        {
          proposalId: "p-1",
          proposalTitle: "Propuesta 1",
          mandatoryResolved: 4,
          mandatoryTotal: 6,
          completionRate: 67,
          signaturePolicyStatus: "condicionado",
        },
      ],
      panelKpi: [
        {
          id: "panel-1",
          label: "Licitaciones activas",
          value: "2",
          tone: "success",
        },
      ],
    },
    ...(overrides ?? {}),
  };
}

describe("ComplianceAlertsView UI contract", () => {
  it("renders the four KPI cards and tab labels", () => {
    const html = renderToStaticMarkup(<ComplianceAlertsView dataset={buildDataset()} />);

    expect(html).toContain("Licitaciones activas");
    expect(html).toContain("Tasa de completitud");
    expect(html).toContain("Pendientes criticos");
    expect(html).toContain("Proximos 7 dias");
    expect(html).toContain("Plazos");
    expect(html).toContain("Alertas");
    expect(html).toContain("Checklist");
    expect(html).toContain("Panel KPI");
  });

  it("renders empty state when there is no active compliance data", () => {
    const html = renderToStaticMarkup(
      <ComplianceAlertsView
        dataset={buildDataset({
          kpis: {
            activeLicitations: 0,
            completionRate: 0,
            criticalPending: 0,
            upcoming7Days: 0,
          },
          tabs: {
            plazos: [],
            alertas: [],
            checklist: [],
            panelKpi: [],
          },
        })}
      />,
    );

    expect(html).toContain("Sin alertas de cumplimiento");
  });

  it("keeps responsive layout classes for desktop and mobile grids", () => {
    const html = renderToStaticMarkup(<ComplianceAlertsView dataset={buildDataset()} />);

    expect(html).toContain("md:grid-cols-2");
    expect(html).toContain("xl:grid-cols-4");
    expect(html).toContain("md:grid-cols-4");
  });
});
