"use client";

import { useRouter } from "next/navigation";
import { useEffect, useState } from "react";
import { GoArrowLeft } from "react-icons/go";

import Button from "./button";
import { ExplanationUiFont } from "./explanation-ui-font";
import NavigationButton from "./navigation-button";
import { PageBackground } from "./page-background";
import StickyHeader from "./sticky-header";
import TestLoadingScreen from "./test-loading-screen";

export type QuestionOption = {
  label: string;
  value: string | number;
};

export type TestQuestion = {
  id: number;
  text: string;
  info?: string;
  options: QuestionOption[];
};

type TestQuestionsFlowProps = {
  title: string;
  questions: TestQuestion[];
  closeLabel: string;
  informationLabel: string;
  previousLabel?: string;
  finishLabel?: string;
  stepsLabel?: string;
  onFinish?: (answers: Record<number, string | number>) => void;
  onClose?: () => void;
  draftStorageKey?: string;
};
type StoredTestDraft = {
  answers?: Record<number, string | number>;
  currentIndex?: number;
};

function getStoredDraft(
  storageKey: string | undefined,
  totalQuestions: number,
) {
  if (!storageKey || typeof window === "undefined")
    return { answers: {}, currentIndex: 0 };
  try {
    const rawDraft = window.localStorage.getItem(storageKey);
    if (!rawDraft) return { answers: {}, currentIndex: 0 };
    const draft = JSON.parse(rawDraft) as StoredTestDraft;
    return {
      answers:
        draft.answers && typeof draft.answers === "object" ? draft.answers : {},
      currentIndex: Number.isInteger(draft.currentIndex)
        ? Math.min(
            Math.max(draft.currentIndex ?? 0, 0),
            Math.max(totalQuestions - 1, 0),
          )
        : 0,
    };
  } catch {
    return { answers: {}, currentIndex: 0 };
  }
}

function formatOptionLabel(str: string): string {
  if (!str) return str;
  
  let result = str.trim();
  
  // Remove trailing numbers in parentheses, e.g., (1) or (۱)
  result = result.replace(/\s*\([\d۱۲۳۴۵۶۷۸۹۰]+\)\s*$/, "");

  if (result.startsWith(')')) {
    result = result.slice(1).trim();
  }
  if (result.endsWith('(')) {
    result = result.slice(0, -1).trim();
  }
  
  let openCount = 0;
  let closeCount = 0;
  for (let i = 0; i < result.length; i++) {
    if (result[i] === '(') openCount++;
    else if (result[i] === ')') closeCount++;
  }
  
  if (openCount > closeCount) {
    result = result + ')'.repeat(openCount - closeCount);
  } else if (closeCount > openCount) {
    result = '('.repeat(closeCount - openCount) + result;
  }
  
  if (result.length > 0) {
    result = result.charAt(0).toUpperCase() + result.slice(1);
  }
  
  return result;
}

