"use client";

import { useState, useEffect, Suspense } from "react";
import { useRouter } from "@/i18n/navigation";
import { useParams, useSearchParams } from "next/navigation";
import { useTranslations } from "next-intl";
import { toast } from "react-hot-toast";
import { usePractitionerScreeningControllerGetQuestionsV1, usePractitionerScreeningControllerSubmitAnswersV1 } from "@/api/user/practitioner-screening/practitioner-screening";
import { useClientsControllerFindOneV1 } from "@/api/user/practitioner-clients/practitioner-clients";
import UpgradeModal from "@/components/shared/UpgradeModal";

interface ClientData {
  id: number;
  name: string;
  email: string;
  phone?: string;
  age?: number;
  gender?: string;
}

// Disclaimer Screen Component
function DisclaimerScreen({ t, clientName, onAccept, onBack }: {
  t: any;
  clientName: string;
  onAccept: () => void;
  onBack: () => void;
}) {
  return (
    <div className="pt-24 pb-8">
      <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
        {/* Back + Client badge row */}
        <div className="flex items-center justify-between mb-6">
          <button
            onClick={onBack}
            className="flex items-center gap-2 text-sm text-gray-500 hover:text-gray-700 transition cursor-pointer"
          >
            <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
              <path strokeLinecap="round" strokeLinejoin="round" d="M15 19l-7-7 7-7" />
            </svg>
            {t("practitioner.screening.backToClients")}
          </button>
          {clientName && (
            <div className="flex items-center gap-2 bg-white border border-gray-100 rounded-full pl-2 pr-3 py-1.5 shadow-sm">
              <div className="w-6 h-6 rounded-full bg-[#3B9EC9]/10 flex items-center justify-center flex-shrink-0">
                <svg className="w-3.5 h-3.5 text-[#3B9EC9]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z" />
                </svg>
              </div>
              <span className="text-xs text-gray-400">{t("practitioner.screening.screeningFor")}</span>
              <span className="text-xs font-semibold text-gray-800">{clientName}</span>
            </div>
          )}
        </div>

        <div className="bg-white rounded-2xl shadow-sm border border-gray-100 p-8">
          {/* Title */}
          <div className="text-center mb-8">
            <h1 className="text-2xl sm:text-3xl font-semibold text-gray-900 mb-2">
              {t("individual.importantInfo.title")}
            </h1>
            <p className="text-gray-500">
              {t("individual.importantInfo.subtitle")}
            </p>
          </div>

          {/* Crisis Information Box */}
          <div className="bg-red-50 border border-red-100 rounded-xl p-6 mb-8">
            <div className="flex items-start gap-3 mb-4">
              <svg className="w-6 h-6 text-red-500 flex-shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
                <path strokeLinecap="round" strokeLinejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
              </svg>
              <h2 className="text-lg font-semibold text-red-600">
                {t("individual.importantInfo.crisisTitle")}
              </h2>
            </div>
            <p className="text-red-700 mb-4">
              {t("individual.importantInfo.crisisText1")}{" "}
              {t("individual.importantInfo.crisisText2")}
            </p>
            <div className="mb-4">
              <h3 className="font-semibold text-red-700 mb-2">
                {t("individual.importantInfo.lifeline")}
              </h3>
              <ul className="space-y-1 text-red-700">
                <li className="flex items-center gap-2">
                  <span className="w-1.5 h-1.5 bg-red-500 rounded-full flex-shrink-0"></span>
                  {t("individual.importantInfo.dial988")}
                </li>
                <li className="flex items-center gap-2">
                  <span className="w-1.5 h-1.5 bg-red-500 rounded-full flex-shrink-0"></span>
                  {t("individual.importantInfo.text988")}
                </li>
                <li className="flex items-center gap-2">
                  <span className="w-1.5 h-1.5 bg-red-500 rounded-full flex-shrink-0"></span>
                  {t("individual.importantInfo.visit988")}
                </li>
              </ul>
            </div>
            <div>
              <h3 className="font-semibold text-red-700 mb-2">
                {t("individual.importantInfo.nami")}
              </h3>
              <ul className="space-y-1 text-red-700">
                <li className="flex items-center gap-2">
                  <span className="w-1.5 h-1.5 bg-red-500 rounded-full flex-shrink-0"></span>
                  {t("individual.importantInfo.namiCall")}
                </li>
                <li className="flex items-center gap-2">
                  <span className="w-1.5 h-1.5 bg-red-500 rounded-full flex-shrink-0"></span>
                  {t("individual.importantInfo.namiText")}
                </li>
                <li className="flex items-center gap-2">
                  <span className="w-1.5 h-1.5 bg-red-500 rounded-full flex-shrink-0"></span>
                  {t("individual.importantInfo.namiEmail")}
                </li>
              </ul>
            </div>
          </div>

          {/* Risk Disclaimer & Informed Consent */}
          <div className="mb-8">
            <h2 className="text-xl font-semibold text-gray-900 mb-4">
              {t("individual.importantInfo.disclaimerTitle")}
            </h2>
            <p className="text-gray-600 mb-6">
              {t("individual.importantInfo.disclaimerText")}
            </p>
            <h3 className="font-semibold text-gray-900 mb-3">
              {t("individual.importantInfo.limitationsTitle")}
            </h3>
            <ul className="space-y-2 text-gray-600 mb-6">
              <li className="flex items-start gap-2">
                <span className="w-1.5 h-1.5 bg-gray-400 rounded-full mt-2 flex-shrink-0"></span>
                <span>{t("individual.importantInfo.limitation1")}</span>
              </li>
              <li className="flex items-start gap-2">
                <span className="w-1.5 h-1.5 bg-gray-400 rounded-full mt-2 flex-shrink-0"></span>
                <span>{t("individual.importantInfo.limitation2")}</span>
              </li>
              <li className="flex items-start gap-2">
                <span className="w-1.5 h-1.5 bg-gray-400 rounded-full mt-2 flex-shrink-0"></span>
                <span>{t("individual.importantInfo.limitation3")}</span>
              </li>
              <li className="flex items-start gap-2">
                <span className="w-1.5 h-1.5 bg-gray-400 rounded-full mt-2 flex-shrink-0"></span>
                <span>{t("individual.importantInfo.limitation4")}</span>
              </li>
            </ul>
            <h3 className="font-semibold text-gray-900 mb-3">
              {t("individual.importantInfo.expectTitle")}
            </h3>
            <ul className="space-y-2 text-gray-600">
              <li className="flex items-start gap-2">
                <span className="w-1.5 h-1.5 bg-gray-400 rounded-full mt-2 flex-shrink-0"></span>
                <span>{t("individual.importantInfo.expect1")}</span>
              </li>
              <li className="flex items-start gap-2">
                <span className="w-1.5 h-1.5 bg-gray-400 rounded-full mt-2 flex-shrink-0"></span>
                <span>{t("individual.importantInfo.expect2")}</span>
              </li>
              <li className="flex items-start gap-2">
                <span className="w-1.5 h-1.5 bg-gray-400 rounded-full mt-2 flex-shrink-0"></span>
                <span>{t("individual.importantInfo.expect3")}</span>
              </li>
            </ul>
          </div>

          {/* Continue Button */}
          <div className="flex justify-center">
            <button
              onClick={onAccept}
              className="px-8 py-3 text-sm font-medium text-white bg-[#3B9EC9] rounded-full hover:bg-[#2D8AB5] transition cursor-pointer"
            >
              {t("individual.importantInfo.acknowledgeBtn")}
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}

// No Data Found Screen Component
function NoDataFoundScreen({ t, router }: {
  t: any;
  router: any;
}) {
  return (
    <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-20 pb-8">
        {/* Page Title with Search/Filter Bar */}
        <div className="flex items-center justify-between mb-8">
          <h1 className="text-2xl font-semibold text-gray-900">
            {t("practitioner.screening.title")}
          </h1>
          <div className="flex items-center gap-3">
            {/* Search */}
            <div className="relative">
              <div className="absolute inset-y-0 left-3 flex items-center pointer-events-none">
                <svg className="w-5 h-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
                  <path strokeLinecap="round" strokeLinejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" />
                </svg>
              </div>
              <input
                type="text"
                placeholder={t("practitioner.common.search")}
                className="pl-10 pr-4 py-2.5 w-64 bg-white border border-gray-200 rounded-full text-sm focus:outline-none focus:ring-2 focus:ring-[#3B9EC9]/20 focus:border-[#3B9EC9]"
                disabled
              />
            </div>
            {/* Sort */}
            <select
              className="px-4 py-2.5 bg-white border border-gray-200 rounded-full text-sm text-gray-600 focus:outline-none cursor-pointer"
              disabled
            >
              <option>{t("practitioner.common.sortBy")}</option>
            </select>
            {/* Filter */}
            <button
              className="flex items-center gap-2 px-4 py-2.5 bg-white border border-gray-200 rounded-full text-sm text-gray-600 cursor-pointer"
              disabled
            >
              <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
                <path strokeLinecap="round" strokeLinejoin="round" d="M10.5 6h9.75M10.5 6a1.5 1.5 0 11-3 0m3 0a1.5 1.5 0 10-3 0M3.75 6H7.5m3 12h9.75m-9.75 0a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m-3.75 0H7.5m9-6h3.75m-3.75 0a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m-9.75 0h9.75" />
              </svg>
              {t("practitioner.common.filter")}
            </button>
          </div>
        </div>

        {/* No Data Found Card */}
        <div className="flex flex-col items-center justify-center py-32">
          {/* Icon - Document with magnifying glass and X */}
          <div className="mb-6">
            <svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
              {/* Document */}
              <rect x="20" y="10" width="50" height="65" rx="4" stroke="#1F2937" strokeWidth="2.5" fill="none" />
              {/* Lines on document */}
              <line x1="30" y1="25" x2="60" y2="25" stroke="#1F2937" strokeWidth="2" strokeLinecap="round" />
              <line x1="30" y1="35" x2="55" y2="35" stroke="#1F2937" strokeWidth="2" strokeLinecap="round" />
              <line x1="30" y1="45" x2="50" y2="45" stroke="#1F2937" strokeWidth="2" strokeLinecap="round" />
              <line x1="30" y1="55" x2="45" y2="55" stroke="#1F2937" strokeWidth="2" strokeLinecap="round" />
              {/* Magnifying glass */}
              <circle cx="65" cy="60" r="18" stroke="#1F2937" strokeWidth="2.5" fill="white" />
              <line x1="78" y1="73" x2="88" y2="83" stroke="#1F2937" strokeWidth="3" strokeLinecap="round" />
              {/* X mark inside magnifying glass */}
              <circle cx="65" cy="60" r="10" fill="#3B9EC9" />
              <path d="M60 55L70 65M70 55L60 65" stroke="white" strokeWidth="2.5" strokeLinecap="round" />
            </svg>
          </div>

          {/* Title */}
          <h2 className="text-xl font-bold text-gray-900 mb-2">
            {t("practitioner.screening.noDataFound")}
          </h2>

          {/* Description */}
          <p className="text-gray-500 text-sm text-center max-w-sm mb-6">
            {t("practitioner.screening.noDataDescription")}
          </p>

          {/* Back to Clients Button */}
          <button
            onClick={() => router.push("/practitioner/clients")}
            className="px-8 py-3 text-sm font-medium text-white bg-[#3B9EC9] rounded-full hover:bg-[#2D8AB5] transition cursor-pointer"
          >
            {t("practitioner.screening.backToClients")}
          </button>
        </div>
      </main>
  );
}

function PractitionerScreeningPageInner() {
  const router = useRouter();
  const params = useParams();
  const searchParams = useSearchParams();
  const t = useTranslations();

  const clientId = params.clientId as string;
  const screeningUuid = searchParams.get("uuid") || null;
  const hasValidUuid = !!screeningUuid && screeningUuid.length > 0;

  const [disclaimerAccepted, setDisclaimerAccepted] = useState<boolean>(() => {
    if (typeof window !== "undefined") {
      return sessionStorage.getItem(`pr_disc_${screeningUuid}`) === "true";
    }
    return false;
  });
  const [currentQuestion, setCurrentQuestion] = useState(0);
  const [answers, setAnswers] = useState<Record<string, number>>({});
  const [upgradeError, setUpgradeError] = useState<{
    code: "TRIAL_LIMIT_REACHED" | "TRIAL_EXPIRED" | "TRIAL_REQUIRED";
    data?: any;
  } | null>(null);

  // Fetch client data
  const {
    data: clientResponse,
    isLoading: isLoadingClient,
  } = useClientsControllerFindOneV1(
    parseInt(clientId),
    {
      query: {
        enabled: !!clientId,
      },
    }
  );

  const clientData: ClientData | null = (clientResponse as any)?.data || null;

  // Fetch questions from practitioner endpoint (no UUID needed — same 29 questions for all)
  const {
    data: questionsData,
    isLoading: isLoadingQuestions,
    error: questionsError,
  } = usePractitionerScreeningControllerGetQuestionsV1({
    query: { enabled: hasValidUuid },
  });

  // Detect 403 trial errors from questions fetch
  useEffect(() => {
    if (!questionsError) return;
    const err = questionsError as any;
    const status = err?.response?.status;
    const errorCode = err?.response?.data?.error;
    if (status === 403) {
      if (errorCode === "TRIAL_REQUIRED") {
        setUpgradeError({ code: "TRIAL_REQUIRED" });
      } else if (errorCode === "TRIAL_LIMIT_REACHED") {
        setUpgradeError({ code: "TRIAL_LIMIT_REACHED", data: err?.response?.data?.data });
      } else if (errorCode === "TRIAL_EXPIRED") {
        setUpgradeError({ code: "TRIAL_EXPIRED", data: err?.response?.data?.data });
      }
    }
  }, [questionsError]);

  // Submit all answers at once via practitioner endpoint
  const submitScreeningMutation = usePractitionerScreeningControllerSubmitAnswersV1();

  const questions = (questionsData as any)?.data || [];
  const totalQuestions = questions.length;
  const progress = totalQuestions > 0 ? Math.round(((currentQuestion + 1) / totalQuestions) * 100) : 0;

  const currentQuestionData = questions[currentQuestion];
  const selectedAnswer = currentQuestionData ? answers[currentQuestionData.uuid] : undefined;

  // Check if current question uses count-type response (Q29)
  const isQuestion29 = currentQuestion === 28 && totalQuestions === 29;
  const isCountType = currentQuestionData?.response_type === "count" || isQuestion29;

  // Answer options following Figma design
  const answerOptions = isCountType
    ? [
        { value: 0, label: t("practitioner.screening.countOption0") },
        { value: 1, label: t("practitioner.screening.countOption1") },
        { value: 2, label: t("practitioner.screening.countOption2") },
        { value: 3, label: t("practitioner.screening.countOption3") },
      ]
    : [
        { value: 0, label: t("practitioner.screening.option0") },
        { value: 1, label: t("practitioner.screening.option1") },
        { value: 2, label: t("practitioner.screening.option2") },
        { value: 3, label: t("practitioner.screening.option3") },
      ];

  const handleSelectAnswer = (value: number) => {
    const currentQuestionUuid = questions[currentQuestion]?.uuid;
    if (currentQuestionUuid) {
      setAnswers((prev) => ({
        ...prev,
        [currentQuestionUuid]: value,
      }));
    }
  };

  const handlePrevious = () => {
    if (currentQuestion > 0) {
      setCurrentQuestion(currentQuestion - 1);
    }
  };

  const handleNext = () => {
    // Ensure we have a valid screening UUID
    if (!screeningUuid) {
      return;
    }

    const currentQuestionUuid = questions[currentQuestion]?.uuid;
    const currentAnswer = answers[currentQuestionUuid];

    if (currentAnswer === undefined) {
      return; // No answer selected
    }

    if (currentQuestion < totalQuestions - 1) {
      // Not last question — just advance locally, no API call per answer
      setCurrentQuestion(currentQuestion + 1);
    } else {
      // Last question — submit all answers at once
      const allAnswers = Object.entries(answers).map(([question_uuid, answer]) => ({
        question_uuid,
        answer: answer as number,
      }));
      submitScreeningMutation.mutate(
        { uuid: screeningUuid, data: { answers: allAnswers } },
        {
          onSuccess: () => {
            router.push(`/practitioner/report/${clientId}/${screeningUuid}`);
          },
          onError: (error: any) => {
            console.error("Failed to submit screening:", error);
            const status = error?.response?.status;
            const errorCode = error?.response?.data?.error;
            if (status === 403) {
              if (errorCode === "TRIAL_REQUIRED") {
                setUpgradeError({ code: "TRIAL_REQUIRED" });
              } else if (errorCode === "TRIAL_LIMIT_REACHED") {
                setUpgradeError({ code: "TRIAL_LIMIT_REACHED", data: error?.response?.data?.data });
              } else if (errorCode === "TRIAL_EXPIRED") {
                setUpgradeError({ code: "TRIAL_EXPIRED", data: error?.response?.data?.data });
              } else {
                toast.error(t("practitioner.screening.submitError"));
              }
              return;
            }
            toast.error(t("practitioner.screening.submitError"));
          },
        }
      );
    }
  };

  const getOptionStyles = (_index: number, isSelected: boolean) => {
    if (isSelected) {
      return "bg-[#E8F7FA] border-[#3B9EC9] text-gray-900";
    }
    return "bg-white border-gray-300 text-gray-700";
  };

  const getRadioStyles = (_index: number, isSelected: boolean) => {
    if (isSelected) {
      return "border-[#3B9EC9] bg-[#3B9EC9]";
    }
    return "border-gray-300 bg-white";
  };

  // If no valid UUID, show "No data Found" immediately without loading
  if (!hasValidUuid) {
    return <NoDataFoundScreen t={t} router={router} />;
  }

  // Loading state - only show when we have a valid UUID and are loading
  if (isLoadingClient || isLoadingQuestions) {
    return (
      <div className="flex items-center justify-center pt-40">
        <div className="text-center">
          <svg className="animate-spin w-10 h-10 text-[#3B9EC9] mx-auto mb-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
            <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
            <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
          </svg>
          <p className="text-gray-600">{t("practitioner.common.loading")}</p>
        </div>
      </div>
    );
  }

  // Trial limit/expired — show upgrade modal instead of generic error
  if (upgradeError) {
    return (
      <main className="pt-20 pb-8">
        <UpgradeModal
          isOpen={true}
          onClose={() => router.push("/practitioner/subscription")}
          errorCode={upgradeError.code}
          trialData={upgradeError.data}
          upgradeHref="/practitioner/subscription"
        />
      </main>
    );
  }

  // No data found state - when error or no questions
  if (questionsError || (questions.length === 0 && !isLoadingQuestions)) {
    return <NoDataFoundScreen t={t} router={router} />;
  }

  // Disclaimer Screen - shown before questions
  if (!disclaimerAccepted) {
    return (
      <DisclaimerScreen
        t={t}
        clientName={clientData?.name ?? ""}
        onAccept={() => {
          sessionStorage.setItem(`pr_disc_${screeningUuid}`, "true");
          setDisclaimerAccepted(true);
        }}
        onBack={() => router.push("/practitioner/clients")}
      />
    );
  }

  // Question Screen UI
  return (
      <main className="max-w-2xl mx-auto px-4 pt-20 pb-8">
        {/* Client Info Card */}
        {clientData && (
          <div className="bg-white rounded-xl shadow-sm border border-gray-100 p-4 mb-6">
            <div className="flex items-center gap-4">
              <div className="w-12 h-12 rounded-full bg-[#3B9EC9]/10 flex items-center justify-center flex-shrink-0">
                <svg className="w-6 h-6 text-[#3B9EC9]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z" />
                </svg>
              </div>
              <div className="flex-1">
                <h3 className="text-lg font-semibold text-gray-900">{clientData.name}</h3>
                <p className="text-sm text-gray-500">{clientData.email}</p>
              </div>
              <div className="text-right text-sm text-gray-500">
                {clientData.age && <p>{clientData.age} {t("practitioner.clients.years")}</p>}
                {clientData.gender && <p>{clientData.gender}</p>}
              </div>
            </div>
          </div>
        )}

        {/* Screening Card */}
        <div className="bg-white rounded-2xl shadow-sm border border-gray-100 p-8">
          {/* Progress Header */}
          <div className="flex items-center justify-between mb-2">
            <span className="text-sm font-medium text-gray-700">
              {t("practitioner.screening.questionOf")} {currentQuestion + 1} {t("practitioner.screening.of")} {totalQuestions}
            </span>
            <span className="text-sm text-gray-500">{progress}% {t("practitioner.screening.complete")}</span>
          </div>

          {/* Progress Bar */}
          <div className="h-2 bg-gray-200 rounded-full mb-8 overflow-hidden">
            <div
              className="h-full bg-[#3B9EC9] rounded-full transition-all duration-300"
              style={{ width: `${progress}%` }}
            />
          </div>

          {/* Question */}
          <h2 className="text-lg font-medium text-gray-900 mb-6">
            {currentQuestionData?.text || ""}
          </h2>

          {/* Options */}
          <div className="space-y-3 mb-8">
            {answerOptions.map((option, index) => {
              const isSelected = selectedAnswer === option.value;
              return (
                <button
                  key={option.value}
                  onClick={() => handleSelectAnswer(option.value)}
                  className={`w-full flex items-center gap-4 px-5 py-4 rounded-xl border-2 transition cursor-pointer ${getOptionStyles(index, isSelected)}`}
                >
                  <div
                    className={`w-6 h-6 rounded-full border-2 flex items-center justify-center transition ${getRadioStyles(index, isSelected)}`}
                  >
                    {isSelected && (
                      <div className="w-2 h-2 rounded-full bg-white" />
                    )}
                  </div>
                  <span className="text-sm font-medium">{option.label}</span>
                </button>
              );
            })}
          </div>

          {/* Navigation Buttons */}
          <div className="flex items-center gap-4">
            <button
              onClick={handlePrevious}
              disabled={currentQuestion === 0}
              className="flex items-center gap-2 px-6 py-3 text-sm font-medium text-[#3B9EC9] bg-white border border-[#3B9EC9] rounded-full hover:bg-[#3B9EC9]/5 disabled:opacity-50 disabled:cursor-not-allowed transition cursor-pointer"
            >
              <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
                <path strokeLinecap="round" strokeLinejoin="round" d="M15 19l-7-7 7-7" />
              </svg>
              {t("practitioner.screening.previous")}
            </button>
            <button
              onClick={handleNext}
              disabled={selectedAnswer === undefined || submitScreeningMutation.isPending}
              className="flex-1 flex items-center justify-center gap-2 px-6 py-3 text-sm font-medium text-white bg-[#3B9EC9] rounded-full hover:bg-[#2D8AB5] disabled:opacity-50 disabled:cursor-not-allowed transition cursor-pointer"
            >
              {submitScreeningMutation.isPending ? (
                <>
                  <div className="inline-block animate-spin rounded-full h-5 w-5 border-b-2 border-white"></div>
                  <span>{t("practitioner.screening.submitting")}</span>
                </>
              ) : (
                <>
                  {currentQuestion === totalQuestions - 1
                    ? t("practitioner.screening.submitScreening")
                    : t("practitioner.screening.nextQuestion")
                  }
                  <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
                    <path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" />
                  </svg>
                </>
              )}
            </button>
          </div>
        </div>
      </main>
  );
}

export default function PractitionerScreeningPage() {
  return (
    <Suspense>
      <PractitionerScreeningPageInner />
    </Suspense>
  );
}