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

import { useMemo, 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 { ReorderControls } from './ReorderControls.jsx'
import { gateTitleById } from './GateSelect.jsx'
import { computeDropPatches, computeMovePatches, sortByOrder } from '../utils/reorder.js'
import { useMinWidth } from '../hooks/useMinWidth.js'

export function BacklogSection({
  items,
  roadmapItems = [],
  canManage,
  onCreate,
  onUpdate,
  onReorder,
  onConvert,
  onDelete,
  busy,
}) {
  const [modalMode, setModalMode] = useState(null)
  const [dragItemId, setDragItemId] = useState('')
  const [dropTargetId, setDropTargetId] = useState('')
  const isDesktop = useMinWidth(1024)
  const canReorder = canManage && typeof onReorder === 'function'

  const sortedItems = useMemo(
    () => sortByOrder(items.filter((item) => item.status !== 'converted')),
    [items],
  )

  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()
  }

  async function applyPatches(patches) {
    if (!patches.length) return
    await onReorder(patches)
  }

  async function handleMove(itemId, direction) {
    const patches = computeMovePatches(sortedItems, itemId, direction)
    await applyPatches(patches)
  }

  function handleDragStart(event, itemId) {
    if (!canReorder || !isDesktop) return
    setDragItemId(itemId)
    event.dataTransfer.effectAllowed = 'move'
    event.dataTransfer.setData('text/plain', itemId)
  }

  function handleDragEnd() {
    setDragItemId('')
    setDropTargetId('')
  }

  function handleDragOver(event, itemId) {
    if (!canReorder || !isDesktop || !dragItemId) return
    event.preventDefault()
    event.dataTransfer.dropEffect = 'move'
    setDropTargetId(itemId)
  }

  async function handleDrop(event, targetId) {
    event.preventDefault()
    if (!canReorder || !isDesktop || !dragItemId) {
      handleDragEnd()
      return
    }
    const patches = computeDropPatches(sortedItems, dragItemId, targetId)
    handleDragEnd()
    await applyPatches(patches)
  }

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

  return (
    <section className="card backlog-section">
      <div className="section-header">
        <div>
          <h2>Backlog</h2>
          <p className="section-lead muted">
            Reihenfolge per Drag &amp; Drop (Desktop) oder ↑/↓ (Mobile).
          </p>
        </div>
        {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 backlog-reorder-list">
        {sortedItems.map((item, index) => {
          const isDragging = dragItemId === item.id
          const isDropTarget = dropTargetId === item.id && dragItemId && dragItemId !== item.id
          const reorderable = canReorder && item.status !== 'converted'

          return (
            <li
              key={item.id}
              className={
                'list-item card-list-item backlog-reorder-item' +
                (isDragging ? ' backlog-reorder-item--dragging' : '') +
                (isDropTarget ? ' backlog-reorder-item--drop-target' : '') +
                (reorderable && isDesktop ? ' backlog-reorder-item--draggable' : '')
              }
              draggable={reorderable && isDesktop}
              onDragStart={(event) => handleDragStart(event, item.id)}
              onDragEnd={handleDragEnd}
              onDragOver={(event) => handleDragOver(event, item.id)}
              onDrop={(event) => handleDrop(event, item.id)}
            >
              {reorderable && isDesktop && (
                <span className="backlog-reorder-item__drag-hint" aria-hidden="true">
                  ⋮⋮
                </span>
              )}
              <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">
                {reorderable && !isDesktop && (
                  <ReorderControls
                    itemId={item.id}
                    canMoveUp={index > 0}
                    canMoveDown={index < sortedItems.length - 1}
                    onMove={(direction) => handleMove(item.id, direction)}
                    busy={busy}
                  />
                )}
                <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>
          )
        })}
        {items
          .filter((item) => item.status === 'converted')
          .map((item) => (
            <li key={item.id} className="list-item card-list-item backlog-reorder-item--converted">
              <div className="list-item-main">
                <strong>{item.title}</strong>
                <p className="list-item-sub muted">Konvertiert — nicht mehr sortierbar</p>
              </div>
              <StatusBadge kind="backlog" status={item.status} />
            </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>
  )
}