/* eslint-disable @typescript-eslint/no-explicit-any */
import React from "react";
import RequiredStar from "../RequiredStar";

interface PackageDetail {
  weight: string;
  length: string;
  width: string;
  height: string;
  package_description: string;
  customer_input_package_value: string;
}

interface PackageGridProps {
  packages: PackageDetail[];
  onChange: (updatedPackages: PackageDetail[]) => void;
  errors?: any;
}

const PackageGrid: React.FC<PackageGridProps> = ({
  packages,
  onChange,
  errors,
}) => {
  const handleInputChange = (
    index: number,
    field: keyof PackageDetail,
    value: string
  ) => {
    const updated = [...packages];
    updated[index] = { ...updated[index], [field]: value };
    onChange(updated);
  };

  return (
    <div className="package-grid-container mt-4">
      {packages.map((pkg, index) => (
        <div key={index} className="mb-3">
          <div className="row g-3 align-items-start">

            {/* WEIGHT */}
            <div className="col-12 col-md-2">
              <div className="floating-label-group">
                <label className="floating-label">Weight (KG)</label>
                <div className="input-with-icon">
                  <i className="ri-box-3-line" />
                  <input
                    type="number"
                    className="form-control custom-input"
                    value={pkg.weight}
                    onChange={(e) =>
                      handleInputChange(index, "weight", e.target.value)
                    }
                    placeholder="0 KG"
                  />
                </div>
                <div className="error-placeholder" />
              </div>
            </div>

            {/* LENGTH */}
            <div className="col-6 col-md-1">
              <div className="floating-label-group">
                <label className="floating-label">
                  Length (CM) <RequiredStar />
                </label>
                <div className="input-with-icon">
                  <i className="ri-ruler-line" />
                  <input
                    type="number"
                    className={`form-control custom-input ${
                      errors?.[index]?.length ? "is-invalid" : ""
                    }`}
                    value={pkg.length}
                    onChange={(e) =>
                      handleInputChange(index, "length", e.target.value)
                    }
                    placeholder="0"
                  />
                </div>
                <div className="error-placeholder">
                  {errors?.[index]?.length}
                </div>
              </div>
            </div>

            {/* WIDTH */}
            <div className="col-6 col-md-1">
              <div className="floating-label-group">
                <label className="floating-label">
                  Width (CM) <RequiredStar />
                </label>
                <div className="input-with-icon">
                  <i className="ri-expand-width-line" />
                  <input
                    type="number"
                    className={`form-control custom-input ${
                      errors?.[index]?.width ? "is-invalid" : ""
                    }`}
                    value={pkg.width}
                    onChange={(e) =>
                      handleInputChange(index, "width", e.target.value)
                    }
                    placeholder="0"
                  />
                </div>
                <div className="error-placeholder">
                  {errors?.[index]?.width}
                </div>
              </div>
            </div>

            {/* HEIGHT */}
            <div className="col-6 col-md-1">
              <div className="floating-label-group">
                <label className="floating-label">
                  Height (CM) <RequiredStar />
                </label>
                <div className="input-with-icon">
                  <i className="ri-expand-height-line" />
                  <input
                    type="number"
                    className={`form-control custom-input ${
                      errors?.[index]?.height ? "is-invalid" : ""
                    }`}
                    value={pkg.height}
                    onChange={(e) =>
                      handleInputChange(index, "height", e.target.value)
                    }
                    placeholder="0"
                  />
                </div>
                <div className="error-placeholder">
                  {errors?.[index]?.height}
                </div>
              </div>
            </div>

            {/* DESCRIPTION */}
            <div className="col-12 col-md-3">
              <div className="floating-label-group">
                <label className="floating-label">Description</label>
                <div className="input-with-icon">
                  <i className="ri-file-list-3-line" />
                  <input
                    type="text"
                    className="form-control custom-input"
                    value={pkg.package_description}
                    onChange={(e) =>
                      handleInputChange(
                        index,
                        "package_description",
                        e.target.value
                      )
                    }
                    placeholder="Enter description"
                  />
                </div>
                <div className="error-placeholder" />
              </div>
            </div>

            {/* PACKAGE VALUE */}
            <div className="col-12 col-md-4">
              <div className="floating-label-group">
                <label className="floating-label">
                  Package Value <RequiredStar />
                </label>
                <div className="d-flex">
                  <div className="input-with-icon flex-grow-1">
                    <i className="ri-bank-card-line" />
                    <input
                      type="number"
                      className={`form-control custom-input-left ${
                        errors?.[index]?.customer_input_package_value
                          ? "is-invalid"
                          : ""
                      }`}
                      value={pkg.customer_input_package_value}
                      onChange={(e) =>
                        handleInputChange(
                          index,
                          "customer_input_package_value",
                          e.target.value
                        )
                      }
                      placeholder="Package Value"
                    />
                  </div>
                  <select className="form-select custom-select-right">
                    <option>BHD</option>
                  </select>
                </div>
                <div className="error-placeholder">
                  {errors?.[index]?.customer_input_package_value}
                </div>
              </div>
            </div>
          </div>
        </div>
      ))}

      <style jsx>{`
        .input-with-icon {
          position: relative;
        }

        .input-with-icon i {
          position: absolute;
          left: 12px;
          top: 50%;
          transform: translateY(-50%);
          color: #001a72;
          font-size: 16px;
        }

        .custom-input,
        .custom-input-left {
          height: 50px;
          padding-left: 42px;
          border-radius: 15px;
          font-size: 13px;
        }

        .custom-input-left {
          border-radius: 15px 0 0 15px;
          border-right: none;
        }

        .custom-select-right {
          width: 80px;
          height: 50px;
          border-radius: 0 15px 15px 0;
        }

        .floating-label {
          position: absolute;
          top: -9px;
          left: 18px;
          background: #fff;
          padding: 0 6px;
          font-size: 10px;
          font-weight: 700;
        }

        .error-placeholder {
          min-height: 16px;
          font-size: 11px;
          color: #dc3545;
          margin-top: 4px;
        }

        .is-invalid {
          border-color: #dc3545 !important;
        }

        /* 🔹 MOBILE OPTIMIZATION */
        @media (max-width: 576px) {
          .custom-input,
          .custom-input-left,
          .custom-select-right {
            height: 44px;
            font-size: 12px !important;
          }

          .custom-input,
          .custom-input-left {
            padding-left: 36px;
          }

          .input-with-icon i {
            font-size: 14px;
            left: 10px;
          }

          .floating-label {
            font-size: 9px;
            top: -8px;
          }

          .error-placeholder {
            min-height: 12px;
            font-size: 10px;
          }
        }
      `}</style>
    </div>
  );
};

export default PackageGrid;