"use client";

import React, { useEffect, useState } from 'react';
import { useRouter, useSearchParams } from 'next/navigation';
import useSWR from 'swr';
import { useAuth } from '@/context/AuthContext';
import { 
  ArrowPathRoundedSquareIcon, 
  BuildingLibraryIcon, 
  CreditCardIcon,
  PhoneIcon,       // --- اضافه شد ---
  ArrowRightIcon   // --- اضافه شد ---
} from '@heroicons/react/24/outline';
import { TbBrandWhatsapp } from "react-icons/tb"; // --- اضافه شد (نیاز به نصب react-icons) ---
import { motion } from "framer-motion";
import { RequestPayment } from '@/lib/ServerActions/ZarinPalPayment';

const apiFetch = async (url, options = {}) => {
  const res = await fetch(url, { headers: { "Content-Type": "application/json" }, credentials: "include", ...options });
  return res;
};

const fetcher = (...args) => fetch(...args).then((res) => res.json());

const LuxuriousHeader = () => {
  // ✅ Fix: Hook is always called, regardless of loading state
  useEffect(() => {
     document.title = `درگاه پرداخت`;
  }, []);
  const router = useRouter();
  return (
    <motion.header 
      className="sticky top-0 z-30 bg-white/80 backdrop-blur-xl border-b border-gray-100 py-3"
      initial={{ y: -100, opacity: 0 }}
      animate={{ y: 0, opacity: 1 }}
      transition={{ type: "spring", stiffness: 100, damping: 20, delay: 0.1 }}
    >
      <div className="max-w-7xl mx-auto px-6 lg:px-8 flex items-center justify-between">
        <motion.button
          onClick={() => router.back()}
          className="flex items-center gap-1.5 text-sm font-medium text-gray-500 hover:text-gray-900 transition-colors"
          whileHover={{ scale: 1.05 }}
          whileTap={{ scale: 0.95 }}
        >
          <ArrowRightIcon className="w-4 h-4" />
          <span>بازگشت به صفحه قبل</span>
        </motion.button>
        <h1 className="text-base font-bold text-gray-900">
          درگاه پرداخت
        </h1>
      </div>
    </motion.header>
  );
};

