import { createFileRoute } from "@tanstack/react-router";
import { useState } from "react";
import { Button } from "@/components/ui/button";
import { Progress } from "@/components/ui/progress";
import { Heart, ArrowRight } from "lucide-react";

export const Route = createFileRoute("/")({
  head: () => ({
    meta: [
      { title: "Find your perfect match — Love Quiz" },
      {
        name: "description",
        content:
          "Answer 6 quick questions and discover people who match you today.",
      },
      { property: "og:title", content: "Find your perfect match — Love Quiz" },
      {
        property: "og:description",
        content:
          "Answer 6 quick questions and discover people who match you today.",
      },
    ],
  }),
  component: Index,
});

// TODO: replace with your affiliate offer URL
const AFFILIATE_URL = "https://example.com/offer";

type Step = {
  key: string;
  question: string;
  options: string[];
};

const STEPS: Step[] = [
  {
    key: "gender",
    question: "What is your gender?",
    options: ["Man", "Woman", "Other"],
  },
  {
    key: "interest",
    question: "Who are you interested in?",
    options: ["Men", "Women", "Both"],
  },
  {
    key: "age",
    question: "What is your age range?",
    options: ["18-25", "26-35", "36-45", "46+"],
  },
  {
    key: "goal",
    question: "What are you looking for?",
    options: [
      "A serious relationship",
      "Something casual",
      "New friendships",
      "Not sure yet",
    ],
  },
  {
    key: "status",
    question: "What is your current status?",
    options: ["Single", "Divorced", "Widowed", "It's complicated"],
  },
  {
    key: "location",
    question: "Where do you live?",
    options: ["Big city", "Suburbs", "Small town", "Rural area"],
  },
];

function Index() {
  const [step, setStep] = useState(0);
  const [answers, setAnswers] = useState<Record<string, string>>({});
  const [finished, setFinished] = useState(false);

  const total = STEPS.length;
  const progress = finished ? 100 : (step / total) * 100;

  const handleSelect = (value: string) => {
    const current = STEPS[step];
    setAnswers((prev) => ({ ...prev, [current.key]: value }));
    if (step + 1 < total) {
      setStep(step + 1);
    } else {
      setFinished(true);
    }
  };

  void answers;

  return (
    <main
      className="flex min-h-screen flex-col items-center justify-center px-4 py-10"
      style={{ backgroundColor: "#fff5f7" }}
    >
      <div className="w-full max-w-xl">
        <div className="mb-6 flex items-center justify-center gap-2">
          <Heart className="h-6 w-6 text-rose-500" fill="currentColor" />
          <h1 className="text-2xl font-bold text-rose-600">Love Quiz</h1>
        </div>

        <div className="rounded-2xl bg-white p-6 shadow-lg sm:p-8">
          <div className="mb-6">
            <div className="mb-2 flex justify-between text-sm text-muted-foreground">
              <span>
                {finished ? "Completed" : `Step ${step + 1} of ${total}`}
              </span>
              <span>{Math.round(progress)}%</span>
            </div>
            <Progress value={progress} className="h-2" />
          </div>

          {!finished ? (
            <div>
              <h2 className="mb-6 text-center text-xl font-semibold text-slate-800 sm:text-2xl">
                {STEPS[step].question}
              </h2>
              <div className="flex flex-col gap-3">
                {STEPS[step].options.map((opt) => (
                  <button
                    key={opt}
                    onClick={() => handleSelect(opt)}
                    className="w-full rounded-xl border-2 border-rose-100 bg-rose-50/40 px-5 py-4 text-left text-base font-medium text-slate-800 transition hover:border-rose-400 hover:bg-rose-50 hover:shadow-md active:scale-[0.99]"
                  >
                    {opt}
                  </button>
                ))}
              </div>
            </div>
          ) : (
            <div className="text-center">
              <div className="mb-4 flex justify-center">
                <div className="rounded-full bg-rose-100 p-4">
                  <Heart
                    className="h-10 w-10 text-rose-500"
                    fill="currentColor"
                  />
                </div>
              </div>
              <h2 className="mb-3 text-2xl font-bold text-slate-800">
                We found perfect matches for you!
              </h2>
              <p className="mb-6 text-slate-600">
                Based on your answers, we've selected people compatible with
                your profile. Click below to see them now — it's free.
              </p>
              <Button
                asChild
                size="lg"
                className="h-14 w-full bg-rose-500 text-lg font-bold hover:bg-rose-600"
              >
                <a
                  href={AFFILIATE_URL}
                  target="_blank"
                  rel="noopener sponsored"
                >
                  See my matches
                  <ArrowRight className="ml-2 h-5 w-5" />
                </a>
              </Button>
              <p className="mt-4 text-xs text-muted-foreground">
                You will be redirected to our partner.
              </p>
            </div>
          )}
        </div>

      </div>
      <footer className="mt-16 w-full text-center">
        <p className="mx-auto mb-4 max-w-3xl text-sm text-slate-600">
          You must be 18 or older to use this site.
        </p>
        <nav className="mb-4 flex flex-wrap items-center justify-center gap-x-6 gap-y-2 text-sm text-slate-600">
          <a href="/about-us" className="hover:text-rose-600">About Us</a>
          <a href="/privacy-policy" className="hover:text-rose-600">Privacy Policy</a>
        </nav>
        <p className="text-xs text-slate-500">
          © 2026 LoveQuiz. All rights reserved. Information is updated monthly and may vary.
        </p>
      </footer>
    </main>
  );
}