'use client';

import { Upload } from 'lucide-react';
import type { FieldConfig } from '@/types/invyone-component';

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

/**
 * file 타입: 검색에서는 렌더하지 않음.
 * Phase 2에서는 파일 선택 UI만 제공, 실제 업로드는 Phase 3+.
 */
export function FileField({ field, value, onChange, mode, disabled, error }: FileFieldProps) {
  if (mode === 'search') {
    return null; // 검색 불가
  }

  const fileName = typeof value === 'string' ? value : value?.name ?? '';

  return (
    <div className="flex items-center gap-2">
      <label
        className={`flex h-7 cursor-pointer items-center gap-1.5 rounded-md border px-2 text-xs
          transition-colors
          ${disabled ? 'opacity-50 cursor-not-allowed' : 'hover:border-[var(--v5-primary)] hover:text-[var(--v5-primary)]'}
          ${error ? 'border-destructive' : 'border-input'}
          bg-[var(--v5-surface)] text-[var(--v5-text-sec)]`}
      >
        <Upload className="h-3 w-3" />
        <span>파일 선택</span>
        <input
          type="file"
          className="hidden"
          disabled={disabled}
          onChange={(e) => {
            const file = e.target.files?.[0];
            onChange(file ?? null);
          }}
        />
      </label>
      {fileName && (
        <span className="truncate text-xs text-[var(--v5-text-sec)]">{fileName}</span>
      )}
    </div>
  );
}
