/* eslint-disable @typescript-eslint/no-explicit-any */
import React from "react";
import RequiredStar from "../RequiredStar";
import { useCurrency } from "@/context/CurrencyContext";

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);
  };
  const { currencyName } = useCurrency();

  return (
    <div className="package-grid-container mt-4">
      {packages.map((pkg, index) => (
        <div key={index} className="mb-4">
          <div className="row g-3">
            {/* WEIGHT */}
            <div className="col-12 col-md-2">
              <div className={`notched-field ${errors?.[index]?.weight ? "error" : ""}`}>
                <span className="notched-label">
                  WEIGHT (KG) <RequiredStar />
                </span>
                <i className="ri-box-3-line icon" />
                <input
                  type="number"
                  value={pkg.weight}
                  placeholder="Weight"
                  onChange={(e) =>
                    handleInputChange(index, "weight", e.target.value)
                  }
                />
              </div>
              <div className="error-text">{errors?.[index]?.width}</div>
            </div>

            {/* LENGTH */}
            <div className="col-6 col-md-2">
              <div
                className={`notched-field ${errors?.[index]?.length ? "error" : ""}`}
              >
                <span className="notched-label">
                  LENGTH (CM) <RequiredStar />
                </span>
                <i className="ri-ruler-line icon" />
                <input
                  type="number"
                  placeholder="Length"
                  value={pkg.length}
                  onChange={(e) =>
                    handleInputChange(index, "length", e.target.value)
                  }
                />
              </div>
              <div className="error-text">{errors?.[index]?.length}</div>
            </div>

            {/* WIDTH */}
            <div className="col-6 col-md-2">
              <div
                className={`notched-field ${errors?.[index]?.width ? "error" : ""}`}
              >
                <span className="notched-label">
                  WIDTH (CM) <RequiredStar />
                </span>
                <i className="ri-expand-width-line icon" />
                <input
                  type="number"
                  placeholder="Width"
                  value={pkg.width}
                  onChange={(e) =>
                    handleInputChange(index, "width", e.target.value)
                  }
                />
              </div>
              <div className="error-text">{errors?.[index]?.width}</div>
            </div>

            {/* HEIGHT */}
            <div className="col-6 col-md-2">
              <div
                className={`notched-field ${errors?.[index]?.height ? "error" : ""}`}
              >
                <span className="notched-label">
                  HEIGHT (CM) <RequiredStar />
                </span>
                <i className="ri-expand-height-line icon" />
                <input
                  type="number"
                  placeholder="Height"
                  value={pkg.height}
                  onChange={(e) =>
                    handleInputChange(index, "height", e.target.value)
                  }
                />
              </div>
              <div className="error-text">{errors?.[index]?.height}</div>
            </div>

            {/* DESCRIPTION */}
            <div className="col-12 col-md-2">
              <div className="notched-field">
                <span className="notched-label">DESCRIPTION</span>
                <i className="ri-file-list-3-line icon" />
                <input
                  type="text"
                  placeholder="Enter package description"
                  value={pkg.package_description}
                  onChange={(e) =>
                    handleInputChange(
                      index,
                      "package_description",
                      e.target.value,
                    )
                  }
                />
              </div>
            </div>

            {/* PACKAGE VALUE */}
            <div className="col-12 col-md-2">
              <div
                className={`notched-field value-field ${
                  errors?.[index]?.customer_input_package_value ? "error" : ""
                }`}
              >
                <span className="notched-label">
                  VALUE <RequiredStar />
                </span>
                <i className="ri-bank-card-line icon" />
                <input
                  type="number"
                  placeholder="Package value"
                  value={pkg.customer_input_package_value}
                  onChange={(e) =>
                    handleInputChange(
                      index,
                      "customer_input_package_value",
                      e.target.value,
                    )
                  }
                />
                <span className="currency">{currencyName}</span>
              </div>
              <div className="error-text">
                {errors?.[index]?.customer_input_package_value}
              </div>
            </div>
          </div>
        </div>
      ))}

      {/* STYLES */}
      <style jsx>{`
        .notched-field {
          position: relative;
        }

        .notched-field input {
          width: 100%;
          height: 52px;
          padding: 0 14px 0 44px;
          border-radius: 14px;
          border: 1.5px solid #e3e6eb;
          font-size: 13px;
          background: #fff;
          outline: none;
        }

        .notched-field input:focus {
          border-color: #001a72;
        }

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

        /* NOTCHED LABEL */
        .notched-label {
          position: absolute;
          top: -9px;
          left: 10px;
          background: #fff;
          padding: 0 8px;
          font-size: 11px;
          font-weight: 700;
          color: #6b7280;
          line-height: 1;
          pointer-events: none;
        }

        /* VALUE FIELD */
        .value-field input {
          padding-right: 64px;
        }

        .currency {
          position: absolute;
          right: 16px;
          top: 50%;
          transform: translateY(-50%);
          font-size: 13px;
          font-weight: 600;
          color: #111827;
        }

        /* ERROR */
        .notched-field.error input {
          border-color: #dc3545;
        }

        .notched-field.error .notched-label {
          color: #dc3545;
        }

        .error-text {
          font-size: 11px;
          color: #dc3545;
          min-height: 14px;
          margin-top: 4px;
        }
      `}</style>
    </div>
  );
};

export default PackageGrid;