ACVE/app/(protected)/practice/[slug]/page.tsx

"use client";

import { useState } from "react";
import Link from "next/link";
import { useParams } from "next/navigation";
import ProgressBar from "@/components/ProgressBar";
import { getPracticeBySlug, mockPracticeModules } from "@/lib/data/mockPractice";

export default function PracticeExercisePage() {
  const params = useParams<{ slug: string }>();
  const practiceModule = getPracticeBySlug(params.slug);

  const [index, setIndex] = useState(0);
  const [score, setScore] = useState(0);
  const [finished, setFinished] = useState(false);
  const [selected, setSelected] = useState<number | null>(null);

  if (!practiceModule) {
    return (
      <div className="acve-panel p-6">
        <h1 className="text-2xl font-bold text-slate-900">Practice module not found</h1>
        <p className="mt-2 text-slate-600">The requested practice slug does not exist in mock data.</p>
        <Link className="acve-button-primary mt-4 inline-flex px-4 py-2 text-sm font-semibold" href="/practice">
          Back to practice
        </Link>
      </div>
    );
  }

  if (!practiceModule.isInteractive || !practiceModule.questions?.length) {
    return (
      <div className="acve-panel p-6">
        <h1 className="text-2xl font-bold text-slate-900">{practiceModule.title}</h1>
        <p className="mt-2 text-slate-600">This practice module is scaffolded and will be enabled in a later iteration.</p>
      </div>
    );
  }

  const total = practiceModule.questions.length;
  const current = practiceModule.questions[index];
  const progress = Math.round((index / total) * 100);

  const pick = (choiceIndex: number) => {
    if (selected !== null) return;
    setSelected(choiceIndex);
    if (choiceIndex === current.answerIndex) {
      setScore((value) => value + 1);
    }
  };

  const next = () => {
    if (index + 1 >= total) {
      setFinished(true);
      return;
    }
    setIndex((value) => value + 1);
    setSelected(null);
  };

  const restart = () => {
    setIndex(0);
    setScore(0);
    setSelected(null);
    setFinished(false);
  };

  if (finished) {
    return (
      <div className="mx-auto max-w-3xl rounded-2xl border border-slate-300 bg-white p-8 text-center shadow-sm">
        <h1 className="acve-heading text-5xl">Exercise complete</h1>
        <p className="mt-2 text-3xl text-slate-700">
          Final score: {score}/{total}
        </p>
        <button className="acve-button-primary mt-6 px-6 py-2 text-lg font-semibold hover:brightness-105" onClick={restart} type="button">
          Restart
        </button>
      </div>
    );
  }

  return (
    <div className="space-y-6">
      <section className="text-center">
        <p className="acve-pill mx-auto mb-4 w-fit">Practice and Exercises</p>
        <h1 className="acve-heading text-4xl md:text-6xl">Master Your Skills</h1>
      </section>

      <section className="grid gap-4 md:grid-cols-3">
        {mockPracticeModules.map((module, moduleIndex) => {
          const isActive = module.slug === practiceModule.slug;
          return (
            <div
              key={module.slug}
              className={`rounded-2xl border p-6 ${
                isActive ? "border-brand bg-white shadow-sm" : "border-slate-300 bg-white"
              }`}
            >
              <div className="mb-2 text-3xl text-brand md:text-4xl">{moduleIndex === 0 ? "A/" : moduleIndex === 1 ? "[]" : "O"}</div>
              <h2 className="text-2xl text-[#222a38] md:text-4xl">{module.title}</h2>
              <p className="mt-2 text-lg text-slate-600 md:text-2xl">{module.description}</p>
            </div>
          );
        })}
      </section>

      <section className="acve-panel p-4">
        <div className="mb-3 flex items-center justify-between gap-4">
          <p className="text-xl font-semibold text-slate-700">
            Question {index + 1} / {total}
          </p>
          <p className="text-xl font-semibold text-[#222a38] md:text-2xl">Score: {score}/{total}</p>
        </div>
        <ProgressBar value={progress} />
      </section>

      <section className="acve-panel p-6">
        <div className="rounded-2xl bg-[#f6f6f8] px-6 py-10 text-center">
          <p className="text-lg text-slate-500 md:text-2xl">Spanish Term</p>
          <h2 className="acve-heading mt-2 text-3xl md:text-6xl">{current.prompt.replace("Spanish term: ", "")}</h2>
        </div>

        <div className="mt-6 grid gap-3">
          {current.choices.map((choice, choiceIndex) => {
            const isPicked = selected === choiceIndex;
            const isCorrect = choiceIndex === current.answerIndex;
            const stateClass =
              selected === null
                ? "border-slate-300 hover:bg-slate-50"
                : isCorrect
                  ? "border-[#2f9d73] bg-[#edf9f4]"
                  : isPicked
                    ? "border-[#bf3c5f] bg-[#fff1f4]"
                    : "border-slate-300";

            return (
              <button
                key={choice}
                className={`rounded-xl border px-4 py-3 text-left text-base text-slate-800 md:text-xl ${stateClass}`}
                onClick={() => pick(choiceIndex)}
                type="button"
              >
                {choice}
              </button>
            );
          })}
        </div>

        <button
          className="acve-button-primary mt-6 px-6 py-2 text-lg font-semibold hover:brightness-105 disabled:opacity-50"
          disabled={selected === null}
          onClick={next}
          type="button"
        >
          {index + 1 === total ? "Finish" : "Next question"}
        </button>
      </section>
    </div>
  );
}