"use client";
import { memo } from "react";
import { NodeShell } from "./NodeShell";
import { KIND_META } from "./nodeTypes";

export const MessageNode = memo(function MessageNode({ id, selected, data }: any) {
  const m = KIND_META.message;
  const preview = data.content
    ? data.content.replace(/\{\{(\w+)\}\}/g, (_: any, v: string) => `[${v}]`).slice(0, 100)
    : null;

  return (
    <NodeShell id={id} selected={selected} color={m.color} border={m.border} analytics={data.analytics}>
      <div className={`bg-gradient-to-r ${m.gradient} px-4 py-2.5 rounded-t-[14px] flex items-center gap-2`}>
        <span className="text-lg">{m.icon}</span>
        <div className="flex-1 min-w-0">
          <p className={`text-white font-bold text-[12px] truncate ${data.generating ? "generating-pulse" : ""}`}>
            {data.label}
          </p>
          <p className="text-white/70 text-[10px]">{m.label}</p>
        </div>
        {data.generating && (
          <span className="w-2.5 h-2.5 rounded-full bg-white animate-ping badge-enter" />
        )}
      </div>
      <div className="bg-white px-4 py-3 rounded-b-[14px]" style={{ width: 240 }}>
        {preview ? (
          <div className="bg-gray-50 rounded-xl px-3 py-2 border border-gray-100">
            <p className="text-[11px] text-gray-700 leading-relaxed whitespace-pre-wrap line-clamp-4">
              {preview}{data.content.length > 100 && "…"}
            </p>
          </div>
        ) : data.generating ? (
          <div className="shimmer-bg rounded-xl h-12" />
        ) : (
          <div className="border-2 border-dashed border-sky-200 rounded-xl px-3 py-3 text-center">
            <p className="text-[11px] text-sky-400 font-medium">Click to write message</p>
          </div>
        )}
      </div>
    </NodeShell>
  );
});
