// MFM Chat — Greeting, Message bubbles, SuggestedActions.
// Matches components/greeting.tsx, components/elements/message.tsx,
// components/suggested-actions.tsx.

const Greeting = () => (
  <div className="flex w-full max-w-2xl flex-col items-center justify-center gap-2 text-center animate-[fadeUp_0.4s_ease-out]">
    <div
      className="font-bold tracking-tight"
      style={{
        fontFamily: "var(--font-display)",
        fontSize: "clamp(1.75rem, 3vw, 2.25rem)",
        lineHeight: 1.05,
        color: "var(--foreground-soft)",
      }}
    >
      Meet IRIS 2.0
    </div>
    <div
      style={{
        fontSize: "12px",
        color: "var(--muted-foreground)",
        letterSpacing: "0.02em",
      }}
    >
      your unfair media advantage
    </div>
  </div>
);

// File-attachment chips rendered under a message body.
const MessageParts = ({ parts }) =>
  parts && parts.length > 0 ? (
    <div className="mt-1 flex flex-wrap gap-2">
      {parts.map((p, i) =>
        p.type === "file" ? (
          <div
            key={i}
            className="flex items-center gap-2 rounded-md border border-border bg-background px-2 py-1 text-xs text-muted-foreground"
          >
            <PaperclipIcon size={12} />
            <span>{p.name}</span>
          </div>
        ) : null
      )}
    </div>
  ) : null;

// One message — `from` = "user" | "assistant".
// User messages sit in a soft surface bubble (just off the background).
// IRIS (assistant) replies have NO container — the text flows directly on
// the canvas, full width, like the model is "speaking" into the page.
const Message = ({ from, children, parts }) => {
  const isUser = from === "user";

  if (!isUser) {
    return (
      <div className="is-assistant group flex w-full flex-col gap-2 py-4 text-sm leading-relaxed text-foreground">
        {children}
        <MessageParts parts={parts} />
      </div>
    );
  }

  return (
    <div className="is-user group flex w-full items-end justify-end gap-2 py-4">
      <div className="flex flex-col gap-2 overflow-hidden rounded-lg bg-secondary px-4 py-3 text-sm text-secondary-foreground max-w-[80%]">
        {children}
        <MessageParts parts={parts} />
      </div>
    </div>
  );
};

// Assistant message actions — copy / regen / vote
const MessageActions = ({ onCopy, onUp, onDown }) => (
  <div className="flex items-center gap-0.5 -mt-2 mb-2 ml-0 opacity-60 hover:opacity-100 transition-opacity">
    <Tooltip label="Copy" side="bottom">
      <Button variant="ghost" size="icon-sm" onClick={onCopy} aria-label="Copy">
        <CopyIcon size={14} />
      </Button>
    </Tooltip>
    <Tooltip label="Good response" side="bottom">
      <Button variant="ghost" size="icon-sm" onClick={onUp} aria-label="Upvote">
        <ThumbUpIcon size={14} />
      </Button>
    </Tooltip>
    <Tooltip label="Bad response" side="bottom">
      <Button variant="ghost" size="icon-sm" onClick={onDown} aria-label="Downvote">
        <ThumbDownIcon size={14} />
      </Button>
    </Tooltip>
  </div>
);

// IRIS signature mark — the spark that accompanies every assistant turn.
// It lives at the LEFT, on its own line below the reply, so it stays on the
// left and descends line-by-line as the text fills the width and wraps.
// The mark is painted in the current text colour (black in light theme,
// white in dark) via a CSS mask — never orange. state drives the animation:
//   "thinking"  — pulses in place before any text
//   "streaming" — pulses while tokens stream in
//   "rest"      — static, once the reply is complete
const IrisSpark = ({ state = "rest", size = 22, className = "" }) => {
  const animating = state === "thinking" || state === "streaming";
  return (
    <span
      role="img"
      aria-label="IRIS"
      className={`iris-spark block shrink-0 select-none ${
        animating ? "iris-spark--pulse" : ""
      } ${className}`}
      style={{ width: size, height: size }}
    >
      <img src="../../assets/icons/iris-spark-orange.png" alt="" draggable="false" />
    </span>
  );
};

// Thinking indicator — the spark pulsing next to a "Thinking…" label, shown
// before any text streams in.
const ThinkingIndicator = () => (
  <div className="is-assistant flex w-full items-center gap-2.5 py-4">
    <IrisSpark state="thinking" size={22} />
    <span className="text-sm text-muted-foreground">Thinking…</span>
  </div>
);

// Suggested actions — 2x2 grid of starter prompts.
const SuggestedActions = ({ onPick }) => {
  const actions = [
    "Brief a 60-second TikTok for our new client",
    "Compare last quarter's CPM across regions",
    "Draft a media plan for a €200k retainer",
    "Pull together a press list for tomorrow",
  ];
  return (
    <div className="grid w-full gap-2 sm:grid-cols-2">
      {actions.map((a, i) => (
        <button
          key={a}
          type="button"
          onClick={() => onPick(a)}
          className="suggestion-chip h-auto w-full whitespace-normal rounded-lg p-3 text-left text-sm font-normal"
          style={{
            animation: `fadeUp 0.4s ease-out ${i * 0.05}s both`,
          }}
        >
          {a}
        </button>
      ))}
    </div>
  );
};

Object.assign(window, {
  Greeting, Message, MessageActions, ThinkingIndicator, SuggestedActions, IrisSpark,
});