import { describe, it, expect, vi } from "vitest";
import { renderToStaticMarkup } from "react-dom/server";

vi.mock("@/actions/reminders", () => ({
  resumeReminderRunAction: vi.fn(),
  cancelReminderRunAction: vi.fn(),
}));

import { PausedRunBanner } from "./paused-run-banner";

describe("PausedRunBanner — SSR layout", () => {
  it("renders Resume + Cancel buttons inside the banner", () => {
    const html = renderToStaticMarkup(
      <PausedRunBanner
        runId="r-1"
        sent={412}
        total={1000}
        windowEndHour={18}
        timezone="Asia/Kuala_Lumpur"
      />,
    );
    expect(html).toContain('data-testid="paused-run-banner"');
    expect(html).toContain('data-testid="paused-resume"');
    expect(html).toContain('data-testid="paused-cancel"');
    expect(html).toMatch(/Resume<\/button>/);
    expect(html).toMatch(/Cancel run<\/button>/);
  });

  it("shows X of Y groups delivered when sent + total are present", () => {
    const html = renderToStaticMarkup(
      <PausedRunBanner
        runId="r-1"
        sent={412}
        total={1000}
        windowEndHour={18}
        timezone="Asia/Kuala_Lumpur"
      />,
    );
    expect(html).toContain("412 of 1000 groups delivered");
    // Surfaces the window-end deadline so the operator knows why.
    expect(html).toContain("18:00 (Asia/Kuala_Lumpur)");
    // And the remaining count drives the CTA copy.
    expect(html).toContain("send the remaining 588");
  });

  it("falls back to a generic body when sent / total aren't supplied", () => {
    const html = renderToStaticMarkup(
      <PausedRunBanner
        runId="r-1"
        windowEndHour={18}
        timezone="Asia/Kuala_Lumpur"
      />,
    );
    expect(html).toMatch(/delivery window closed before/i);
    expect(html).not.toContain("groups delivered");
  });

  it("uses amber styling so the banner reads as 'attention, not error'", () => {
    const html = renderToStaticMarkup(
      <PausedRunBanner
        runId="r-1"
        sent={1}
        total={2}
        windowEndHour={18}
        timezone="UTC"
      />,
    );
    expect(html).toMatch(/border-amber-500/);
    expect(html).toMatch(/bg-amber-500/);
  });
});