/* eslint-disable @typescript-eslint/no-explicit-any */
"use client";

import { useQuery } from "@tanstack/react-query";
import { getShipmentDetails } from "../../../../../Api/ShipmentApi";
import { useSearchParams } from "next/navigation";
import { useEffect, useState } from "react";

export default function TableManifest({ PriceList = {}, id }: any) {
  const searchParams = useSearchParams();
  const urlId = searchParams.get("id"); // read from ?id=123
  const [shipmentId, setShipmentId] = useState<number | null>(
    id ?? PriceList?.id ?? PriceList?.shipmentId ?? (urlId ? Number(urlId) : null)
  );

  // Update shipmentId if URL changes
  useEffect(() => {
    if (urlId) {
      setShipmentId(Number(urlId));
    }
  }, [urlId]);

  const { data: fetchedDetails, isLoading } = useQuery({
    queryKey: ["shipmentDetails", shipmentId],
    queryFn: () => getShipmentDetails(Number(shipmentId)),
    enabled: !!shipmentId,
  });

  const manifestList =
    (PriceList?.shipmentDetails?.manifest_list ??
      fetchedDetails?.shipmentDetails?.manifest_list ??
      fetchedDetails?.manifest_list ??
      []) as any[];

  return (
    <table
      border={1}
      align="center"
      cellPadding={10}
      style={{
        width: "100%",
        margin: "auto",
        padding: "30px",
        border: "1px solid #eee",
        fontSize: "14px",
        lineHeight: "24px",
        fontFamily:
          "'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif",
        color: "#555",
      }}
    >
      <thead>
        <tr style={{ backgroundColor: "#752F8A", color: "#fff" }}>
          <th>Delybell Order ID*</th>
          <th>Customer Order ID</th>
          <th>Box Id</th>
          <th>Recvr Name</th>
          <th>Recvr Cnct No.</th>
          <th>Recvr Email</th>
          <th>Item Desc.</th>
          <th>Decl Val</th>
          <th>Decl Val Currency</th>
          <th>Total Weight</th>
          <th>HSCode</th>
        </tr>
      </thead>
      <tbody>
        {isLoading ? (
          <tr>
            <td colSpan={13}>Loading...</td>
          </tr>
        ) : manifestList?.length > 0 ? (
          manifestList.map((item: any, index: number) => (
            <tr key={index}>
              <td>{item?.delybellGeneratedOrderId}</td>
              <td>{item?.customerOrderId}</td>
              <td>{item?.boxId}</td>
              <td>{item?.receiverName}</td>
              <td>{item?.receiverContactNumber}</td>
              <td>{item?.receiverEmail}</td>
              <td>{item?.itemDescription}</td>
              <td>{item?.declaredValue}</td>
              <td>{item?.declaredValueCurrency}</td>
              <td>{item?.totalWeight}</td>
              <td>{item?.hsCode}</td>
            </tr>
          ))
        ) : (
          <tr>
            <td colSpan={13}>No Data Found</td>
          </tr>
        )}
        <tr>
          <td colSpan={13} style={{ textAlign: "center", fontSize: "12px" }}>
            <p className="mb-0">
              Make all cheques payable to INTERCITY EXPRESS CARGO CO. WLL
            </p>
            <p className="mb-0">
              If you have any questions concerning this Settlement, call: 3717
              2727, Email: accounts@delybell.com
            </p>
            <p className="mb-0">
              <span style={{ color: "#FF0000" }}>*</span> This is a
              computer-generated Settlement. No signature required.
            </p>
          </td>
        </tr>
      </tbody>
    </table>
  );
}