import { ReorderButton, AddButton, DeleteButton } from "@/app/EditButtons";
import { TrailStopCard } from "./TrailStopCard";
import { AccentButton } from "./AccentButton";
import { useEditMode } from "./EditModeContext";
import "./TrailStop.css";
import type { TrailStop as TrailStopType } from "@/data/queries";

type Props = {
  stop: TrailStopType;
  index: number;
  totalStops: number;
  isStepCompleted: boolean;
  isCurrent: boolean;
  isVisited: boolean;
  isClickable: boolean;
  isReorderActive?: boolean;
  onGoToStop: (index: number) => void;
  onContinue: () => void;
};

export function TrailStop({
  stop,
  index,
  totalStops,
  isStepCompleted,
  isCurrent,
  isVisited,
  isClickable,
  isReorderActive = false,
  onGoToStop,
  onContinue,
}: Props) {
  const editContext = useEditMode();
  const isEditing = !!editContext;

  const handleGoToStop = (newIndex: number) => {
    onGoToStop(newIndex);
  };

  return (
    <div>
      <div
        className={`TrailStop ${
          isStepCompleted
            ? "TrailStop--completed"
            : isCurrent
              ? "TrailStop--current"
              : isVisited
                ? "TrailStop--visited"
                : ""
        } ${isReorderActive && isEditing ? "TrailStop--reorderActive" : ""} ${isEditing ? "TrailStop--editing" : ""}`}
        onClick={() => isClickable && onGoToStop(index)}
        style={{ cursor: isClickable ? "pointer" : "default" }}
      >
        {/* Opaque background - matches page background */}
        <div className="TrailStop-bg" />

        <div className="TrailStop-content">
          {/* Edit controls */}
          {isEditing && editContext && (
            <>
              {/* Reorder controls - only show on current step */}
              {isCurrent && (
                <div className="TrailStop-reorderControls">
                  {index > 0 && (
                    <ReorderButton
                      onClick={(e) => {
                        e.stopPropagation();
                        editContext.moveStop(stop.tid, "up");
                        handleGoToStop(index - 1);
                      }}
                      title="move up"
                    >
                      ↑
                    </ReorderButton>
                  )}
                  {index < totalStops - 1 && (
                    <ReorderButton
                      onClick={(e) => {
                        e.stopPropagation();
                        editContext.moveStop(stop.tid, "down");
                        handleGoToStop(index + 1);
                      }}
                      title="move down"
                    >
                      ↓
                    </ReorderButton>
                  )}
                </div>
              )}
              {/* Delete control - top right subtle × */}
              <div className="TrailStop-deleteButton">
                <DeleteButton
                  onClick={(e) => {
                    e.stopPropagation();
                    if (totalStops === 1) {
                      alert("you need at least one stop");
                      return;
                    }
                    const isEmpty = !stop.title.trim() && !stop.content.trim();
                    const shouldDelete = isEmpty || confirm("delete this stop?");

                    if (shouldDelete) {
                      if (isCurrent && index > 0) {
                        handleGoToStop(index - 1);
                      }
                      editContext.deleteStop(stop.tid);
                    }
                  }}
                  title="delete stop"
                />
              </div>
            </>
          )}

          <div>
            <TrailStopCard
              stop={stop}
              stepNumber={index + 1}
              totalStops={totalStops}
              isCurrent={isCurrent}
            />
          </div>

          {isCurrent && !isEditing && (
            <div className="TrailStop-actions">
              <AccentButton
                onClick={() => {
                  onContinue();
                }}
                size="large"
              >
                {stop.buttonText || "done that"}
              </AccentButton>
            </div>
          )}

          {/* Insert stop button - appears after current step only, and only if less than 12 steps */}
          {isEditing &&
            editContext &&
            (isCurrent ||
              (index === totalStops - 1 && (stop.title.trim() || stop.content.trim()))) &&
            totalStops < 12 && (
              <div
                className={`TrailStop-insertButton ${index === totalStops - 1 ? "TrailStop-insertButton--final" : "TrailStop-insertButton--between"}`}
              >
                <AddButton
                  onClick={(e) => {
                    e.stopPropagation();
                    editContext.addStop(index);
                    handleGoToStop(index + 1);
                  }}
                  title="insert stop after"
                />
              </div>
            )}
        </div>
      </div>
    </div>
  );
}
