import React, { useState } from "react";

const MIN_AMOUNT = 1.0; // Minimum allowed amount

const GooglePayUPIButton = ({
  upiId = "paytmqr6q5qpv@ptys",
  name = "Pozomind Technologies Private Limited",
  note = "Test Payment",
  merchantCode = "7372",
  merchandId = "BCR2DN7T5GJJ7JSR"

}) => {
  const [amount, setAmount] = useState("");
  const [error, setError] = useState("");

  const handlePayment = () => {
    const amt = parseFloat(amount);

    // ✅ Validate amount
    if (isNaN(amt) || amt < MIN_AMOUNT) {
      setError(`Please enter a valid amount (minimum ₹${MIN_AMOUNT})`);
      return;
    }

    setError("");

    // ✅ Generate a unique transaction reference
    const transactionRef = `TXN${Date.now()}`;

    // ✅ Universal UPI scheme
    const upiLink = `upi://pay?pa=${encodeURIComponent(
      upiId
    )}&pn=${encodeURIComponent(name)}&mid=${encodeURIComponent(
      "AzqifC58839792984360"
    )}&tn=${encodeURIComponent(note)}&am=${encodeURIComponent(
      amt.toFixed(2)
    )}&cu=INR`;


    console.log("Generated UPI Link:", upiLink);

    // ✅ Open directly in any UPI app
    window.location.href = upiLink;
  };

  return (
    <div style={styles.container}>
      <h2>UPI Payment Gateway</h2>
      <p>Enter the amount:</p>
      <input
        type="number"
        step="0.01"
        value={amount}
        onChange={(e) => setAmount(e.target.value)}
        placeholder={`₹${MIN_AMOUNT} or more`}
        style={styles.input}
      />
      <button onClick={handlePayment} style={styles.button}>
        Pay Now
      </button>
      {error && <p style={styles.error}>{error}</p>}
      <p style={styles.note}>
        Works with Google Pay, PhonePe, Paytm, and other UPI apps.
      </p>
    </div>
  );
};

const styles = {
  container: {
    fontFamily: "Arial, sans-serif",
    textAlign: "center",
    padding: "40px",
    maxWidth: "400px",
    margin: "50px auto",
    background: "#f9fafb",
    borderRadius: "12px",
    boxShadow: "0 0 10px rgba(0,0,0,0.1)",
  },
  input: {
    padding: "10px",
    width: "80%",
    marginBottom: "15px",
    fontSize: "16px",
    borderRadius: "6px",
    border: "1px solid #ccc",
  },
  button: {
    backgroundColor: "#0A66C2",
    color: "white",
    padding: "12px 25px",
    border: "none",
    borderRadius: "8px",
    fontSize: "16px",
    cursor: "pointer",
  },
  error: {
    color: "red",
    marginTop: "10px",
  },
  note: {
    marginTop: "15px",
    color: "#555",
    fontSize: "14px",
  },
};

export default GooglePayUPIButton;