import React, { useState, useEffect } from 'react';
import { ethers } from 'ethers';

function ReserveBTCDashboard() {
  const [balance, setBalance] = useState('0');
  const [syncEvents, setSyncEvents] = useState([]);
  const [provider, setProvider] = useState(null);
  
  // Contract addresses on MegaETH Testnet
  const SYNTH_ADDRESS = '0x37fE059490B70e2605cb3D6fD64F5292d3eB46dE';
  const ORACLE_ADDRESS = '0x611AFD3808e732Ba89A0D9991d2902b0Df9bd149';

  useEffect(() => {
    const initProvider = async () => {
      // Connect to MegaETH Testnet
      const p = new ethers.JsonRpcProvider('https://carrot.megaeth.com/rpc');
      setProvider(p);
      
      // Monitor Oracle sync events
      const oracleContract = new ethers.Contract(
        ORACLE_ADDRESS, 
        ['event Synced(address indexed user, uint64, int64, uint256, uint32, uint64)'],
        p
      );
      
      oracleContract.on('Synced', (user, newBalance, delta) => {
        setSyncEvents(prev => [...prev, {
          user,
          newBalance: newBalance.toString(),
          delta: delta.toString(),
          timestamp: Date.now()
        }]);
      });
    };
    
    initProvider();
  }, []);

  const fetchBalance = async (userAddress) => {
    if (!provider || !userAddress) return;
    
    const synthContract = new ethers.Contract(
      SYNTH_ADDRESS,
      ['function balanceOf(address) view returns (uint256)'],
      provider
    );
    
    const balance = await synthContract.balanceOf(userAddress);
    setBalance(ethers.formatUnits(balance, 8));
  };

  return (
    <div className="reservebtc-dashboard">
      <h2>ReserveBTC Oracle Monitor</h2>
      <div>
        <h3>rBTC-SYNTH Balance</h3>
        <p>{balance} BTC</p>
        <button onClick={() => fetchBalance(userAddress)}>
          Refresh Balance
        </button>
      </div>
      
      <div>
        <h3>Recent Oracle Syncs</h3>
        {syncEvents.map((event, i) => (
          <div key={i}>
            User: {event.user}<br/>
            Balance: {(event.newBalance / 1e8).toFixed(8)} BTC<br/>
            Delta: {(event.delta / 1e8).toFixed(8)} BTC
          </div>
        ))}
      </div>
    </div>
  );
}

const express = require('express');
const { ethers } = require('ethers');

const app = express();
app.use(express.json());

// Connect to MegaETH Testnet
const provider = new ethers.JsonRpcProvider('https://carrot.megaeth.com/rpc');

// Contract addresses
const ORACLE_ADDRESS = '0x611AFD3808e732Ba89A0D9991d2902b0Df9bd149';
const SYNTH_ADDRESS = '0x37fE059490B70e2605cb3D6fD64F5292d3eB46dE';
const WRBTC_ADDRESS = '0xa10FC332f12d102Dddf431F8136E4E89279EFF87';

// API endpoint to get token balances
app.get('/api/balance/:address', async (req, res) => {
  try {
    const { address } = req.params;
    
    const synthContract = new ethers.Contract(
      SYNTH_ADDRESS,
      ['function balanceOf(address) view returns (uint256)'],
      provider
    );
    
    const balance = await synthContract.balanceOf(address);
    res.json({ balance: ethers.formatUnits(balance, 8) });
  } catch (error) {
    res.status(500).json({ error: error.message });
  }
});

// API endpoint to get Oracle sync events
app.get('/api/syncs/:userAddress', async (req, res) => {
  try {
    const { userAddress } = req.params;
    
    const oracleContract = new ethers.Contract(
      ORACLE_ADDRESS,
      ['event Synced(address indexed, uint64, int64, uint256, uint32, uint64)'],
      provider
    );
    
    const filter = oracleContract.filters.Synced(userAddress);
    const events = await oracleContract.queryFilter(filter, -1000);
    
    res.json({ events: events.map(e => e.args) });
  } catch (error) {
    res.status(500).json({ error: error.message });
  }
});

app.listen(3000, () => {
  console.log('ReserveBTC backend running on port 3000');
});

// Set up Oracle event listeners for real-time monitoring
const oracleContract = new ethers.Contract(
  '0x611AFD3808e732Ba89A0D9991d2902b0Df9bd149',
  ['event Synced(address indexed, uint64, int64, uint256, uint32, uint64)'],
  provider
);

oracleContract.on('Synced', (user, newBalance, delta, feeWei, height, timestamp) => {
  console.log('Oracle sync event:', {
    user,
    newBalance: newBalance.toString(),
    delta: delta.toString(),
    feeWei: feeWei.toString(),
    height,
    timestamp
  });
  
  // Update analytics, send notifications, etc.
  updateAnalytics('oracle_sync', { user, newBalance, delta });
  notifyUser(user, 'balance_synced', newBalance);
});

// Historical Oracle sync analysis
const getHistoricalSyncs = async (fromBlock, toBlock) => {
  const filter = oracleContract.filters.Synced();
  const events = await oracleContract.queryFilter(filter, fromBlock, toBlock);
  
  return events.map(event => ({
    timestamp: new Date(Number(event.args[5]) * 1000),
    user: event.args[0],
    newBalance: event.args[1].toString(),
    delta: event.args[2].toString(),
    txHash: event.transactionHash
  }));
};