import type { ComponentProps } from "react";
import { render, screen } from "@testing-library/react";
import "@testing-library/jest-dom/vitest";
import { expect, test, vi } from "vitest";

import { MidiPage } from "../src/pages/MidiPage";

const noopString = vi.fn(async () => "");
const noopVoid = vi.fn(async () => {});
const noopCreateToken = vi.fn(async () => ({
  id: 1,
  label: "Test",
  bridge_id: null,
  scopes: ["midi:events"],
  created_at: new Date().toISOString(),
  revoked_at: null,
  last_used_at: null,
  token_preview: "********test",
  token: "secret"
}));

function buildProps(overrides?: Partial<ComponentProps<typeof MidiPage>>): ComponentProps<typeof MidiPage> {
  return {
    bridges: [
      {
        bridge_id: "bar-laptop",
        device_name: "USB MIDI Controller",
        ip_address: "192.168.2.44",
        protocol_version: 1,
        online: true,
        last_heartbeat_at: "2026-07-24T20:30:10+02:00",
        last_event_at: "2026-07-24T20:30:12+02:00",
        last_error: null,
        last_event: { type: "note_on", channel: 0, number: 36, value: 127 },
        updated_at: "2026-07-24T20:30:12+02:00",
        created_at: "2026-07-24T20:20:00+02:00"
      }
    ],
    mappings: [
      {
        id: 1,
        name: "Scene A",
        enabled: true,
        bridge_id: "bar-laptop",
        device_name: "USB*",
        message_type: "note_on",
        channel: 0,
        number: 36,
        action: "activate_scene",
        target_type: "scene",
        target_id: "stream-base",
        mode: "trigger",
        minimum_value: 1,
        maximum_value: 127,
        created_at: "2026-07-24T20:20:00+02:00",
        updated_at: "2026-07-24T20:20:00+02:00",
        active: true
      }
    ],
    tokens: [
      {
        id: 1,
        label: "Bar laptop",
        bridge_id: "bar-laptop",
        scopes: ["midi:connect", "midi:events", "midi:heartbeat"],
        created_at: "2026-07-24T20:10:00+02:00",
        revoked_at: null,
        last_used_at: null,
        token_preview: "********9f2a"
      }
    ],
    learnState: {
      active: false,
      allow_passthrough: false,
      expires_at: null,
      captured_event: {
        bridge_id: "bar-laptop",
        device: "USB MIDI Controller",
        timestamp: "2026-07-24T20:28:00+02:00",
        message: { type: "control_change", channel: 0, number: 14, value: 64 }
      }
    },
    scenes: [
      {
        id: 1,
        name: "Stream base",
        slug: "stream-base",
        color: "#00e5ff",
        icon: null,
        priority: 10,
        fade_in_ms: 500,
        fade_out_ms: 500,
        hold_ms: 0,
        master_limit: 255,
        values: [],
        targets: [],
        tags: [],
        is_active: false
      }
    ],
    effects: [{ name: "Raid flash", slug: "raid-flash", effect_type: "beat-flash" }],
    onSaveMapping: noopString,
    onDeleteMapping: noopVoid,
    onTestMapping: noopString,
    onCreateToken: noopCreateToken,
    onRevokeToken: noopVoid,
    onStartLearn: noopString,
    onCancelLearn: noopString,
    ...overrides
  };
}

test("viser learn-state, bridge og mappingoversigt", () => {
  render(<MidiPage {...buildProps()} />);
  expect(screen.getByText("MIDI bridge og mappings")).toBeInTheDocument();
  expect(screen.getByText("USB MIDI Controller")).toBeInTheDocument();
  expect(screen.getByText("Scene A")).toBeInTheDocument();
  expect(screen.getByText("Bar laptop")).toBeInTheDocument();
  expect(screen.getByText(/nummer 14 · værdi 64/i)).toBeInTheDocument();
});