import { memo } from "react";

/** Emote bubbles above a pawn's head; all anchor at (0,0) just above the hair. */

const popBob: React.CSSProperties = {
  transformBox: "fill-box",
  transformOrigin: "center bottom",
  animation: "emote-pop 0.25s ease-out, emote-bob 2s ease-in-out 0.25s infinite",
};

export const ThoughtEmote = memo(function ThoughtEmote({ isDark }: { isDark: boolean }) {
  const fill = isDark ? "#e8e4da" : "#ffffff";
  const stroke = isDark ? "#9a9284" : "#cbc4b4";
  return (
    <g style={popBob}>
      <circle cx={-4} cy={-2} r={1.6} fill={fill} stroke={stroke} strokeWidth={0.6} />
      <circle cx={-7} cy={-7} r={2.4} fill={fill} stroke={stroke} strokeWidth={0.6} />
      <g transform="translate(0, -16)">
        <ellipse cx={0} cy={0} rx={13} ry={8} fill={fill} stroke={stroke} strokeWidth={0.8} />
        <ellipse cx={-8} cy={-3} rx={6} ry={5} fill={fill} />
        <ellipse cx={7} cy={-3} rx={6.5} ry={5.5} fill={fill} />
        <ellipse cx={0} cy={-5} rx={7} ry={5.5} fill={fill} />
        {[0, 1, 2].map((i) => (
          <circle
            key={i}
            cx={(i - 1) * 5}
            cy={-1}
            r={1.8}
            fill="#5b8dd9"
            style={{ animation: `thinking-dots 1.2s ease-in-out ${i * 0.18}s infinite` }}
          />
        ))}
      </g>
    </g>
  );
});

export const SpeechEmote = memo(function SpeechEmote({ text, isDark }: { text: string; isDark: boolean }) {
  const snippet = text.replace(/\s+/g, " ").trim().slice(-46);
  const bg = isDark ? "rgba(238,234,226,0.96)" : "rgba(255,255,255,0.96)";
  return (
    <g style={popBob}>
      <path d="M -3 -3 L 0 3 L 4 -3 Z" fill={bg} stroke="#c3aee8" strokeWidth={0.8} />
      <foreignObject x={-62} y={-40} width={124} height={38} style={{ pointerEvents: "none" }}>
        <div style={{ display: "flex", justifyContent: "center", alignItems: "flex-end", height: "100%" }}>
          <div
            style={{
              fontSize: "9px",
              lineHeight: "11px",
              fontWeight: 600,
              color: "#43306b",
              backgroundColor: bg,
              border: "1px solid #c3aee8",
              borderRadius: "8px",
              padding: "3px 7px",
              maxWidth: "120px",
              maxHeight: "34px",
              overflow: "hidden",
              overflowWrap: "anywhere",
              boxShadow: "0 2px 4px rgba(0,0,0,0.12)",
            }}
          >
            {snippet || "…"}
          </div>
        </div>
      </foreignObject>
    </g>
  );
});

export const ToolEmote = memo(function ToolEmote({ toolName, isDark }: { toolName: string; isDark: boolean }) {
  const bg = isDark ? "#3a1c0d" : "#fdf1ea";
  return (
    <g style={popBob}>
      <path d="M -3 -3 L 0 3 L 4 -3 Z" fill={bg} stroke="#d97757" strokeWidth={0.8} />
      <g transform="translate(0, -13)">
        <rect
          x={-32}
          y={-10}
          width={64}
          height={17}
          rx={8.5}
          fill={bg}
          stroke="#d97757"
          strokeWidth={1}
          style={{ filter: "drop-shadow(0 2px 3px rgba(0,0,0,0.12))" }}
        />
        <g transform="translate(-23, -1.5)">
          <g style={{ animation: "gear-spin 2s linear infinite", transformBox: "fill-box", transformOrigin: "center" }}>
            <Gear />
          </g>
        </g>
        <text
          x={4}
          y={2}
          textAnchor="middle"
          fontSize={8.5}
          fontWeight={700}
          fill={isDark ? "#f0b9a2" : "#b0492a"}
          fontFamily="'IBM Plex Mono', ui-monospace, monospace"
        >
          {toolName.length > 11 ? `${toolName.slice(0, 10)}…` : toolName}
        </text>
      </g>
    </g>
  );
});

function Gear() {
  const teeth = Array.from({ length: 8 }, (_, i) => (
    <rect key={i} x={-1.2} y={-6.2} width={2.4} height={3} rx={0.8} fill="#d97757" transform={`rotate(${i * 45})`} />
  ));
  return (
    <g>
      {teeth}
      <circle r={4.2} fill="#d97757" />
      <circle r={1.7} fill="#fdf1ea" />
    </g>
  );
}

export const ErrorEmote = memo(function ErrorEmote() {
  return (
    <g
      style={{
        transformBox: "fill-box",
        transformOrigin: "center bottom",
        animation: "emote-pop 0.2s ease-out, emote-bounce 0.7s ease-in-out 0.2s infinite",
      }}
    >
      <g transform="translate(0, -10)">
        <path
          d="M 0 -10 L 8.5 5 L -8.5 5 Z"
          fill="#d14343"
          stroke="#a02c2c"
          strokeWidth={1}
          strokeLinejoin="round"
          style={{ filter: "drop-shadow(0 2px 3px rgba(0,0,0,0.25))" }}
        />
        <rect x={-1.2} y={-5.5} width={2.4} height={5.5} rx={1.2} fill="#fff" />
        <circle cx={0} cy={2.5} r={1.4} fill="#fff" />
      </g>
    </g>
  );
});

export const ZzzEmote = memo(function ZzzEmote({ isDark }: { isDark: boolean }) {
  const color = isDark ? "#9a9284" : "#8a8578";
  return (
    <g>
      {[0, 1, 2].map((i) => (
        <text
          key={i}
          x={i * 4}
          y={-i * 5}
          fontSize={7 + i * 2}
          fontWeight={700}
          fill={color}
          fontFamily="ui-rounded, system-ui"
          style={{ animation: `zzz-float 2.4s ease-out ${i * 0.8}s infinite`, transformBox: "fill-box" }}
        >
          z
        </text>
      ))}
    </g>
  );
});

export const SparkleEmote = memo(function SparkleEmote() {
  const sparkles = [
    { x: -12, y: -6, s: 1, d: 0 },
    { x: 10, y: -12, s: 0.8, d: 0.3 },
    { x: 0, y: -18, s: 1.1, d: 0.6 },
  ];
  return (
    <g>
      {sparkles.map((sp, i) => (
        <g key={i} transform={`translate(${sp.x}, ${sp.y}) scale(${sp.s})`}>
          <path
            d="M 0 -5 L 1.3 -1.3 L 5 0 L 1.3 1.3 L 0 5 L -1.3 1.3 L -5 0 L -1.3 -1.3 Z"
            fill="#3fb0bc"
            style={{
              animation: `sparkle-twinkle 1.1s ease-in-out ${sp.d}s infinite`,
              transformBox: "fill-box",
              transformOrigin: "center",
            }}
          />
        </g>
      ))}
    </g>
  );
});
