"use client";

import { motion } from "framer-motion";
import { XCircle, RefreshCcw, Headset, Home, AlertCircle } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import Link from "next/link";

interface FailureViewProps {
  message?: string;
}

export function FailureView({ message }: FailureViewProps) {
  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-red-400 to-rose-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-red-100 rounded-full animate-pulse opacity-50" />
              <XCircle className="h-20 w-20 text-red-500 relative z-10" />
            </motion.div>

            <h1 className="text-3xl md:text-4xl font-bold text-gray-900 mb-2">
              Payment Failed
            </h1>
            <div className="bg-red-50 text-red-700 px-4 py-3 rounded-xl border border-red-100 mb-8 flex items-start gap-3 text-left max-w-md">
              <AlertCircle className="h-5 w-5 mt-0.5 shrink-0" />
              <p className="text-sm font-medium">
                {message ||
                  "We couldn't process your payment at this moment. Please check your bank details or try another payment method."}
              </p>
            </div>

            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 w-full mb-8">
              <Button
                asChild
                className="bg-gray-900 hover:bg-black text-white h-12 rounded-xl text-lg font-semibold group"
              >
                <Link href="/user/fixed-bookings">
                  <RefreshCcw className="mr-2 h-5 w-5 group-hover:rotate-180 transition-transform duration-500" />
                  Try Again
                </Link>
              </Button>
              <Button
                asChild
                variant="outline"
                className="h-12 rounded-xl text-lg font-semibold border-gray-200"
              >
                <Link href="/contact-us">
                  <Headset className="mr-2 h-5 w-5" />
                  Contact Support
                </Link>
              </Button>
            </div>

            <Link
              href="/"
              className="flex items-center text-gray-500 hover:text-purple-600 transition-colors text-sm font-medium"
            >
              <Home className="mr-2 h-4 w-4" />
              Return to Homepage
            </Link>

            <p className="mt-8 text-xs text-gray-400">
              If any amount was deducted from your account, it will be refunded
              within 5-7 business days as per your bank&apos;s policy.
            </p>
          </CardContent>
        </Card>
      </motion.div>
    </div>
  );
}