import React, { useState, useEffect, Dispatch, SetStateAction } from "react";

import style from "./billDetails.module.scss";

import { useDispatch, useSelector } from "react-redux";
import useBillerSelectors from
"@/components/common/selectorHookRedux/useBillerSelectors";

interface BillDetailsProps {
billerName: string;
onGoBack: () => void;
}

interface BillerDetailsProps {
dataForform: {
consumerName?: string;
maxRechargeAmount?: number;
minRechargeAmount?: number;
tagStatus?: string;
};
setShowBillDetails: React.Dispatch<React.SetStateAction<boolean>>;
}

const BillDetails: React.FC<BillDetailsProps> = ({ billerName, onGoBack }) => {

const {
billerByIdData,
loadingBillerByID,
errorBillerByID,
billFetchData,
loadingBillFetch,
errorBillFetch,
planData,
loadingPlan,
errorPlan,
} = useBillerSelectors();

const [fee, setFee] = useState<number>(24);

const [payableAmount, setPayableAmount] = useState<number | "">();
const [minimumAmount, setMinAmount] = useState<string>("");
const [maximumAmount, setMaxAmount] = useState<string>("");
const [paymentAmountExactness, setPaymentAmountExactness] =
useState<boolean>(true);

const handleAmountChange = (e: React.ChangeEvent<HTMLInputElement>) => {

const value = parseInt(e.target.value);
setPayableAmount(value);
};

useEffect(() => {
if (billFetchData?.billerResponse?.amount) {
setPayableAmount(billFetchData?.billerResponse?.amount);
}
}, [billFetchData?.billerResponse?.amount])

useEffect(() => {
let exactness;
let billData;
 if (billerByIdData && billerByIdData.billerPaymentModes) {
const payment_mode = billerByIdData.billerPaymentModes;
billData = billerByIdData;
exactness = billerByIdData.paymentAmountExactness;
if (payment_mode && payment_mode.length > 0) {
const min = payment_mode[0].minlimit;
const max = payment_mode[0].maxlimit;
setMinAmount(min);
setMaxAmount(max || payableAmount);
}
}
if (billData?.billerAcceptsAdhoc === true && billData?.fetchRequirement ===
"MANDATORY") {
if (exactness === "Exact") {
setPaymentAmountExactness(false);
} else if (exactness === "Exact and above") {
setMinAmount(payableAmount !== undefined ? String(payableAmount) : "");
} else if (exactness === "Exact and below") {
setMaxAmount(payableAmount !== undefined ? String(payableAmount) : "");
}
}
}, [billerByIdData, payableAmount]);

const total = (payableAmount || 0) + fee;

return (
<div className="px-4">
<button onClick={onGoBack} className="mb-0 text-blue-500">
←
</button>
<h2 className={style.section_title}>Consumer Details -
{billerByIdData?.billerName}</h2>
<div className={style.sec_card}>

<div className={style.space}>
{
paymentAmountExactness === true ? <>
{billerByIdData && billerByIdData?.billerAcceptsAdhoc === true ?
<>
<div className={style.input_group}>
<label htmlFor="amount">Recharge Amount</label>
<div className={style.input_wrapper}>
<span className={style.rupee}>₹</span>
<input
id="amount"
type="number"
value={payableAmount || ""}
onChange={handleAmountChange}
placeholder="Amount"
className={style.amount}
aria-label="Recharge Amount"
/>
</div>
</div>
</>
:
<div className={style.input_group}>
 <label htmlFor="amount">Recharge Amount</label>
<div className={style.input_wrapper}>
₹{billFetchData?.billerResponse?.amount}
</div>
</div>
}
</> :
<div className={style.input_group}>
<label htmlFor="amount">Recharge Amount</label>
<div className={style.input_wrapper}>
₹{billFetchData?.billerResponse?.amount}
</div>
</div>
}

{/* Consumer Info */}

<div className={style.info_box}>
{billerByIdData && billerByIdData.length > 0 &&
billerByIdData?.billerAcceptsAdhoc &&
<>
<InfoRow
label="Manimum Amount"
value={minimumAmount || "0"}
/>
{maximumAmount && <InfoRow
label="Maximum Amount"
value={maximumAmount || "N/A"}
/>
}
</>
}
{billFetchData?.billerResponse?.accountHolderName && <InfoRow
label="Consumer Name"
value={billFetchData?.billerResponse?.accountHolderName} />}

{billFetchData?.billerResponse?.dueDate && <InfoRow label="Due Date"

value={billFetchData?.billerResponse?.dueDate} />}

{billFetchData?.billerResponse?.billDate && <InfoRow label="Bill Date"

value={billFetchData?.billerResponse?.billDate} />}

{billFetchData?.billerResponse?.billNumber && <InfoRow label="Bill

Number"
value={billFetchData?.billerResponse?.billNumber} />}
</div>

{/* Convenience Fee Slider */}

<div className={style.slider_section}>
<div className={style.slider_labels}>
<span>Customer Convenience Fees</span>
<span>Rs {fee}*</span>
</div>
<input
type="range"
min="1"
max="50"
value={fee}
onChange={(e) => setFee(Number(e.target.value))}
aria-label="Customer Convenience Fees"
 title="Customer Convenience Fees"
/>

<div className={style.slider_range}>
<span>Rs 1</span>
<span>Rs 50</span>
</div>
</div>

{/* Footer with Total */}

<div className={style.footer}>
<div>
<p className={style.total_label}>Total Payment</p>
<p className={style.total_value}>Rs {total}</p>
</div>

<button className={style.pay_btn}>Pay Now</button>

</div>
</div>
</div>
</div>
);
};

const InfoRow = ({
label,
value,
valueClass = "",
}: {
label: string;
value: string;
valueClass?: string;
}) => (
<div className={style.row}>
<span>{label}</span>
<span className={valueClass}>{value}</span>
</div>
);

export default BillDetails;