import { useState } from "react";
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";

const questions = [
  {
    q: "What's your ideal weekend?",
    options: [
      { text: "Reading or journaling", type: "soft" },
      { text: "Going on an adventure", type: "bold" },
      { text: "Hanging out with friends", type: "fun" },
      { text: "Working on goals", type: "focused" }
    ]
  },
  {
    q: "Pick a vibe:",
    options: [
      { text: "Calm & aesthetic", type: "soft" },
      { text: "Confident & loud", type: "bold" },
      { text: "Chaotic & funny", type: "fun" },
      { text: "Serious & ambitious", type: "focused" }
    ]
  },
  {
    q: "What attracts you most?",
    options: [
      { text: "Kindness", type: "soft" },
      { text: "Confidence", type: "bold" },
      { text: "Humor", type: "fun" },
      { text: "Discipline", type: "focused" }
    ]
  }
];

export default function App() {
  const [step, setStep] = useState(0);
  const [scores, setScores] = useState({ soft: 0, bold: 0, fun: 0, focused: 0 });
  const [result, setResult] = useState(null);

  const handleAnswer = (type) => {
    const newScores = { ...scores, [type]: scores[type] + 1 };
    setScores(newScores);

    if (step + 1 < questions.length) {
      setStep(step + 1);
    } else {
      const top = Object.keys(newScores).reduce((a, b) =>
        newScores[a] > newScores[b] ? a : b
      );
      setResult(top);
    }
  };

  const getResultText = () => {
    switch (result) {
      case "soft":
        return "A soft, caring boy who understands emotions and supports you quietly 💕";
      case "bold":
        return "A confident, protective boy who isn't afraid to take the lead 🔥";
      case "fun":
        return "A funny, energetic boy who keeps you smiling all the time 😄";
      case "focused":
        return "An ambitious, goal-driven boy who inspires you to grow 🌱";
      default:
        return "";
    }
  };

  return (
    <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-pink-100 to-purple-200 p-4">
      <Card className="w-full max-w-md rounded-2xl shadow-xl">
        <CardContent className="p-6 text-center">
          {!result ? (
            <>
              <h1 className="text-xl font-bold mb-4">Which Boy Suits You? 💭</h1>
              <p className="mb-6">{questions[step].q}</p>
              <div className="grid gap-3">
                {questions[step].options.map((opt, i) => (
                  <Button key={i} onClick={() => handleAnswer(opt.type)}>
                    {opt.text}
                  </Button>
                ))}
              </div>
            </>
          ) : (
            <>
              <h1 className="text-xl font-bold mb-4">Your Result 💖</h1>
              <p className="text-lg">{getResultText()}</p>
              <Button className="mt-6" onClick={() => {
                setStep(0);
                setScores({ soft: 0, bold: 0, fun: 0, focused: 0 });
                setResult(null);
              }}>
                Try Again
              </Button>
            </>
          )}
        </CardContent>
      </Card>
    </div>
  );
}