export default function OnlinePaymentPage() {
  const router = useRouter();
  const searchParams = useSearchParams();
  const { user } = useAuth();
  
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [loadingText, setLoadingText] = useState('انتقال به درگاه');

  // دریافت پارامترهای محصول از URL
  const productId = searchParams.get('id');
  const costumerIsWarranty= searchParams.get('warranty');
  const costumerWarrantyAmount= searchParams.get('warranty_amount');
  // دریافت اطلاعات محصول برای نمایش قیمت و عنوان
  const { data: productData, isLoading } = useSWR(
    productId? `/api/productorder/${productId}` : null, 
    fetcher
  );
  
  const product = productData?.[0];

  const submitOrder = async () => {
    if (!product || !user) return;

    setIsSubmitting(true);
    setLoadingText('در حال ثبت سفارش...');

    try {
      // ۱. ثبت اولیه سفارش در دیتابیس داخلی
      const res = await apiFetch('/api/orders', {
        method: 'POST',
        body: JSON.stringify({
          productId: product._id,
          selectedColor: decodeURIComponent(searchParams.get('color') || 'freeColor'),
          selectedSize: decodeURIComponent(searchParams.get('size') || 'freeSize'),
          shippingMethod: searchParams.get('shipping'),
          paymentMethod: 'درگاه پرداخت',
          customerExactAddress: user.address,
          costumerPostCode: user.userPostalCode,
          productPrice: product.price,
          seenStatu:true,
          exportCostumerIsWarranty:costumerIsWarranty,
          exportCostumerWarrantyAmount:costumerWarrantyAmount
        }),
      });
      
      const orderData = await res.json();

      if (res.ok && orderData) {
        setLoadingText('در حال تماس با بانک...');

        // پارامترهای مورد نیاز برای درخواست پرداخت
        const paymentParams = {
            amount: orderData.totalPrice || product.price, // مبلغ نهایی (شامل هزینه پست اگر محاسبه شده باشد)
            description: `سفارش محصول ${product.title || product.name || 'فروشگاه'}`,
            mobile: user.mobile || user.phoneNumber || "",
            email: user.email || "",
            orderId: orderData.orderId
        };

        // ۲. درخواست لینک پرداخت از سرور اکشن
        const paymentResult = await RequestPayment(paymentParams);

        if (paymentResult.success) {
            setLoadingText('در حال انتقال...');
            // ۳. هدایت کاربر به درگاه بانکی
            window.location.href = paymentResult.url;
        } else {
            alert(paymentResult.message || "خطا در دریافت شناسه پرداخت");
            setIsSubmitting(false);
        }

      } else {
        alert(orderData.error || "خطا در ثبت اولیه سفارش");
        setIsSubmitting(false);
      }
    } catch (error) {
      console.error("Payment Process Error:", error);
      alert("خطای غیرمنتظره در پردازش عملیات");
      setIsSubmitting(false);
    }
  };

  if (isLoading || !product) {
    return (
        <div className="h-screen flex flex-col items-center justify-center bg-gray-50 gap-3">
            <ArrowPathRoundedSquareIcon className="w-10 h-10 animate-spin text-blue-600" />
            <p className="text-gray-500 text-sm font-normal">در حال بارگذاری اطلاعات محصول...</p>
        </div>
    );
  }

  return (
    <>
      <LuxuriousHeader/>
      <div className="min-h-screen bg-gray-50 p-4 flex flex-col items-center justify-center font-normal" dir="rtl">
        <motion.div 
          initial={{ scale: 0.9, opacity: 0 }} 
          animate={{ scale: 1, opacity: 1 }} 
          className="bg-white p-8 rounded-3xl shadow-xl w-full max-w-md text-center border border-gray-100 my-10"
        >
          <div className="w-20 h-20 bg-blue-50 rounded-full flex items-center justify-center mx-auto mb-6 text-blue-600 shadow-inner ring-4 ring-blue-50/50">
            <BuildingLibraryIcon className="w-10 h-10" />
          </div>
          
          <h2 className="text-2xl !font-bold text-gray-900 mb-2">پرداخت اینترنتی</h2>
          <p className="text-gray-500 mb-6 text-sm leading-7 px-2">
            شما در حال انتقال به درگاه امن زرین‌پال هستید.
          </p>

          {/* خلاصه سفارش */}
          <div className="bg-gray-50 rounded-xl p-4 mb-8 border border-gray-200 text-sm">
              <div className="flex justify-between items-center mb-2">
                  <span className="text-gray-500">محصول:</span>
                  <span className="font-bold text-gray-800 truncate max-w-[150px]">{product.title || product.name}</span>
              </div>
              <div className="flex justify-between items-center pt-2 border-t border-dashed border-gray-300">
                  <span className="text-gray-500">مبلغ قابل پرداخت:</span>
                  <span className="font-bold text-blue-600 text-lg">
                      {Number(product.price).toLocaleString('fa-IR')} <span className="text-xs">تومان</span>
                  </span>
              </div>
              <div className="flex justify-between items-center pt-2 border-t border-dashed border-gray-300">
                  <span className="text-gray-500">هزینه ارسال:</span>
                  <span className="font-medium text-neutral-500 truncate max-w-[150px] text-[0.8rem]">هزینه ارسال پس کرایه</span>
              </div>
              {costumerIsWarranty !== null?<div className="flex justify-between items-center pt-2 border-t border-dashed border-gray-300">
                  <span className="text-gray-500">هزینه گارانتی:</span>
                  <span className="font-medium text-neutral-500 truncate max-w-[150px] text-[0.8rem]">{`جدا گرفته می شود`}</span>
              </div>:''}
          </div>

          {/* دکمه‌های عملیات */}
          <div className="flex gap-3 mb-8">
            <button 
              onClick={() => router.back()} 
              disabled={isSubmitting}
              className="flex-1 py-3.5 rounded-xl border border-gray-200 text-gray-600 font-bold hover:bg-gray-50 transition-colors disabled:opacity-50 text-sm"
            >
              انصراف
            </button>
            
            <button 
              onClick={submitOrder} 
              disabled={isSubmitting}
              className="flex-[2] py-3.5 rounded-xl bg-blue-600 text-white font-bold hover:bg-blue-700 transition-colors flex items-center justify-center gap-2 shadow-lg shadow-blue-200 disabled:bg-blue-400 disabled:cursor-not-allowed text-sm"
            >
              {isSubmitting ? (
                  <>
                      <ArrowPathRoundedSquareIcon className="w-5 h-5 animate-spin" />
                      <span>{loadingText}</span>
                  </>
              ) : (
                  <>
                      <CreditCardIcon className="w-5 h-5" />
                      <span>پرداخت و ثبت نهایی</span>
                  </>
              )}
            </button>
          </div>

          {/* --- بخش جدید: اطلاعات تماس --- */}
          <div className="pt-6 border-t border-gray-100">
              <p className="text-xs text-gray-400 mb-4">نیاز به راهنمایی یا مشاوره دارید؟</p>
              <div className="space-y-3">
                  <a href="https://api.whatsapp.com/send/?phone=989186704541" target="_blank" rel="noreferrer" className="flex items-center justify-between p-3 bg-white border border-gray-200 rounded-xl hover:border-emerald-500 hover:shadow-sm transition-all group">
                      <div className="flex items-center gap-3">
                      <TbBrandWhatsapp className="text-2xl text-emerald-500 group-hover:scale-110 transition" />
                      <span className="font-bold text-sm text-gray-700">تماس با ما در واتساپ</span>
                      </div>
                      <ArrowRightIcon className="w-4 h-4 text-gray-300 rotate-180 group-hover:text-emerald-500 transition-colors" />
                  </a>
                  <a href="tel:09186704541" className="flex items-center justify-between p-3 bg-white border border-gray-200 rounded-xl hover:border-orange-500 hover:shadow-sm transition-all group">
                      <div className="flex items-center gap-3">
                      <PhoneIcon className="w-6 h-6 text-orange-500 group-hover:scale-110 transition" />
                      <span className="font-bold text-sm text-gray-700">تماس تلفنی</span>
                      </div>
                      <ArrowRightIcon className="w-4 h-4 text-gray-300 rotate-180 group-hover:text-orange-500 transition-colors" />
                  </a>
              </div>
          </div>
          {/* ------------------------------- */}

        </motion.div>
      </div>
    </>
  );
}