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

import { useEffect, 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'

const PLANNING_STATUSES = new Set(['planned', 'active', 'at_risk'])

export function BacklogSection({
  items,
  roadmapItems = [],
  workCycles = [],
  activeWorkCycle = null,
  sprintPlanningEnabled = false,
  canManage,
  onCreate,
  onUpdate,
  onReorder,
  onConvert,
  onBulkConvert,
  onDelete,
  busy,
  sectionTitle = 'Product Backlog',
  sectionLead = 'Eingang vor dem Commit — triagieren, dann in den Sprint planen.',
}) {
  const [modalMode, setModalMode] = useState(null)
  const [dragItemId, setDragItemId] = useState('')
  const [dropTargetId, setDropTargetId] = useState('')
  const [selectedIds, setSelectedIds] = useState(() => new Set())
  const [sprintTargetId, setSprintTargetId] = useState('')
  const isDesktop = useMinWidth(1024)
  const canReorder = canManage && typeof onReorder === 'function'

  const planableSprints = useMemo(
    () => workCycles.filter((cycle) => PLANNING_STATUSES.has(cycle.status)),
    [workCycles],
  )

  const showSprintPlanning = sprintPlanningEnabled && planableSprints.length > 0

  useEffect(() => {
    if (!showSprintPlanning) {
      setSprintTargetId('')
      return
    }
    if (sprintTargetId && planableSprints.some((cycle) => cycle.id === sprintTargetId)) {
      return
    }
    const preferred = activeWorkCycle?.id || planableSprints[0]?.id || ''
    setSprintTargetId(preferred)
  }, [showSprintPlanning, sprintTargetId, planableSprints, activeWorkCycle?.id])

  const selectedSprint = planableSprints.find((cycle) => cycle.id === sprintTargetId) || null

  const convertLabel = selectedSprint
    ? `In Sprint „${selectedSprint.title}" planen`
    : 'In Arbeitspaket umwandeln'

  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'

  const acceptedItems = sortedItems.filter((item) => item.status === 'accepted')
  const selectedAccepted = acceptedItems.filter((item) => selectedIds.has(item.id))

  function toggleSelected(itemId) {
    setSelectedIds((prev) => {
      const next = new Set(prev)
      if (next.has(itemId)) next.delete(itemId)
      else next.add(itemId)
      return next
    })
  }

  function convertOptions() {
    return sprintTargetId ? { work_cycle_id: sprintTargetId } : {}
  }

  async function handleSingleConvert(itemId) {
    await onConvert(itemId, convertOptions())
    setSelectedIds((prev) => {
      const next = new Set(prev)
      next.delete(itemId)
      return next
    })
  }

  async function handleBulkPlan() {
    if (!selectedAccepted.length) return
    if (typeof onBulkConvert === 'function') {
      await onBulkConvert(
        selectedAccepted.map((item) => item.id),
        convertOptions(),
      )
    } else {
      for (const item of selectedAccepted) {
        await onConvert(item.id, convertOptions())
      }
    }
    setSelectedIds(new Set())
  }

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

      {showSprintPlanning && canManage && acceptedItems.length > 0 && (
        <div className="backlog-sprint-planning card-list-item">
          <label className="backlog-sprint-planning__field">
            <span className="muted">Sprint-Ziel</span>
            <select
              value={sprintTargetId}
              onChange={(e) => setSprintTargetId(e.target.value)}
              disabled={busy}
            >
              {planableSprints.map((cycle) => (
                <option key={cycle.id} value={cycle.id}>
                  {cycle.title}
                  {cycle.status === 'active' ? ' (aktiv)' : ''}
                </option>
              ))}
            </select>
          </label>
          {selectedAccepted.length > 0 && (
            <button
              type="button"
              className="btn btn-primary btn-sm"
              disabled={busy || !sprintTargetId}
              onClick={handleBulkPlan}
            >
              {selectedAccepted.length} Item{selectedAccepted.length === 1 ? '' : 's'} {convertLabel}
            </button>
          )}
          <p className="muted backlog-sprint-planning__hint">
            Items markieren und in den gewählten Sprint committen — Planung unter Plan → Sprint.
          </p>
        </div>
      )}

      {sprintPlanningEnabled && canManage && acceptedItems.length > 0 && planableSprints.length === 0 && (
        <p className="muted backlog-sprint-planning__hint">
          Lege zuerst einen Sprint unter Plan → Sprint an, um Backlog-Items zu planen.
        </p>
      )}

      {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>
              )}
              {showSprintPlanning && canManage && item.status === 'accepted' && (
                <label className="backlog-select-checkbox">
                  <input
                    type="checkbox"
                    checked={selectedIds.has(item.id)}
                    onChange={() => toggleSelected(item.id)}
                    disabled={busy}
                    aria-label={`${item.title} für Sprint-Planung markieren`}
                  />
                </label>
              )}
              <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={() => handleSingleConvert(item.id)}
                        disabled={busy || (showSprintPlanning && !sprintTargetId)}
                      >
                        {convertLabel}
                      </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>
  )
}