"use client"
import React, { useEffect, useState } from 'react'
import AppTable from '@/components/UiComponents/table/AppTable';
import { Dropdown, Spin, Tag } from 'antd';
import { DotsIcon, FailedIcon, SuccessIcon, TrashIcon, ViewIcon } from '@/assets/svgs/TraderIcons';
import { CashIcon, VisaIcon } from '@/assets/svgs/Icons';
import ImageWithFallback from '@/components/UiComponents/ImageWithFallback';
import LocalePath from '@/components/UiComponents/LocalePath';
import { showDynamicSwal } from '@/utils/helpers';
import axiosInstance from '@/services/axiosClient';
import toast from 'react-hot-toast';
import Success from "@/assets/images/success2.gif";
import { ArIcon } from '@/assets/svgs/Icons';
import { ClientIcon, LocationIcon, MessageIcon, PhoneIcon } from '@/assets/svgs/TraderIcons';
import { useTranslations } from 'next-intl';
import { useRouter, useSearchParams } from 'next/navigation';
import { getTopBuyer } from '@/services/ClientApiHandler';
import RenderPaymentInfo from '@/components/sharedComponents/cards/RenderPayment';

const ClientDetails = ({id}:{id:string}) => {

  const t = useTranslations() ;
    const [loading, setLoading] = useState<boolean>(true);
    const [delLoading, setDelLoading] = useState<boolean>(false);
    const [buyer,setBuyer] = useState<any>({});
    const [orders,setOrders] = useState<any>({});
    const router = useRouter();
    const searchParams = useSearchParams();

    const fetchData = async () => {
      try{
        setLoading(true);
        const params = new URLSearchParams(searchParams.toString());
        const {buyer,orders} = await getTopBuyer(id,params);
          setOrders(orders);
          setBuyer(buyer);
      }catch(error:any){
        toast.error(error.response?.data?.message )
      }finally{
        setLoading(false);
      }
    };

    useEffect(() => {
      fetchData();
    }, [searchParams.toString()]);

    const handlePageChange = (page: number) => {
      const params = new URLSearchParams(searchParams.toString());
      params.set("page", page.toString());
      router.push(`?${params.toString()}`);
    };

    const handleDel = async (orderId:string)=>{
      try{
        const result = await showDynamicSwal({
                    title: t("Text.cancel_order"),
                    text: t("Text.cancel_order_desc"),
                    confirmButtonText: t("buttons.ok"),
                    cancelButtonText: t("buttons.noKeepMe"),
                    customClass:{
                      icon:"hidden-icon",
                      title:"swal-title",
                      confirmButton:"app-btn alert-btn",
                      cancelButton:"app-btn outline-btn"
                    },
                })
        
        if(result.isConfirmed){
            setDelLoading(true)
            const {data} = await axiosInstance.delete(`/my-orders/${orderId}`)
            if(data){
              await showDynamicSwal({
                title: t("orders.cancel_order"),
                imageUrl: `${Success.src}`,
                text: "",
                confirmButtonText: t("NAV.home"),
                showCancelButton: false,
                showConfirmButton: false,
                timer: 1500,
                customClass: {
                  title: "swal-title",
                  text: "hidden",
                },
              });
              fetchData();
            }
  
        }
      }catch(error:any){
        toast.error(error?.response?.data?.message);
      }finally{
        setDelLoading(false)
      }
    }
    
    const handleChangeStatus = async (orderNumber:string,status:string)=>{
      try{
            setDelLoading(true)
            const {data} = await axiosInstance.patch(`/my-orders/${orderNumber}/change-status`,{"status" : status })
            if(data){
                await showDynamicSwal({
                title: t("Text.accept_order"),
                imageUrl: `${Success.src}`,
                text: "",
                confirmButtonText: t("NAV.home"),
                showCancelButton: false,
                showConfirmButton: false,
                timer: 1500,
                customClass: {
                  title: "swal-title",
                  text: "hidden",
                },
              });
              fetchData();
            }
      }catch(error:any){
        toast.error(error?.response?.data?.message);
      }finally{
        setDelLoading(false)
      }
    }
  
    const clientData = [
      {
        label:t("LABELS.userName"),
        value:buyer?.name,
        icon :<ClientIcon/>
      },
      {
        label:t("LABELS.phoneNumber"),
        value : <span className='flex items-center'><ArIcon className="me-3"/> {buyer?.phone} {buyer?.phone_code}</span>,
        icon:<PhoneIcon/>
      },
      {
        label:t("LABELS.email"),
        value : buyer?.email,
        icon:<MessageIcon/>
      },
      ...(buyer?.location ?[
        {
          label:t("LABELS.address"),
          value : buyer?.location?.address,
          icon:<LocationIcon/>
        }
      ]:[])
    ]

    const columns = [
      {
        title: t("tables.orderNumber"),
        dataIndex: "uuid",
        key: "uuid",
      },
      {
        title: t("tables.products"),
        dataIndex: "products",
        key: "products",
        render: (_: any,record:any) => (
          <div className="flex items-center min-w-[6rem]">
            {record?.products?.slice(0,3)?.map((el:any, index:number) => (
              <ImageWithFallback
                key={`products_image_${index}`}
                src={el}
                width={80}
                height={80}
                alt={`product-name`}
                className="size-12 object-contain -me-6 bg-greynormal rounded-2xl border border-platinum"
              />
            ))}
          </div>
        ),
      },
      {
        title: t("tables.price"),
        dataIndex: "price",
        key: "price",
      },
      {
            title: t("tables.orderStatus"),
            dataIndex: "status",
            key: "status",
            render: (status: any) => (
              <Tag
                color={
                  status === "pending"
                    ? "gray"
                    : status == "prepared"
                    ? "purple"
                    : status === "cancelled"
                    ? "red"
                    : status === "shipped"
                    ? "gold":"green"
                }
              >
                {t(`status.${status}`)}
              </Tag>
            ),
          },
          {
            title: t("tables.paymentMethod"),
            dataIndex: "payment_method",
            key: "payment_method",
            render: (method: string) =><RenderPaymentInfo payment_method={method} />,
          },
          {
            title: t("tables.paymentStatus"),
            dataIndex: "payment_status",
            key: "payment_status",
            render: (status: any) => (
              <span
                className={`flex items-center gap-2 ${
                  status === "paid" ? "text-success" : "text-error"
                }`}
              >
                {status === "paid" ? <SuccessIcon /> : <FailedIcon />}
                {t(`tables.${status}`)}
              </span>
            ),
          },
          {
            title: t("tables.orderDate"),
            dataIndex: "created_at",
            key: "created_at",
          },
          {
            title: t("tables.action"),
            key: "action",
            render: (_: any, record: any) => {
              if (record.status == "pending") {
                return (
                  <div className="flex-center-content gap-2">
                    <button onClick={()=>handleDel(record?.id)} className="app-btn outline-btn !py-2.5 !px-5 !min-h-fit !text-sm !min-w-10">
                      {t("tables.reject")}
                    </button>
                    <button onClick={()=>handleChangeStatus(record?.uuid,"prepared")} className="app-btn !py-2.5 !px-5 !min-h-fit !text-sm !min-w-10">
                      {t("tables.accept")}
                    </button>
                  </div>
                );
              }
      
              const items = [
                {
                  key: "1",
                  label: (
                    <LocalePath href={`/received-orders/${record?.uuid}`} className="flex items-center gap-1 text-sm text-gray-500">
                      <ViewIcon /> {t("buttons.view")}
                    </LocalePath>
                  ),
                },
                {
                  key: "2",
                  label: (
                    <button onClick={()=>handleDel(record?.id)} className="flex items-center gap-1 text-sm text-gray-500">
                      <TrashIcon /> {t("buttons.delete")} 
                    </button>
                  ),
                },
              ];
          
              return (
                <Dropdown
                  menu={{ items }}
                  placement="bottom"
                  trigger={["click"]}
                >
                  <Spin spinning={delLoading}>
                    <button className="border border-platinum rounded-xl p-2">
                      <DotsIcon />
                    </button>
                  </Spin>
                </Dropdown>
              );
            },
            align: "center",
          },
    ];
      
  return (
    <Spin spinning={loading}>
      <div className='my-8 bg-white p-6 rounded-[24px]'>
          <div className="py-3 pe-3 flex items-center gap-4">
              <figure key={`figure_${buyer?.image}`} className="size-14 rounded-full overflow-hidden bg-greynormal">
                <ImageWithFallback
                    src={buyer?.image}
                    width={80}
                    height={80}
                    alt={buyer?.name}
                    className=" size-full object-contain"
                    style={{ mixBlendMode: "multiply" }}
                />
              </figure>
              <div>
                  <p className="flex items-center justify-between mb-2 font-bold text-xs  md:text-sm">{buyer?.name}</p>
                  <p className="text-[#797979] font-semibold ">{t("orders.order",{count:buyer?.order_count})}</p>
              </div>
          </div>
          <div className='flex items-center gap-14 flex-wrap my-6'>
            {clientData.map((data,index)=>(
              <div className='font-semibold text-[#111213]' key={`client_data_${index}`}>
                  <div className='flex items-center gap-1 mb-2 text-[#7F8690] '>{data.icon} {data.label}</div>
                  <div className='flex items-center gap-1 ps-5'>{data.value}</div>
              </div>
            ))}
          </div>
      </div>
      <AppTable 
        columns={columns} 
        dataSource={orders?.data} 
        pagination={{
        pageSize: orders?.meta?.per_page,
        total: orders?.meta?.total,
        current: orders?.meta?.current_page,
        onChange: handlePageChange,
      }}
        tableTitle={t("orders.orders_count",{count:buyer?.order_count})}
        showSelection={false} 
      />
    </Spin>
  )
}

export default ClientDetails