freezmo/components/activities/Ordering.tsx

"use client";

import { Reorder } from "framer-motion";
import { useMemo, useState } from "react";

import type { Activity } from "@/lib/schemas";
import { cn, shuffle } from "@/lib/utils";
import { Button } from "@/components/ui";

import {
  ActivityHeader,
  FeedbackPanel,
  Hint,
  PromptCard,
  type ActivityComponentProps,
} from "./shared";

type OrderingActivity = Extract<Activity, { type: "ordering" }>;

export function Ordering({ activity, onAnswered, onNext, isLast }: ActivityComponentProps<OrderingActivity>) {
  const initial = useMemo(() => shuffle(activity.items), [activity]);
  const [items, setItems] = useState<string[]>(initial);
  const [checked, setChecked] = useState(false);
  const [correct, setCorrect] = useState(false);

  const isRight = (list: string[]) => list.every((item, index) => item === activity.items[index]);

  const check = () => {
    if (checked) return;
    const result = isRight(items);
    setChecked(true);
    setCorrect(result);
    onAnswered(result, { userAnswer: items.join(" → ") });
  };

  const move = (index: number, direction: -1 | 1) => {
    if (checked) return;
    const target = index + direction;
    if (target < 0 || target >= items.length) return;
    const next = [...items];
    [next[index], next[target]] = [next[target], next[index]];
    setItems(next);
  };

  return (
    <>
      <ActivityHeader type="ordering" topic={activity.topic} />
      <PromptCard className="py-4">
        <p className="text-lg font-bold text-frost-950 dark:text-frost-50">{activity.instruction}</p>
        <Hint>
          {checked ? "Here is the correct order:" : "Drag the cards, or use ▲▼, then check your order."}
        </Hint>
      </PromptCard>

      {checked ? (
        <ol className="flex flex-col gap-2.5">
          {activity.items.map((item, index) => {
            const wasRight = items[index] === item;
            return (
              <li
                key={`solution-${item}`}
                className={cn(
                  "flex items-center gap-3 rounded-2xl border-2 px-4 py-3 text-sm font-semibold",
                  wasRight
                    ? "border-emerald-200/80 bg-emerald-50/85 text-emerald-900 dark:border-emerald-400/40 dark:bg-emerald-400/15 dark:text-emerald-100"
                    : "border-rose-200/80 bg-rose-50/85 text-rose-900 dark:border-rose-400/40 dark:bg-rose-400/15 dark:text-rose-100",
                )}
              >
                <span className="grid size-7 shrink-0 place-items-center rounded-full bg-white/70 text-xs font-extrabold dark:bg-white/15">
                  {index + 1}
                </span>
                <span className="flex-1">{item}</span>
              </li>
            );
          })}
        </ol>
      ) : (
        <Reorder.Group axis="y" values={items} onReorder={setItems} className="flex flex-col gap-2.5">
          {items.map((item, index) => (
            <Reorder.Item
              key={item}
              value={item}
              className="flex cursor-grab items-center gap-2 rounded-2xl border border-white/60 bg-white/60 px-3 py-3 text-sm font-semibold text-frost-950 shadow-sm backdrop-blur-xl active:cursor-grabbing dark:border-white/12 dark:bg-white/[0.08] dark:text-frost-50"
            >
              <span className="grid size-7 shrink-0 place-items-center rounded-full bg-frost-100 text-xs font-extrabold text-frost-700 dark:bg-white/15 dark:text-frost-100">
                {index + 1}
              </span>
              <span className="flex-1">{item}</span>
              <span className="flex flex-col">
                <button
                  type="button"
                  aria-label={`Move "${item}" up`}
                  onClick={() => move(index, -1)}
                  disabled={index === 0}
                  className="rounded px-1.5 text-xs text-frost-700 transition hover:bg-frost-100 disabled:opacity-30 dark:text-frost-100 dark:hover:bg-white/10"
                >
                  ▲
                </button>
                <button
                  type="button"
                  aria-label={`Move "${item}" down`}
                  onClick={() => move(index, 1)}
                  disabled={index === items.length - 1}
                  className="rounded px-1.5 text-xs text-frost-700 transition hover:bg-frost-100 disabled:opacity-30 dark:text-frost-100 dark:hover:bg-white/10"
                >
                  ▼
                </button>
              </span>
              <span aria-hidden className="text-frost-400">
                ⠿
              </span>
            </Reorder.Item>
          ))}
        </Reorder.Group>
      )}

      {!checked ? (
        <Button size="lg" onClick={check} disabled={items.length < 2}>
          Check order
        </Button>
      ) : (
        <FeedbackPanel
          correct={correct}
          explanation={activity.explanation}
          xp={activity.xp}
          isLast={isLast}
          onNext={onNext}
        />
      )}
    </>
  );
}