Kairo-Jinkendo/frontend/src/components/BacklogSection.jsx

import { useState } from 'react'
import { StatusBadge } from './StatusBadge.jsx'
import { PriorityBadge } from './PriorityBadge.jsx'
import { EmptyState } from './EmptyState.jsx'
import { Modal } from './Modal.jsx'
import { BacklogItemForm } from './BacklogItemForm.jsx'
import { gateTitleById } from './GateSelect.jsx'

export function BacklogSection({
  items,
  roadmapItems = [],
  canManage,
  onCreate,
  onUpdate,
  onConvert,
  onDelete,
  busy,
}) {
  const [modalMode, setModalMode] = useState(null)

  function closeModal() {
    setModalMode(null)
  }

  async function handleCreateSubmit(payload) {
    await onCreate({
      title: payload.title,
      description: payload.description,
      priority: payload.priority,
      roadmap_item_id: payload.roadmap_item_id,
      status: payload.status || 'new',
    })
    closeModal()
  }

  async function handleEditSubmit(payload) {
    if (!modalMode?.item) return
    const ok = await onUpdate(modalMode.item.id, {
      title: payload.title,
      description: payload.description,
      status: payload.status,
      priority: payload.priority,
      roadmap_item_id: payload.roadmap_item_id,
      clear_roadmap_item: payload.clear_roadmap_item,
    })
    if (ok !== false) closeModal()
  }

  const modalTitle =
    modalMode?.kind === 'create' ? 'Backlog-Item anlegen' : 'Backlog-Item bearbeiten'

  return (
    <section className="card">
      <div className="section-header">
        <h2>Backlog</h2>
        {canManage && (
          <button
            type="button"
            className="btn btn-primary btn-block-mobile"
            onClick={() => setModalMode({ kind: 'create' })}
          >
            Backlog-Item
          </button>
        )}
      </div>

      {items.length === 0 && <EmptyState message="Backlog ist leer." />}

      <ul className="item-list">
        {items.map((item) => (
          <li key={item.id} className="list-item card-list-item">
            <button
              type="button"
              className="list-item-main list-item-main--clickable"
              onClick={() => canManage && setModalMode({ kind: 'edit', item })}
              disabled={!canManage}
            >
              <strong>{item.title}</strong>
              {item.description && (
                <p className="list-item-desc">{item.description}</p>
              )}
              {item.roadmap_item_id && (
                <p className="list-item-sub muted">
                  Gate: {gateTitleById(roadmapItems, item.roadmap_item_id) || item.roadmap_item_id}
                </p>
              )}
            </button>
            <div className="list-item-meta action-controls">
              <StatusBadge kind="backlog" status={item.status} />
              <PriorityBadge priority={item.priority} />
              {canManage && item.status !== 'converted' && (
                <>
                  {item.status === 'accepted' && (
                    <button
                      type="button"
                      className="btn btn-primary btn-sm"
                      onClick={() => onConvert(item.id)}
                      disabled={busy}
                    >
                      In Maßnahme umwandeln
                    </button>
                  )}
                  <button
                    type="button"
                    className="btn btn-secondary btn-sm"
                    onClick={() => setModalMode({ kind: 'edit', item })}
                    disabled={busy}
                  >
                    Bearbeiten
                  </button>
                  <button
                    type="button"
                    className="btn btn-secondary btn-sm"
                    onClick={() => onDelete(item.id)}
                  >
                    Löschen
                  </button>
                </>
              )}
            </div>
          </li>
        ))}
      </ul>

      <Modal open={Boolean(modalMode)} title={modalTitle} onClose={closeModal}>
        {modalMode?.kind === 'create' && (
          <BacklogItemForm
            roadmapItems={roadmapItems}
            onSubmit={handleCreateSubmit}
            onCancel={closeModal}
            busy={busy}
            submitLabel="Anlegen"
          />
        )}
        {modalMode?.kind === 'edit' && modalMode.item && (
          <BacklogItemForm
            initial={modalMode.item}
            roadmapItems={roadmapItems}
            onSubmit={handleEditSubmit}
            onCancel={closeModal}
            busy={busy}
          />
        )}
      </Modal>
    </section>
  )
}