tileConfigs.ts

export type TileHttpMethod = "GET" | "POST" | "PUT" | "PATCH" | "DELETE";

export interface TextTileConfig {
  title: string;
  body: string;
}

export function defaultTextConfig(): TextTileConfig {
  return {
    title: "Text tile",
    body: "Edit this tile to show static notes or labels.",
  };
}

export interface ApiTileConfig {
  title: string;
  url: string;
  method: TileHttpMethod;
  headersText: string;
  bodyText: string;
  /** Seconds; 0 disables polling */
  pollIntervalSec: number;
  /** JSON Schema (draft-2020-12) for the parsed JSON body */
  responseSchemaText: string;
  /**
   * Newline-separated JSON Pointers (RFC 6901), e.g. `/id` and `/title`.
   * Lines starting with `#` are comments. Empty = show full JSON.
   */
  displayPathsText: string;
}

export function defaultApiConfig(): ApiTileConfig {
  return {
    title: "API",
    url: "https://jsonplaceholder.typicode.com/posts/1",
    method: "GET",
    headersText: "{}",
    bodyText: "",
    pollIntervalSec: 0,
    responseSchemaText: JSON.stringify(
      {
        type: "object",
        required: ["id", "title"],
        properties: {
          id: { type: "number" },
          title: { type: "string" },
          body: { type: "string" },
          userId: { type: "number" },
        },
      },
      null,
      2,
    ),
    displayPathsText: "",
  };
}

export interface ApiMarkdownTileConfig {
  title: string;
  url: string;
  method: TileHttpMethod;
  headersText: string;
  bodyText: string;
  pollIntervalSec: number;
  responseSchemaText: string;
  /**
   * Markdown source rendered by Nunjucks, with legacy JSON Pointer placeholders `{{/path}}` (RFC 6901).
   */
  markdownTemplate: string;
}

export function defaultApiMarkdownConfig(): ApiMarkdownTileConfig {
  return {
    title: "API + Markdown",
    url: "https://jsonplaceholder.typicode.com/posts/1",
    method: "GET",
    headersText: "{}",
    bodyText: "",
    pollIntervalSec: 0,
    responseSchemaText: JSON.stringify(
      {
        type: "object",
        required: ["id", "title"],
        properties: {
          id: { type: "number" },
          title: { type: "string" },
          body: { type: "string" },
          userId: { type: "number" },
        },
      },
      null,
      2,
    ),
    markdownTemplate:
      '## {{ /title }}\n\nPost **#{{ id }}** (user {{ userId }})\n\n{{ body }}\n\n{% if json.tags %}Tags: {{ json.tags | join(", ") }}{% endif %}\n',
  };
}

export interface MetricTileConfig {
  /** Shown in tile chrome */
  title: string;
  url: string;
  method: TileHttpMethod;
  headersText: string;
  bodyText: string;
  pollIntervalSec: number;
  /**
   * JSON Pointer (RFC 6901) to a numeric field, e.g. `/id` or `/stats/count`.
   * Empty: the JSON root must be a single number (e.g. `42` or `3.14`).
   */
  valuePointer: string;
  /** Static label shown above the large number in the tile body (optional) */
  valueTitle: string;
}

export function defaultMetricConfig(): MetricTileConfig {
  return {
    title: "Metric",
    url: "https://jsonplaceholder.typicode.com/posts/1",
    method: "GET",
    headersText: "{}",
    bodyText: "",
    pollIntervalSec: 0,
    valuePointer: "/id",
    valueTitle: "",
  };
}

const PRIMARY_FILL = "rgba(0, 78, 118, 0.65)";
const PRIMARY_STROKE = "rgba(0, 78, 118, 1)";
const SECONDARY_FILL = "rgba(230, 118, 0, 0.55)";
const SECONDARY_STROKE = "rgba(230, 118, 0, 1)";

export const CHART_TILE_TYPES = [
  "chartBar",
  "chartLine",
  "chartPie",
  "chartDoughnut",
  "chartRadar",
  "chartPolarArea",
] as const;

export type ChartTileType = (typeof CHART_TILE_TYPES)[number];

export function isChartTileType(type: string): type is ChartTileType {
  return (CHART_TILE_TYPES as readonly string[]).includes(type);
}

export type ChartTileKind =
  | "bar"
  | "line"
  | "pie"
  | "doughnut"
  | "radar"
  | "polarArea";

