import Banner from "../banner";
import RowsSilder from "./rowsSilder";
import { Suspense} from "react";
import Loader from "@/components/Loader";
import DownLoadBuuton from "@/components/DownloadButton";
import WhatsAppBuuton from "@/components/ShareButton";
import axios from "axios";

const getDetails = async (searchParams: string) => {
  const formData = new FormData();
  formData.append("vin", searchParams);

const response = await axios.post("https://rwotech.com/test_api/", formData, {
    headers: {
      'Cache-Control': 'no-store'
    }
  });

  if (response.status < 200 || response.status >= 300) {
    throw new Error("Failed to fetch data");
  }

  return response.data;
};
export default async function TrackDetails({
  searchParams,
}: {
  searchParams?: { [tn: string]: any | string[] } | undefined;
}) {
  const data: TrackDetail_T = await getDetails(searchParams?.tn);
  return (
    <>
      <Banner searchParams={searchParams} />
      <Suspense fallback={<Loader />}>
        <div className=" w-full text-center">
          <h1 className="mt-5 _headingUnderline" id='show'>Shipment Status </h1>
        </div>
     
        {data.vehicle_details !== "no data found" ? (
          data.container_details !== "no data found" &&(
        
            <div className="warpper mx-auto max-w-1 md:px-5">
              <div className="grid grid-flow-row">
                <div className="mt-[5%] relative overflow-x-auto ">
                  <div className="grid grid-flow-row">
                    <div className="bg-gray-500 mb-8">
                      <h3 className="px-6 py-3 ">Vehicles Details</h3>
                    </div>
                    <div className="grid lg:grid-cols-2 md:grid-cols-2 grid-cols-1 gap-3">
                      <div className="w-full text-sm text-left text-balck-500 grid grid-flow-row">
                        <div className="grid grid-cols-2 t_r_container">
                          <div className="px-6 py-2">Model</div>
                          <div className="px-6 py-2">
                          {data.vehicle_details.year} {data.vehicle_details.makenmodel}
                          </div>
                        </div>
                        <div className="grid grid-cols-2 t_r_container">
                          <div className="px-6 py-2">Vin Number</div>
                          <div className="px-6 py-2">{data.vehicle_details.vin}</div>
                        </div>
                        <div className="grid grid-cols-2  t_r_container">
                          <div className="px-6 py-2">Lot</div>
                          <div className="px-6 py-2">
                            {data.vehicle_details.lot}
                          </div>
                        </div>
                        <div className="grid grid-cols-2 t_r_container">
                          <div className="px-6 py-2">Keys</div>
                          <div className="px-6 py-2">
                            {data.vehicle_details.keys}
                          </div>
                        </div>
                        <div className="grid grid-cols-2  t_r_container">
                          <div className="px-6 py-2">Date</div>
                          <div className="px-6 py-2">
                             {data.vehicle_details.date}
                          </div>
                        </div>
                        <div className="grid grid-cols-2 t_r_container">
                          <div className="px-6 py-2">
                            Promised to be picked up
                          </div>
                          <div className="px-6 py-2">
                             {data.vehicle_details.promised_pickup}
                          </div>
                        </div>
                      </div>

                      <div className="w-full text-sm text-left text-balck-500 ">
                        <div className="grid grid-cols-2 t_r_container">
                          <div className="px-6 py-2">Color</div>
                          <div className="px-6 py-2">
                             {data.vehicle_details.color}
                          </div>
                        </div>
                        <div className="grid grid-cols-2 t_r_container">
                          <div className="px-6 py-2">Buyer number</div>
                          <div className="px-6 py-2">
                             {data.vehicle_details.buyer_number}
                          </div>
                        </div>
                        <div className="grid grid-cols-2 t_r_container">
                          <div className="px-6 py-2">City</div>
                          <div className="px-6 py-2">
                             {data.vehicle_details.city}
                          </div>
                        </div>
                        <div className="grid grid-cols-2 t_r_container">
                          <div className="px-6 py-2"/>
                          <div className="px-6 py-2"/>
                        </div>
                        <div className=" grid grid-cols-2 t_r_container  ">
                          <div className="px-6 py-2">
                            Delivered to warehouse
                          </div>
                          <div className="px-6 py-2">
                          
                            {data.vehicle_details.delivery_warehouse_date}
                          </div>
                        </div>
                        <div className="grid grid-cols-2 ">
                          <div className="px-6 py-2">
                            Promised to be delivered
                          </div>
                          <div className="px-6 py-2">
                             {data.vehicle_details.promised_delivery}
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <br />
                  <br />
                  <div className="grid grid-flow-row">
                    <div className="bg-gray-500 mb-8">
                      <h3 className="px-6 py-3 ">Container Details</h3>
                    </div>
                    <div className="grid lg:grid-cols-2 md:grid-cols-2 grid-cols-1">
                      <div className="mr-3">
                        <div className="w-full text-sm text-left ">
                          <div className=" grid grid-cols-2 t_r_container ">
                            <div className="px-6 py-2">Container number</div>
                            <div className="px-6 py-2">
                               {data.container_details.container_number}
                            </div>
                          </div>
                          <div className="grid grid-cols-2 t_r_container ">
                            <div className="px-6 py-2">Point of loading</div>
                            <div className="px-6 py-2">
                               {data.container_details.point_loading}
                            </div>
                          </div>
                          <div className=" grid grid-cols-2 t_r_container ">
                            <div className="px-6 py-2">Loading date</div>
                            <div className="px-6 py-2">
                               {data.container_details.loading_date}
                            </div>
                          </div>
                          <div className="grid grid-cols-2 t_r_container ">
                            <div className="px-6 py-2">
                              Expected Arrival Date
                            </div>
                            <div className="px-6 py-2">
                              {" "}
                              {data.container_details.expected_arrival_date}
                            </div>
                          </div>
                        </div>
                      </div>
                      <div>
                        <div className="w-full text-sm text-left ">
                          <div className=" grid grid-cols-2 t_r_container ">
                            <div className="px-6 py-2">Booking number</div>
                            <div className="px-6 py-2">
                               {data.container_details.booking_number}
                            </div>
                          </div>
                          <div className="grid grid-cols-2 t_r_container ">
                            <div className="px-6 py-2">Destination port</div>
                            <div className="px-6 py-2">
                            {data.container_details.destination_port}
                            </div>
                          </div>
                          <div className=" grid grid-cols-2">
                            <div className="px-6 py-2"/>
                            <div className="px-6 py-2"/>
                          </div>
                          <div className="grid grid-cols-2 t_r_container ">
                            <div className="px-6 py-2">Arrival Date</div>
                            <div className="px-6 py-2">
                              {" "}
                              {data.container_details.arrival_date}
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
            
                </div>
              </div> 
              <pre>{JSON.stringify(data, null, 2)}</pre>
              {data.images !== "no images found" && 
               <>
                `${data.images }`
                <div className="grid grid-flow-row mt-10">
                <div className="bg-gray-500 px-6 py-2  items-center flex lg:flex-row  justify-between">
                  <h3 className="">Product Images</h3>
                  <div className="flex gap-3">
                  <WhatsAppBuuton searchParams={searchParams?.tn}/>
            
                  </div>
                </div>
              </div> 
             <RowsSilder carImgList={data.images} />
               </>
                }
            </div>
          )
        ) : (
          <div className=" w-full text-center">
            <h6 className="mt-10 _headingUnderline">
              Tracking record not found{" "}
            </h6>
          </div>
        )}
      </Suspense>
    </>
  );
}