import { useEffect, useState } from 'react'
import { INITIATIVE_STATUSES, PRIORITIES } from '../constants/status.js'
import { INITIATIVE_STATUS_LABELS, PRIORITY_LABELS } from '../constants/status.js'
import { INITIATIVE_ARCHETYPE_LABELS } from '../constants/initiativeArchetypes.js'
import { listEntityArchetypes } from '../api/entityArchetypes.js'

export function InitiativeForm({
  initial = {},
  onSubmit,
  onCancel,
  busy = false,
  submitLabel = 'Speichern',
}) {
  const [archetypes, setArchetypes] = useState(null)

  useEffect(() => {
    let cancelled = false
    listEntityArchetypes('initiative')
      .then((items) => {
        if (!cancelled) setArchetypes(items)
      })
      .catch(() => {
        if (!cancelled) {
          setArchetypes(
            Object.entries(INITIATIVE_ARCHETYPE_LABELS).map(([key, label]) => ({
              key,
              label,
            })),
          )
        }
      })
    return () => {
      cancelled = true
    }
  }, [])

  async function handleSubmit(e) {
    e.preventDefault()
    const form = e.target
    await onSubmit({
      title: form.title.value.trim(),
      archetype_key: form.archetype_key.value,
      goal: form.goal.value,
      vision: form.vision.value,
      target_state_summary: form.target_state_summary.value,
      status: form.status.value,
      priority: form.priority.value,
    })
  }

  return (
    <form className="form workspace-form" onSubmit={handleSubmit}>
      <label>
        Titel
        <input name="title" defaultValue={initial.title || ''} required maxLength={255} />
      </label>
      <label>
        Archetyp
        <select
          name="archetype_key"
          defaultValue={initial.archetype_key || 'initiative.generic'}
          disabled={!archetypes}
        >
          {(archetypes || []).map((item) => (
            <option key={item.key} value={item.key}>
              {item.label}
            </option>
          ))}
        </select>
      </label>
      <label>
        Kurzbeschreibung (Ziel)
        <textarea name="goal" rows={2} defaultValue={initial.goal || ''} />
      </label>
      <label>
        Vision
        <textarea name="vision" rows={4} defaultValue={initial.vision || ''} />
      </label>
      <label>
        Zielzustand (Kurzfassung)
        <textarea
          name="target_state_summary"
          rows={2}
          defaultValue={initial.target_state_summary || ''}
        />
      </label>
      <div className="form-row form-row--2">
        <label>
          Status
          <select name="status" defaultValue={initial.status || 'active'}>
            {INITIATIVE_STATUSES.map((s) => (
              <option key={s} value={s}>
                {INITIATIVE_STATUS_LABELS[s]}
              </option>
            ))}
          </select>
        </label>
        <label>
          Priorität
          <select name="priority" defaultValue={initial.priority || 'normal'}>
            {PRIORITIES.map((p) => (
              <option key={p} value={p}>
                {PRIORITY_LABELS[p]}
              </option>
            ))}
          </select>
        </label>
      </div>
      <div className="form-actions">
        <button type="submit" className="btn btn-primary" disabled={busy || !archetypes}>
          {busy ? 'Speichern …' : submitLabel}
        </button>
        {onCancel && (
          <button type="button" className="btn btn-secondary" onClick={onCancel} disabled={busy}>
            Abbrechen
          </button>
        )}
      </div>
    </form>
  )
}