// "use client";

// import React, { useEffect, useRef, useState } from "react";
// import { Button, Group, Modal, Paper, Radio, ScrollArea, Select, Stack, Text, TextInput, Title } from "@mantine/core";
// import { notifications } from "@mantine/notifications";
// import { useRouter } from "next/navigation";


// interface accountData {
//   stAccountNo: string;
//   stAccountType: string;
//   stAvailableBalance: string;
//   custname: string;
// }

// export default function OutsideQuickPay() {
//   const router = useRouter();
//   const [authorized, setAuthorized] = useState<boolean | null>(null);
//   const [accountData, setAccountData] = useState<accountData[]>([]);
//   const [selectedAccNo, setSelectedAccNo] = useState<string | null>(null);
//   const [beneficiaryAcc, setBeneficiaryAcc] = useState("");
//   const [showPayeeAcc, setShowPayeeAcc] = useState(true);
//   const [confirmBeneficiaryAcc, setConfirmBeneficiaryAcc] = useState("");
//   const [paymentMode, setPaymentMode] = useState('IMPS');
//   const [beneficiaryType, setBeneficiaryType] = useState<string | null>(null);
//   const [isVisibilityLocked, setIsVisibilityLocked] = useState(false);
//   const [amount, setAmount] = useState("");
//   const [remarks, setRemarks] = useState("");
//   const [showConfirmModel, setConfirmModel] = useState(false);
//   const [showTxnPassword, setShowTxnPassword] = useState(false);
//   const [txnPassword, setTxnPassword] = useState("");
//   const [isSubmitting, setIsSubmitting] = useState(false);
//   const [validationStatus, setValidationStatus] = useState<"success" | "error" | null>(null);
//   const [beneficiaryName, setBeneficiaryName] = useState<string | null>(null);
//   const [showOtpField, setShowOtpField] = useState(false);
//   const [otp, setOtp] = useState("");
//   const [generateOtp, setGenerateOtp] = useState("");

//   async function handleGenerateOtp() {
//     // const value = await generateOTP(6);
//     const value = "123456";
//     setGenerateOtp(value);
//     return value;
//   }

//   const selectedAccount = accountData.find((acc) => acc.stAccountNo === selectedAccNo);
//   const getFullMaskedAccount = (acc: string) => { return "X".repeat(acc.length); };

//   const accountOptions = accountData.map((acc) => ({
//     value: acc.stAccountNo,
//     label: `${acc.stAccountNo} (${acc.stAccountType})`,
//   }));

//   const FetchAccountDetails = async () => {
//     try {
//       const token = localStorage.getItem("access_token");
//       const response = await fetch("/api/customer", {
//         method: "GET",
//         headers: {
//           "Content-Type": "application/json",
//           Authorization: `Bearer ${token}`,
//         },
//       });
//       const data = await response.json();
//       if (response.ok && Array.isArray(data)) {
//         const filterSAaccount = data.filter((acc) => ['SA', 'SB'].includes(acc.stAccountType));
//         setAccountData(filterSAaccount);
//       }
//     } catch {
//       notifications.show({
//         withBorder: true,
//         color: "red",
//         title: "Please try again later",
//         message: "Unable to Fetch, Please try again later",
//         autoClose: 5000,
//       });
//     }
//   };

//   useEffect(() => {
//     const token = localStorage.getItem("access_token");
//     if (!token) {
//       setAuthorized(false);
//       router.push("/login");
//     } else {
//       setAuthorized(true);
//     }
//   }, []);

//   useEffect(() => {
//     if (authorized) {
//       FetchAccountDetails();
//     }
//   }, [authorized]);

//   async function handleValidate() {
//     if (!selectedAccNo || !beneficiaryAcc ||
//       !confirmBeneficiaryAcc
//     ) {
//       notifications.show({
//         title: "Validation Error",
//         message: "Please fill debit account, beneficiary account number and confirm beneficiary account number",
//         color: "red",
//       });
//       return;
//     }
//     if (beneficiaryAcc.length < 10 || beneficiaryAcc.length > 17) {
//       notifications.show({
//         title: "Invalid Account Number",
//         message: "Please Enter valid account Number",
//         color: "red",
//       });
//       return;
//     }
//     if (beneficiaryAcc !== confirmBeneficiaryAcc) {
//       notifications.show({
//         title: "Mismatch",
//         message: "Beneficiary account numbers do not match",
//         color: "red",
//       });
//       return;
//     }

//     try {
//       const token = localStorage.getItem("access_token");
//       // Need to change with proper API
//       const response = await fetch(`/api/beneficiary/validate/within-bank?accountNumber=${beneficiaryAcc}`, {
//         method: "GET",
//         headers: {
//           "Content-Type": "application/json",
                // "X-Login-Type": "IB",
