'use client';

import { Input } from '@/components/ui/input';
import { Search } from 'lucide-react';
import type { FieldConfig } from '@/types/invyone-component';

interface EntityFieldProps {
  field: FieldConfig;
  value: any;
  onChange: (value: any) => void;
  mode: 'form' | 'search';
  disabled?: boolean;
  error?: string;
}

/**
 * entity 타입 필드 — 팝업 검색 + 입력
 * Phase 2에서는 텍스트 입력 + 검색 버튼 UI만 구현.
 * 실제 팝업 검색은 Phase 3+ 에서 ref 테이블 조회와 함께 구현.
 */
export function EntityField({ field, value, onChange, mode, disabled, error }: EntityFieldProps) {
  const displayLabel = field.ref
    ? `${field.label} (${field.ref.table})`
    : field.label;

  return (
    <div className="flex items-center gap-1">
      <Input
        type="text"
        value={value ?? ''}
        onChange={(e) => onChange(e.target.value || null)}
        placeholder={field.placeholder ?? displayLabel}
        disabled={disabled}
        className={`h-7 text-xs flex-1 ${error ? 'border-destructive' : ''}`}
      />
      <button
        type="button"
        disabled={disabled}
        className="flex h-7 w-7 shrink-0 items-center justify-center rounded-md border border-input
          bg-[var(--v5-surface)] text-[var(--v5-text-muted)] transition-colors
          hover:border-[var(--v5-primary)] hover:text-[var(--v5-primary)]
          disabled:opacity-50 disabled:cursor-not-allowed"
        title={`${field.label} 검색`}
      >
        <Search className="h-3 w-3" />
      </button>
    </div>
  );
}
