IdeA/frontend/src/features/tickets/SprintManager.tsx

/**
 * Sprint management overlay (ticket #11, F3).
 *
 * A full-screen dialog to create, rename, reorder (accessible up/down buttons,
 * no drag-and-drop required) and delete sprints, plus add/remove tickets to a
 * sprint. All behaviour comes from {@link useTickets} via the injected view-model
 * — this component is pure presentation over the same hook instance the panel
 * uses, so mutations reflect live.
 *
 * Deleting a sprint UNASSIGNS its tickets (they fall back to the backlog); it
 * never deletes tickets — the confirmation says so explicitly.
 */

import { useState } from "react";

import { Button, Input } from "@/shared";
import { TicketRef } from "./ticketMeta";
import { TicketPicker } from "./TicketPicker";
import type { TicketsViewModel } from "./useTickets";

export interface SprintManagerProps {
  projectId: string;
  vm: TicketsViewModel;
  onClose: () => void;
}

export function SprintManager({ projectId, vm, onClose }: SprintManagerProps) {
  const items = vm.list?.items ?? [];
  const sprints = [...vm.sprints].sort((a, b) => a.order - b.order);

  const [newName, setNewName] = useState("");
  // Local rename drafts keyed by sprint id; falls back to the stored name.
  const [renameDrafts, setRenameDrafts] = useState<Record<string, string>>({});
  // Sprint pending delete confirmation, or null.
  const [confirmDelete, setConfirmDelete] = useState<
    { id: string; name: string } | null
  >(null);
  // The sprint whose "add ticket" TicketPicker is open, or null (#19). Held as
  // {id,name} so the picker keeps rendering while the underlying list refreshes.
  const [pickerSprint, setPickerSprint] = useState<
    { id: string; name: string } | null
  >(null);

  async function handleCreate(e: React.FormEvent) {
    e.preventDefault();
    // Name is optional in the UI; default to a positional name (the backend
    // requires a non-empty name).
    const name = newName.trim() || `Sprint ${sprints.length + 1}`;
    const created = await vm.createSprint(name);
    if (created) setNewName("");
  }

  return (
    <div
      className="fixed inset-0 z-50 flex flex-col bg-canvas"
      role="dialog"
      aria-modal="true"
      aria-label="manage sprints"
    >
      {/* ── Header ── */}
      <header className="flex shrink-0 items-center justify-between gap-3 border-b border-border px-5 py-3">
        <span className="text-sm font-medium text-content">Manage sprints</span>
        <Button size="sm" variant="ghost" onClick={onClose}>
          Close
        </Button>
      </header>

      {vm.error && (
        <p
          role="alert"
          className="shrink-0 border-b border-danger/40 bg-danger/10 px-5 py-2 text-sm text-danger"
        >
          {vm.error}
        </p>
      )}

      <div className="flex-1 overflow-auto p-5">
        {/* ── Create ── */}
        <form
          onSubmit={handleCreate}
          className="mb-5 flex items-center gap-2 rounded-md border border-border bg-raised/50 p-2"
        >
          <Input
            aria-label="new sprint name"
            placeholder="Sprint name (optional)"
            value={newName}
            onChange={(e) => setNewName(e.target.value)}
            className="max-w-xs"
          />
          <Button type="submit" size="sm" disabled={vm.busy}>
            Create sprint
          </Button>
        </form>

        {sprints.length === 0 ? (
          <p className="text-sm text-muted">No sprints yet.</p>
        ) : (
          <ul className="flex flex-col gap-4">
            {sprints.map((sprint, index) => {
              const inSprint = items.filter((t) => t.sprintId === sprint.id);
              const addable = items.filter((t) => t.sprintId !== sprint.id);
              const draft = renameDrafts[sprint.id] ?? sprint.name;
              return (
                <li
                  key={sprint.id}
                  aria-label={`sprint row ${sprint.name}`}
                  className="rounded-md border border-border p-3"
                >
                  {/* ── Row header: order, rename, reorder, delete ── */}
                  <div className="flex flex-wrap items-center gap-2">
                    <span className="text-xs font-semibold text-muted">
                      #{sprint.order}
                    </span>
                    <Input
                      aria-label={`rename sprint ${sprint.name}`}
                      value={draft}
                      disabled={vm.busy}
                      onChange={(e) =>
                        setRenameDrafts((prev) => ({
                          ...prev,
                          [sprint.id]: e.target.value,
                        }))
                      }
                      className="max-w-xs"
                    />
                    <Button
                      size="sm"
                      aria-label={`save sprint ${sprint.name}`}
                      disabled={
                        vm.busy ||
                        draft.trim() === "" ||
                        draft.trim() === sprint.name
                      }
                      onClick={async () => {
                        const ok = await vm.renameSprint(
                          sprint.id,
                          draft.trim(),
                        );
                        if (ok) {
                          setRenameDrafts((prev) => {
                            const { [sprint.id]: _drop, ...rest } = prev;
                            return rest;
                          });
                        }
                      }}
                    >
                      Save
                    </Button>
                    <div className="ml-auto flex items-center gap-1">
                      <Button
                        size="sm"
                        variant="ghost"
                        aria-label={`move sprint ${sprint.name} up`}
                        disabled={vm.busy || index === 0}
                        onClick={() => void vm.moveSprint(sprint.id, "up")}
                      >
                        ↑
                      </Button>
                      <Button
                        size="sm"
                        variant="ghost"
                        aria-label={`move sprint ${sprint.name} down`}
                        disabled={vm.busy || index === sprints.length - 1}
                        onClick={() => void vm.moveSprint(sprint.id, "down")}
                      >
                        ↓
                      </Button>
                      <Button
                        size="sm"
                        variant="ghost"
                        aria-label={`delete sprint ${sprint.name}`}
                        disabled={vm.busy}
                        className="text-danger hover:text-danger"
                        onClick={() =>
                          setConfirmDelete({ id: sprint.id, name: sprint.name })
                        }
                      >
                        Delete
                      </Button>
                    </div>
                  </div>

                  {/* ── Tickets in this sprint ── */}
                  <div className="mt-3 flex flex-col gap-1">
                    {inSprint.length === 0 ? (
                      <p className="text-xs text-muted">No tickets in this sprint.</p>
                    ) : (
                      <ul className="flex flex-col gap-1">
                        {inSprint.map((t) => (
                          <li
                            key={t.ref}
                            className="flex items-center gap-2 text-sm"
                          >
                            <TicketRef ticketRef={t.ref} />
                            <span className="min-w-0 flex-1 truncate text-content">
                              {t.title}
                            </span>
                            <Button
                              size="sm"
                              variant="ghost"
                              aria-label={`remove ${t.ref} from sprint`}
                              disabled={vm.busy}
                              onClick={() => void vm.assignSprint(t.ref, null)}
                            >
                              Remove
                            </Button>
                          </li>
                        ))}
                      </ul>
                    )}

                    {/* Add an existing ticket via the TicketPicker popup (#19):
                        single-select, excluding tickets already in this sprint. */}
                    <div className="mt-1">
                      <Button
                        size="sm"
                        variant="ghost"
                        aria-label={`add ticket to sprint ${sprint.name}`}
                        disabled={vm.busy || addable.length === 0}
                        onClick={() =>
                          setPickerSprint({ id: sprint.id, name: sprint.name })
                        }
                      >
                        {addable.length === 0
                          ? "No tickets to add"
                          : "Ajouter un ticket"}
                      </Button>
                    </div>
                  </div>
                </li>
              );
            })}
          </ul>
        )}
      </div>

      {/* ── Delete confirmation ── */}
      {confirmDelete && (
        <div
          role="dialog"
          aria-modal="true"
          aria-label="delete sprint confirmation"
          className="fixed inset-0 z-[60] flex items-center justify-center bg-black/55 p-4"
        >
          <div className="w-full max-w-sm rounded-lg border border-border bg-surface p-5 shadow-xl">
            <h4 className="text-sm font-semibold text-content">
              Supprimer le sprint « {confirmDelete.name} »&nbsp;?
            </h4>
            <p className="mt-2 text-sm text-muted">
              Les tickets de ce sprint ne seront pas supprimés&nbsp;: ils seront
              simplement désassignés et retourneront au backlog «&nbsp;Sans
              sprint&nbsp;».
            </p>
            <div className="mt-4 flex items-center justify-end gap-2">
              <Button
                size="sm"
                variant="ghost"
                aria-label="cancel delete sprint"
                disabled={vm.busy}
                onClick={() => setConfirmDelete(null)}
              >
                Annuler
              </Button>
              <Button
                size="sm"
                aria-label="confirm delete sprint"
                className="text-danger hover:text-danger"
                disabled={vm.busy}
                onClick={async () => {
                  await vm.deleteSprint(confirmDelete.id);
                  setConfirmDelete(null);
                }}
              >
                Supprimer
              </Button>
            </div>
          </div>
        </div>
      )}

      {/* ── Add-ticket picker (#19) — mounts at floatingWindowNested (60), above
          this sprint dialog. Excludes tickets already in the target sprint. ── */}
      <TicketPicker
        open={pickerSprint !== null}
        projectId={projectId}
        title={
          pickerSprint
            ? `Ajouter un ticket au sprint « ${pickerSprint.name} »`
            : "Ajouter un ticket"
        }
        selectionMode="single"
        excludeRefs={items
          .filter((t) => t.sprintId === pickerSprint?.id)
          .map((t) => t.ref)}
        onSelect={(result) => {
          const picked = Array.isArray(result) ? result[0] : result;
          if (picked && pickerSprint) {
            void vm.assignSprint(picked.ref, pickerSprint.id);
          }
        }}
        onClose={() => setPickerSprint(null)}
      />
    </div>
  );
}