/**
 * Search-box.ai
 * Author: Simon-Pierre Boucher
 * Contact: contact@spboucher.ai
 * File: apps/web/components/Pastille.tsx
 * Description: Hand-made icon pastilles — one custom SVG glyph per tool/event type.
 */

import type { JSX } from "react";

export type PastilleKind =
  | "plan"
  | "search"
  | "fetch"
  | "read"
  | "claim"
  | "belief"
  | "evidence"
  | "contradiction"
  | "thought"
  | "synthesis"
  | "done"
  | "failed"
  | "source"
  | "confidence";

/** All glyphs are drawn on a 24×24 grid, stroke 1.8, round caps — one visual family. */
const GLYPHS: Record<PastilleKind, JSX.Element> = {
  // branching trunk — the plan grows outward
  plan: (
    <>
      <path d="M12 21v-8" />
      <path d="M12 13c0-4-3.5-4.5-6-7" />
      <path d="M12 13c0-4 3.5-4.5 6-7" />
      <circle cx="6" cy="5.5" r="1.6" />
      <circle cx="18" cy="5.5" r="1.6" />
      <circle cx="12" cy="21" r="1.2" fill="currentColor" stroke="none" />
    </>
  ),
  search: (
    <>
      <circle cx="10.5" cy="10.5" r="5.7" />
      <path d="M14.8 14.8L20 20" />
    </>
  ),
  // page pulled down into the tray
  fetch: (
    <>
      <path d="M12 3v11" />
      <path d="M8 10l4 4 4-4" />
      <path d="M4 17v1.6A2.4 2.4 0 0 0 6.4 21h11.2a2.4 2.4 0 0 0 2.4-2.4V17" />
    </>
  ),
  // open book
  read: (
    <>
      <path d="M12 6c-2-1.5-4.6-2.1-8-2.1v14.3c3.4 0 6 .6 8 2.1 2-1.5 4.6-2.1 8-2.1V3.9c-3.4 0-6 .6-8 2.1z" />
      <path d="M12 6v14" />
    </>
  ),
  // hypothesis flask
  claim: (
    <>
      <path d="M9.2 3h5.6" />
      <path d="M10 3v5.2L4.8 17a2.6 2.6 0 0 0 2.3 3.9h9.8a2.6 2.6 0 0 0 2.3-3.9L14 8.2V3" />
      <path d="M7.5 14.5h9" />
    </>
  ),
  // gauge — belief updated
  belief: (
    <>
      <path d="M4.5 16a7.5 7.5 0 0 1 15 0" />
      <path d="M12 16l3.6-4.4" />
      <circle cx="12" cy="16" r="1.5" fill="currentColor" stroke="none" />
    </>
  ),
  // double quote
  evidence: (
    <>
      <path
        d="M5.5 15.5c0-4 1.8-6.6 4.5-7.5l.6 1.5c-1.5.7-2.3 1.9-2.5 3.2H10v5H5.5v-2.2zM13.5 15.5c0-4 1.8-6.6 4.5-7.5l.6 1.5c-1.5.7-2.3 1.9-2.5 3.2H18v5h-4.5v-2.2z"
        fill="currentColor"
        stroke="none"
      />
    </>
  ),
  // bolt — evidence collides
  contradiction: (
    <>
      <path d="M13 2.5L4.5 13.5H11l-1.5 8L18 10.5h-6.5z" fill="currentColor" stroke="none" />
    </>
  ),
  // speech bubble
  thought: (
    <>
      <path d="M4 7a3 3 0 0 1 3-3h10a3 3 0 0 1 3 3v6a3 3 0 0 1-3 3H9.5L4.8 20z" />
      <circle cx="9" cy="10" r="0.9" fill="currentColor" stroke="none" />
      <circle cx="12.5" cy="10" r="0.9" fill="currentColor" stroke="none" />
      <circle cx="16" cy="10" r="0.9" fill="currentColor" stroke="none" />
    </>
  ),
  // pen nib — writing the answer
  synthesis: (
    <>
      <path d="M5 21l1.8-5.6L16 6.2l3.4 3.4-9.2 9.2z" />
      <path d="M16 6.2l1.4-1.4a2.4 2.4 0 0 1 3.4 3.4L19.4 9.6" />
      <path d="M6.8 15.4l3.4 3.4" />
    </>
  ),
  done: (
    <>
      <circle cx="12" cy="12" r="8.5" />
      <path d="M8 12.4l2.7 2.7L16.4 9" />
    </>
  ),
  failed: (
    <>
      <path d="M12 3.5L21.5 20h-19z" />
      <path d="M12 10v4.5" />
      <circle cx="12" cy="17.2" r="1" fill="currentColor" stroke="none" />
    </>
  ),
  // layered stack — a source
  source: (
    <>
      <path d="M12 3.5l8.5 4.5L12 12.5 3.5 8z" />
      <path d="M3.5 12.5L12 17l8.5-4.5" />
      <path d="M3.5 16.5L12 21l8.5-4.5" />
    </>
  ),
  confidence: (
    <>
      <path d="M4.5 16a7.5 7.5 0 0 1 15 0" />
      <path d="M12 16l3.6-4.4" />
      <circle cx="12" cy="16" r="1.5" fill="currentColor" stroke="none" />
    </>
  )
};

export function Glyph({ kind, size = 15 }: { kind: PastilleKind; size?: number }) {
  return (
    <svg
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="1.8"
      strokeLinecap="round"
      strokeLinejoin="round"
      aria-hidden
    >
      {GLYPHS[kind]}
    </svg>
  );
}

/** Colored disc + glyph. `spin` adds the working shimmer ring. */
export function Pastille({
  kind,
  spinning = false,
  size = "md"
}: {
  kind: PastilleKind;
  spinning?: boolean;
  size?: "sm" | "md";
}) {
  return (
    <span className={`pastille pk-${kind} ps-${size} ${spinning ? "spinning" : ""}`}>
      <Glyph kind={kind} size={size === "sm" ? 12 : 15} />
    </span>
  );
}