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

export const ConditionNode = memo(function ConditionNode({ id, selected, data }: any) {
  const m = KIND_META.condition;
  const branches: any[] = (data.branches ?? []).slice(0, 4);

  const customHandles = (
    <>
      <Handle type="target" position={Position.Left}
        style={{ width: 14, height: 14, background: m.color, border: "3px solid #fff", left: -8, top: 30 }} />
      {/* else handle at bottom */}
      <Handle id="else" type="source" position={Position.Bottom}
        style={{ width: 14, height: 14, background: "#94a3b8", border: "3px solid #fff", bottom: -8 }} />
      {branches.map((br: any, i: number) => {
        const topOffset = 92 + i * 40 + 16;
        return (
          <div key={br.id} className="group/ch">
            <Handle
              id={br.id}
              type="source"
              position={Position.Right}
              style={{ width: 14, height: 14, background: m.color, border: "3px solid #fff", right: -8, 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/ch:opacity-100 transition-opacity"
              style={{ right: 12, 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}</p>
        </div>
      </div>
      <div className="bg-white px-4 py-3 rounded-b-[14px]" style={{ width: 240 }}>
        {branches.length === 0 ? (
          <div className="border-2 border-dashed border-amber-200 rounded-xl py-3 text-center">
            <p className="text-[11px] text-amber-500 font-medium">Click to add branches</p>
          </div>
        ) : (
          <div className="space-y-1.5 pr-3">
            {branches.map((br: any) => (
              <div key={br.id}
                className="flex items-center gap-2 text-[11px] font-semibold px-3 py-2 rounded-lg border"
                style={{ borderColor: m.border, color: m.color, background: m.light }}>
                <span className="text-[10px]">🔀</span>
                <span className="truncate">{br.label || "Branch"}</span>
              </div>
            ))}
            <div className="flex items-center gap-2 text-[11px] font-semibold px-3 py-2 rounded-lg border border-slate-200 text-slate-400 bg-slate-50">
              <span className="text-[10px]">↙</span> else / fallback
            </div>
          </div>
        )}
      </div>
    </NodeShell>
  );
});
