import Image from "next/image";
import React, { useEffect, useState } from "react";
import styles from "@/styles/common/small.module.css";
import { AiFillCheckCircle } from "react-icons/ai";
import { BsWhatsapp, BsInstagram } from "react-icons/bs";
import { BiLogoFacebook } from "react-icons/bi";
import { FiTwitter } from "react-icons/fi";
import { IoIosCall, IoMdMail } from "react-icons/io";
import Link from "next/link";
import axios from "axios";
import Cookies from "js-cookie";
import { useRouter } from "next/router";
import { Modal, Result } from "antd";
import { orderInterface } from "@/INTERFACES/order";
import ChatScreen from "@/components/chat/ChatScreen";
import Head from "next/head";

export default function ConfirmOrder({ details }: { details: orderInterface }) {
  const router = useRouter();
  // const { order } = router.query;

  const [orders, setorders] = useState<any>([]);
  const [orderItems, setorderItems] = useState<any>([]);

  const [orderModalStatus, setOrderModalStatus] = useState(false);

  // const [openChat,setOpenChat] = useState(false)

  const [openChatItemId, setOpenChatItemId] = useState<string | null>("");

  const [expectedDeliveryDate, setexpectedDeliveryDate] = useState<any>(null);

  const authToken = Cookies.get("jazz_token");

  const axiosInstance = axios.create({
    baseURL: "https://api.jazzagain.com/public/index.php",
    headers: {
      authorization: `Bearer ${authToken}`,
    },
  });

  useEffect(() => {
    // const {order} = router.query
    // console.log("ORDER-QUERY",order)
    // if (order) {
    //   axiosInstance
    //     .get(`/api/user/orders/${details?._id}/edit`)
    //     .then((response) => {
    //       console.log("All-Orders", response.data.order);
    //       setorders(response.data.order);
    //       setorderItems(response.data.order.order_items);
    //       console.log("items-only", response.data.order.order_items);
    //     })
    //     .catch((error) => {
    //       console.error("Error fetching data :", error);
    //     });
    // }
    setorders(details);
    setorderItems(details?.order_items);
    if (
      details?.paymentStatus == "TS" ||
      details?.paymentStatus == "Success" ||
      details?.paymentStatus == "Paid"
    ) {
      // details.order_items.forEach((product) => {
      //   axiosInstance
      //     .delete(`/api/user/carts/${product.productId}`)
      //     .then((response) => {
      //       console.log(
      //         `Delete successful for product ID: ${product.productId}`,
      //         response.data
      //       );
      //     })
      //     .catch((error) => {
      //       console.error(
      //         `Error deleting product ID ${product.productId} from cart:`,
      //         error
      //       );
      //     });
      // });
      setOrderModalStatus(true);
    }
    setOrderModalStatus(true);
    // Assuming orders?.created_at is in the format "YYYY-MM-DD"
    const originalDate = details?.created_at?.split("T")[0];

    // Parse the original date and add 7 days
    const originalDateObj = new Date(originalDate);
    const oneWeekLater = new Date(
      originalDateObj.getTime() + 7 * 24 * 60 * 60 * 1000
    );

    // Format the new date to "YYYY-MM-DD"
    const formattedOneWeekLater = oneWeekLater.toISOString().split("T")[0];
    setexpectedDeliveryDate(formattedOneWeekLater);
  }, [details]);

  // const chatwithSeller = (order:any) =>{
  //   console.log(order)
  //   setOpenChat(true)
  //   setOpenChatItemId()
  // }

  const closeChat = () => {
    setOpenChatItemId(null);
  };

  const openChat = (room: string) => {
    // alert(room)
    // setChatOpen(true);
    setOpenChatItemId(room);
  };

  return (
    <>
      <Head>
        <link rel="shortcut icon" href="/images/jazzagian-logo.png" />
        <script
          dangerouslySetInnerHTML={{
            __html: `
              !function(f,b,e,v,n,t,s)
              {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
              n.callMethod.apply(n,arguments):n.queue.push(arguments)};
              if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
              n.queue=[];t=b.createElement(e);t.async=!0;
              t.src=v;s=b.getElementsByTagName(e)[0];
              s.parentNode.insertBefore(t,s)}(window, document,'script',
              'https://connect.facebook.net/en_US/fbevents.js');
              fbq('init', '360254480441103');
              fbq('track', 'ConfirmOrder');
            `,
          }}
        />
        <noscript>
          <Image
            height="1"
            width="1"
            alt="facebook link"
            style={{ display: "none" }}
            src="https://www.facebook.com/tr?id=360254480441103&ev=confirmOrder&noscript=1"
          />
        </noscript>
      </Head>

      {details?.paymentStatus == "TS" ||
      details?.paymentStatus == "Success" ||
      details?.paymentStatus == "Paid" ? (
        <Modal
          centered={true}
          title=""
          open={orderModalStatus}
          onCancel={() => setOrderModalStatus(false)}
          maskStyle={{ background: "gray", opacity: 0.6 }}
          footer={null}
        >
          <Result
            status="success"
            title="Successfully Purchased"
            subTitle={`Order number: ${details.orderId}`}
          />
        </Modal>
      ) : (
        <Modal
          centered={true}
          title=""
          open={orderModalStatus}
          onCancel={() => setOrderModalStatus(false)}
          maskStyle={{ background: "gray", opacity: 0.6 }}
          footer={null}
        >
          <Result
            status="error"
            title={details?.paymentStatus}
            // subTitle={`Order number: ${details.orderId}`}
          />
        </Modal>
      )}
      <div
        className={"rounded-md w-[90%] lg:w-[75%] mx-auto p-3 m-3 bg-white ".concat(
          styles.shadowsmooth
        )}
      >
        <div>
          {/* <p className="text-2xl font-bold text-center text-gray-800">
          Order Number
        </p> */}
          <AiFillCheckCircle
            size={60}
            className="text-[#42ac50] flex items-center w-full"
          />
          <p className="text-center text-gray-600 font-semibold">
            Thanks for your order
          </p>
          <div className="text-center p-2 py-4">
            <span className="bg-[#FF332B] text-xl px-3 p-1 rounded-2xl text-white">
              Order Number : {orders?.id}
            </span>
          </div>
        </div>

        {/* {/ order summary /} */}
        <div className="mt-[3rem] mb-[.8rem] px-2">
          <p className="text-xl font-bold text-center text-gray-800">
            Order Summary
          </p>
          <div>
            <ul className="p-2 bg-gray-200 my-3 font-semibold grid grid-cols-3 justify-around">
              <li className="">Item</li>
              <li className="text-center">Information</li>
              <li className="text-right">Price</li>
            </ul>
            {orderItems?.map((item: any, index: number) => {
              return (
                <div
                  className="grid grid-cols-3 space-y-1 justify-around mt-3"
                  key={index}
                >
                  <Image
                    src={`https://api.jazzagain.com/public/${item.product.productFeaturedImage}`}
                    width={100}
                    height={100}
                    alt="featured product image"
                    className="h-32 w-32 object-cover rounded-md"
                  />

                  <div className="font-semibold text-xs">
                    <p>{item.product.productTitle}</p>
                  </div>
                  <div className="text-gray-500">
                    <p>
                      {item.variations.length === 0
                        ? null
                        : item.variations.map((v: any, index: number) => {
                            return (
                              <span key={index} className="mx-2">
                                {v.variationName}
                              </span>
                            );
                          })}
                    </p>
                    {openChatItemId && (
                      <ChatScreen
                        name={item?.product?.createdBy.name}
                        isOpen={openChatItemId === item._id}
                        onClose={closeChat}
                        room={item._id}
                        sender={item.userId}
                        reciever={item?.product?.createdBy._id}
                      />
                    )}
                    <button
                      onClick={() => openChat(item._id)}
                      className="bg-black text-white p-1 rounded-lg lg:p-2"
                    >
                      Chat with Seller{" "}
                    </button>
                  </div>
                  <p> &#8358; {item.totalAmount}</p>
                </div>
              );
            })}
          </div>
        </div>

        <div>
          <h3 className="text-xl font-bold text-center text-gray-800 py-2">
            Your Details
          </h3>
          <hr className="border-b border-gray-300 my-1" />

          <div className="flex justify-between py-1">
            <div className="text-xs px-3">
              <p className="text-gray-500">Name</p>
              <p className="text-gray-800 font-semibold">{orders?.name}</p>
            </div>

            <div className="text-xs px-3">
              <p className="text-gray-500">Home address</p>
              <p className="text-gray-800 font-semibold">Nigeria</p>
            </div>
          </div>

          <div className="flex justify-between py-1">
            <div className="text-xs px-3">
              <p className="text-gray-500">Mobile</p>
              <p className="text-gray-800 font-semibold">
                {orders?.billingAddress?.phone}
              </p>
            </div>

            <div className="text-xs px-4">
              <p className="text-gray-500">Order number</p>
              <p className="text-gray-800 font-semibold">{orders?.id}</p>
            </div>
          </div>
          <div className="flex justify-between py-1">
            <div className="text-xs px-3">
              <p className="text-gray-500">Email</p>
              <p className="text-gray-800 mailto:font-semibold">
                {orders?.billingAddress?.email}
              </p>
            </div>

            <div className="text-xs px-8">
              <p className="text-gray-500">Order date</p>
              <p className="text-gray-800 font-semibold">
                {orders?.created_at?.split("T")[0]}
              </p>
            </div>
          </div>
        </div>

        {/* {/ items that ship /} */}
        <div className="py-2 pt-4">
          <h3 className="text-xl font-bold text-center text-gray-800">
            Shipping Details
          </h3>
          <hr className="border-b border-gray-300 my-2" />

          <div className="flex justify-between text-xs px-3">
            <div>
              <h3 className="font-semibold py-1">Shipping to:</h3>
              <p className="text-gray-600">
                {orders?.billingAddress?.address1}
                <br />
                {/* {orders?.billingAddress?.streatAddress}<br />
              Zipcode-{orders?.billingAddress?.postalCode} */}
              </p>
            </div>
            <div>
              <h3 className="font-semibold py-1">Billing to:</h3>
              <p className="text-gray-600">
                {orders?.billingAddress?.address1}
                <br />
                {/* {orders?.billingAddress?.streatAddress}<br /> */}
                {/* Zipcode-{orders?.billingAddress?.postalCode} */}
              </p>
            </div>
          </div>
        </div>

        {/* estimated date to delivery */}
        <div>
          <h3 className="text-xl font-bold text-center text-gray-800 pt-3">
            Estimated date to delivery
          </h3>
          <hr className="border-b border-gray-300 my-2 " />
          <div className="text-center text-xs">
            {/* <p className="text-gray-500 p-1 pt-1 pb-3">
            {orderItems[0]?.orderId}
          </p> */}
          </div>
          <div className="text-xs">
            <p className="flex justify-between px-3">
              <span className="text-gray-800">ORDER NUMBER</span>
              <span className="text-gray-500">{orders?.id}</span>
            </p>

            <p className="flex justify-between px-3">
              <span className="text-gray-800">EXPECTED DELIVERY DATE</span>
              <span className="text-gray-500">{expectedDeliveryDate}</span>
            </p>

            {/* <p className="flex justify-between px-3">
            <span className="text-gray-800">EXPECTED DATE OF DELIVERY</span>
            <span className="text-gray-500">23 September 2023</span>
          </p> */}
          </div>
        </div>

        <hr className="border border-dashed border-gray-300 my-2" />

        {/* <div className="px-3">
        <div className="text-xs">
          <span className="text-gray-500">Shipping Method : </span>
          <span className="font-semibold text-gray-800">
            Free (5 Bussiness Days*) (Via Smart post).
          </span>
        </div>
        <p className="text-gray-600 text-[10px] italic">
          *some shipping areas may rake up to 7 business days for delivery
        </p>
      </div> */}

        {/* {/ Payment Method /} */}
        <div className="px-3 pt-[1rem]">
          <p className="text-xl font-bold text-center text-gray-800 py-1">
            Payment Method
          </p>
          <hr className="border-b border-gray-300 my-1" />
          <div>
            <p className="font-semibold text-gray-700 text-xs py-2">
              PAYMENT TYPE
            </p>
            <div className="flex items-center">
              <Image
                src={"/images/card.png"}
                width={50}
                height={50}
                alt="payment card image"
                className="h-14 w-20"
              />
              <p className="text-gray-400 text-xs p-2">Mastercard</p>
            </div>
          </div>
        </div>

        {/* {/ payment summary /} */}
        <div className="mt-[1rem] m-3">
          <p className="text-xl font-bold text-center text-gray-800">
            Payment Summary
          </p>
          <hr className="border-b border-gray-300 my-2" />
          <p className="flex justify-between text-xs text-gray-600">
            <span>SUBTOTAL</span>
            <span> &#8358; {orders?.subTotalAmount}</span>
          </p>
          <p className="flex justify-between text-xs text-gray-600">
            <span>DELIVERY CHARGES</span>
            <span>
              {" "}
              {Number(orders?.totalAmount) - Number(orders?.subTotalAmount)}
            </span>
          </p>

          <hr className="border-b border-gray-300 my-1" />
          <p className="flex justify-between text-xs text-gray-800 font-semibold">
            <span>TOTAL</span>
            <span> &#8358; {orders?.totalAmount}</span>
          </p>
        </div>

        <div className="py-2 pt-[1.5rem]">
          <h3 className="text-xl font-bold text-center text-gray-800 py-1">
            Customer Care Support
          </h3>
          <div className="space-y-2 bg-gray-200 px-3 p-2">
            <div className="flex items-center space-x-2">
              <IoIosCall
                size={25}
                className="bg-[#FF332B] rounded-full text-white p-1"
              />

              <p className="text-sm font-semibold text-gray-800">
                Any Questions?
              </p>
            </div>
            <div className="flex items-center space-x-2">
              <IoMdMail
                size={25}
                className="bg-[#FF332B] rounded-full text-white p-1"
              />
              <p className="text-xs text-gray-700">
                If you need any help whatsoever or just want to chat on email
                and call us anytime.
              </p>
            </div>
          </div>
        </div>

        <div>
          <h3 className="text-center text-sm font-semibold text-gray-700 py-2">
            FOLLOW US ON
          </h3>
          <div className="flex justify-center space-x-3 text-white">
            <Link href={"/"}>
              {" "}
              <BsWhatsapp size={30} className="bg-[#FF332B] p-1 rounded-full" />
            </Link>
            <Link href={"/"}>
              {" "}
              <BiLogoFacebook
                size={30}
                className="bg-[#FF332B] p-1 rounded-full"
              />
            </Link>
            <Link href={"/"}>
              {" "}
              <BsInstagram
                size={30}
                className="bg-[#FF332B] p-1 rounded-full"
              />
            </Link>
            <Link href={"/"}>
              {" "}
              <FiTwitter size={30} className="bg-[#FF332B] p-1 rounded-full" />
            </Link>
          </div>
        </div>
      </div>
    </>
  );
}
