"use client";
import { memo } from "react";
import { Handle, Position } from "reactflow";
import { NodeShell } from "./NodeShell";
import { KIND_META } from "./nodeTypes";

export const ButtonsNode = memo(function ButtonsNode({ id, selected, data }: any) {
  const m = KIND_META.buttons;
  const buttons: any[] = (data.buttons ?? []).slice(0, 3);

  const customHandles = (
    <>
      {/* target on left */}
      <Handle type="target" position={Position.Left}
        style={{ width: 14, height: 14, background: m.color, border: "3px solid #fff", left: -8, top: 30 }} />
      {/* per-button source handles */}
      {buttons.map((btn: any, i: number) => {
        const topOffset = 96 + i * 46 + 18;
        return (
          <div key={btn.id} className="group/bh">
            <Handle
              id={btn.id}
              type="source"
              position={Position.Right}
              style={{ width: 16, height: 16, background: m.color, border: "3px solid #fff", right: -10, top: topOffset, position: "absolute" }}
            />
            <span className="pointer-events-none absolute text-[9px] font-bold bg-gray-800 text-white px-2 py-1 rounded-lg whitespace-nowrap opacity-0 group-hover/bh:opacity-100 transition-opacity"
              style={{ right: 14, top: topOffset - 5 }}>
              drag to link →
            </span>
          </div>
        );
      })}
    </>
  );

  return (
    <NodeShell id={id} selected={selected} color={m.color} border={m.border} analytics={data.analytics} hideDefaultHandles customHandles={customHandles}>
      <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.label}</p>
          <p className="text-white/70 text-[10px]">{m.label} — up to 3 options</p>
        </div>
      </div>
      <div className="bg-white px-4 py-3 rounded-b-[14px]" style={{ width: 260 }}>
        {data.content ? (
          <p className="text-[11px] text-gray-600 bg-gray-50 rounded-lg px-2.5 py-2 border border-gray-100 line-clamp-2 mb-2">
            {data.content.replace(/\{\{(\w+)\}\}/g, (_: any, v: string) => `[${v}]`)}
          </p>
        ) : (
          <p className="text-[11px] text-gray-400 italic mb-2">Click to add message…</p>
        )}
        {buttons.length === 0 ? (
          <div className="border-2 border-dashed border-emerald-200 rounded-xl py-3 text-center">
            <p className="text-[11px] text-emerald-500 font-medium">Click to add options</p>
          </div>
        ) : (
          <div className="space-y-1.5 pr-3">
            {buttons.map((btn: any) => (
              <div key={btn.id}
                className="text-[11px] font-semibold px-3 py-2 rounded-lg border text-center"
                style={{ borderColor: m.border, color: m.color, background: m.light }}>
                {btn.text || btn.label || "Option"}
              </div>
            ))}
          </div>
        )}
      </div>
    </NodeShell>
  );
});
