'use client';

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

interface InputNodeData {
  prompt?: string;
  inputType?: string;
  saveAs?: string;
  isStart?: boolean;
  nodeId?: string;
  [key: string]: unknown;
}

const TYPE_LABELS: Record<string, string> = {
  text: 'Текст',
  phone: 'Телефон',
  email: 'Email',
  number: 'Число',
  choice: 'Выбор',
};

export function InputNode({ data, id }: { data: InputNodeData; id: string }) {
  const prompt = data.prompt ?? '';
  const inputType = data.inputType ?? 'text';
  const saveAs = data.saveAs ?? '';
  const isStart = data.isStart;
  const nodeId = (data.nodeId as string) || id;

  return (
    <NodeShell
      accentColor="#26a69a"
      icon={'\u270F\uFE0F'}
      title="Ввод данных"
      nodeId={nodeId}
      isStart={isStart}
    >
      {/* Type badge */}
      <div style={{ marginBottom: 4 }}>
        <span
          style={{
            fontSize: 9,
            fontWeight: 600,
            color: '#26a69a',
            backgroundColor: '#e0f2f1',
            borderRadius: 8,
            padding: '1px 8px',
            lineHeight: '16px',
            display: 'inline-block',
          }}
        >
          {TYPE_LABELS[inputType] ?? inputType}
        </span>
      </div>

      {/* Prompt preview (2 lines) */}
      <p
        style={{
          fontSize: 11,
          color: '#666',
          lineHeight: '15px',
          margin: 0,
          overflow: 'hidden',
          display: '-webkit-box',
          WebkitLineClamp: 2,
          WebkitBoxOrient: 'vertical',
        }}
      >
        {prompt || <span style={{ fontStyle: 'italic', color: '#bdbdbd' }}>Введите запрос...</span>}
      </p>

      {/* saveAs */}
      {saveAs && (
        <p
          style={{
            marginTop: 4,
            fontSize: 10,
            color: '#26a69a',
            fontFamily: 'monospace',
          }}
        >
          {'\u2192'} {saveAs}
        </p>
      )}
    </NodeShell>
  );
}