/** Matches dashboard tile `type` string → ChartTileKind for vue-chartjs. */
export const CHART_TILE_TYPE_TO_KIND: Record<ChartTileType, ChartTileKind> = {
  chartBar: "bar",
  chartLine: "line",
  chartPie: "pie",
  chartDoughnut: "doughnut",
  chartRadar: "radar",
  chartPolarArea: "polarArea",
};

export interface ChartTileConfig {
  title: string;
  chartKind: ChartTileKind;
  /** Chart.js `data` — JSON string `{ labels, datasets }`. Used when `chartDataUrl` is empty. */
  chartDataJson: string;
  /** Chart.js `options` — JSON string (merged over responsive defaults). */
  chartOptionsJson: string;
  /**
   * Non-empty: fetch chart data from this URL (JSON body must be `{ labels, datasets }`).
   * Static `chartDataJson` is ignored for rendering while a URL is set.
   */
  chartDataUrl: string;
  method: TileHttpMethod;
  headersText: string;
  bodyText: string;
  /** Seconds between refetches; 0 = only on load / Refresh. */
  pollIntervalSec: number;
}

const DEFAULT_CHART_OPTIONS = {
  responsive: true,
  maintainAspectRatio: false,
};

function sampleData(kind: ChartTileKind): {
  labels: string[];
  datasets: Record<string, unknown>[];
} {
  switch (kind) {
    case "bar":
    case "line":
      return {
        labels: ["Mon", "Tue", "Wed", "Thu", "Fri"],
        datasets: [
          {
            label: "Series A",
            data: [12, 19, 8, 15, 22],
            backgroundColor: kind === "bar" ? PRIMARY_FILL : undefined,
            borderColor: PRIMARY_STROKE,
            borderWidth: kind === "line" ? 2 : 1,
            fill: kind === "line" ? false : undefined,
            tension: kind === "line" ? 0.35 : undefined,
          },
          {
            label: "Series B",
            data: [8, 15, 12, 10, 18],
            backgroundColor: kind === "bar" ? SECONDARY_FILL : undefined,
            borderColor: SECONDARY_STROKE,
            borderWidth: kind === "line" ? 2 : 1,
            fill: kind === "line" ? false : undefined,
            tension: kind === "line" ? 0.35 : undefined,
          },
        ],
      };
    case "pie":
    case "doughnut":
      return {
        labels: ["North", "South", "East", "West"],
        datasets: [
          {
            data: [35, 25, 22, 18],
            backgroundColor: [
              PRIMARY_FILL,
              SECONDARY_FILL,
              "rgba(0, 78, 118, 0.35)",
              "rgba(230, 118, 0, 0.35)",
            ],
            borderColor: PRIMARY_STROKE,
            borderWidth: 1,
          },
        ],
      };
    case "radar":
      return {
        labels: ["Speed", "Reliability", "Comfort", "Safety", "Efficiency"],
        datasets: [
          {
            label: "Series A",
            data: [65, 59, 82, 81, 56],
            fill: true,
            backgroundColor: "rgba(0, 78, 118, 0.22)",
            borderColor: PRIMARY_STROKE,
            borderWidth: 2,
          },
          {
            label: "Series B",
            data: [48, 72, 63, 70, 74],
            fill: true,
            backgroundColor: "rgba(230, 118, 0, 0.18)",
            borderColor: SECONDARY_STROKE,
            borderWidth: 2,
          },
        ],
      };
    case "polarArea":
      return {
        labels: ["Alpha", "Beta", "Gamma", "Delta", "Epsilon"],
        datasets: [
          {
            data: [18, 14, 12, 10, 8],
            backgroundColor: [
              PRIMARY_FILL,
              SECONDARY_FILL,
              "rgba(0, 78, 118, 0.4)",
              "rgba(230, 118, 0, 0.4)",
              "rgba(0, 78, 118, 0.22)",
            ],
          },
        ],
      };
    default:
      return { labels: [], datasets: [] };
  }
}

const chartTitles: Record<ChartTileKind, string> = {
  bar: "Bar chart",
  line: "Line chart",
  pie: "Pie chart",
  doughnut: "Doughnut chart",
  radar: "Radar chart",
  polarArea: "Polar area chart",
};

export function defaultChartConfig(kind: ChartTileKind): ChartTileConfig {
  return {
    title: chartTitles[kind],
    chartKind: kind,
    chartDataJson: JSON.stringify(sampleData(kind), null, 2),
    chartOptionsJson: JSON.stringify(DEFAULT_CHART_OPTIONS, null, 2),
    chartDataUrl: "",
    method: "GET",
    headersText: "{}",
    bodyText: "",
    pollIntervalSec: 0,
  };
}