import { createFileRoute, Link } from "@tanstack/react-router";
import { useQuery } from "@tanstack/react-query";
import { motion } from "framer-motion";
import { CheckCircle2, XCircle, Trophy, RotateCcw, ArrowRight } from "lucide-react";
import { PageHeader } from "@/components/common/PageBits";
import { Button } from "@/components/ui/button";
import { Skeleton } from "@/components/ui/skeleton";
import { quizService } from "@/services";
import { useQuizStore } from "@/store";
import { cn } from "@/lib/utils";

export const Route = createFileRoute("/_app/quiz/results")({
  head: () => ({ meta: [{ title: "Quiz Results — Study Unique" }] }),
  component: ResultsPage,
});

function ResultsPage() {
  const quiz = useQuery({ queryKey: ["quiz"], queryFn: quizService.get });
  const attempts = useQuery({ queryKey: ["attempts"], queryFn: quizService.attempts });
  const { answers, reset } = useQuizStore();

  if (quiz.isLoading || !quiz.data) {
    return <Skeleton className="m-6 h-96" />;
  }

  const latest = attempts.data?.[0];
  const score = latest?.score ?? 0;
  const total = latest?.total ?? quiz.data.questions.length;
  const pct = Math.round((score / total) * 100);

  return (
    <div className="mx-auto w-full max-w-4xl space-y-6 p-4 md:p-6">
      <PageHeader
        title="Quiz results"
        description={quiz.data.title}
        actions={
          <>
            <Link to="/quiz">
              <Button variant="outline" onClick={() => reset()}>
                <RotateCcw className="mr-1.5 h-4 w-4" /> Retake
              </Button>
            </Link>
            <Link to="/flashcards">
              <Button className="gradient-brand text-primary-foreground">
                Study weak areas <ArrowRight className="ml-1.5 h-4 w-4" />
              </Button>
            </Link>
          </>
        }
      />

      <motion.div
        initial={{ opacity: 0, y: 8 }}
        animate={{ opacity: 1, y: 0 }}
        className="relative overflow-hidden rounded-3xl border border-border bg-card p-8 text-center"
      >
        <div className="absolute inset-0 -z-10 gradient-mesh opacity-40" aria-hidden />
        <div className="mx-auto flex h-16 w-16 items-center justify-center rounded-2xl gradient-brand shadow-2xl shadow-primary/40">
          <Trophy className="h-7 w-7 text-primary-foreground" />
        </div>
        <p className="mt-5 text-5xl font-bold tracking-tight">
          {score}
          <span className="text-2xl text-muted-foreground">/{total}</span>
        </p>
        <p className="mt-2 text-sm text-muted-foreground">
          You scored <span className="font-semibold text-foreground">{pct}%</span> —{" "}
          {pct >= 80 ? "excellent work!" : pct >= 60 ? "solid effort — keep going." : "let's review and try again."}
        </p>
        <div className="mx-auto mt-6 grid max-w-md grid-cols-3 gap-3">
          <Stat label="Correct" value={String(score)} tone="success" />
          <Stat label="Incorrect" value={String(total - score)} tone="destructive" />
          <Stat label="Time" value={`${Math.round((latest?.durationSec ?? 0) / 60)}m`} tone="muted" />
        </div>
      </motion.div>

      <div className="space-y-3">
        <h2 className="text-sm font-semibold">Review answers</h2>
        {quiz.data.questions.map((q, i) => {
          const picked = (latest?.answers ?? answers)[q.id];
          const correct = picked === q.correctIndex;
          return (
            <div key={q.id} className="rounded-2xl border border-border bg-card p-5">
              <div className="flex items-start gap-3">
                <div
                  className={cn(
                    "mt-0.5 flex h-7 w-7 items-center justify-center rounded-full",
                    correct ? "bg-success/15 text-success" : "bg-destructive/15 text-destructive",
                  )}
                >
                  {correct ? <CheckCircle2 className="h-4 w-4" /> : <XCircle className="h-4 w-4" />}
                </div>
                <div className="min-w-0 flex-1">
                  <p className="text-xs text-muted-foreground">Question {i + 1}</p>
                  <p className="mt-0.5 font-medium">{q.prompt}</p>
                  <div className="mt-3 space-y-1.5">
                    {q.options.map((o, j) => (
                      <div
                        key={j}
                        className={cn(
                          "rounded-md border px-3 py-1.5 text-sm",
                          j === q.correctIndex
                            ? "border-success/40 bg-success/5"
                            : j === picked
                              ? "border-destructive/40 bg-destructive/5"
                              : "border-border",
                        )}
                      >
                        <span className="mr-2 text-xs font-semibold text-muted-foreground">
                          {String.fromCharCode(65 + j)}
                        </span>
                        {o}
                      </div>
                    ))}
                  </div>
                  <p className="mt-3 text-xs text-muted-foreground">
                    <span className="font-medium text-foreground">Explanation:</span> {q.explanation}
                  </p>
                </div>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

function Stat({ label, value, tone }: { label: string; value: string; tone: "success" | "destructive" | "muted" }) {
  const toneMap = {
    success: "text-success border-success/30 bg-success/5",
    destructive: "text-destructive border-destructive/30 bg-destructive/5",
    muted: "text-foreground border-border bg-background",
  };
  return (
    <div className={cn("rounded-xl border p-3", toneMap[tone])}>
      <p className="text-[11px] uppercase tracking-wider opacity-80">{label}</p>
      <p className="mt-0.5 text-xl font-semibold">{value}</p>
    </div>
  );
}