"use client";

import {
  useCallback,
  useEffect,
  useId,
  useMemo,
  useRef,
  useState,
} from "react";
import { localeDirections } from "@/translations/config";
import { useI18n } from "@/translations/provider";
import { useSheetScrollLock } from "./use-sheet-scroll-lock";

const EXIT_ANIMATION_MS = 200;

// Parity with Flutter DraggableScrollableSheet:
// initialChildSize: 0.75, minChildSize: 0.6, maxChildSize: 1.0, shouldCloseOnMinExtent: true
const SHEET_INITIAL_SIZE = 0.75;
const SHEET_MIN_SIZE = 0.6;
const SHEET_MAX_SIZE = 1;
const GESTURE_ENGAGE_PX = 10;

export type FemaleOutcomeSheetProps = {
  closeOnOutside?: boolean;
  onClose?: () => void;
  onSubmit?: (status: "success" | "failure", reason?: string) => void;
};

export function FemaleOutcomeSheet({
  closeOnOutside = true,
  onClose,
  onSubmit,
}: FemaleOutcomeSheetProps) {
  const { dictionary: t, locale } = useI18n();
  const direction = localeDirections[locale] ?? "ltr";
  const groupId = useId();

  const [isVisible, setIsVisible] = useState(true);
  const [isClosing, setIsClosing] = useState(false);
  const isClosingRef = useRef(false);
  const isMountedRef = useRef(true);

  // Outcome selection state: "ongoing" (Option A) or "canceled" (Option B)
  const [outcome, setOutcome] = useState<"ongoing" | "canceled">("ongoing");
  const isExpanded = outcome === "canceled";

  const sheetRef = useRef<HTMLElement>(null);
  const headerRef = useRef<HTMLDivElement>(null);
  const contentRef = useRef<HTMLDivElement>(null);
  const sheetSizeRef = useRef(SHEET_INITIAL_SIZE);
  const restingStateRef = useRef<number>(SHEET_INITIAL_SIZE);

  useEffect(() => {
    isMountedRef.current = true;
    return () => {
      isMountedRef.current = false;
    };
  }, []);

  // Rejection/Cancellation reason states
  const reasons = useMemo(
    () => [
      t["Not a good personal fit"],
      t["No mutual interest"],
      t["Different expectations"],
      t["No connection felt"],
      t["Location not suitable"],
      t["Other reasons"],
    ],
    [t],
  );
  const [selectedReasons, setSelectedReasons] = useState<string[]>([]);
  const [reasonText, setReasonText] = useState("");
  const textareaRef = useRef<HTMLTextAreaElement>(null);

  useEffect(() => {
    const otherReason = reasons[reasons.length - 1];
    if (selectedReasons.includes(otherReason)) {
      const timeoutId = setTimeout(() => {
        textareaRef.current?.scrollIntoView({
          behavior: "smooth",
          block: "nearest",
        });
      }, 100);
      return () => clearTimeout(timeoutId);
    }
  }, [selectedReasons, reasons]);

  const closeSheet = useCallback(() => {
    if (isClosingRef.current) {
      return;
    }
    isClosingRef.current = true;
    setIsClosing(true);
    window.setTimeout(() => {
      if (isMountedRef.current) {
        setIsVisible(false);
      }
      isClosingRef.current = false;
      onClose?.();
    }, EXIT_ANIMATION_MS);
  }, [onClose]);

  useSheetScrollLock(isVisible && !isClosing, { onBack: closeSheet });

  // Handle escape key
  useEffect(() => {
    if (!isVisible) return;

    const handleKeyDown = (e: KeyboardEvent) => {
      if (e.key === "Escape") {
        closeSheet();
      }
    };

    window.addEventListener("keydown", handleKeyDown);
    return () => window.removeEventListener("keydown", handleKeyDown);
  }, [isVisible, closeSheet]);

  // Adaptive height transition when switching between ongoing and canceled states
  useEffect(() => {
    if (!sheetRef.current) return;
    if (isExpanded) {
      sheetSizeRef.current = SHEET_INITIAL_SIZE;
      restingStateRef.current = SHEET_INITIAL_SIZE;
      sheetRef.current.style.transition =
        "height 260ms cubic-bezier(0.16, 1, 0.3, 1)";
      sheetRef.current.style.setProperty(
        "--sheet-size",
        SHEET_INITIAL_SIZE.toFixed(4),
      );
      const timer = window.setTimeout(() => {
        if (sheetRef.current) {
          sheetRef.current.style.transition = "";
        }
      }, 270);
      return () => clearTimeout(timer);
    } else {
      sheetRef.current.style.transition =
        "height 260ms cubic-bezier(0.16, 1, 0.3, 1)";
      sheetRef.current.style.removeProperty("--sheet-size");
      const timer = window.setTimeout(() => {
        if (sheetRef.current) {
          sheetRef.current.style.transition = "";
        }
      }, 270);
      return () => clearTimeout(timer);
    }
  }, [isExpanded]);

  // Drag-to-resize gesture handlers matching Flutter DraggableScrollableSheet
  // Active only when isExpanded is true (option 2 chosen)
  useEffect(() => {
    if (!isVisible || isClosing || !isExpanded) return;

    const content = contentRef.current;
    const sheet = sheetRef.current;
    const header = headerRef.current;
    if (!sheet) return;

    let active = false;
    let engaged = false;
    let closing = false;
    let isHeaderDrag = false;
    let startX = 0;
    let startY = 0;
    let lastY = 0;
    let snapTimeout: ReturnType<typeof setTimeout> | null = null;
    let wheelSnapTimeout: ReturnType<typeof setTimeout> | null = null;

    const contentOverflows = () =>
      content ? content.scrollHeight > content.clientHeight + 1 : false;

    const snapTo = (targetSize: number) => {
      sheetSizeRef.current = targetSize;
      restingStateRef.current = targetSize;
      sheet.style.transition = "height 260ms cubic-bezier(0.16, 1, 0.3, 1)";
      sheet.style.setProperty("--sheet-size", targetSize.toFixed(4));
      if (snapTimeout) clearTimeout(snapTimeout);
      snapTimeout = setTimeout(() => {
        if (sheet) {
          sheet.style.transition = "";
        }
      }, 270);
    };

    const resize = (deltaPx: number) => {
      const viewportHeight = window.innerHeight || 1;
      const nextSize = Math.min(
        SHEET_MAX_SIZE,
        Math.max(
          SHEET_MIN_SIZE,
          sheetSizeRef.current + deltaPx / viewportHeight,
        ),
      );
      sheetSizeRef.current = nextSize;
      sheet.style.setProperty("--sheet-size", nextSize.toFixed(4));
    };

    const handleTouchStart = (event: TouchEvent, fromHeader: boolean) => {
      if (event.touches.length !== 1) {
        active = false;
        return;
      }
      if (snapTimeout) {
        clearTimeout(snapTimeout);
        snapTimeout = null;
      }
      sheet.style.transition = "none";
      active = true;
      engaged = fromHeader;
      isHeaderDrag = fromHeader;
      startX = event.touches[0].clientX;
      startY = event.touches[0].clientY;
      lastY = startY;
    };

    const handleTouchMove = (event: TouchEvent) => {
      if (!active || closing || event.touches.length !== 1) return;
      const touch = event.touches[0];
      const deltaY = lastY - touch.clientY; // finger up = grow sheet
      const pulled = startY - touch.clientY; // cumulative distance
      lastY = touch.clientY;

      if (!engaged) {
        if (Math.abs(pulled) < GESTURE_ENGAGE_PX) return;
        if (Math.abs(touch.clientX - startX) >= Math.abs(pulled)) return;
        const atTop = !content || content.scrollTop <= 0;
        const canGrow =
          pulled > 0 &&
          atTop &&
          contentOverflows() &&
          sheetSizeRef.current < SHEET_MAX_SIZE - 0.001;
        const canShrink = pulled < 0 && atTop;
        if (!canGrow && !canShrink) return;
        engaged = true;
      }

      const atTop = !content || content.scrollTop <= 0;
      const size = sheetSizeRef.current;
      const consume = isHeaderDrag
        ? true
        : deltaY > 0
          ? atTop && size < SHEET_MAX_SIZE - 0.001
          : atTop;

      if (!consume) return; // at ceiling or scrolling inside content
      if (event.cancelable) {
        event.preventDefault();
      }

      if (deltaY > 0) {
        resize(deltaY);
      } else if (size <= SHEET_MIN_SIZE + 0.001) {
        closing = true; // shouldCloseOnMinExtent: true
        closeSheet();
      } else {
        resize(deltaY);
      }
    };

    const handleTouchEnd = () => {
      if (!active || closing) {
        active = false;
        engaged = false;
        isHeaderDrag = false;
        return;
      }
      active = false;
      engaged = false;
      isHeaderDrag = false;

      const currentSize = sheetSizeRef.current;
      const baseline = restingStateRef.current;
      const totalPulled = startY - lastY; // > 0 finger pulled up, < 0 finger pulled down

      // Flutter shouldCloseOnMinExtent: true when dragged near or below 60% floor
      if (currentSize <= SHEET_MIN_SIZE + 0.01) {
        closing = true;
        closeSheet();
        return;
      }

      // Snapping between only two states: 0.75 (default) and 1.0 (expanded)
      if (baseline === SHEET_MAX_SIZE) {
        // Dragging down from 1.0: if pulled down >= 30px or size <= 0.94, snap to 0.75
        if (totalPulled <= -30 || currentSize <= 0.94) {
          snapTo(SHEET_INITIAL_SIZE);
        } else {
          snapTo(SHEET_MAX_SIZE);
        }
      } else {
        // Dragging from 0.75:
        // If pulled down strongly, close
        if (totalPulled <= -60) {
          closing = true;
          closeSheet();
        } else if (totalPulled >= 30 || currentSize >= 0.78) {
          // Dragged up enough to expand to 1.0
          snapTo(SHEET_MAX_SIZE);
        } else {
          snapTo(SHEET_INITIAL_SIZE);
        }
      }
    };

    const handleWheel = (event: WheelEvent) => {
      if (closing) return;
      const delta = event.deltaY;
      const atTop = !content || content.scrollTop <= 0;
      const size = sheetSizeRef.current;
      const consume =
        delta > 0
          ? atTop && contentOverflows() && size < SHEET_MAX_SIZE - 0.001
          : atTop;
      if (!consume) return;
      if (event.cancelable) {
        event.preventDefault();
      }

      if (delta > 0) {
        resize(delta);
      } else if (size <= SHEET_MIN_SIZE + 0.001) {
        closing = true;
        closeSheet();
      } else {
        resize(delta);
      }

      if (wheelSnapTimeout) clearTimeout(wheelSnapTimeout);
      wheelSnapTimeout = setTimeout(() => {
        if (closing) return;
        const current = sheetSizeRef.current;
        if (current <= SHEET_MIN_SIZE + 0.01) {
          closing = true;
          closeSheet();
        } else if (current >= 0.82) {
          snapTo(SHEET_MAX_SIZE);
        } else {
          snapTo(SHEET_INITIAL_SIZE);
        }
      }, 160);
    };

    const onHeaderTouchStart = (e: TouchEvent) => handleTouchStart(e, true);
    const onContentTouchStart = (e: TouchEvent) => handleTouchStart(e, false);

    if (header) {
      header.addEventListener("touchstart", onHeaderTouchStart, {
        passive: true,
      });
    }
    if (content) {
      content.addEventListener("touchstart", onContentTouchStart, {
        passive: true,
      });
      content.addEventListener("touchmove", handleTouchMove, {
        passive: false,
      });
      content.addEventListener("touchend", handleTouchEnd, { passive: true });
      content.addEventListener("touchcancel", handleTouchEnd, { passive: true });
      content.addEventListener("wheel", handleWheel, { passive: false });
    }
    sheet.addEventListener("touchmove", handleTouchMove, { passive: false });
    sheet.addEventListener("touchend", handleTouchEnd, { passive: true });
    sheet.addEventListener("touchcancel", handleTouchEnd, { passive: true });

    return () => {
      if (snapTimeout) clearTimeout(snapTimeout);
      if (wheelSnapTimeout) clearTimeout(wheelSnapTimeout);
      if (header) {
        header.removeEventListener("touchstart", onHeaderTouchStart);
      }
      if (content) {
        content.removeEventListener("touchstart", onContentTouchStart);
        content.removeEventListener("touchmove", handleTouchMove);
        content.removeEventListener("touchend", handleTouchEnd);
        content.removeEventListener("touchcancel", handleTouchEnd);
        content.removeEventListener("wheel", handleWheel);
      }
      sheet.removeEventListener("touchmove", handleTouchMove);
      sheet.removeEventListener("touchend", handleTouchEnd);
      sheet.removeEventListener("touchcancel", handleTouchEnd);
    };
  }, [isVisible, isClosing, isExpanded, closeSheet]);

  if (!isVisible) {
    return null;
  }

  const isCanceledDisabled =
    selectedReasons.length === 0 ||
    (selectedReasons.includes(reasons[reasons.length - 1]) &&
      reasonText.trim() === "");

  return (
    <div
      className={[
        "fixed inset-0 z-50 flex items-end justify-center",
        isClosing ? "flutter-scrim-exit" : "flutter-scrim",
      ]
        .filter(Boolean)
        .join(" ")}
      role="dialog"
      aria-modal="true"
      aria-label={t["What was the outcome of your contact?"]}
      dir={direction}
      tabIndex={-1}
      onClick={(event) => {
        if (closeOnOutside && event.target === event.currentTarget) {
          closeSheet();
        }
      }}
      onKeyDown={(event) => {
        if (
          closeOnOutside &&
          event.target === event.currentTarget &&
          (event.key === "Escape" || event.key === "Enter" || event.key === " ")
        ) {
          event.preventDefault();
          closeSheet();
        }
      }}
    >
      <section
        ref={sheetRef}
        style={{
          height: isExpanded
            ? "calc(var(--sheet-size, 0.75) * (100svh - max(var(--safe-top, 0px), env(safe-area-inset-top, 0px))))"
            : undefined,
          maxHeight:
            "calc(100svh - max(var(--safe-top, 0px), env(safe-area-inset-top, 0px)))",
        }}
        className={[
          "flex w-full max-w-[834px] sm:max-w-[540px] flex-col overflow-hidden rounded-t-[22px] bg-white p-4 pt-2.5 text-start shadow-[0_20px_60px_rgba(15,23,42,0.08)]",
          isExpanded ? "flutter-draggable-sheet" : "h-auto max-h-[82svh]",
          isClosing ? "flutter-sheet-surface-exit" : "flutter-sheet-surface",
        ]
          .filter(Boolean)
          .join(" ")}
      >
        {/* Drag handle */}
        <div
          ref={headerRef}
          className="flex flex-col select-none touch-none shrink-0"
        >
          <div className="flex justify-center pt-0 pb-2.5 cursor-grab active:cursor-grabbing">
            <div className="h-1.2 w-10 rounded-full bg-[#D0D5DD]" />
          </div>
        </div>

        <div className="mx-auto flex h-full min-h-0 w-full flex-col">
          <div className="flex min-h-0 w-full flex-1 flex-col">
            <h2 className="w-full text-start text-[18px] leading-[1.2] font-bold tracking-[-0.03em] text-[#171717]">
              {t["What was the outcome of your contact?"]}
            </h2>

            <p className="mt-3.5 w-full text-start text-[14px] leading-[1.45] text-[#2C2C2C] font-medium">
              {
                t[
                  "We hope the acquaintance process is going well. Please let us know if you want to continue the acquaintance process or if the match has been canceled."
                ]
              }
            </p>

            <fieldset
              className="mt-5 flex min-h-0 w-full flex-1 flex-col"
              aria-labelledby={groupId}
            >
              <legend id={groupId} className="sr-only">
                {t["What was the outcome of your contact?"]}
              </legend>

              <div
                ref={contentRef}
                className="flex min-h-0 flex-1 flex-col gap-[14px] overflow-y-auto pe-1"
              >
                {/* Option A: Ongoing acquaintance */}
                <label
                  className={[
                    "flex cursor-pointer items-center gap-3 rounded-[14px] px-[14px] py-[18px] text-start border transition-all",
                    outcome === "ongoing"
                      ? "bg-[#FFECEF] border-[#F0445B]/30"
                      : "bg-[#ECECEC] border-transparent",
                  ].join(" ")}
                >
                  <input
                    checked={outcome === "ongoing"}
                    className="sr-only"
                    name="outcome-status"
                    type="radio"
                    value="ongoing"
                    onChange={() => {
                      setOutcome("ongoing");
                    }}
                  />
                  <span
                    aria-hidden="true"
                    className={[
                      "flex h-6 w-6 shrink-0 items-center justify-center rounded-full border transition-colors",
                      outcome === "ongoing"
                        ? "border-[#F0445B] bg-transparent"
                        : "border-[#9E9E9E] bg-transparent",
                    ].join(" ")}
                  >
                    {outcome === "ongoing" ? (
                      <span className="h-3 w-3 rounded-full bg-[#F0445B]" />
                    ) : null}
                  </span>
                  <span className="text-[15px] leading-snug font-bold text-[#262626] flex-1 text-start">
                    {
                      t[
                        "We are in the acquaintance/proposal process and nothing is finalized yet"
                      ]
                    }
                  </span>
                </label>

                {/* Option B: Canceled / Decline */}
                <label
                  className={[
                    "flex cursor-pointer items-center gap-3 rounded-[14px] px-[14px] py-[18px] text-start border transition-all",
                    outcome === "canceled"
                      ? "bg-[#FFECEF] border-[#F0445B]/30"
                      : "bg-[#ECECEC] border-transparent",
                  ].join(" ")}
                >
                  <input
                    checked={outcome === "canceled"}
                    aria-label={
                      t[
                        "We did not reach the agreement needed to continue acquaintance and decided not to proceed"
                      ] ||
                      "We did not reach the agreement needed to continue acquaintance and decided not to proceed"
                    }
                    className="sr-only"
                    name="outcome-status"
                    type="radio"
                    value="canceled"
                    onChange={() => {
                      setOutcome("canceled");
                    }}
                  />
                  <span
                    aria-hidden="true"
                    className={[
                      "flex h-6 w-6 shrink-0 items-center justify-center rounded-full border transition-colors",
                      outcome === "canceled"
                        ? "border-[#F0445B] bg-transparent"
                        : "border-[#9E9E9E] bg-transparent",
                    ].join(" ")}
                  >
                    {outcome === "canceled" ? (
                      <span className="h-3 w-3 rounded-full bg-[#F0445B]" />
                    ) : null}
                  </span>
                  <span className="text-[15px] leading-snug font-bold text-[#262626] flex-1 text-start">
                    {t[
                      "We did not reach the agreement needed to continue acquaintance and decided not to proceed"
                    ] ||
                      "We did not reach the agreement needed to continue acquaintance and decided not to proceed"}
                  </span>
                </label>

                {/* Reasons List (if Canceled is chosen) */}
                {outcome === "canceled" ? (
                  <div className="mt-3 flex flex-col gap-3 ps-2 text-start animate-fadeIn">
                    <p className="text-[13px] font-bold text-[#555] mb-1 text-start">
                      {t["Please select the reason for cancellation:"]}
                    </p>
                    <div className="flex flex-col gap-[10px]">
                      {reasons.map((option) => {
                        const isReasonChecked =
                          selectedReasons.includes(option);
                        const isOtherReason =
                          option === reasons[reasons.length - 1];

                        return (
                          <div
                            key={option}
                            className="w-full flex flex-col gap-2"
                          >
                            <button
                              type="button"
                              className={[
                                "flex w-full items-center gap-3 bg-[#EAEAEA] px-4 py-[12px] text-start transition-all rounded-[12px]",
                                isReasonChecked
                                  ? "text-[#171717]"
                                  : "text-[#7B7B7B]",
                              ]
                                .filter(Boolean)
                                .join(" ")}
                              onClick={() => {
                                setSelectedReasons((prev) =>
                                  prev.includes(option)
                                    ? prev.filter((r) => r !== option)
                                    : [...prev, option],
                                );
                              }}
                            >
                              <span
                                aria-hidden="true"
                                className={[
                                  "flex h-5 w-5 shrink-0 items-center justify-center rounded-[5px] border transition-colors",
                                  isReasonChecked
                                    ? "border-[#F0445B] bg-[#F0445B]"
                                    : "border-[#9E9E9E] bg-transparent",
                                ]
                                  .filter(Boolean)
                                  .join(" ")}
                              >
                                {isReasonChecked ? (
                                  <svg
                                    aria-hidden="true"
                                    className="h-3.5 w-3.5 text-white"
                                    fill="none"
                                    viewBox="0 0 24 24"
                                    stroke="currentColor"
                                    strokeWidth={3.5}
                                  >
                                    <path
                                      strokeLinecap="round"
                                      strokeLinejoin="round"
                                      d="M5 13l4 4L19 7"
                                    />
                                  </svg>
                                ) : null}
                              </span>

                              <span className="min-w-0 flex-1 text-start">
                                <span className="text-[14px] leading-none font-bold text-start">
                                  {option}
                                </span>
                              </span>
                            </button>

                            {isReasonChecked && isOtherReason ? (
                              <textarea
                                ref={textareaRef}
                                className="mt-1 h-[90px] w-full resize-none rounded-[12px] border border-[#BFBFBF] bg-transparent px-3 py-2 text-[14px] text-[#171717] outline-none placeholder:text-[#AAAAAA] text-start"
                                placeholder={
                                  t[
                                    "Feel free to briefly explain your decision..."
                                  ]
                                }
                                value={reasonText}
                                onChange={(event) =>
                                  setReasonText(event.target.value)
                                }
                              />
                            ) : null}
                          </div>
                        );
                      })}
                    </div>
                  </div>
                ) : null}
              </div>
            </fieldset>
          </div>

          {/* Buttons Area */}
          <div className="mt-6 flex w-full items-center gap-3 shrink-0">
            <button
              type="button"
              onClick={closeSheet}
              className="flex-1 h-[52px] rounded-[14px] border border-[#9A9A9A] bg-[#F7F7F7] text-[#8B8B8B] font-bold text-[16px] flex items-center justify-center shadow-[inset_0_1px_0_rgba(255,255,255,0.8)] transition-all hover:bg-[#EFEFEF] active:scale-[0.98] cursor-pointer"
            >
              {t["Cancel"]}
            </button>

            {outcome === "ongoing" ? (
              <button
                type="button"
                onClick={() => {
                  onSubmit?.("success");
                  closeSheet();
                }}
                className="flex-1 h-[52px] rounded-[14px] bg-gradient-to-r from-[#FF6687] to-[#FF456C] text-white font-bold text-[16px] flex items-center justify-center shadow-[0_10px_18px_rgba(240,68,91,0.28)] transition-all hover:opacity-95 active:scale-[0.98] cursor-pointer"
              >
                {t["Continue"]}
              </button>
            ) : (
              <button
                type="button"
                disabled={isCanceledDisabled}
                onClick={() => {
                  const activeReasons = selectedReasons.map((r) => {
                    if (r === reasons[reasons.length - 1]) {
                      return reasonText.trim()
                        ? `${r}: ${reasonText.trim()}`
                        : r;
                    }
                    return r;
                  });
                  onSubmit?.("failure", activeReasons.join("\n"));
                  closeSheet();
                }}
                className="flex-1 h-[52px] rounded-[14px] bg-gradient-to-r from-[#FF6687] to-[#FF456C] text-white font-bold text-[16px] flex items-center justify-center shadow-[0_10px_18px_rgba(240,68,91,0.28)] transition-all hover:opacity-95 active:scale-[0.98] cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed disabled:active:scale-100 disabled:shadow-none"
              >
                {t["Confirm"]}
              </button>
            )}
          </div>
        </div>
      </section>
    </div>
  );
}

export default FemaleOutcomeSheet;