"use client";

import { motion } from "framer-motion";
import { CheckCircle2, ArrowRight, ReceiptText } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import Link from "next/link";

interface SuccessViewProps {
  paymentId?: string;
  referenceId?: string;
  moduleType?: string;
}

export function SuccessView({
  paymentId,
  referenceId,
  moduleType,
}: SuccessViewProps) {
  const isVehicleBooking =
    moduleType === "vehicle" || referenceId?.toUpperCase().startsWith("VB-");
  const bookingsHref = isVehicleBooking
    ? "/user/vehicle-bookings"
    : "/user/fixed-bookings";

  return (
    <div className="min-h-[80vh] flex items-center justify-center p-4">
      <motion.div
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.5 }}
        className="max-w-2xl w-full"
      >
        <Card className="border-none shadow-2xl overflow-hidden bg-white/80 backdrop-blur-sm">
          <div className="absolute top-0 left-0 w-full h-2 bg-linear-to-r from-green-400 to-emerald-600" />
          <CardContent className="pt-12 pb-8 px-6 md:px-12 flex flex-col items-center text-center">
            <motion.div
              initial={{ scale: 0 }}
              animate={{ scale: 1 }}
              transition={{
                delay: 0.2,
                type: "spring",
                stiffness: 200,
                damping: 10,
              }}
              className="mb-6 relative"
            >
              <div className="absolute inset-0 bg-green-100 rounded-full animate-ping opacity-25" />
              <CheckCircle2 className="h-20 w-20 text-green-500 relative z-10" />
            </motion.div>

            <h1 className="text-3xl md:text-4xl font-bold text-gray-900 mb-2">
              Payment Successful!
            </h1>
            <p className="text-gray-500 text-lg mb-8 max-w-md">
              Thank you for choosing Ameera Holidays. Your spiritual journey is
              now confirmed and we&apos;re excited to have you.
            </p>

            <div className="w-full grid md:grid-cols-2 gap-4 mb-8">
              <div className="bg-gray-50 rounded-2xl p-4 flex flex-col items-center justify-center border border-gray-100">
                <ReceiptText className="h-5 w-5 text-purple-500 mb-2" />
                <span className="text-xs text-gray-400 uppercase tracking-wider font-semibold">
                  Payment ID
                </span>
                <span className="text-sm font-mono text-gray-700 mt-1 truncate w-full">
                  {paymentId || "N/A"}
                </span>
              </div>
              <div className="bg-gray-50 rounded-2xl p-4 flex flex-col items-center justify-center border border-gray-100">
                <div className="h-5 w-5 flex items-center justify-center text-purple-500 mb-2">
                  #
                </div>
                <span className="text-xs text-gray-400 uppercase tracking-wider font-semibold">
                  Reference ID
                </span>
                <span className="text-sm font-mono text-gray-700 mt-1 truncate w-full">
                  {referenceId || "N/A"}
                </span>
              </div>
            </div>

            <div className="flex flex-col sm:flex-row gap-4 w-full">
              <Button
                asChild
                className="flex-1 bg-purple-600 hover:bg-purple-700 text-white h-12 rounded-xl text-lg font-semibold group"
              >
                <Link href={bookingsHref}>
                  View Bookings
                  <ArrowRight className="ml-2 h-5 w-5 group-hover:translate-x-1 transition-transform" />
                </Link>
              </Button>
              <Button
                asChild
                variant="outline"
                className="flex-1 h-12 rounded-xl text-lg font-semibold border-gray-200"
              >
                <Link href="/">Return Home</Link>
              </Button>
            </div>

            <p className="mt-8 text-sm text-gray-400">
              A confirmation email with all details has been sent to your
              registered email address.
            </p>
          </CardContent>
        </Card>
      </motion.div>
    </div>
  );
}