"use client";

import { useState } from "react";
import { useTranslations } from "next-intl";

// Sample questions for the screening
const questions = [
  { id: 1, text: "I have pains." },
  { id: 2, text: "I feel tired or have little energy." },
  { id: 3, text: "I have trouble falling or staying asleep." },
  { id: 4, text: "I feel nervous, anxious, or on edge." },
  { id: 5, text: "I have little interest or pleasure in doing things." },
  // ... more questions would be added
];

const answerOptions = [
  { value: 0, label: "0 (Not at all)" },
  { value: 1, label: "0 (Several days)" },
  { value: 2, label: "0 (More than half the days)" },
  { value: 3, label: "0 (Nearly every day)" },
];

export default function PracticeManagerScreening() {
  const t = useTranslations();
  const [currentQuestion, setCurrentQuestion] = useState(0);
  const [answers, setAnswers] = useState<{ [key: number]: number }>({});

  const totalQuestions = 29;
  const progress = Math.round(((currentQuestion + 1) / totalQuestions) * 100);

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

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

  const handleNext = () => {
    if (currentQuestion < totalQuestions - 1) {
      setCurrentQuestion((prev) => prev + 1);
    }
  };

  const currentQuestionData = questions[currentQuestion] || { id: currentQuestion + 1, text: "Sample question text." };

  return (
    <>
      {/* Main Content */}
      <main className="max-w-2xl mx-auto px-4 sm:px-6 lg:px-8 py-12 pt-24">
        {/* Question Card */}
        <div className="bg-white rounded-2xl shadow-sm border border-gray-200 p-8">
          {/* Progress Header */}
          <div className="flex items-center justify-between mb-2">
            <span className="text-sm font-medium text-gray-700">
              {t("practiceManager.screening.questionOf")} {currentQuestion + 1} {t("practiceManager.screening.of")} {totalQuestions}
            </span>
            <span className="text-sm text-gray-500">{progress}% {t("practiceManager.screening.complete")}</span>
          </div>

          {/* Progress Bar */}
          <div className="w-full h-2 bg-gray-200 rounded-full mb-8">
            <div
              className="h-2 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>

          {/* Answer Options */}
          <div className="space-y-3 mb-8">
            {answerOptions.map((option) => (
              <button
                key={option.value}
                onClick={() => handleAnswerSelect(option.value)}
                className={`w-full flex items-center gap-4 px-5 py-4 rounded-xl border-2 transition-all ${
                  answers[currentQuestion] === option.value
                    ? "border-[#3B9EC9] bg-[#E8F4F8]"
                    : "border-gray-200 bg-white hover:border-gray-300"
                }`}
              >
                {/* Radio Circle */}
                <div
                  className={`w-6 h-6 rounded-full border-2 flex items-center justify-center transition-all ${
                    answers[currentQuestion] === option.value
                      ? "border-[#3B9EC9]"
                      : "border-gray-300"
                  }`}
                >
                  {answers[currentQuestion] === option.value && (
                    <div className="w-3 h-3 rounded-full bg-[#3B9EC9]" />
                  )}
                </div>
                <span className="text-sm text-gray-700">{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 border border-[#3B9EC9] text-[#3B9EC9] font-medium rounded-full hover:bg-[#3B9EC9]/5 transition disabled:opacity-50 disabled:cursor-not-allowed"
            >
              <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("practiceManager.screening.previous")}
            </button>
            <button
              onClick={handleNext}
              className="flex-1 flex items-center justify-center gap-2 px-6 py-3 bg-[#3B9EC9] text-white font-medium rounded-full hover:bg-[#2D8AB5] transition"
            >
              {t("practiceManager.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>
    </>
  );
}