import { useState } from 'react'
import useMovementClient from '../hooks/useMovementClient'
import useGoGoWallet from '../hooks/useGoGoWallet'
import './MovementDemo.css'

const MovementDemo = () => {
  const { isConnected, address } = useGoGoWallet()
  const { 
    getBalance, 
    getAccountInfo,
    viewFunction, 
    loading,
    networkInfo 
  } = useMovementClient()

  const [balance, setBalance] = useState<string>('')
  const [accountInfo, setAccountInfo] = useState<any>(null)
  const [timestampResult, setTimestampResult] = useState<string>('')
  const [error, setError] = useState<string>('')

  const handleGetBalance = async () => {
    if (!address) return
    
    setError('')
    try {
      const bal = await getBalance(address)
      setBalance(bal)
    } catch (err: any) {
      setError(err.message)
    }
  }

  const handleGetAccountInfo = async () => {
    if (!address) return
    
    setError('')
    try {
      const info = await getAccountInfo(address)
      setAccountInfo(info)
    } catch (err: any) {
      setError(err.message)
    }
  }

  const handleViewFunction = async () => {
    setError('')
    try {
      const result = await viewFunction({
        function: '0x1::timestamp::now_microseconds',
        typeArguments: [],
        functionArguments: []
      })
      const timestamp = new Date(Number(result[0]) / 1000).toLocaleString()
      setTimestampResult(timestamp)
    } catch (err: any) {
      setError(err.message)
    }
  }

  return (
    <div className="movement-demo">
      <div className="movement-demo-header">
        <p className="movement-demo-subtitle">Test Movement blockchain interactions</p>
      </div>

      <div className="network-info">
        <h3>Network Info</h3>
        <p><strong>Network:</strong> {networkInfo.name}</p>
        <p><strong>RPC:</strong> {networkInfo.fullnode}</p>
        <p><strong>Faucet:</strong> {networkInfo.faucet}</p>
      </div>

      {isConnected ? (
        <div>
          <h3>Account Operations</h3>
          <div className="operations-grid">
            <div className="operation-card">
              <h4>💵 Balance</h4>
              <button 
                onClick={handleGetBalance} 
                disabled={loading}
                className="operation-button"
              >
                {loading ? 'Loading...' : 'Get MOVE Balance'}
              </button>
              {balance && <div className="operation-result info">Balance: {(parseInt(balance) / 100000000).toFixed(4)} MOVE</div>}
            </div>

            <div className="operation-card">
              <h4>📋 Account Info</h4>
              <button 
                onClick={handleGetAccountInfo} 
                disabled={loading}
                className="operation-button"
              >
                {loading ? 'Loading...' : 'Get Account Info'}
              </button>
              {accountInfo && (
                <div className="operation-result info">
                  <p><strong>Sequence:</strong> {accountInfo.sequence_number}</p>
                  <p><strong>Auth Key:</strong> {accountInfo.authentication_key?.slice(0, 20)}...</p>
                </div>
              )}
            </div>

            <div className="operation-card">
              <h4>⏰ Network Timestamp</h4>
              <button 
                onClick={handleViewFunction} 
                disabled={loading}
                className="operation-button"
              >
                {loading ? 'Loading...' : 'Get Timestamp'}
              </button>
              {timestampResult && (
                <div className="operation-result info">Time: {timestampResult}</div>
              )}
            </div>
          </div>

          {error && (
            <div className="operation-result error">
              <p>❌ Error: {error}</p>
            </div>
          )}
        </div>
      ) : (
        <div className="connect-prompt">
          <span className="connect-prompt-icon">🔗</span>
          <p>Connect your wallet to test Movement Network interactions</p>
        </div>
      )}
    </div>
  )
}

export default MovementDemo