import { useState } from 'react';
import { useAuth } from '../contexts/AuthContext';
import { Shield, Wallet, ArrowRight, Globe, Lock, Zap, TrendingUp, Building2, ChevronRight } from 'lucide-react';

export default function LoginPage() {
  const { connectWallet, loading, error } = useAuth();
  const [connecting, setConnecting] = useState<string | null>(null);

  const handleConnect = async (provider: 'metamask' | 'walletconnect' | 'coinbase') => {
    setConnecting(provider);
    await connectWallet(provider);
    setConnecting(null);
  };

  return (
    <div className="login-page">
      <div className="login-bg-grid" />
      <div className="login-bg-glow" />

      <div className="login-container">
        <div className="login-left">
          <div className="login-brand">
            <div className="login-logo">
              <Building2 size={32} />
              <div>
                <h1>Solace Bank Group</h1>
                <span className="login-plc">PLC</span>
              </div>
            </div>
            <p className="login-tagline">Enterprise Treasury Management Portal</p>
          </div>

          <div className="login-features">
            <div className="login-feature">
              <div className="login-feature-icon">
                <TrendingUp size={20} />
              </div>
              <div>
                <h3>Multi-Asset Treasury</h3>
                <p>Consolidated views across fiat, digital assets, securities, and commodities</p>
              </div>
            </div>
            <div className="login-feature">
              <div className="login-feature-icon">
                <Shield size={20} />
              </div>
              <div>
                <h3>Regulatory Compliance</h3>
                <p>IPSAS, US GAAP, and IFRS compliant reporting frameworks</p>
              </div>
            </div>
            <div className="login-feature">
              <div className="login-feature-icon">
                <Globe size={20} />
              </div>
              <div>
                <h3>Global Settlement</h3>
                <p>Cross-border payment orchestration with real-time settlement tracking</p>
              </div>
            </div>
            <div className="login-feature">
              <div className="login-feature-icon">
                <Lock size={20} />
              </div>
              <div>
                <h3>Web3 Security</h3>
                <p>Cryptographic wallet authentication with enterprise-grade access controls</p>
              </div>
            </div>
          </div>

          <div className="login-compliance-badges">
            <span className="compliance-badge">IPSAS</span>
            <span className="compliance-badge">US GAAP</span>
            <span className="compliance-badge">IFRS</span>
            <span className="compliance-badge">ISO 20022</span>
            <span className="compliance-badge">SOC 2</span>
          </div>
        </div>

        <div className="login-right">
          <div className="login-card">
            <div className="login-card-header">
              <Wallet size={24} />
              <h2>Connect Wallet</h2>
              <p>Authenticate with your Web3 wallet to access the portal</p>
            </div>

            {error && (
              <div className="login-error">
                <span>{error}</span>
              </div>
            )}

            <div className="login-wallets">
              <button
                className={`wallet-option ${connecting === 'metamask' ? 'connecting' : ''}`}
                onClick={() => handleConnect('metamask')}
                disabled={loading}
              >
                <div className="wallet-option-left">
                  <div className="wallet-icon metamask">
                    <span>🦊</span>
                  </div>
                  <div>
                    <span className="wallet-name">MetaMask</span>
                    <span className="wallet-desc">Browser extension wallet</span>
                  </div>
                </div>
                {connecting === 'metamask' ? (
                  <div className="wallet-spinner" />
                ) : (
                  <ChevronRight size={16} className="wallet-arrow" />
                )}
              </button>

              <button
                className={`wallet-option ${connecting === 'walletconnect' ? 'connecting' : ''}`}
                onClick={() => handleConnect('walletconnect')}
                disabled={loading}
              >
                <div className="wallet-option-left">
                  <div className="wallet-icon walletconnect">
                    <span>🔗</span>
                  </div>
                  <div>
                    <span className="wallet-name">WalletConnect</span>
                    <span className="wallet-desc">Scan QR code to connect</span>
                  </div>
                </div>
                {connecting === 'walletconnect' ? (
                  <div className="wallet-spinner" />
                ) : (
                  <ChevronRight size={16} className="wallet-arrow" />
                )}
              </button>

              <button
                className={`wallet-option ${connecting === 'coinbase' ? 'connecting' : ''}`}
                onClick={() => handleConnect('coinbase')}
                disabled={loading}
              >
                <div className="wallet-option-left">
                  <div className="wallet-icon coinbase">
                    <span>🔵</span>
                  </div>
                  <div>
                    <span className="wallet-name">Coinbase Wallet</span>
                    <span className="wallet-desc">Coinbase self-custody wallet</span>
                  </div>
                </div>
                {connecting === 'coinbase' ? (
                  <div className="wallet-spinner" />
                ) : (
                  <ChevronRight size={16} className="wallet-arrow" />
                )}
              </button>
            </div>

            <div className="login-divider">
              <span>or</span>
            </div>

            <button
              className="login-demo-btn"
              onClick={() => handleConnect('metamask')}
              disabled={loading}
            >
              <Zap size={16} />
              <span>Enter Demo Mode</span>
              <ArrowRight size={14} />
            </button>

            <p className="login-terms">
              By connecting, you agree to the Terms of Service and acknowledge
              that Solace Bank Group PLC processes authentication via
              cryptographic signature verification.
            </p>
          </div>

          <div className="login-security-note">
            <Lock size={12} />
            <span>End-to-end encrypted · No private keys stored · SOC 2 Type II certified</span>
          </div>
        </div>
      </div>
    </div>
  );
}