import { Plus, FileText } from 'lucide-react'
import { IntakeFieldEditor } from './IntakeFieldEditor'
import { useProceduralEditorStore } from '@/store/proceduralEditorStore'

export function IntakeFormBuilder() {
  const { intakeForm, addField, removeField, updateField } = useProceduralEditorStore()

  return (
    <div>
      <div className="mb-3 flex items-center justify-end">
        <button
          onClick={addField}
          className="flex items-center gap-1.5 rounded-md border border-border px-3 py-1.5 text-sm text-muted-foreground hover:bg-accent hover:text-foreground"
        >
          <Plus className="h-3.5 w-3.5" />
          Add Field
        </button>
      </div>

      {intakeForm.length === 0 ? (
        <div className="rounded-lg border border-dashed border-border bg-white/[0.02] py-8 text-center">
          <FileText className="mx-auto mb-2 h-8 w-8 text-muted-foreground" />
          <p className="text-sm text-muted-foreground">No intake form fields yet</p>
          <p className="mt-1 text-xs text-muted-foreground">
            Add fields to collect project data before the procedure starts
          </p>
        </div>
      ) : (
        <div className="space-y-2">
          {intakeForm.map((field, index) => (
            <IntakeFieldEditor
              key={`field-${index}-${field.display_order}`}
              field={field}
              onUpdate={(updates) => updateField(index, updates)}
              onRemove={() => removeField(index)}
            />
          ))}
        </div>
      )}
    </div>
  )
}
