import { Button } from "@/components/ui/button";
import { BlueTick } from "../BlueTick";
import type { FunnelData } from "../types";
import { motion } from "framer-motion";
import { XCircle, Send, RotateCcw, Sparkles } from "lucide-react";

const PASS = 95;
const RECIPIENT = "bluetick@gloovup.com";

function buildMail(data: FunnelData) {
  const body = [
    "Blue Tick Verification Request",
    "================================",
    `Name: ${data.user.fullName}`,
    `Email: ${data.user.email}`,
    `Phone: ${data.user.phone}`,
    `Instagram: @${data.user.instagram}`,
    `Score: ${data.score}/100`,
    `Screenshot: ${data.screenshotName ?? "—"}`,
    "",
    "Quiz Answers:",
    ...data.answers.map(
      (a, i) =>
        `${i + 1}. ${a.question}\n   Answer: ${a.answer}\n   Correct: ${a.correct}\n   Result: ${a.isCorrect ? "✓" : "✕"}`
    ),
  ].join("\n");

  const subject = encodeURIComponent("Blue Tick Request Submission");
  return `mailto:${RECIPIENT}?subject=${subject}&body=${encodeURIComponent(body)}`;
}

export function Result({
  data,
  onRestart,
}: {
  data: FunnelData;
  onRestart: () => void;
}) {
  const passed = data.score >= PASS;

  if (!passed) {
    return (
      <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} className="text-center space-y-6">
        <div className="flex justify-center">
          <div className="w-24 h-24 rounded-full flex items-center justify-center bg-destructive/15 border border-destructive/30">
            <XCircle className="w-12 h-12 text-destructive" />
          </div>
        </div>
        <div>
          <h2 className="text-3xl md:text-4xl font-bold">Not Eligible Yet</h2>
          <p className="text-5xl font-bold mt-4 text-destructive">{data.score}<span className="text-lg text-muted-foreground">/100</span></p>
        </div>
        <p className="text-muted-foreground max-w-md mx-auto">
          You need <span className="text-foreground font-semibold">{PASS}+</span> to qualify. Strengthen your personal branding,
          authority and content strategy — then try again.
        </p>
        <Button variant="glass" size="lg" onClick={onRestart}>
          <RotateCcw className="w-4 h-4" /> Try Again
        </Button>
      </motion.div>
    );
  }

  return (
    <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} className="text-center space-y-6">
      <div className="flex justify-center">
        <BlueTick size={100} />
      </div>
      <div className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full glass-card text-xs">
        <Sparkles className="w-3.5 h-3.5 text-primary" /> You qualified
      </div>
      <div>
        <h2 className="text-3xl md:text-4xl font-bold text-gradient">You're Eligible</h2>
        <p className="text-5xl font-bold mt-4">{data.score}<span className="text-lg text-muted-foreground">/100</span></p>
      </div>
      <p className="text-muted-foreground max-w-md mx-auto">
        Congratulations <span className="text-foreground font-medium">{data.user.fullName.split(" ")[0]}</span> —
        you can now submit your verification request.
      </p>
      <a href={buildMail(data)}>
        <Button variant="hero" size="xl">
          <Send className="w-5 h-5" /> Submit Verification Request
        </Button>
      </a>
      <p className="text-xs text-muted-foreground/70">
        Your details will be sent to {RECIPIENT}
      </p>
    </motion.div>
  );
}