//           Authorization: `Bearer ${token}`,
//         },
//       });
//       const data = await response.json();

//       if (response.ok && data?.name) {
//         setBeneficiaryName(data.name);
//         setValidationStatus("success");
//         setIsVisibilityLocked(true);
//       } else {
//         setBeneficiaryName("Invalid account number");
//         setValidationStatus("error");
//         setBeneficiaryAcc("");
//         setConfirmBeneficiaryAcc("");
//       }
//     } catch {
//       setBeneficiaryName("Invalid account number");
//       setValidationStatus("error");
//     }
//   };

//   async function handleProceed() {
//     if (!selectedAccNo || !beneficiaryAcc || !confirmBeneficiaryAcc || !paymentMode || !beneficiaryType || !amount || !remarks) {
//       notifications.show({
//         title: "Validation Error",
//         message: "Please fill all required fields",
//         color: "red",
//       });
//       return;
//     }

//     if (validationStatus !== "success") {
//       notifications.show({
//         title: "Validation Required",
//         message: "Please validate beneficiary before proceeding",
//         color: "red",
//       });
//       return;
//     }
//     if (parseInt(amount) <= 0) {
//       notifications.show({
//         title: "Invalid amount",
//         message: "Amount Can not be less than Zero",
//         color: "red",
//       });
//       return;

//     }

//     if (!showOtpField && !showTxnPassword && !showConfirmModel) {
//       setConfirmModel(true);
//       return;
//     }

//     if (!otp) {
//       notifications.show({
//         title: "Enter OTP",
//         message: "Please enter the OTP",
//         color: "red",
//       });
//       return;
//     }
//     if (otp !== generateOtp) {
//       notifications.show({
//         title: "Invalid OTP",
//         message: "The OTP entered does not match",
//         color: "red",
//       });
//       return;
//     }

//     if (!showTxnPassword) {
//       setShowTxnPassword(true);
//       return;
//     }

//     if (!txnPassword) {
//       notifications.show({
//         title: "Missing field",
//         message: "Please Enter Transaction Password Before Proceed",
//         color: "red",
//       });
//       return;
//     }
//     try {
//       setIsSubmitting(true);
//       const token = localStorage.getItem("access_token");
//       // Need to change with proper API
//       const res = await fetch("/api/payment/transfer", {
//         method: "POST",
//         headers: {
//           "Content-Type": "application/json",
//           Authorization: `Bearer ${token}`,
//         },
//         body: JSON.stringify({
//           fromAccount: selectedAccNo,
//           toAccount: beneficiaryAcc,
//           toAccountType: beneficiaryType,
//           amount: amount,
//           narration: remarks,
//           tpassword: txnPassword,
//         }),
//       });
//       const result = await res.json();
//       if (res.ok) {
//         notifications.show({
//           title: "Success",
//           message: "Transaction successful",
//           color: "green",
//         });
//         setShowTxnPassword(false);
//         setTxnPassword("");
//         setShowOtpField(false);
//         setOtp("");
//         setValidationStatus(null);
//         setBeneficiaryName(null);
//       } else {
//         notifications.show({
//           title: "Error",
//           message: result?.error || "Transaction failed",
//           color: "red",
//         });
//       }
//     } catch {
//       notifications.show({
//         title: "Error",
//         message: "Something went wrong",
//         color: "red",
//       });
//     } finally {
//       setIsSubmitting(false);
//     }
//   };

//   if (!authorized) return null;

//   return (
//     <>
//       <Modal
//         opened={showConfirmModel}
//         onClose={() => setConfirmModel(false)}
//         // title="Confirm Transaction"
//         centered
//       >
//         <Stack>
//           <Title order={4}>Confirm Transaction</Title>
//           <Text><strong>Debit Account:</strong> {selectedAccNo}</Text>
//           <Text><strong>Payee Account:</strong> {beneficiaryAcc}</Text>
//           <Text><strong>Payee Name:</strong> {beneficiaryName}</Text>
//           <Text><strong>Amount:</strong> ₹ {amount}</Text>
//           <Text><strong>Remarks:</strong>  {remarks}</Text>
//         </Stack>
//         <Group justify="flex-end" mt="md">
//           <Button variant="default" onClick={() => setConfirmModel(false)}>Cancel</Button>
//           <Button
//             color="blue"
//             onClick={async () => {
//               setConfirmModel(false);
//               const otp = await handleGenerateOtp();
//               setShowOtpField(true);
//               notifications.show({
//                 title: "OTP Sent",
//                 message: `Check your registered device for OTP`,
//                 color: "green",
//                 autoClose: 5000,
//               });
//             }}
//           >
//             Confirm
//           </Button>
//         </Group>
//       </Modal>
//       {/* main content */}
//       <div style={{ maxHeight: "320px", overflowY: "auto" }}>
//         <Stack gap="xs">
//           <Group grow>
//             <Select
//               label="Select Debit Account Number"
//               placeholder="Choose account number"
//               data={accountOptions}
//               value={selectedAccNo}
//               onChange={setSelectedAccNo}
//               withAsterisk
//               readOnly={isVisibilityLocked}
//             />
//             <TextInput
//               label="Payee Account No"
//               value={showPayeeAcc ? beneficiaryAcc : getFullMaskedAccount(beneficiaryAcc)}
//               onChange={(e) => {
//                 const value = e.currentTarget.value;
//                 if (/^\d*$/.test(value)) {
//                   setBeneficiaryAcc(value);
//                   setShowPayeeAcc(true);
//                 }
//               }}
//               onBlur={() => setShowPayeeAcc(false)}
//               onFocus={() => setShowPayeeAcc(true)}
//               withAsterisk
//               readOnly={isVisibilityLocked}
//             />

