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

import { useCallback, useEffect, useState } from 'react'
import {
  createActionTask,
  deleteTask,
  listActionTasks,
  updateTask,
} from '../api/tasks.js'
import { TASK_STATUSES, TASK_STATUS_LABELS } from '../constants/status.js'
import { EmptyState } from './EmptyState.jsx'
import { gateTitleById } from './GateSelect.jsx'

export function TasksSection({ actionId, canManage, roadmapItems = [] }) {
  const [tasks, setTasks] = useState([])
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState(null)
  const [busy, setBusy] = useState(false)
  const [title, setTitle] = useState('')
  const [gateId, setGateId] = useState('')

  const load = useCallback(async () => {
    if (!actionId) return
    setLoading(true)
    setError(null)
    try {
      setTasks(await listActionTasks(actionId))
    } catch (err) {
      setError(err.message)
    } finally {
      setLoading(false)
    }
  }, [actionId])

  useEffect(() => {
    load()
  }, [load])

  async function handleCreate(e) {
    e.preventDefault()
    if (!title.trim()) return
    setBusy(true)
    try {
      await createActionTask(actionId, {
        title: title.trim(),
        roadmap_item_id: gateId || undefined,
      })
      setTitle('')
      setGateId('')
      await load()
    } catch (err) {
      setError(err.message)
    } finally {
      setBusy(false)
    }
  }

  async function handleStatus(taskId, status) {
    setBusy(true)
    try {
      await updateTask(taskId, { status })
      await load()
    } catch (err) {
      setError(err.message)
    } finally {
      setBusy(false)
    }
  }

  async function handleGate(taskId, roadmapItemId) {
    setBusy(true)
    try {
      await updateTask(taskId, {
        roadmap_item_id: roadmapItemId || undefined,
        clear_roadmap_item: !roadmapItemId,
      })
      await load()
    } catch (err) {
      setError(err.message)
    } finally {
      setBusy(false)
    }
  }

  async function handleDelete(taskId) {
    setBusy(true)
    try {
      await deleteTask(taskId)
      await load()
    } catch (err) {
      setError(err.message)
    } finally {
      setBusy(false)
    }
  }

  if (loading) return <p className="muted">Tasks werden geladen…</p>

  return (
    <section className="card tasks-section">
      <div className="section-header">
        <div>
          <h3>Aufgaben</h3>
          <p className="section-lead muted">
            Kleinste ausführbare Schritte — optional einem Zielzustand (Gate) zugeordnet.
          </p>
        </div>
      </div>

      {error && <p className="error">{error}</p>}

      {canManage && (
        <form className="inline-form-block task-inline-form" onSubmit={handleCreate}>
          <label>
            Neue Aufgabe
            <input
              value={title}
              onChange={(e) => setTitle(e.target.value)}
              maxLength={255}
              required
              placeholder="Konkreter nächster Schritt"
            />
          </label>
          {roadmapItems.length > 0 && (
            <label>
              Gate (optional)
              <select value={gateId} onChange={(e) => setGateId(e.target.value)}>
                <option value="">— keins —</option>
                {roadmapItems.map((item) => (
                  <option key={item.id} value={item.id}>
                    {item.title}
                  </option>
                ))}
              </select>
            </label>
          )}
          <button type="submit" className="btn btn-primary" disabled={busy}>
            Hinzufügen
          </button>
        </form>
      )}

      {tasks.length === 0 && (
        <EmptyState message="Noch keine Aufgaben — zerlege das Arbeitspaket in umsetzbare Schritte." />
      )}

      <ul className="item-list task-list">
        {tasks.map((task) => (
          <li key={task.id} className="list-item card-list-item">
            <div className="list-item-main">
              <strong>{task.title}</strong>
              {task.roadmap_item_id && (
                <p className="list-item-sub muted">
                  Gate: {gateTitleById(roadmapItems, task.roadmap_item_id)}
                </p>
              )}
            </div>
            <div className="list-item-meta action-controls">
              {canManage && roadmapItems.length > 0 && (
                <select
                  className="inline-select"
                  value={task.roadmap_item_id || ''}
                  disabled={busy}
                  onChange={(e) => handleGate(task.id, e.target.value)}
                  aria-label="Gate-Zuordnung"
                >
                  <option value="">Gate …</option>
                  {roadmapItems.map((gate) => (
                    <option key={gate.id} value={gate.id}>
                      {gate.title}
                    </option>
                  ))}
                </select>
              )}
              {canManage ? (
                <select
                  className="inline-select"
                  value={task.status}
                  disabled={busy}
                  onChange={(e) => handleStatus(task.id, e.target.value)}
                  aria-label="Task-Status"
                >
                  {TASK_STATUSES.map((s) => (
                    <option key={s} value={s}>
                      {TASK_STATUS_LABELS[s]}
                    </option>
                  ))}
                </select>
              ) : (
                <span>{TASK_STATUS_LABELS[task.status] || task.status}</span>
              )}
              {canManage && (
                <button
                  type="button"
                  className="btn btn-secondary"
                  disabled={busy}
                  onClick={() => handleDelete(task.id)}
                >
                  Entfernen
                </button>
              )}
            </div>
          </li>
        ))}
      </ul>
    </section>
  )
}