import { render } from "svelte/server";
import { describe, expect, test } from "vitest";
import Button from "./Button.svelte";
import DashboardFrame from "./DashboardFrame.svelte";
import FooterCell from "./FooterCell.svelte";
import IconButton from "./IconButton.svelte";
import ServiceRow from "./ServiceRow.svelte";
import TelemetryCard from "./TelemetryCard.svelte";
import { dashboardPreviewFixtures } from "../fixtures";

describe("dashboard UI components", () => {
  test("renders the primary generic dashboard fixture", () => {
    const { body } = render(DashboardFrame, {
      props: {
        dashboard: dashboardPreviewFixtures.primary,
      },
    });

    expect(body).toContain("Operations Console");
    expect(body).toContain("Core Throughput");
    expect(body).toContain("Queue Workers");
    expect(body).toContain("data-icon-name=\"mdi:server-network\"");
    expect(body).toContain("data-severity=\"warning\"");
    expect(body).not.toContain("dashboard-title");
  });

  test("renders another generic dashboard fixture through the same component", () => {
    const { body } = render(DashboardFrame, {
      props: {
        dashboard: dashboardPreviewFixtures.secondary,
      },
    });

    expect(body).toContain("Support Desk");
    expect(body).toContain("Response Window");
    expect(body).toContain("Regional Nodes");
    expect(body).toContain("data-icon-name=\"mdi:headset\"");
    expect(body).toContain("data-severity=\"loading\"");
  });

  test("renders optional service and status links as focusable anchors", () => {
    const service = render(ServiceRow, {
      props: {
        service: {
          id: "linked-service",
          label: "Linked Service",
          description: "Generic linked destination",
          severity: "ok",
          detail: "ready",
          link: { href: "https://example.test/service", external: true },
        },
      },
    });
    const footer = render(FooterCell, {
      props: {
        item: {
          id: "linked-status",
          label: "Linked Status",
          value: "open",
          severity: "neutral",
          link: { href: "https://example.test/status" },
        },
      },
    });

    expect(service.body).toContain("<a ");
    expect(service.body).toContain("href=\"https://example.test/service\"");
    expect(service.body).toContain("target=\"_blank\"");
    expect(footer.body).toContain("<a ");
    expect(footer.body).toContain("href=\"https://example.test/status\"");
  });

  test("does not render progress bars for non-percent metrics without explicit progress", () => {
    const withoutProgress = render(TelemetryCard, {
      props: {
        card: {
          id: "bytes",
          label: "Bytes Metric",
          value: { kind: "bytes", value: 2048 },
          severity: "neutral",
        },
      },
    });
    const withProgress = render(TelemetryCard, {
      props: {
        card: {
          id: "bytes-with-progress",
          label: "Bytes With Progress",
          value: { kind: "bytes", value: 2048 },
          progress: 42,
          severity: "neutral",
        },
      },
    });

    expect(withoutProgress.body).not.toContain("telemetry-card__bar");
    expect(withProgress.body).toContain("--metric-progress: 42%");
  });

  test("base button controls forward native attributes", () => {
    const button = render(Button, {
      props: {
        label: "Refresh",
        id: "refresh-action",
        class: "custom-action",
        "aria-controls": "refresh-target",
      },
    });
    const iconButton = render(IconButton, {
      props: {
        icon: "mdi:refresh",
        label: "Refresh status",
        id: "refresh-icon-action",
        class: "custom-icon-action",
        "aria-expanded": "false",
      },
    });

    expect(button.body).toContain("id=\"refresh-action\"");
    expect(button.body).toContain("class=\"ui-button custom-action ");
    expect(button.body).toContain("aria-controls=\"refresh-target\"");
    expect(iconButton.body).toContain("id=\"refresh-icon-action\"");
    expect(iconButton.body).toContain("class=\"icon-button custom-icon-action ");
    expect(iconButton.body).toContain("aria-expanded=\"false\"");
  });
});