//             <TextInput
//               label="Confirm Payee Account No"
//               value={confirmBeneficiaryAcc}
//               onChange={(e) => {
//                 const value = e.currentTarget.value;
//                 if (/^\d*$/.test(value)) {
//                   setConfirmBeneficiaryAcc(value);
//                 }
//               }}
//               // onCopy={(e) => e.preventDefault()}
//               // onPaste={(e) => e.preventDefault()}
//               // onCut={(e) => e.preventDefault()}
//               withAsterisk
//               readOnly={isVisibilityLocked}
//             />
//             <TextInput
//               label="Payee Name"
//               value={validationStatus === "success" && beneficiaryName ? beneficiaryName : ""}
//               disabled
//               readOnly
//               withAsterisk
//             />
//           </Group>
//           <Group justify="space-between" >
//             <Text size="xs" c="green" style={{ visibility: selectedAccount ? "visible" : "hidden" }}>Available Balance :
//               {selectedAccount ? selectedAccount.stAvailableBalance : 0}
//             </Text>
//             <Group justify="center">
//               {validationStatus === "error" && <Text size="sm" fw={700} ta="right" c="red">{beneficiaryName}</Text>}
//             </Group>
//           </Group>
//           <Group grow>
//             <Radio.Group
//               name="payment-mode"
//               label="Select Payment Method"
//               value={paymentMode}
//               onChange={setPaymentMode}
//               withAsterisk
//             >
//               <Group>
//                 <Radio value="IMPS" label="IMPS" />
//                 <Radio value="RTGS" label="RTGS" />
//                 <Radio value="NEFT" label="NEFT" />
//               </Group>
//             </Radio.Group>

//             <Select
//               label="Payee Account Type"
//               placeholder="Select type"
//               data={["Savings", "Current"]}
//               value={beneficiaryType}
//               onChange={setBeneficiaryType}
//               withAsterisk
//               readOnly={showOtpField}
//             />

//             <TextInput
//               label="Amount"
//               type="number"
//               value={amount}
//               onChange={(e) => setAmount(e.currentTarget.value)}
//               error={
//                 selectedAccount && Number(amount) > Number(selectedAccount.stAvailableBalance) ?
//                   "Amount exceeds available balance" : false}
//               withAsterisk
//               readOnly={showOtpField}
//             />

//             <TextInput
//               label="Remarks"
//               placeholder="Enter remarks"
//               value={remarks}
//               onChange={(e) => setRemarks(e.currentTarget.value)}
//               withAsterisk
//               readOnly={showOtpField}
//             />
//           </Group>
//           <Group grow>
//             {showOtpField && (
//               <TextInput
//                 label="OTP"
//                 placeholder="Enter OTP"
//                 type="otp"
//                 value={otp}
//                 onChange={(e) => setOtp(e.currentTarget.value)}
//                 withAsterisk
//                 disabled={showTxnPassword}
//               />
//             )}
//             {showTxnPassword && (
//               <TextInput
//                 label="Transaction Password"
//                 placeholder="Enter transaction password"
//                 type="password"
//                 value={txnPassword}
//                 onChange={(e) => setTxnPassword(e.currentTarget.value)}
//                 withAsterisk
//               />
//             )}
//           </Group>

//           <Group justify="flex-start">
//             <Button variant="filled" color="blue" onClick={handleValidate} disabled={validationStatus === "success"}>
//               Validate
//             </Button>
//             <Button
//               variant="filled"
//               color="blue"
//               onClick={handleProceed}
//               loading={isSubmitting}
//               disabled={validationStatus !== "success"}
//             >
//               {!showTxnPassword && showOtpField ? "Validate the OTP" : showTxnPassword ? "Proceed to Pay" : "Proceed"}
//             </Button>
//           </Group>
//         </Stack>
//       </div>
//     </>
//   );
// }
