import { useState, useEffect } from 'react';
import { XOConnectProvider } from 'xo-connect';

// Simple setup - no RPC required for connect/sign
const provider = new XOConnectProvider({
  debug: true // Optional: enables debug panel
});

function App() {
  const [account, setAccount] = useState<string | null>(null);
  const [chainId, setChainId] = useState<string>("");

  useEffect(() => {
    // Listen for events
    provider.on('accountsChanged', (accounts) => {
      setAccount(accounts[0] || null);
    });

    provider.on('chainChanged', (newChainId) => {
      setChainId(newChainId);
    });
  }, []);

  const connect = async () => {
    try {
      const accounts = await provider.request({
        method: 'eth_requestAccounts'
      });
      setAccount(accounts[0]);

      const chain = await provider.request({
        method: 'eth_chainId'
      });
      setChainId(chain);
    } catch (error) {
      console.error('Error connecting:', error);
    }
  };

  const signMessage = async () => {
    if (!account) return;

    const message = "Hello from XO Connect!";
    const signature = await provider.request({
      method: 'personal_sign',
      params: [message, account]
    });

    console.log('Signature:', signature);
  };

  return (
    <div>
      {!account ? (
        <button onClick={connect}>Connect Wallet</button>
      ) : (
        <div>
          <p>Connected: {account}</p>
          <p>Chain: {chainId}</p>
          <button onClick={signMessage}>Sign Message</button>
        </div>
      )}
    </div>
  );
}