import React from 'react'
import { Input } from '@heroui/react'
import {
  WORKFLOW_FIELD_TYPE,
  type WorkflowFieldOption,
  type WorkflowFormField,
} from '../../lib/workflowCardForm'
import { CardWorkflowFileField } from './CardWorkflowFileField'

export type { WorkflowFieldOption, WorkflowFormField as WorkflowFieldItem }

interface CardWorkflowFieldProps {
  field: WorkflowFormField
  value: string | string[]
  disabled: boolean
  isUploading?: boolean
  showRequiredError?: boolean
  onChange: (key: string, value: string | string[]) => void
  onPickFile?: (key: string, file: File) => void | Promise<void>
}

export const CardWorkflowField: React.FC<CardWorkflowFieldProps> = ({
  field,
  value,
  disabled,
  showRequiredError = false,
  isUploading = false,
  onChange,
  onPickFile,
}) => {
  const requiredMark = field.required ? '*' : ''
  const label = `${requiredMark}${field.label}`

  if (field.type === WORKFLOW_FIELD_TYPE.FILE) {
    const fileName = typeof value === 'string' ? value : ''
    return (
      <CardWorkflowFileField
        field={field}
        fileName={fileName}
        disabled={disabled}
        isUploading={isUploading}
        showRequiredError={showRequiredError}
        onPickFile={(file) => {
          void onPickFile?.(field.key, file)
        }}
      />
    )
  }

  if (field.type === WORKFLOW_FIELD_TYPE.SELECT) {
    if (field.multiple) {
      const selectedValues = Array.isArray(value) ? value : []
      return (
        <div>
          <label className="block text-[14px] text-[#4b5563] mb-[6px]">{label}</label>
          <select
            multiple
            value={selectedValues}
            disabled={disabled}
            onChange={(e) => {
              const nextValues = Array.from(e.target.selectedOptions).map(option => option.value)
              onChange(field.key, nextValues)
            }}
            className="w-full min-h-[96px] border border-[#d4d4d8] rounded-[12px] px-[12px] py-[8px] text-[14px] bg-white"
          >
            {(field.options || []).map(option => (
              <option key={option.id || option.text} value={option.id || ''}>
                {option.text || option.id}
              </option>
            ))}
          </select>
          {showRequiredError && (
            <p className="text-[12px] text-[#f31260] mt-[6px]">
请选择
{field.label}
            </p>
          )}
        </div>
      )
    }

    const selectedValue = typeof value === 'string' ? value : ''
    return (
      <div>
        <label className="block text-[14px] text-[#4b5563] mb-[6px]">{label}</label>
        <select
          value={selectedValue}
          disabled={disabled}
          onChange={e => onChange(field.key, e.target.value)}
          className="w-full h-[40px] border border-[#d4d4d8] rounded-[12px] px-[12px] text-[14px] bg-white"
        >
          <option value="">
请选择
{field.label}
          </option>
          {(field.options || []).map(option => (
            <option key={option.id || option.text} value={option.id || ''}>
              {option.text || option.id}
            </option>
          ))}
        </select>
        {showRequiredError && (
          <p className="text-[12px] text-[#f31260] mt-[6px]">
请选择
{field.label}
          </p>
        )}
      </div>
    )
  }

  return (
    <div>
      <Input
        label={label}
        value={typeof value === 'string' ? value : ''}
        onChange={e => onChange(field.key, e.target.value)}
        isDisabled={disabled}
        variant="bordered"
        className="w-full"
        placeholder={field.label ? `请输入${field.label.replace(/（可选）|\(可选\)/g, '').trim()}…` : undefined}
      />
      {showRequiredError && (
        <p className="text-[12px] text-[#f31260] mt-[6px]">
请填写
{field.label}
        </p>
      )}
    </div>
  )
}
