"use client";

import { useEffect } from "react";
import { useDispatch } from "react-redux";
import { useRouter, usePathname } from "next/navigation";
import { useTranslations } from "next-intl";
import { resetStatus } from "@/store/slices/cart-slice";
import Image from "next/image";
import Link from "next/link";
import BreadcrumbBalmy from "@/components/balmy/breadcrumb-balmy";
import confetti from "canvas-confetti";


export default function Success({ data }: any) {
  const dispatch = useDispatch();
  const router = useRouter();
  const pathname = usePathname();
  const locale = pathname?.split("/")[1] || "ar";
  const t = useTranslations("order");

  const handleGoHome = () => {
    dispatch(resetStatus());
    router.push(`/${locale}/home`);
  };

  // 🎉 Celebratory confetti burst on order completion
  useEffect(() => {
    const duration = 3000;
    const end = Date.now() + duration;

    const frame = () => {
      confetti({
        particleCount: 3,
        angle: 60,
        spread: 55,
        origin: { x: 0 },
        colors: ["#ef4444", "#f97316", "#eab308", "#22c55e", "#3b82f6"],
      });
      confetti({
        particleCount: 3,
        angle: 120,
        spread: 55,
        origin: { x: 1 },
        colors: ["#ef4444", "#f97316", "#eab308", "#22c55e", "#3b82f6"],
      });

      if (Date.now() < end) {
        requestAnimationFrame(frame);
      }
    };

    // Respect reduced-motion preference
    const prefersReduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    if (!prefersReduced) {
      frame();
    }
  }, []);

  const breadcrumbItems = [
    { label: t("home") || "الرئيسة", href: `/${locale}/home` },
    { label: t("thank-you") || "شكرا لك" },
  ];

  return (
    <div className="w-full" dir="rtl">
      {/* Breadcrumb */}
      <BreadcrumbBalmy items={breadcrumbItems} className="mb-8" />

      {/* Main Content — split layout */}
      <div className="flex flex-col lg:flex-row items-center justify-between gap-12 lg:gap-20 py-12 lg:py-20">

        {/* Left Side — Thank You Message */}
        <div className="flex-1 flex flex-col items-center lg:items-start text-center lg:text-right order-2 lg:order-1">
          <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold text-black font-cairo mb-6 tracking-wide">
            {t("thank-you-heading") || "!شكـــــرا لك"}
          </h1>

          <p className="text-lg md:text-xl text-gray-600 font-cairo mb-4">
            {t("appreciate-time") || "نقــدر وقتــك واهتمــامك"}
          </p>

          <p className="text-sm md:text-base text-gray-500 font-cairo mb-6 max-w-md leading-relaxed">
            {t("order-received-message") || ".تم استلام طلبك بنجاح، وسيقوم فريقنا بمراجعته والتواصل معك في أقرب وقت ممكن"}
          </p>

          <p className="text-sm text-gray-400 font-cairo mb-10">
            {t("contact-prompt") || "إذا كان لديك أي استفسار إضافي، لا تتردد في التواصل معنا"}
          </p>

          {/* Action Button */}
          <button
            onClick={handleGoHome}
            className="inline-flex h-12 items-center justify-center rounded-lg bg-black px-10 text-base font-medium text-white font-cairo hover:bg-gray-800 transition-colors"
          >
            {t("continue-shopping") || "مواصلة التسوق"}
          </button>
        </div>

        {/* Right Side — Balmy Logo & Tagline */}
        <div className="flex-1 flex flex-col items-center justify-center order-1 lg:order-2">
          <Image
            src="/images/balmy-logo.png"
            alt="Balmy"
            width={200}
            height={200}
            className="w-40 md:w-52 lg:w-60 h-auto object-contain mb-6"
          />
          <p className="text-lg md:text-xl text-black font-cairo font-medium text-center">
            وجهتك الأولى للعطور العالمية الأصلية
          </p>
        </div>
      </div>
    </div>
  );
}