import { defineRenderers, type ToolView } from "@berry/api/web.ts";
import * as j from "@char/justin";
import "./web.css";

const PREVIEW_CHARS = 20_000;

const queryOf = j.validation.compile(j.obj({ query: j.string }));
const urlOf = j.validation.compile(j.obj({ url: j.string }));
const formatOf = j.validation.compile(j.obj({ format: j.string }));
const searchResults = j.validation.compile(j.array(j.obj({
  title: j.string,
  url: j.string,
  snippet: j.string,
})));

function results(): ToolView {
  const list = <ol class="search-results" />;
  return {
    element: <div class="tool-body">{list}</div>,
    update({ result, error }) {
      if (error !== null) return list.replaceChildren(<li class="error">{error}</li>);
      // a direct call's result is its text; a script's is the value itself
      let decoded: unknown = result ?? [];
      try {
        if (typeof result === "string") decoded = JSON.parse(result);
      } catch {
        return list.replaceChildren(<li class="error">Invalid search results</li>);
      }
      const found = searchResults(decoded).value;
      if (!found) return list.replaceChildren(<li class="error">Invalid search results</li>);
      list.replaceChildren(...found.map(({ title, url, snippet }) => (
        <li>
          <a href={url} target="_blank" rel="noopener noreferrer">{title}</a>
          <span class="url">{url}</span>
          {snippet ? <p>{snippet}</p> : undefined}
        </li>
      )));
    },
  };
}

function page(): ToolView {
  const text = <pre class="fetched" hidden /> as HTMLPreElement;
  return {
    element: <div class="tool-body">{text}</div>,
    update({ result, error }) {
      const content = error ?? (typeof result === "string" ? result : "");
      text.textContent = content.length > PREVIEW_CHARS
        ? `${content.slice(0, PREVIEW_CHARS)}\n\n… ${
          content.length - PREVIEW_CHARS
        } more characters`
        : content;
      text.hidden = content === "";
    },
  };
}

export default defineRenderers({
  tools: {
    web_search: { summary: (args) => queryOf(args).value?.query ?? null, body: results },
    web_fetch: {
      summary: (args) =>
        `${urlOf(args).value?.url ?? ""}${formatOf(args).value?.format === "raw" ? " · raw" : ""}`,
      body: page,
    },
  },
});