source: frontend/web3-eDnevnik_Frontend/src/pages/RoditelPages/Roditel_PaymentAnnoucements/Roditel_PaymentAnnoucements.jsx

import NavbarRoditel from "../../../components/NavbarRoditel/NavbarRoditel";
import { useState, useEffect } from "react";
import { ethers } from "ethers";
import { data } from "react-router-dom";
import axios from "axios";
import { useAuth } from "../../../contexts/AuthContext";

const Roditel_PaymentAnnoucements = () => {
  const { walletAddress } = useAuth(); //go zimame wallet od AuthContext
  const [soopstenija, setSoopstenija] = useState([]);
  const [paymentLoading, setPaymentLoading] = useState(null);
  const [roditelId, setRoditelId] = useState(null);
  const [paymentStatus, setPaymentStatus] = useState(null);
  const [txPending, setTxPending] = useState(false);
  const [plateniSoopstenija, setPlateniSoopstenija] = useState([]);

  useEffect(() => {
    const fetchRoditelAndPlateniSoopstenija = async () => {
      try {
        const response = await fetch("http://localhost:8080/api/auth/me", {
          credentials: "include",
        });
        const data = await response.json();
        setRoditelId(data.id);
        const id = data.id;
        const plateniResponse = await axios.get(
          `http://localhost:8080/api/payments/parent/${id}`,
          { withCredentials: true }
        );
        setPlateniSoopstenija(plateniResponse.data);
      } catch (err) {
        console.error("Error fetching roditel ID:", err);
      }
    };

    fetchRoditelAndPlateniSoopstenija();
  }, []);

  const fetchSoopstenija = async () => {
    try {
      const response = await axios.get(
        "http://localhost:8080/api/paymentsSoopstenija/approved",
        { withCredentials: true }
      );
      setSoopstenija(response.data);
    } catch (error) {
      console.error("Error fetching soopstenija:", error);
    }
  };
  useEffect(() => {
    fetchSoopstenija();
  }, []);

  const handlePayment = async (soopstenieId, iznosETH) => {
    if (!walletAddress) {
      alert("Ве молиме прво поврзете го вашиот MetaMask wallet во Settings!");
      return;
    }

    if (!roditelId) {
      alert("Грешка: Не може да се идентификува родителот!");
      return;
    }

    setPaymentLoading(soopstenieId);
    setTxPending(true);

    try {
      // 1. Креирај плаќање
      const createResponse = await axios.post(
        "http://localhost:8080/api/payments/create",
        {
          soopstenieId: soopstenieId,
          roditelId: roditelId,
        },
        { withCredentials: true }
      );

      const payment = createResponse.data;

      const txHash = await sendTransaction(iznosETH);

      await axios.post(
        `http://localhost:8080/api/payments/${payment.id}/submit-tx`,
        {
          txHash: txHash,
        },
        { withCredentials: true }
      );

      alert(
        `Успешно плаќање!\nTx hash: ${txHash.substring(
          0,
          10
        )}...\nПроверете на Sepolia Etherscan`
      );

      fetchSoopstenija();
    } catch (error) {
      console.error("Грешка:", error);
      if (error.response?.data) {
        alert(error.response.data);
      } else if (error.message.includes("insufficient funds")) {
        alert(
          "Немате доволно SepoliaETH! Добијте од faucet: https://sepoliafaucet.com/"
        );
      } else {
        alert("Грешка при плаќање: " + error.message);
      }
    } finally {
      setTxPending(false);
      setPaymentLoading(null);
    }
  };

  const sendTransaction = async (iznosETH) => {
    if (!window.ethereum) {
      throw new Error("MetaMask не е инсталиран");
    }

    const provider = new ethers.BrowserProvider(window.ethereum);
    const signer = await provider.getSigner();

    const toAddress = "0x1ab6B15AfE81B57fF4a692fbb8C141A1858941e0";

    const amountInWei = ethers.parseEther(Number(iznosETH).toFixed(18));
    const tx = await signer.sendTransaction({
      to: toAddress,
      value: amountInWei,
    });

    console.log("Transaction sent:", tx.hash);

    setPaymentStatus("Испратена трансакција, ве молиме почекајте");

    await tx.wait(3);

    return tx.hash;
  };

  const isPlateno = (soopstenieId) => {
    return plateniSoopstenija.some((p) => p.soopstenieId === soopstenieId);
  };
  return (
    <>
      <NavbarRoditel />
      <div className="payment-announcements-container ">
        <h2 className="text-center">Соопштенија за плаќање</h2>

        {!walletAddress && (
          <div className="alert alert-warning w-50 m-5 p-2 " role="alert">
            Немате поврзано <b>Metamusk Wallet!</b> Ве молиме поврзете го вашиот
            <b>MetaMask wallet</b> во опции!
          </div>
        )}

        {soopstenija.length === 0 ? (
          <p>Нема активни соопштенија за плаќање.</p>
        ) : (
          <div className="soopstenija-list">
            {soopstenija.map((soopstenie) => (
              <div key={soopstenie.id} className="card w-50 m-5">
                <div className="card-header">
                  <h3>Наслов {soopstenie.naslov}</h3>
                </div>
                <div className="card-body">
                  <p className="card-text">{soopstenie.sodrzina}</p>
                  <p>
                    <b>Износ: </b>
                    {Number(soopstenie.iznos).toFixed(18)} ETH
                  </p>
                  <p>soopstenie id: {soopstenie.id}</p>
                  <p>
                    Рок:{" "}
                    {new Date(soopstenie.rokZaPlakjanje).toLocaleDateString()}
                  </p>
                  <p>{soopstenie.plateno}</p>
                  {paymentLoading === soopstenie.id || !walletAddress ? (
                    <p>Немате поврзано wallet! за да платете!</p>
                  ) : isPlateno(soopstenie.id) ? (
                    <span className="text-success">
                      Оваа соопштение е веќе платено!
                    </span>
                  ) : (
                    <button
                      onClick={() =>
                        handlePayment(soopstenie.id, soopstenie.iznos)
                      }
                    >
                      Плати
                    </button>
                  )}
                </div>
              </div>
            ))}
          </div>
        )}
      </div>
      {txPending && (
        <div
          style={{
            position: "fixed",
            inset: 0,
            background: "rgba(0,0,0,0.5)",
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
            zIndex: 1000,
          }}
        >
          <div
            style={{
              background: "#fff",
              borderRadius: 16,
              padding: "2rem 2.5rem",
              textAlign: "center",
              maxWidth: 320,
            }}
          >
            <div style={{ fontSize: 32, marginBottom: 12 }}></div>
            <h3 style={{ margin: "0 0 8px" }}>Transaction in progress</h3>
            <p style={{ margin: 0, color: "#666", fontSize: 14 }}>
              Please don't close this window
            </p>
          </div>
        </div>
      )}
    </>
  );
};

export default Roditel_PaymentAnnoucements;