'use client';

import { Handle, Position } from '@xyflow/react';

interface NodeShellProps {
  accentColor: string;
  icon: string;
  title: string;
  nodeId: string;
  isStart?: boolean;
  children: React.ReactNode;
}

export function NodeShell({ accentColor, icon, title, nodeId, isStart, children }: NodeShellProps) {
  return (
    <div
      style={{
        width: 220,
        background: '#ffffff',
        border: isStart ? '1px dashed #4caf50' : '1px solid #e0e0e0',
        borderRadius: 10,
        boxShadow: '0 2px 8px rgba(0,0,0,0.08)',
        borderLeft: isStart ? '3px dashed #4caf50' : `3px solid ${accentColor}`,
        position: 'relative',
      }}
    >
      {/* Target handle (top) */}
      <Handle
        type="target"
        position={Position.Top}
        id="target-top"
        style={{
          width: 8,
          height: 8,
          background: '#9e9e9e',
          border: 'none',
          top: -4,
        }}
      />

      {/* Header */}
      <div
        style={{
          display: 'flex',
          alignItems: 'center',
          gap: 6,
          padding: '6px 10px',
          borderBottom: '1px solid #f0f0f0',
        }}
      >
        <span style={{ fontSize: 12, lineHeight: 1 }}>{icon}</span>
        <span
          style={{
            fontSize: 12,
            fontWeight: 600,
            color: '#333',
            flex: 1,
          }}
        >
          {title}
        </span>
        {isStart && (
          <span
            style={{
              fontSize: 9,
              fontWeight: 600,
              color: '#4caf50',
              backgroundColor: '#e8f5e9',
              borderRadius: 8,
              padding: '1px 6px',
              lineHeight: '14px',
            }}
          >
            START
          </span>
        )}
      </div>

      {/* Body */}
      <div style={{ padding: '6px 10px 4px' }}>{children}</div>

      {/* Footer: node ID */}
      <div
        style={{
          padding: '2px 10px 4px',
          fontSize: 8,
          color: '#bdbdbd',
          textAlign: 'right',
        }}
      >
        {nodeId}
      </div>

      {/* Source handle (bottom) — "next" */}
      <Handle
        type="source"
        position={Position.Bottom}
        id="source-bottom"
        style={{
          width: 8,
          height: 8,
          background: '#9e9e9e',
          border: 'none',
          bottom: -4,
        }}
      />
    </div>
  );
}
