"use client";

import React, { useEffect, useRef, useState } from "react";
import { Button, Group, Modal, Paper, PasswordInput, Radio, ScrollArea, Select, Stack, Text, TextInput, Title } from "@mantine/core";
import { notifications } from "@mantine/notifications";
import { useRouter } from "next/navigation";
import { generateOTP } from '@/app/OTPGenerator';
import OutsideQuickPay from "./outside_quick_pay";

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

export default function QuickPay() {
  const router = useRouter();
  const [bankType, setBankType] = useState("own");
  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 [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) => acc.stAccountType === 'SA');
        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");
      const response = await fetch(`/api/beneficiary/validate/within-bank?accountNumber=${beneficiaryAcc}`, {
        method: "GET",
        headers: {
          "Content-Type": "application/json",
          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 || !beneficiaryType || !amount ) {
      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");

      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 {
      setSelectedAccNo(null);
      setBeneficiaryAcc('');
      setBeneficiaryName('');
      setConfirmBeneficiaryAcc('');
      setBeneficiaryType(null);
      setAmount('');
      setRemarks('');
      setIsVisibilityLocked(false);
      setIsSubmitting(false);
      setShowTxnPassword(false);
      setShowOtpField(false);
      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 */}
      <Paper shadow="sm" radius="md" p="md" withBorder h={400}>
        <Title order={3} mb="md">
          Quick Pay
        </Title>
        <Radio.Group value={bankType} onChange={setBankType} name="bankType" withAsterisk mb="md">
          <Group justify="center">
            <Radio value="own" label="Own Bank" />
            <Radio value="outside" label="Outside Bank" />
          </Group>
        </Radio.Group>

        {bankType === "own" ? (
          <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}
                />
              </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>
                <TextInput
                  label="Payee Name"
                  value={validationStatus === "success" && beneficiaryName ? beneficiaryName : ""}
                  disabled
                  readOnly
                  withAsterisk
                />

                <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 && (
                  <PasswordInput
                    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>
        ) : (
          <div>
            <OutsideQuickPay />
          </div>
        )}
      </Paper>
    </>
  );
}
