import assert from "node:assert/strict";
import test from "node:test";
import * as React from "react";
import { renderToStaticMarkup } from "react-dom/server";
import { Badge } from "@ccr/ui/components/ui/badge.tsx";
import { Button } from "@ccr/ui/components/ui/button.tsx";
import { Card, CardContent, CardHeader, CardTitle } from "@ccr/ui/components/ui/card.tsx";
import { Checkbox } from "@ccr/ui/components/ui/checkbox.tsx";
import { Input } from "@ccr/ui/components/ui/input.tsx";
import { Label } from "@ccr/ui/components/ui/label.tsx";
import { Switch } from "@ccr/ui/components/ui/switch.tsx";
import { Textarea } from "@ccr/ui/components/ui/textarea.tsx";
import { collapseSidebarToExpandInspectorMorph, playPauseMorph } from "@ccr/ui/lib/morph-icon.ts";

test("Button renders default button semantics and variant classes", () => {
  const html = renderToStaticMarkup(
    <Button className="extra-action" size="iconSm" variant="outline">
      Run
    </Button>
  );

  assert.match(html, /^<button /);
  assert.match(html, /type="button"/);
  assert.match(html, /border-input/);
  assert.match(html, /h-7/);
  assert.match(html, /w-7/);
  assert.match(html, /extra-action/);
  assert.match(html, />Run<\/button>$/);
});

test("Button unstyled mode keeps caller supplied styling only", () => {
  const html = renderToStaticMarkup(
    <Button className="plain-button" unstyled>
      Plain
    </Button>
  );

  assert.match(html, /class="plain-button"/);
  assert.match(html, /type="button"/);
  assert.doesNotMatch(html, /inline-flex/);
});

test("Badge renders the selected visual variant", () => {
  const html = renderToStaticMarkup(
    <Badge className="status-badge" variant="warning">
      Delayed
    </Badge>
  );

  assert.match(html, /^<span /);
  assert.match(html, /text-amber-700/);
  assert.match(html, /bg-amber-50/);
  assert.match(html, /status-badge/);
  assert.match(html, />Delayed<\/span>$/);
});

test("Card primitives compose the expected document structure", () => {
  const html = renderToStaticMarkup(
    <Card className="settings-card">
      <CardHeader>
        <CardTitle>Provider settings</CardTitle>
      </CardHeader>
      <CardContent>Ready</CardContent>
    </Card>
  );

  assert.match(html, /^<div /);
  assert.match(html, /settings-card/);
  assert.match(html, /<h2 class="[^"]*text-\[13px\][^"]*">Provider settings<\/h2>/);
  assert.match(html, /<div class="p-4">Ready<\/div>/);
});

test("Switch renders accessible checked and disabled state", () => {
  const html = renderToStaticMarkup(
    <Switch aria-label="Enable provider" checked className="provider-switch" disabled />
  );

  assert.match(html, /provider-switch/);
  assert.match(html, /role="switch"/);
  assert.match(html, /aria-checked="true"/);
  assert.match(html, /aria-label="Enable provider"/);
  assert.match(html, /disabled=""/);
  assert.match(html, /translate-x-\[24px\]/);
});

test("form primitives preserve native semantics, state, and caller styling", () => {
  const checkboxHtml = renderToStaticMarkup(
    <Checkbox aria-label="Select provider" checked className="provider-checkbox" disabled />
  );
  const inputHtml = renderToStaticMarkup(
    <Input aria-label="Provider name" className="provider-input" placeholder="Example AI" readOnly />
  );
  const labelHtml = renderToStaticMarkup(
    <Label className="provider-label" htmlFor="provider-name">Provider</Label>
  );
  const textareaHtml = renderToStaticMarkup(
    <Textarea aria-label="Models" className="models-textarea" disabled placeholder="model-a" />
  );

  assert.match(checkboxHtml, /type="checkbox"/);
  assert.match(checkboxHtml, /aria-checked="true"/);
  assert.match(checkboxHtml, /provider-checkbox/);
  assert.match(checkboxHtml, /disabled=""/);

  assert.match(inputHtml, /^<input /);
  assert.match(inputHtml, /placeholder="Example AI"/);
  assert.match(inputHtml, /readonly=""/);
  assert.match(inputHtml, /provider-input/);

  assert.match(labelHtml, /^<label /);
  assert.match(labelHtml, /for="provider-name"/);
  assert.match(labelHtml, /provider-label/);
  assert.match(labelHtml, />Provider<\/label>$/);

  assert.match(textareaHtml, /^<textarea /);
  assert.match(textareaHtml, /placeholder="model-a"/);
  assert.match(textareaHtml, /models-textarea/);
  assert.match(textareaHtml, /disabled=""/);
});

test("control morph assets interpolate directly without loading keyframes", () => {
  for (const asset of [collapseSidebarToExpandInspectorMorph, playPauseMorph]) {
    assert.equal(asset.loading, undefined);
    assert.ok(asset.layers.length > 0);
    for (const layer of asset.layers) {
      assert.equal(layer.loading, undefined);
      assert.equal(layer.loadingOpacity, undefined);
    }
  }
});
