import React from "react";

type FieldType = "ewbNo" | "ton" | "kg";

/** Optional localized UI labels; English fallbacks used per-field when omitted. */
interface InstantLrApprovalTranslatedWords {
  enterTonAndAddEwayBillNumber?: string;
  addEwayBillNumber?: string;
  getInstantApproval?: string;
  maximumAttemptsReached?: string;
  ton?: string;
  enterTon?: string;
  kg?: string;
  enterKg?: string;
  ewayBillAutoFetched?: string;
  ewayBillNumber?: string;
  enterEwayBillNumber?: string;
  verifying?: string;
  verify?: string;
  or?: string;
  uploadLR?: string;
}

export const InstantLrApprovalUI = ({
  loading,
  disableVerify,
  attemptsRemaining,
  ewbNo = '',
  onHandleChange,
  onVerify,
  onUploadLR,
  disableInput,
  isRatePerton,
  ton,
  kg,
  translatedWords
}: {
  loading: boolean;
  disableVerify: boolean;
  attemptsRemaining: number;
  ewbNo: string ;
  onHandleChange: (value: string, field: FieldType) => void;
  onVerify: () => void;
  onUploadLR: () => void;
  disableInput:boolean;
  isRatePerton?:boolean,
  ton?:number,
  kg?:number,
  translatedWords?: InstantLrApprovalTranslatedWords
}) => {
  const {
    enterTonAndAddEwayBillNumber = 'Enter Ton & Add E-way Bill Number',
    addEwayBillNumber = 'Add E-way Bill Number',
    getInstantApproval = 'Get instant approval and take advance',
    maximumAttemptsReached = 'Maximum attempts reached',
    ton: tonLabel = 'Ton',
    enterTon = 'Enter Ton',
    kg: kgLabel = 'Kg',
    enterKg = 'Enter Kg',
    ewayBillAutoFetched = 'E-Way Bill is auto-fetched',
    ewayBillNumber = 'E-way Bill Number',
    enterEwayBillNumber = 'Enter E-way bill number',
    verifying = 'Verifying...',
    verify = 'Verify',
    or = 'or',
    uploadLR = 'Upload LR',
  } = translatedWords || {};
  return (
    <div className=" fr-bg-white fr-rounded-xl fr-p-6  fr-shadow-lg">

      {/* Title */}
      <p className="fr-text-xl fr-font-semibold">{isRatePerton ? enterTonAndAddEwayBillNumber : addEwayBillNumber}</p>

      {/* Sub-title */}
      {!isRatePerton && <p className="fr-text-gray-500 fr-text-sm -fr-mt-2">
        {getInstantApproval}
      </p>}
      {/* Floating Input like Ionic */}
      <div className=" fr-p-3">


{attemptsRemaining === 0 ? 
<p style={{
  backgroundColor:"lightgrey",
  padding: "2px 6px 5px 6px",
  display: "inline-block",
  borderRadius: "10px",
  color: "red",
  marginBottom:"10px",
  fontSize:"15px",
}}>
    <span className="text-red-500 text-lg">⚠️</span>

  {maximumAttemptsReached}
</p>

: null }
{isRatePerton ? (
  <div className="fr-grid fr-grid-cols-2 fr-gap-4 fr-mb-3">
    <div className="fr-flex fr-flex-col">
      <label className="fr-text-sm fr-font-medium fr-mb-1">{tonLabel}</label>
      <input
  value={ton}
  onChange={(e) => onHandleChange(e.target.value, "ton")}
  placeholder={enterTon}
  className="fr-w-full fr-border fr-border-gray-300 fr-rounded-lg fr-p-3 fr-text-base focus:fr-outline-none"
  style={{ cursor: disableInput ? "not-allowed" : "pointer" }}
  type="number"
  step="0.01"
/>
    </div>

    <div className="fr-flex fr-flex-col">
      <label className="fr-text-sm fr-font-medium fr-mb-1">{kgLabel}</label>
     <input
  value={kg}
  maxLength={12}
  onChange={(e) => onHandleChange(e.target.value, 'kg')}
  disabled
  placeholder={enterKg}
  className="fr-w-full fr-border fr-border-gray-300 fr-rounded-lg fr-p-3 fr-text-base 
             fr-bg-gray-100 fr-text-gray-500 
             focus:fr-outline-none"
  style={{
    cursor: "not-allowed",
    backgroundColor: "#f3f4f6",
    color: "#6b7280"
  }}
  type="number"
/>
    </div>
  </div>
) : null}

{disableInput && (
  <p
    style={{
      backgroundColor: "lightgrey",
      padding: "5px 8px 6px 8px",
      display: "inline-block",
      borderRadius: "10px",
      color: "#08304f",
      marginBottom: "10px",
      fontSize: "12px",
    }}
  >
    {ewayBillAutoFetched}
  </p>
)}

<div className="fr-flex fr-flex-col fr-mt-2">
  <label className="fr-text-sm fr-font-medium fr-mb-1">
    {ewayBillNumber}
  </label>

  <input
    defaultValue={ewbNo}
    maxLength={12}
    disabled={disableInput}
    onChange={(e) => onHandleChange(e.target.value,'ewbNo')}
    placeholder={enterEwayBillNumber}
    className="fr-w-full fr-border fr-border-gray-300 fr-rounded-lg fr-p-3 fr-text-base focus:fr-outline-none"
    style={{ cursor: disableInput ? "not-allowed" : "pointer" }}
  />
</div>
      </div>

 
      {/* )} */}
<div className="fr-p-3 ">
      {/* Verify Button */}
  <button
  disabled={disableVerify}
  onClick={onVerify}
  style={{
    backgroundColor: disableVerify ? "#515355ff" : "#08304fff" , // light blue or grey
    color: "#ffffff" ,            // black or white
    padding: "12px",
    width: "100%",
    borderRadius: "8px",
    border: "none",
    cursor: disableVerify ?  "not-allowed" : "pointer",
  }}
>
  {loading ? verifying : verify}
</button>


{ewbNo !== '' ?
<div>
      {/* Alternate Action */}
      <div
        onClick={onUploadLR}
        className="fr-text-sm fr-font-medium fr-text-center fr-p-3"
      >
        {or}
      </div>

      {/* Upload LR */}
      <div
        onClick={onUploadLR}
        className="fr-text-blue-600 fr-text-sm fr-font-medium fr-cursor-pointer fr-underline fr-text-center "
      >

        {uploadLR}
      </div>
      </div> : null }
      </div>

    </div>
  );
};