/* eslint-disable @typescript-eslint/no-explicit-any */
/* eslint-disable @typescript-eslint/no-unused-vars */
/* eslint-disable @next/next/no-img-element */
import React from "react";
import NoData from "../../../NoDataContainer/NoData";
import { amountFormat, serviceTypeBasedDate } from "../../../../lib/Helper";

interface AddressPrintTemplateA4Props {
  order?: {
    shipByDate?: string;
    weight?: string;
    orderId?: string;
    parcelInfo?: string;
    paymentType?: string;
    recipientName?: string;
    recipientAddress?: string;
    recipientPhone?: string;
    boxInfo?: string;
    blockNo?: string;
    packageDescription?: string;
    senderName?: string;
    senderAddress?: string;
    senderPostcode?: string;
    amount?: string;
    deliveryType?: string;
    trackingNumber?: string;
    barCode?: string;
  };
}

const AddressPrintTemplateA4: React.FC<any> = ({ order }) => {
  const formatDate = (dateString?: string) => {
    if (!dateString) return "N/A";
    const date = new Date(dateString);
    return date.toLocaleDateString("en-US", {
      day: "2-digit",
      month: "long",
      year: "numeric",
    });
  };

  return (
    <>
      <div id="print-page-a4">
        <table
          style={{
            width: "100%", // Changed from "auto" to "100%"
            height: "auto", // Changed from "297mm"
            padding: "0", // Changed from "10mm" to "0"
            border: "none",
            display: "block!important",
            margin: "0 auto", // Added margin auto for centering table
          }}
        >
          <tr>
            <td style={{ border: 0, width: "100%", height: "100%", padding: "10mm" }}> {/* Added padding to td */}
              {/* Logo Section */}
              <table style={{ width: "100%", borderBottom: "1px solid #757575" }}>
                <thead>
                  <tr>
                    <th
                      style={{
                        width: "35%",
                        height: "56px",
                        padding: "5px",
                        lineHeight: "normal",
                        borderRight: 0,
                      }}
                    >
                      <img
                        src="images/app/logo-hat.png"
                        style={{
                          width: "120px",
                          height: "auto",
                          lineHeight: "normal",
                        }}
                        alt="Logo"
                      />
                    </th>
                    <th
                      style={{
                        width: "65%",
                        padding: "5px",
                        textAlign: "end",
                        lineHeight: "normal",
                        borderLeft: 0,
                      }}
                    >
                      <img
                        src={order?.order?.bar_code}
                        style={{ height: "75px", lineHeight: "normal" }}
                        alt="Barcode"
                      />
                    </th>
                  </tr>
                </thead>
              </table>

              {/* Order Details Section */}
              <table
                style={{
                  width: "100%",
                  marginTop: "10px",
                  borderCollapse: "collapse",
                  overflow: "hidden",
                }}
              >
                <thead>
                  <tr>
                    <th
                      style={{
                        width: "60%",
                        border: "1px solid #757575",
                        padding: "5px",
                        textAlign: "left",
                      }}
                    >
                      <h3
                        style={{ margin: 0, fontWeight: 600, fontSize: "13px" }}
                      >
                        Order Details
                      </h3>
                    </th>
                    <th
                      style={{
                        width: "40%",
                        border: "1px solid #757575",
                        padding: "5px",
                        textAlign: "left",
                      }}
                    >
                      <h3
                        style={{ margin: 0, fontWeight: 600, fontSize: "13px" }}
                      >
                        {order?.order?.generated_order_id ??
                          "Order Details (Courier)"}
                      </h3>
                    </th>
                  </tr>
                  <tr>
                    <th
                      style={{
                        width: "60%",
                        border: "1px solid #757575",
                        padding: "5px",
                        textAlign: "left",
                      }}
                    >
                      <table style={{ width: "100%" }}>
                        <tbody>
                          <tr>
                            <td>
                              <p style={{ margin: 0, fontWeight: 400 }}>
                                Ship By Date:
                              </p>
                            </td>
                            <td>
                              <p style={{ margin: 0, fontWeight: 400 }}>
                                {order?.delivery_preference_date
                                  ? formatDate(order?.delivery_preference_date)
                                  : serviceTypeBasedDate(order?.service_type)}
                              </p>
                            </td>
                          </tr>
                          <tr>
                            <td>
                              <p style={{ margin: 0, fontWeight: 400 }}>
                                Weight (KG):
                              </p>
                            </td>
                            <td>
                              <p style={{ margin: 0, fontWeight: 400 }}>
                                {order?.order?.total_weight || "0.00"}
                              </p>
                            </td>
                          </tr>
                          <tr>
                            <td>
                              <p style={{ margin: 0, fontWeight: 400 }}>
                                Order ID:
                              </p>
                            </td>
                            <td>
                              <p style={{ margin: 0, fontWeight: 500 }}>
                                {order?.order?.customer_input_order_id ?? order?.order?.generated_order_id ?? ""}
                              </p>
                            </td>
                          </tr>
                        </tbody>
                      </table>
                    </th>
                    <th
                      style={{
                        width: "40%",
                        border: "1px solid #757575",
                        padding: "5px",
                        textAlign: "left",
                      }}
                    >
                      <table style={{ width: "100%", alignContent: "start" }}>
                        <tbody>
                          <tr>
                            <td
                              rowSpan={2}
                              colSpan={2}
                              style={{ textAlign: "center" }}
                            >
                              <p
                                style={{
                                  margin: 0,
                                  fontWeight: 700,
                                  fontSize: "26px",
                                }}
                              >
                                {order?.paymentType || ""}
                              </p>
                            </td>
                          </tr>
                        </tbody>
                      </table>
                    </th>
                  </tr>
                </thead>
              </table>

              {/* Recipient Details Section */}
              <table
                style={{
                  width: "100%",
                  marginTop: "10px",
                  borderCollapse: "collapse",
                  overflow: "hidden",
                }}
              >
                <thead>
                  <tr>
                    <th
                      style={{
                        width: "60%",
                        border: "1px solid #757575",
                        textAlign: "left",
                        borderCollapse: "collapse",
                        verticalAlign: "top",
                      }}
                    >
                      <table
                        style={{ width: "100%", borderCollapse: "collapse" }}
                      >
                        <thead>
                          <tr>
                            <th
                              colSpan={2}
                              style={{
                                padding: "5px",
                                borderBottom: "1px solid #757575",
                                textAlign: "left",
                                borderCollapse: "collapse",
                              }}
                            >
                              <h3
                                style={{
                                  margin: 0,
                                  fontWeight: 600,
                                  fontSize: "13px",
                                }}
                              >
                                Recipient Details
                              </h3>
                            </th>
                          </tr>
                        </thead>
                        <tbody>
                          <tr>
                            <td
                              colSpan={2}
                              style={{ alignContent: "start", padding: "5px" }}
                            >
                              <p style={{ margin: 0, fontWeight: 600 }}>
                                {order?.recipientName || "N/A"}
                              </p>
                            </td>
                          </tr>
                          <tr>
                            <td
                              colSpan={2}
                              style={{ alignContent: "start", padding: "5px" }}
                            >
                              <p style={{ margin: 0, fontWeight: 400 }}>
                                {order?.recipientAddress || "N/A"}
                              </p>
                            </td>
                          </tr>
                          <tr>
                            <td
                              colSpan={2}
                              style={{
                                alignContent: "start",
                                padding: "0px 5px",
                              }}
                            >
                              <p style={{ margin: 0, fontWeight: 400 }}>
                                {order?.recipientPhoneNumber ||
                                  ""}
                              </p>
                            </td>
                          </tr>
                        </tbody>
                      </table>
                    </th>
                    <th
                      style={{
                        width: "40%",
                        border: "1px solid #757575",
                        textAlign: "left",
                        alignContent: "center",
                      }}
                    >
                      <table
                        style={{ width: "100%", borderCollapse: "collapse" }}
                      >
                        <thead>
                          <tr>
                            <th
                              colSpan={2}
                              style={{
                                alignContent: "center",
                                padding: "5px",
                                borderBottom: "1px solid #757575",
                                textAlign: "center",
                                borderCollapse: "collapse",
                              }}
                            >
                              <h3
                                style={{
                                  margin: 0,
                                  fontWeight: 600,
                                  fontSize: "22px",
                                }}
                              >
                                {order?.blockNo || "---"}
                              </h3>
                            </th>
                          </tr>
                        </thead>
                        <tbody>
                          <tr>
                            <td
                              style={{
                                alignContent: "center",
                                padding: "5px",
                                borderBottom: "1px solid #757575",
                                textAlign: "center",
                              }}
                            >
                              <h3
                                style={{
                                  margin: 0,
                                  fontWeight: 600,
                                  fontSize: "14px",
                                }}
                              >
                                {order?.boxInfo || "---"}
                              </h3>
                            </td>
                          </tr>
                          <tr>
                            <td
                              style={{
                                alignContent: "center",
                                padding: "5px",
                                borderBottom: "0px solid #757575",
                                textAlign: "center",
                              }}
                            >
                              <h3
                                style={{
                                  margin: 0,
                                  fontWeight: 600,
                                  fontSize: "14px",
                                }}
                              >
                                {order?.deliveryType || "---"}
                              </h3>
                            </td>
                          </tr>
                        </tbody>
                      </table>
                    </th>
                  </tr>
                  <tr>
                    <th
                      colSpan={2}
                      style={{
                        width: "100%",
                        padding: "5px",
                        border: "1px solid #757575",
                        textAlign: "left",
                        borderCollapse: "collapse",
                        verticalAlign: "top",
                      }}
                    >
                      <h3
                        style={{ margin: 0, fontWeight: 600, fontSize: "13px" }}
                      >
                        Package Description
                      </h3>
                      <p
                        style={{ margin: 0, marginTop: "5px", fontWeight: 400 }}
                      >
                        {order?.packageDescription || "N/A"}
                      </p>
                    </th>
                  </tr>
                  <tr>
                    <th
                      style={{
                        width: "60%",
                        border: "1px solid #757575",
                        textAlign: "left",
                        borderCollapse: "collapse",
                        verticalAlign: "top",
                      }}
                    >
                      <table
                        style={{ width: "100%", borderCollapse: "collapse" }}
                      >
                        <thead>
                          <tr>
                            <th
                              colSpan={2}
                              style={{
                                padding: "5px",
                                borderTop: "0px solid #757575",
                                borderBottom: "1px solid #757575",
                                textAlign: "left",
                                borderCollapse: "collapse",
                              }}
                            >
                              <h3
                                style={{
                                  margin: 0,
                                  fontWeight: 600,
                                  fontSize: "13px",
                                }}
                              >
                                Sender Details
                              </h3>
                            </th>
                          </tr>
                        </thead>
                        <tbody>
                          <tr>
                            <td
                              colSpan={2}
                              style={{ alignContent: "start", padding: "5px" }}
                            >
                              <p style={{ margin: 0, fontWeight: 600 }}>
                                {order?.senderName || "---"}
                              </p>
                            </td>
                          </tr>
                          <tr>
                            <td
                              colSpan={2}
                              style={{
                                alignContent: "start",
                                padding: "0px 5px",
                              }}
                            >
                              <p style={{ margin: 0, fontWeight: 400 }}>
                                {order?.senderAddress || "---"}
                              </p>
                            </td>
                          </tr>
                          <tr>
                            <td
                              colSpan={2}
                              style={{ alignContent: "start", padding: "5px" }}
                            >
                              <p style={{ margin: 0, fontWeight: 400 }}>
                              {order?.senderPhoneNumber ||
                                  ""}
                              </p>
                            </td>
                          </tr>
                        </tbody>
                      </table>
                      <table
                        style={{ width: "100%", borderCollapse: "collapse" }}
                      >
                        <thead>
                          <tr>
                            <th
                              colSpan={2}
                              style={{
                                padding: "5px",
                                borderTop: "1px solid #757575",
                                borderBottom: "1px solid #757575",
                                textAlign: "left",
                                borderCollapse: "collapse",
                              }}
                            >
                              <h3
                              style={{
                                margin: 0,
                                fontWeight: 600,
                                fontSize: "13px",
                              }}
                            >
                              Is return order?{" "}
                              <span style={{ fontWeight: 400 }}>
                                {order?.isReturnOrder ? "Yes" : "No"}
                              </span>
                            </h3>

                            </th>
                          </tr>
                        </thead>
                        <tbody>
                          <tr>
                            <td
                              style={{ alignContent: "start", padding: "5px" }}
                            >
                              <p style={{ margin: 0, fontWeight: 400 }}>
                                Name:
                              </p>
                            </td>
                            <td
                              style={{ alignContent: "start", padding: "5px" }}
                            >
                              <p style={{ margin: 0, fontWeight: 400 }}></p>
                            </td>
                          </tr>
                          <tr>
                            <td
                              style={{ alignContent: "start", padding: "5px" }}
                            >
                              <p style={{ margin: 0, fontWeight: 400 }}>I.C:</p>
                            </td>
                            <td
                              style={{ alignContent: "start", padding: "5px" }}
                            >
                              <p style={{ margin: 0, fontWeight: 400 }}></p>
                            </td>
                          </tr>
                          <tr>
                            <td
                              style={{ alignContent: "start", padding: "5px" }}
                            >
                              <p style={{ margin: 0, fontWeight: 400 }}>
                                Signature:
                              </p>
                            </td>
                            <td
                              style={{ alignContent: "start", padding: "5px" }}
                            >
                              <p style={{ margin: 0, fontWeight: 400 }}></p>
                            </td>
                          </tr>
                        </tbody>
                      </table>
                    </th>
                    <th
                      style={{
                        width: "40%",
                        border: "1px solid #757575",
                        textAlign: "left",
                        alignContent: "start",
                      }}
                    >
                      <table
                        style={{ width: "100%", borderCollapse: "collapse" }}
                      >
                        <tbody>
                          <tr>
                            <td
                              style={{
                                alignContent: "start",
                                padding: "10px 5px",
                                textAlign: "center",
                              }}
                            >
                              <h3
                                style={{
                                  margin: 0,
                                  fontWeight: 600,
                                  fontSize: "28px",
                                }}
                              >
                                {/* {amountFormat(
                                  order?.order
                                    ?.calculated_total_shipping_charge || ""
                                )} */}
                              </h3>
                            </td>
                          </tr>
                          <tr>
                            <td
                              style={{
                                alignContent: "start",
                                padding: "5px 5px",
                                textAlign: "center",
                              }}
                            >
                              <img
                                src={order?.qr_code}
                                style={{
                                  height: "150px",
                                  lineHeight: "normal",
                                }}
                                alt="QR Code"
                              />
                            </td>
                          </tr>
                          <tr>
                            <td
                              style={{
                                alignContent: "bottom",
                                padding: "5px 5px",
                                textAlign: "center",
                              }}
                            >
                              <h3
                                style={{
                                  margin: 0,
                                  fontWeight: 400,
                                  fontSize: "12px",
                                }}
                              >
                                {order?.generated_order_package_id || ""}
                              </h3>
                            </td>
                          </tr>
                        </tbody>
                      </table>
                    </th>
                  </tr>
                </thead>
              </table>
            </td>
          </tr>
        </table>
      </div>
    </>
  );
};

export default AddressPrintTemplateA4;