import React, { useRef } from 'react';
import { useTradingIframe } from './useTradingIframe';

const TradingDashboard: React.FC = () => {
  const iframeRef = useRef<HTMLIFrameElement>(null);
  const { 
    addWallets, 
    clearWallets, 
    getCurrentWallets, 
    isReady, 
    tradingStats, 
    solPrice, 
    recentTrades, 
    tokenPrice 
  } = useTradingIframe(iframeRef);

  const handleAddExampleWallets = (): void => {
    const wallets: Wallet[] = [
      { address: 'ABCD', label: 'Whale Trader' },
      { address: 'EFGH', label: 'Smart Money' },
      { address: '1234' }
    ];
    addWallets(wallets);
  };

  const handleAddStringWallets = (): void => {
    const wallets = [
      'XYZ1:DeFi Protocol',
      'XYZ2:Market Maker',
      'XYZ3'
    ];
    addWallets(wallets);
  };

  return (
    <div>
      <div style={{ marginBottom: '20px' }}>
        <h3>Trading App Controls</h3>
        <p>Status: {isReady ? 'Ready' : 'Loading...'}</p>
        
        <button onClick={handleAddExampleWallets} disabled={!isReady}>
          Add Example Wallets (Objects)
        </button>
        
        <button onClick={handleAddStringWallets} disabled={!isReady}>
          Add Example Wallets (Strings)
        </button>
        
        <button onClick={getCurrentWallets} disabled={!isReady}>
          Get Current Wallets
        </button>
        
        <button onClick={clearWallets} disabled={!isReady}>
          Clear Wallets
        </button>
      </div>
      
      {/* SOL Price Display */}
      {solPrice && (
        <div style={{ marginBottom: '20px', padding: '15px', border: '1px solid #ddd', borderRadius: '5px' }}>
          <h4>Real-time SOL Price</h4>
          <div style={{ fontSize: '24px', fontWeight: 'bold', color: '#22C55E' }}>
            ${solPrice.toFixed(2)}
          </div>
        </div>
      )}
      
      {/* Trading Statistics Display */}
      {tradingStats && (
        <div style={{ marginBottom: '20px', padding: '15px', border: '1px solid #ddd', borderRadius: '5px' }}>
          <h4>Whitelist Trading Statistics</h4>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: '10px' }}>
            <div>
              <strong>Bought:</strong>
              <div style={{ color: '#22C55E' }}>{tradingStats.bought.toFixed(3)} SOL</div>
            </div>
            <div>
              <strong>Sold:</strong>
              <div style={{ color: '#EF4444' }}>{tradingStats.sold.toFixed(3)} SOL</div>
            </div>
            <div>
              <strong>Net:</strong>
              <div style={{ color: tradingStats.net >= 0 ? '#22C55E' : '#EF4444' }}>
                {tradingStats.net.toFixed(3)} SOL
              </div>
            </div>
            <div>
              <strong>Trades:</strong>
              <div>{tradingStats.trades}</div>
            </div>
          </div>
          <div style={{ marginTop: '10px', fontSize: '12px', color: '#666' }}>
            Last updated: {new Date(tradingStats.timestamp).toLocaleTimeString()}
          </div>
        </div>
      )}
      
      {/* Recent Trades Display */}
      {recentTrades.length > 0 && (
        <div style={{ marginBottom: '20px', padding: '15px', border: '1px solid #ddd', borderRadius: '5px' }}>
          <h4>Recent Whitelist Trades</h4>
          <div style={{ maxHeight: '300px', overflowY: 'auto' }}>
            {recentTrades.map((trade, index) => (
              <div key={`${trade.signature}-${index}`} style={{
                padding: '10px',
                marginBottom: '8px',
                backgroundColor: trade.type === 'buy' ? '#f0f9ff' : '#fef2f2',
                border: `1px solid ${trade.type === 'buy' ? '#3b82f6' : '#ef4444'}`,
                borderRadius: '4px'
              }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                  <div>
                    <span style={{
                      fontWeight: 'bold',
                      color: trade.type === 'buy' ? '#3b82f6' : '#ef4444',
                      textTransform: 'uppercase'
                    }}>
                      {trade.type}
                    </span>
                    <span style={{ marginLeft: '10px', fontSize: '14px' }}>
                      {trade.tokensAmount.toLocaleString()} tokens @ ${trade.avgPrice.toFixed(4)}
                    </span>
                  </div>
                  <div style={{ fontSize: '12px', color: '#666' }}>
                    {new Date(trade.timestamp).toLocaleTimeString()}
                  </div>
                </div>
                <div style={{ fontSize: '12px', color: '#666', marginTop: '4px' }}>
                  Trader: {trade.address.slice(0, 8)}...{trade.address.slice(-4)} | 
                  SOL Amount: {trade.solAmount.toFixed(3)}
                </div>
              </div>
            ))}
          </div>
        </div>
      )}
      
      <iframe
        ref={iframeRef}
        src="https://frame.raze.sh/sol/"
        width="100%"
        height="800px"
        style={{ border: '1px solid #ccc' }}
      />
    </div>
  );
};

export default TradingDashboard;