import { useState, useEffect } from "react";
import NavbarRoditel from "../NavbarRoditel/NavbarRoditel.jsx";
import styles from "./RoditelSettingsStyles.module.css";
import { ethers } from "ethers";
import { data } from "react-router-dom";
import axios from "axios";
import { useAuth } from "../../contexts/AuthContext.jsx";

const RoditelSettings = () => {
  const {
    walletAddress: backendWalletAddress,
    setBackendWalletAddress,
    fetchSavedWallet,
  } = useAuth();
  const [savedWallet, setSavedWallet] = useState(null);
  const [loading, setLoading] = useState(false);
  const [roditelId, setRoditelId] = useState(null);

  const connectWallet = async () => {
    if (!window.ethereum) {
      alert("Ве молиме инсталирајте MetaMask!");
      return;
    }

    try {
      setLoading(true);

      //proverka dali e sepolia mreza
      const chainId = await window.ethereum.request({ method: "eth_chainId" });
      if (chainId !== "0xaa36a7") {
        alert("Ве молиме префрлете се на Sepolia мрежата!");
        setLoading(false);
        return;
      }

      //  zemanje na adresa
      const accounts = await window.ethereum.request({
        method: "eth_requestAccounts",
      });
      const address = accounts[0];

      //zemanje na nonce od backend
      const nonceRes = await fetch(
        `http://localhost:8080/metamuskAuth/nonce?address=${address}`,
        { credentials: "include" }
      );

      if (!nonceRes.ok) {
        const errorText = await nonceRes.text();
        throw new Error(
          `Проблем со серверот (${nonceRes.status}): ${errorText}`
        );
      }

      const { nonce } = await nonceRes.json();

      // potpisuvanje na transakcijata za povrzuvanje na wallet
      const provider = new ethers.BrowserProvider(window.ethereum);
      const signer = await provider.getSigner();
      const signature = await signer.signMessage(nonce);

      // linkuvanje so backend za zapisuvanje
      const res = await fetch(
        "http://localhost:8080/metamuskAuth/link-wallet-roditel",
        {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({
            address: address.toLowerCase(),
            signature,
          }),
          credentials: "include",
        }
      );

      const data = await res.json();

      if (!res.ok) {
        throw new Error(data.message || "Неуспешно поврзување на паричникот.");
      }

      setBackendWalletAddress(address);
      setSavedWallet(null);
      alert("Паричникот е успешно поврзан!");
    } catch (err) {
      console.error("MetaMask Error:", err);
      alert(err.message || "Се случи неочекувана грешка.");
    } finally {
      setLoading(false);
    }
  };

  const handleDisconnectWallet = async () => {
    try {
      const response = await axios.post(
        "http://localhost:8080/metamuskAuth/unlink-wallet",
        {},
        {
          withCredentials: true,
        }
      );
      if (response.status === 200) {
        setBackendWalletAddress(null);
        setSavedWallet(null);
      }
    } catch (err) {
      console.log(`Error while disconnectiong a wallet ${err}`);
    }
  };

  return (
    <>
      <div className={styles.mainContainer}>
        <NavbarRoditel />
        <div className={styles.contentCard}>
          <h1 className={styles.heading}>Подесувања за профилот</h1>

          <div className={styles.metamuskSettings}>
            <div className={styles.cryptoHeader}>
              <h2>Опции за metamusk</h2>
              <p>
                Вашата Metamusk адреса:{" "}
                {backendWalletAddress ? backendWalletAddress : "/"}
              </p>
            </div>

            <div className={styles.actionArea}>
              {!backendWalletAddress ? (
                <button
                  className={styles.connectBtn}
                  onClick={connectWallet}
                  disabled={loading}
                >
                  {loading ? "Поврзување..." : "Поврзете MetaMask wallet"}
                </button>
              ) : (
                <button onClick={handleDisconnectWallet}>Disconnect</button>
              )}
            </div>
          </div>
        </div>
      </div>
    </>
  );
};

export default RoditelSettings;