"use client";
import React, { useEffect, useState } from "react";
import { motion } from "motion/react";
import { 
  CheckCircle2, 
  Package, 
  Calendar, 
  MapPin, 
  ChevronLeft,
  Sparkles,
  Heart
} from "lucide-react";
import { useCartStore } from "../lib/store/cartStore";
import { usePetStore } from "../lib/store/usePetStore";

import { useRouter } from 'next/navigation';

export default function OrderSuccess({ orderId }: { orderId: string }) {
  const router = useRouter();
  const { orders } = useCartStore();
  const { getActivePet } = usePetStore();
  const order = orders.find(o => o.id === orderId);
  const activePet = getActivePet();

  if (!order) return null;

  const hasCanhydrox = order.items.some(i => i.product.id === 'canhydrox-gag');

  return (
    <div className="min-h-screen bg-medical-gray-50 py-20 px-6 font-vazir" dir="rtl">
      <div className="max-w-3xl mx-auto">
        <motion.div 
          initial={{ scale: 0.9, opacity: 0 }}
          animate={{ scale: 1, opacity: 1 }}
          className="bg-white rounded-[4rem] border border-medical-gray-200 p-12 text-center shadow-2xl relative overflow-hidden"
        >
          {/* Confetti-like background elements */}
          <div className="absolute top-0 left-0 w-full h-2 bg-gradient-to-r from-canino-blue via-green-500 to-canino-blue" />
          
          <div className="w-24 h-24 bg-green-50 text-green-600 rounded-full flex items-center justify-center mx-auto mb-10 shadow-inner">
            <CheckCircle2 className="w-12 h-12" />
          </div>

          <h2 className="text-4xl font-black text-medical-gray-900 italic mb-4">سفارش شما با موفقیت ثبت شد!</h2>
          <p className="text-medical-gray-500 font-bold mb-10">شماره سفارش: <span className="text-canino-blue font-mono">{order.id}</span></p>

          {/* Empathetic Message */}
          <motion.div 
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: 0.3 }}
            className="p-8 bg-canino-blue/5 border border-canino-blue/10 rounded-[3rem] mb-12 text-right relative"
          >
             <Sparkles className="absolute top-6 left-6 w-8 h-8 text-canino-blue opacity-20" />
             <div className="flex items-center gap-4 mb-4">
                <div className="w-10 h-10 bg-white rounded-2xl flex items-center justify-center text-canino-blue shadow-sm">
                   <Heart className="w-6 h-6 fill-current" />
                </div>
                <h4 className="text-lg font-black text-canino-blue italic">خیالت راحت باشه!</h4>
             </div>
             <p className="text-sm font-bold text-canino-blue/80 leading-relaxed">
                {activePet ? (
                  <>
                    انتخاب درستی برای <span className="text-canino-blue font-black">{activePet.name}</span> کردی. 
                    {hasCanhydrox ? (
                      ` مکمل Canhydrox با فرمول آلمانی‌اش دقیقاً همون چیزیه که استخوان‌های ${activePet.name} برای بازیگوشی دوباره بهش نیاز دارن.`
                    ) : (
                      ` محصولات انتخابی شما با بالاترین استانداردهای دارویی آلمان تولید شده‌اند و به زودی به دست ${activePet.name} می‌رسند.`
                    )}
                  </>
                ) : (
                  "سفارش شما با رعایت تمامی استانداردهای کیفی آلمان در حال دسته‌بندی است. از اعتماد شما به سلامت پت‌ها سپاسگزاریم."
                )}
             </p>
          </motion.div>

          <div className="grid md:grid-cols-2 gap-6 text-right mb-12">
            <div className="p-6 bg-medical-gray-50 rounded-3xl border border-medical-gray-100 flex items-center gap-4">
               <Package className="w-8 h-8 text-medical-gray-400" />
               <div>
                  <p className="text-[10px] font-black text-medical-gray-400 uppercase tracking-widest">وضعیت ارسال</p>
                  <p className="text-sm font-black text-medical-gray-900 italic">در حال پردازش در انبار</p>
               </div>
            </div>
            <div className="p-6 bg-medical-gray-50 rounded-3xl border border-medical-gray-100 flex items-center gap-4">
               <Calendar className="w-8 h-8 text-medical-gray-400" />
               <div>
                  <p className="text-[10px] font-black text-medical-gray-400 uppercase tracking-widest">تخمین تحویل</p>
                  <p className="text-sm font-black text-medical-gray-900 italic">۴۸ تا ۷۲ ساعت کاری</p>
               </div>
            </div>
          </div>

          <div className="space-y-4">
            <button 
              onClick={() => router.push('/track')}
              className="w-full bg-medical-gray-900 text-white py-5 rounded-2xl font-black text-lg hover:bg-canino-blue transition-all"
            >
              مشاهده و پیگیری زنده سفارش
            </button>
            <button 
              onClick={() => router.push('/shop')}
              className="flex items-center justify-center gap-2 w-full text-medical-gray-400 font-bold hover:text-canino-blue transition-colors"
            >
              <ChevronLeft className="w-4 h-4" />
              بازگشت به فروشگاه
            </button>
          </div>
        </motion.div>
      </div>
    </div>
  );
}