import { useNavigate } from "react-router-dom";
import { CircleCheck, CircleX } from "lucide-react";
import type { Task } from "fhir/r4";
import { taskDisplayTitle, patientTaskRoute } from "../../utils/appointmentTasks.ts";

/**
 * "Tasks due for this appointment" - the named, clickable list..
 *
 * EXTRACTED FROM THE ONE SURFACE THAT ALREADY WORKED (`components/dashboard/Appointment.tsx`) rather
 * than written again, which is what the card asked for. Three surfaces show an appointment and only one
 * of them showed its tasks; a second implementation would have made that two answers instead of one.
 *
 * It renders NOTHING when there are no tasks - the caller decides whether "no tasks" deserves a
 * sentence. On a list row it does (see `appointmentTaskSummary`, which distinguishes "none assigned"
 * from "all done"); inside the dialog an empty block would just be a heading over nothing.
 */
export const AppointmentTaskList = ({
  tasks,
  onNavigate,
}: {
  tasks: readonly Task[];
  /** Called before routing, so a dialog can close itself rather than leave a modal over the task page. */
  onNavigate?: () => void;
}) => {
  const navigate = useNavigate();

  if (tasks.length === 0) return null;

  return (
    <div>
      <p className="mb-1 text-sm text-secondary">Tasks due for this appointment</p>
      <div className="space-y-1">
        {tasks.map((task) => {
          const isCompleted = task.status === "completed";

          return (
            <button
              key={task.id}
              type="button"
              className="flex w-full items-start gap-2 text-left text-sm text-primary hover:underline focus-visible:underline"
              onClick={(event) => {
                // The list is often inside another clickable thing (an appointment row that opens a
                // dialog). Without this the patient gets both.
                event.preventDefault();
                event.stopPropagation();
                onNavigate?.();
                navigate(patientTaskRoute(task));
              }}
            >
              {isCompleted ? (
                <CircleCheck size={16} className="mt-0.5 shrink-0 text-[var(--success-active)]" aria-hidden="true" />
              ) : (
                <CircleX size={16} className="mt-0.5 shrink-0 text-warning" aria-hidden="true" />
              )}
              <span>
                {/* 🔑 The state is carried by COLOUR AND SHAPE for a sighted reader and by this text for
                    everyone else — the icon alone is a tick-versus-cross distinction that does not
                    survive a screen reader, and "which of these have I done" is the whole question. */}
                <span className="sr-only">{isCompleted ? "Complete: " : "Incomplete: "}</span>
                {taskDisplayTitle(task)}
              </span>
            </button>
          );
        })}
      </div>
    </div>
  );
};

export default AppointmentTaskList;