import { useState } from "react";
import { ArrowRight, RotateCcw } from "lucide-react";
import { Link } from "@tanstack/react-router";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";

const questions = [
  {
    question: "What do you most need right now?",
    options: [
      { label: "Clarity on who I am and why I'm here", key: "purpose" },
      { label: "A deeper walk of worship", key: "worship" },
      { label: "Wisdom to lead well", key: "lead" },
      { label: "To love and serve my community better", key: "neighbour" },
    ],
  },
  {
    question: "Which season best describes your life?",
    options: [
      { label: "New beginnings — I'm finding my footing", key: "purpose" },
      { label: "Hungry — I want more of God", key: "worship" },
      { label: "Growing — I carry responsibility", key: "lead" },
      { label: "Settled — I want to give back", key: "neighbour" },
    ],
  },
  {
    question: "How do you prefer to grow?",
    options: [
      { label: "Story and reflection", key: "neighbour" },
      { label: "Scripture and devotion", key: "worship" },
      { label: "Practical tools and frameworks", key: "lead" },
      { label: "Identity and inner work", key: "purpose" },
    ],
  },
];

const results: Record<string, { title: string; blurb: string }> = {
  purpose: {
    title: "Awake, Arise, Become",
    blurb: "Unlock the promise within — awaken to your identity, arise in faith, become who God created you to be.",
  },
  worship: {
    title: "The Heart of a Worshipper",
    blurb: "Building a life of worship beyond the stage — for the hungry and the humble.",
  },
  lead: {
    title: "The Overlapper's Mindset",
    blurb: "Unlocking potential across realms — lead across every arena of life without losing your centre.",
  },
  neighbour: {
    title: "A Good Neighbour",
    blurb: "Blessed to be a blessing — intentional, compassionate living that transforms communities.",
  },
};

/** "Find your next read" mini quiz — three questions, one recommendation. */
export function BookQuiz() {
  const [step, setStep] = useState(0);
  const [scores, setScores] = useState<Record<string, number>>({});
  const [finished, setFinished] = useState(false);

  function choose(key: string) {
    const next = { ...scores, [key]: (scores[key] ?? 0) + 1 };
    setScores(next);
    if (step + 1 >= questions.length) setFinished(true);
    else setStep(step + 1);
  }

  function restart() {
    setStep(0);
    setScores({});
    setFinished(false);
  }

  const winner = finished
    ? Object.entries(scores).sort((a, b) => b[1] - a[1])[0]?.[0] ?? "purpose"
    : null;
  const result = winner ? results[winner] : null;

  if (finished && result) {
    return (
      <div className="rounded-2xl border border-gold/40 bg-card p-8 text-center sm:p-10">
        <p className="eyebrow text-[0.6rem] text-terra">Your next read</p>
        <h3 className="mt-3 font-display text-3xl text-jungle">
          {result.title.split(" ").slice(0, -1).join(" ")}{" "}
          <span className="gold-text">{result.title.split(" ").slice(-1)}</span>
        </h3>
        <p className="mx-auto mt-3 max-w-md text-sm leading-relaxed text-muted-foreground">
          {result.blurb}
        </p>
        <div className="mt-6 flex flex-wrap items-center justify-center gap-3">
          <Button asChild variant="green">
            <Link to="/books">
              Explore the books <ArrowRight className="h-4 w-4" />
            </Link>
          </Button>
          <Button variant="outline-gold" onClick={restart}>
            <RotateCcw className="h-4 w-4" /> Try again
          </Button>
        </div>
      </div>
    );
  }

  const current = questions[step] ?? questions[0]!;

  return (
    <div className="rounded-2xl border border-gold/40 bg-card p-8 sm:p-10">
      <div className="mb-6 flex items-center justify-between">
        <p className="eyebrow text-[0.6rem] text-terra">
          Question {step + 1} of {questions.length}
        </p>
        <div className="flex gap-1.5">
          {questions.map((_, i) => (
            <span
              key={i}
              className={cn("h-1.5 w-6 rounded-full", i <= step ? "bg-gold" : "bg-gold/25")}
            />
          ))}
        </div>
      </div>
      <h3 className="font-display text-2xl text-jungle">{current.question}</h3>
      <div className="mt-6 grid gap-3">
        {current.options.map((opt) => (
          <button
            key={opt.label}
            type="button"
            onClick={() => choose(opt.key)}
            className="group flex items-center justify-between rounded-xl border border-gold/25 bg-background px-5 py-4 text-left text-sm font-medium transition-colors hover:border-gold hover:bg-terra-soft"
          >
            {opt.label}
            <ArrowRight className="h-4 w-4 text-gold opacity-0 transition-opacity group-hover:opacity-100" />
          </button>
        ))}
      </div>
    </div>
  );
}