import {
  adapterTransport,
  createCmsEngine,
  type ClientStorageAdapter,
  type CmsEngine,
} from "better-content/core";
import { loadItemMap } from "better-content/server";
import { loadAdapter } from "./db";
import { statusStore } from "./status";

// Uploaded images become data URLs so the whole demo stays inside your tab.
// In a real app this would be a storage adapter like cloudinary.
const dataUrlStorage: ClientStorageAdapter = {
  upload: (file) =>
    new Promise((resolve, reject) => {
      const reader = new FileReader();
      reader.onload = () => resolve({ url: reader.result as string });
      reader.onerror = () => reject(new Error("Could not read file"));
      reader.readAsDataURL(file);
    }),
};

// ONE engine for the whole page. Every island below, whatever its
// framework, binds to this exact object. The engine itself never
// imports React, Vue, or Svelte.
export const ready: Promise<CmsEngine> = (async () => {
  const adapter = await loadAdapter();

  const initialItems = await loadItemMap(adapter, {
    page: {},
    cards: { query: { orderBy: [{ field: "order", direction: "asc" }] } },
  });

  return createCmsEngine({
    transport: adapterTransport(adapter),
    storage: dataUrlStorage,
    notify: { success: statusStore.set, error: statusStore.set },
    initialItems,
  });
})();

import { PGlite } from "@electric-sql/pglite";
import { drizzle } from "drizzle-orm/pglite";
import { integer, pgTable, text, timestamp } from "drizzle-orm/pg-core";
import { PostgresDataAdapter } from "better-content/adapters/postgres";

const page = pgTable("page", {
  id: text("id").primaryKey(),
  headline: text("headline"),
  intro: text("intro"),
  cover: text("cover"),
  updatedAt: timestamp("updated_at", { withTimezone: true }).defaultNow(),
});

const cards = pgTable("cards", {
  id: text("id").primaryKey(),
  title: text("title"),
  body: text("body"),
  order: integer("order"),
});

const schema = { page, cards };
const client = new PGlite("idb://better-content-playground");

export const adapter = new PostgresDataAdapter({
  db: drizzle(client, { schema }) as never,
  schema: schema as never,
});

import type { DataAdapter, Item, Query } from "better-content/core";

const data = new Map<string, Map<string, Item>>();

const table = (collection: string) => {
  let rows = data.get(collection);
  if (!rows) {
    rows = new Map();
    data.set(collection, rows);
  }
  return rows;
};

const sortRows = (rows: Item[], query?: Query) => {
  const order = query?.orderBy?.[0];
  if (!order) return rows;
  return rows.sort((a, b) =>
    ((a[order.field] as number) ?? 0) - ((b[order.field] as number) ?? 0),
  );
};

export const adapter: DataAdapter = {
  async fetchCollection<T>(collection: string, query?: Query) {
    const rows = sortRows([...table(collection).values()], query);
    return rows as (T & { id: string })[];
  },
  async fetchById<T>(collection: string, id: string) {
    return (table(collection).get(id) ?? null) as (T & { id: string }) | null;
  },
  async create(collection, fields) {
    const item = { id: crypto.randomUUID(), ...fields };
    table(collection).set(item.id, item);
    return item;
  },
  async createWithId(collection, id, fields) {
    // The contract: createWithId rejects an id that already exists.
    // upsert is the write that does not care.
    if (table(collection).has(id)) throw new Error(`${id} already exists`);
    const item = { id, ...fields };
    table(collection).set(id, item);
    return item;
  },
  async update(collection, id, patch) {
    table(collection).set(id, { ...table(collection).get(id), ...patch, id });
  },
  async upsert(collection, id, patch) {
    table(collection).set(id, { ...table(collection).get(id), ...patch, id });
  },
  async delete(collection, id) {
    table(collection).delete(id);
  },
};

import type { DataAdapter } from "better-content/core";

const request = async <T>(path: string, init?: RequestInit): Promise<T> => {
  const response = await fetch(`/api/content${path}`, {
    headers: { "content-type": "application/json" },
    ...init,
  });
  if (!response.ok) throw new Error(`Request failed: ${response.status}`);
  return response.json() as Promise<T>;
};

export const adapter: DataAdapter = {
  fetchCollection(collection, query) {
    const params = new URLSearchParams({
      query: JSON.stringify(query ?? {}),
    });
    return request(`/${collection}?${params}`);
  },
  fetchById(collection, id) {
    return request(`/${collection}/${id}`);
  },
  create(collection, data) {
    return request(`/${collection}`, {
      method: "POST",
      body: JSON.stringify(data),
    });
  },
  createWithId(collection, id, data) {
    return request(`/${collection}/${id}`, {
      method: "PUT",
      body: JSON.stringify(data),
    });
  },
  update(collection, id, patch) {
    return request(`/${collection}/${id}`, {
      method: "PATCH",
      body: JSON.stringify(patch),
    });
  },
  upsert(collection, id, data) {
    return request(`/${collection}/${id}`, {
      method: "PUT",
      body: JSON.stringify(data),
    });
  },
  delete(collection, id) {
    return request(`/${collection}/${id}`, { method: "DELETE" });
  },
};