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

const SENTIMENTS = [
  { id: "positive", emoji: "😊", label: "Happy",   color: "#059669", top: 62 },
  { id: "neutral",  emoji: "😐", label: "Neutral",  color: "#d97706", top: 110 },
  { id: "negative", emoji: "😟", label: "Sad",      color: "#dc2626", top: 158 },
];

export const SentimentNode = memo(function SentimentNode({ id, selected, data }: any) {
  const m = KIND_META.sentiment;

  const customHandles = (
    <>
      <Handle type="target" position={Position.Left}
        style={{ width: 14, height: 14, background: m.color, border: "3px solid #fff", left: -8, top: "50%" }} />
      {SENTIMENTS.map(s => (
        <div key={s.id} className="group/sh">
          <Handle
            id={s.id}
            type="source"
            position={Position.Right}
            style={{ width: 14, height: 14, background: s.color, border: "3px solid #fff", right: -8, top: s.top, 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/sh:opacity-100 transition-opacity"
            style={{ right: 12, top: s.top - 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]">Mood Router</p>
          <p className="text-white/70 text-[10px]">Claude reads patient sentiment</p>
        </div>
      </div>
      <div className="bg-white px-4 py-3 rounded-b-[14px]" style={{ width: 220 }}>
        <div className="space-y-1.5 pr-3">
          {SENTIMENTS.map(s => (
            <div key={s.id}
              className="flex items-center gap-2 px-3 py-2 rounded-lg text-[11px] font-semibold border"
              style={{ borderColor: s.color + "40", background: s.color + "10", color: s.color }}>
              <span>{s.emoji}</span>
              <span>{s.label}</span>
            </div>
          ))}
        </div>
      </div>
    </NodeShell>
  );
});
