{label}

onChange(field, e.target.value)}
        placeholder={placeholder}
        rows={rows}
        className="text-xs"
      />
    </div>
  )
}

interface SectionProps {
  title: string
  children: ReactNode
  className?: string
}

function Section({ title, children, className }: SectionProps) {
  return (
    <div className={cn('space-y-3', className)}>
      <h3 className="text-xs font-semibold text-muted-foreground uppercase tracking-wide">{title}</h3>
      {children}
    </div>
  )
}

export const WorkItemForm = forwardRef<WorkItemFormHandle, WorkItemFormProps>(function WorkItemForm(
  { item, title, onSubmit, onCancel, loading, mode = 'edit', itemLabel = 'Work item' }: WorkItemFormProps,
  ref: Ref<WorkItemFormHandle>
) {
  const [form, setForm] = useState<Record<string, string>>(() => getInitialForm(item))

useEffect(() => {
    setForm(getInitialForm(item))
  }, [item?.id])

const isIncident = form.work_type === 'incident_followup'
  const isIdea = form.work_type === 'idea'

const handleChange = useCallback((field: string, value: string) => {
    setForm(prev => ({ ...prev, [field]: value }))
  }, [])

const [people, setPeople] = useState<any[]>([])
  useEffect(() => {
    apiFetch('/api/admin-data?action=list&entity=people&limit=200')
      .then(r => r.json())
      .then(json => setPeople(Array.isArray(json?.data) ? json.data : Array.isArray(json) ? json : []))
      .catch(() => setPeople([]))
  }, [])

const peopleOptions = [
    { value: UNASSIGNED_VALUE, label: '— Unassigned —' },
    { value: '00000000000', label: 'Devin' },
    ...people.map((p: any) => ({ value: p.id, label: p.full_name || p.email })),
  ]

const getPayload = useCallback(() => {
    const data: any = {
      work_type: form.work_type,
      priority: form.priority || null,
      severity: form.severity || null,
      intake_disposition: form.intake_disposition || null,
      team: form.team,
      assignee_id: form.assignee_id === UNASSIGNED_VALUE ? null : form.assignee_id || null,
      agent_id: form.agent_id || null,
      epic_id: form.epic_id || null,
      sprint_id: form.sprint_id || null,
      order: toNumber(form.order),
      story_points: toNumber(form.story_points),
      is_blocked: form.is_blocked === 'true',
      blocked_reason: form.blocked_reason || null,
      started_at: form.started_at || null,
      resolved_at: form.resolved_at || null,
      closed_at: form.closed_at || null,
      cortex_ticket_id: form.cortex_ticket_id || null,
      cased_analysis_id: form.cased_analysis_id || null,
      kb_article_id: form.kb_article_id || null,
      cil_project_id: form.cil_project_id || null,
      support_summary: form.support_summary || null,
      ai_confidence: toNumber(form.ai_confidence),
    }

if (isIncident) {
      data.incident_status = form.incident_status || null
      data.commander_id = form.commander_id || null
      data.responders = toJson(form.responders)
      data.affected_services = toJson(form.affected_services)
      data.affected_accounts = toJson(form.affected_accounts)
      data.mitigated_at = form.mitigated_at || null
      data.recovered_at = form.recovered_at || null
      data.postmortem_id = form.postmortem_id || null
    }

return {
      title: title.trim(),
      description: form.description,
      status: form.status,
      data,
    }
  }, [form, title, isIncident])

useImperativeHandle(ref, () => ({ getPayload }))

const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    onSubmit(getPayload())
  }

return (
    <form onSubmit={handleSubmit} className="space-y-6">
      <Section title="Core">
        <div className="space-y-2">
          <FieldSelect field="status" label="Status" options={STATUS_OPTIONS} value={form.status} onChange={handleChange} />
          <FieldSelect field="work_type" label="Work Type" options={WORK_TYPE_OPTIONS} value={form.work_type} onChange={handleChange} />
          <FieldSelect field="priority" label="Priority" options={PRIORITY_OPTIONS} value={form.priority} onChange={handleChange} />
          <FieldSelect field="severity" label="Severity" options={SEVERITY_OPTIONS} value={form.severity} onChange={handleChange} />
          <FieldSelect field="team" label="Team" options={TEAM_OPTIONS} value={form.team} onChange={handleChange} />
          <FieldSelect field="assignee_id" label="Assigned to" options={peopleOptions} value={form.assignee_id} onChange={handleChange} />
        </div>
      </Section>

{isIdea && (
        <Section title="Intake">
          <div className="space-y-2">
            <FieldSelect field="intake_disposition" label="Intake Disposition" options={INTAKE_OPTIONS} value={form.intake_disposition} onChange={handleChange} />
          </div>
        </Section>
      )}

{isIncident && (
        <Section title="Incident">
          <div className="space-y-2">
            <FieldSelect field="incident_status" label="Incident Status" options={INCIDENT_STATUS_OPTIONS} value={form.incident_status} onChange={handleChange} />
            <FieldInput field="commander_id" label="Commander ID" value={form.commander_id} onChange={handleChange} />
            <FieldTextarea field="responders" label="Responders" placeholder='["person-id-1", "person-id-2"]' value={form.responders} onChange={handleChange} />
            <FieldTextarea field="affected_services" label="Affected Services" placeholder='["service-1", "service-2"]' value={form.affected_services} onChange={handleChange} />
            <FieldTextarea field="affected_accounts" label="Affected Accounts" placeholder='["account-1", "account-2"]' value={form.affected_accounts} onChange={handleChange} />
            <FieldInput field="mitigated_at" label="Mitigated At" value={form.mitigated_at} onChange={handleChange} />
            <FieldInput field="recovered_at" label="Recovered At" value={form.recovered_at} onChange={handleChange} />
            <FieldInput field="postmortem_id" label="Postmortem ID" value={form.postmortem_id} onChange={handleChange} />
          </div>
        </Section>
      )}

<div className="flex items-center justify-end gap-2 pt-2">
        {onCancel && (
          <Button type="button" variant="outline" size="sm" onClick={onCancel} disabled={loading}>
            Cancel
          </Button>
        )}
        <Button type="submit" size="sm" disabled={loading || !title.trim()}>
          {mode === 'create' ? `Create ${itemLabel}` : `Save ${itemLabel}`}
        </Button>
      </div>
    </form>
  )
})
// CIL[END chunk_id="WorkItemForm_module_header_1784779659"]