export default function TestQuestionsFlow({
  title,
  questions,
  closeLabel,
  informationLabel,
  previousLabel = "Previous",
  finishLabel = "Finish",
  stepsLabel = "Steps",
  onFinish,
  onClose,
  draftStorageKey,
}: TestQuestionsFlowProps) {
  const router = useRouter();
  const [currentIndex, setCurrentIndex] = useState(
    () => getStoredDraft(draftStorageKey, questions.length).currentIndex,
  );
  const [answers, setAnswers] = useState<Record<number, string | number>>(
    () => getStoredDraft(draftStorageKey, questions.length).answers,
  );
  const [isSubmitting, setIsSubmitting] = useState(false);

  const currentQuestion = questions[currentIndex] ?? questions[0];
  const totalQuestions = questions.length;
  const isLastQuestion = currentIndex === totalQuestions - 1;
  const selectedValue = currentQuestion
    ? answers[currentQuestion.id]
    : undefined;
  useEffect(() => {
    if (!draftStorageKey) return;
    try {
      window.localStorage.setItem(
        draftStorageKey,
        JSON.stringify({ answers, currentIndex }),
      );
    } catch {}
  }, [answers, currentIndex, draftStorageKey]);

  const handleOptionSelect = (value: string | number) => {
    if (!currentQuestion) return;

    setAnswers((prev) => ({
      ...prev,
      [currentQuestion.id]: value,
    }));

    // Auto advance to next question if not on last question
    if (!isLastQuestion) {
      setTimeout(() => {
        setCurrentIndex((prev) => Math.min(prev + 1, totalQuestions - 1));
      }, 250);
    }
  };

  const handlePrev = () => {
    setCurrentIndex((prev) => Math.max(prev - 1, 0));
  };

  const handleFinishSubmit = async () => {
    if (isSubmitting) return;
    setIsSubmitting(true);

    try {
      if (onFinish) {
        await onFinish(answers);
      }
      if (draftStorageKey) window.localStorage.removeItem(draftStorageKey);
      router.back();
    } catch {
      // ignore
    } finally {
      setIsSubmitting(false);
    }
  };

  if (isSubmitting) {
    return (
      <TestLoadingScreen
        title="Analyzing and submitting responses"
        subtitle="Please wait a moment while your answers are reviewed and registered."
      />
    );
  }

  if (!currentQuestion) {
    return null;
  }

  const progressPercent = ((currentIndex + 1) / totalQuestions) * 100;
  const areAllQuestionsAnswered = questions.every(
    (question) => answers[question.id] !== undefined,
  );

  return (
    <>
      <PageBackground disabled />
      <main className="-mx-[17px] flex h-svh flex-col overflow-hidden bg-[#F7F1F0]">
        {/* Header */}
        <StickyHeader sticky={false} className="shrink-0">
          <div className="flex items-center gap-4">
            <NavigationButton
              className="shrink-0"
              variant="transparent"
              icon="close"
              iconLabel={closeLabel}
              onClick={onClose}
            />
            <h1 className="min-w-0 flex-1 text-center font-semibold text-white truncate group-16">
              {title}
            </h1>
            <NavigationButton
              className="shrink-0"
              variant="transparent"
              icon="info"
              iconLabel={informationLabel}
            />
          </div>
        </StickyHeader>

        {/* Content Area */}
        <div className="mx-auto flex w-full max-w-md flex-1 flex-col px-[17px] pt-4 pb-4 min-h-0">
          {/* Progress Section */}
          <div className="shrink-0">
            <div className="flex items-center justify-between group-12 font-medium text-[#7A7A7A] mb-2">
              <span>{stepsLabel}</span>
              <span>
                {currentIndex + 1} /{totalQuestions}
              </span>
            </div>
            {/* Progress Track & Fill */}
            <div className="h-[6px] w-full rounded-full bg-[#E9E9E9] overflow-hidden">
              <div
                className="h-full rounded-full bg-linear-to-r from-[#F2465F] to-[#E03950] transition-all duration-300"
                style={{ width: `${progressPercent}%` }}
              />
            </div>
          </div>

          {/* Question Section */}
          <div className="flex-1 flex flex-col justify-start overflow-y-auto pt-6 pb-4">
            {/* Question Title */}
            <h2
              className="group-16 font-bold text-[#1B1B1B] leading-[1.45] text-center px-2 mb-8 flex items-center justify-center"
              style={{ minHeight: "5.8em" }}
            >
              <span className="w-full">{currentQuestion.text}</span>
            </h2>

            {/* Answer Options Stack */}
            {(() => {
              const options = currentQuestion.options || [];

              return (
                <div className="flex flex-col gap-3.5 pt-1">
                  {options.map((option) => {
                    const isSelected = selectedValue === option.value;

                    return (
                      <button
                        key={`${currentQuestion.id}-${String(option.value)}`}
                        type="button"
                        onClick={() => handleOptionSelect(option.value)}
                        className={[
                          "cursor-pointer rounded-[16px] font-semibold text-[15px] transition-all duration-200 active:scale-[0.99] flex items-center gap-3",
                          "w-full px-5 py-4 text-start leading-snug",
                          isSelected
                            ? "bg-[#F0445B] text-white shadow-[0_8px_20px_rgba(240,68,91,0.25)]"
                            : "bg-[#FAFAFA] text-[#181818] hover:bg-white shadow-[0_2px_6px_rgba(0,0,0,0.03)] border border-[#F0EDED]",
                        ].join(" ")}
                      >
                        <div
                          className={[
                            "size-[18px] shrink-0 rounded-full border-[2px] transition-all flex items-center justify-center",
                            isSelected
                              ? "border-white bg-white text-[#F0445B]"
                              : "border-[#D0D5DD] bg-white text-transparent",
                          ].join(" ")}
                        >
                          {isSelected && (
                            <div className="size-[8px] rounded-full bg-current" />
                          )}
                        </div>

                        {option.label.includes(" - ") ? (
                          (() => {
                            const parts = option.label.split(" - ");
                            const title = formatOptionLabel(parts[0]);
                            const description = formatOptionLabel(parts.slice(1).join(" - "));
                            return (
                              <span className="flex flex-col gap-1 text-start flex-1">
                                <span className="font-bold">{title}</span>
                                <ExplanationUiFont
                                  textColor={
                                    isSelected
                                      ? "text-white/85"
                                      : "text-[#667085]"
                                  }
                                >
                                  {description}
                                </ExplanationUiFont>
                              </span>
                            );
                          })()
                        ) : (
                          <span className="flex-1">{formatOptionLabel(option.label)}</span>
                        )}
                      </button>
                    );
                  })}
                </div>
              );
            })()}
          </div>

          {/* Bottom Actions Bar */}
          <div className="shrink-0 pt-2 flex items-center justify-between gap-4">
            {/* Previous Button */}
            <button
              type="button"
              onClick={handlePrev}
              disabled={currentIndex === 0}
              className="flex items-center gap-1.5 group-14 font-semibold text-[#4A4A4A] disabled:opacity-30 disabled:pointer-events-none transition-opacity py-2 px-1"
            >
              <GoArrowLeft className="size-5" />
              <span>{previousLabel}</span>
            </button>

            {/* Finish Button on Last Question */}
            {isLastQuestion ? (
              <Button
                className="!w-auto !h-[42px] px-7"
                disabled={
                  selectedValue === undefined ||
                  !areAllQuestionsAnswered ||
                  isSubmitting
                }
                onClick={handleFinishSubmit}
              >
                {finishLabel}
              </Button>
            ) : null}
          </div>
        </div>
      </main>
    </>
  );
}