// Inline chip referencing a model element.
// Renders four visual styles via CSS (pill / color / underline / bracket).
// Ported from docs/design-source/socrata/project/text-canvas.jsx (Chip).
// M1: static. M2: becomes a TipTap node-view.

import type { ChipKind } from "../../lib/fixtures/aristotle";

export type MarkupStyle = "pill" | "color" | "underline" | "bracket";

const KIND_LABEL: Record<ChipKind, string> = {
  block: "block",
  property: "property",
  association: "assoc",
  requirement: "req",
};

function kindGlyph(kind: ChipKind): string {
  switch (kind) {
    case "block": return "▢";
    case "property": return "·";
    case "association": return "→";
    case "requirement": return "§";
  }
}

interface ChipProps {
  kind: ChipKind;
  id: string;
  label: string;
  markupStyle: MarkupStyle;
  focused?: boolean;
  onHover?: (id: string | null) => void;
  onClick?: (id: string, kind: ChipKind) => void;
}

export function Chip({ kind, id, label, markupStyle, focused, onHover, onClick }: ChipProps) {
  const cls = `chip chip-${kind} chip-style-${markupStyle}${focused ? " chip-focus" : ""}`;
  const handlers = {
    onMouseEnter: () => onHover?.(id),
    onMouseLeave: () => onHover?.(null),
    onClick: () => onClick?.(id, kind),
  };

  if (markupStyle === "bracket") {
    return (
      <span className={cls} {...handlers}>
        <span className="chip-bracket">[</span>
        <span className="chip-kind">{KIND_LABEL[kind]}:</span>
        <span className="chip-label">{label}</span>
        <span className="chip-bracket">]</span>
      </span>
    );
  }

  if (markupStyle === "underline") {
    return (
      <span className={cls} {...handlers}>
        <span className="chip-glyph">{kindGlyph(kind)}</span>
        <span className="chip-label">{label}</span>
      </span>
    );
  }

  // pill (default) and color both render as filled chips.
  return (
    <span className={cls} {...handlers}>
      <span className="chip-glyph">{kindGlyph(kind)}</span>
      <span className="chip-label">{label}</span>
    </span>
  );
}