// ---------------------------------------------------------------------------
// @executor-js/plugin-example/client
//
// Frontend half: a single page that calls the plugin's `greet` mutation
// and renders the response. Demonstrates the typed reactive client
// pattern — `ExampleClient.mutation(...)` is fully typed against
// `ExampleApi` from `./shared` with no codegen.
//
// Server-only deps (Effect, Node, executor.config) MUST NOT be imported
// here — the Vite plugin bundles this entry into the frontend.
// ---------------------------------------------------------------------------

import { useState } from "react";
import { defineClientPlugin, createPluginAtomClient, useAtomSet } from "@executor-js/sdk/client";

import { ExampleApi } from "./shared";

const ExampleClient = createPluginAtomClient(ExampleApi);

const greetAtom = ExampleClient.mutation("example", "greet");

function ExamplePage() {
  const [name, setName] = useState("world");
  const [result, setResult] = useState<string>();
  const doGreet = useAtomSet(greetAtom, { mode: "promise" });

  return (
    <div style={{ maxWidth: 480, margin: "2rem auto", padding: "1rem" }}>
      <h1 style={{ fontSize: "1.25rem", marginBottom: "1rem" }}>Example plugin</h1>
      <div style={{ display: "flex", gap: 8 }}>
        {/* The example plugin demonstrates the SDK in isolation, so it
            uses raw HTML controls instead of `@executor-js/react`'s
            wrapped components — third-party plugin authors don't have
            to depend on the host's component library. */}
        {/* oxlint-disable-next-line react/forbid-elements */}
        <input
          value={name}
          onChange={(e) => setName(e.target.value)}
          style={{
            flex: 1,
            padding: "0.5rem 0.75rem",
            border: "1px solid #ccc",
            borderRadius: 6,
          }}
        />
        {/* oxlint-disable-next-line react/forbid-elements */}
        <button
          type="button"
          onClick={async () => {
            // Mutation has no shared state to invalidate — explicit
            // empty `reactivityKeys` documents the intent for the
            // `require-reactivity-keys` rule.
            const g = await doGreet({ payload: { name }, reactivityKeys: [] });
            setResult(`${g.message} (#${g.count})`);
          }}
          style={{
            padding: "0.5rem 0.75rem",
            border: "1px solid #ccc",
            borderRadius: 6,
            cursor: "pointer",
          }}
        >
          Greet
        </button>
      </div>
      {result && (
        <pre style={{ marginTop: "1rem", padding: "0.5rem", background: "#f5f5f5" }}>{result}</pre>
      )}
    </div>
  );
}

export default defineClientPlugin({
  id: "example" as const,
  pages: [
    {
      path: "/",
      component: ExamplePage,
      nav: { label: "Example" },
    },
  ],
});