'use client';

import { NodeShell } from './node-shell';
import { PortRow } from './port-row';

interface ReferralNodeData {
  trackVariable?: string;
  targetCount?: number;
  onReach?: string;
  friendStartNode?: string;
  isStart?: boolean;
  nodeId?: string;
  [key: string]: unknown;
}

export function ReferralNode({ data, id }: { data: ReferralNodeData; id: string }) {
  const targetCount = data.targetCount ?? 0;
  const trackVar = data.trackVariable ?? 'invited_count';
  const hasReach = !!data.onReach;
  const hasFriend = !!data.friendStartNode;
  const isStart = data.isStart;
  const nodeId = (data.nodeId as string) || id;

  return (
    <NodeShell
      accentColor="#ec407a"
      icon={'\uD83C\uDF81'}
      title="Реферал"
      nodeId={nodeId}
      isStart={isStart}
    >
      {/* Target count + variable */}
      <div style={{ marginBottom: 4 }}>
        <span
          style={{
            fontSize: 13,
            fontWeight: 700,
            color: '#ec407a',
          }}
        >
          {targetCount}
        </span>
        <span
          style={{
            fontSize: 11,
            color: '#666',
            marginLeft: 4,
          }}
        >
          друзей
        </span>
      </div>
      <p
        style={{
          fontSize: 9,
          color: '#9e9e9e',
          fontFamily: 'monospace',
          margin: '0 0 4px',
        }}
      >
        {trackVar}
      </p>

      {/* Branch PortRows */}
      <div style={{ margin: '0 -10px' }}>
        {hasReach && <PortRow label="Цель достигнута" handleId="source-reach" dotColor="#66bb6a" />}
        {hasFriend && (
          <PortRow label="Сценарий друга" handleId="source-friend" dotColor="#ab47bc" />
        )}
      </div>
    </NodeShell>
  );
}
