import React, { useState } from 'react';
import { SocketProvider } from './contexts/SocketContext';
import { AuthProvider, useAuth } from './contexts/AuthContext';
import DomainVerification from './components/DomainVerification';
import VerifiedDomainBadge from './components/VerifiedDomainBadge';
import Chat from './components/Chat/Chat';
import Call from './components/Call';
import GameForgeChat from './components/GameForgeChat';
import UpgradeFlow from './components/Premium';
import './App.css';

/**
 * Comprehensive demo showcasing all AeThex Connect features
 * Phases 1-6 implementation
 */
function DemoContent() {
  const [activeTab, setActiveTab] = useState('overview');
  const { user, loading } = useAuth();

  // Show loading state while auth initializes
  if (loading || !user) {
    return (
      <div className="loading-screen">
        <div className="loading-spinner">{String.fromCodePoint(0x1F680)}</div>
        <p>Loading AeThex Connect...</p>
      </div>
    );
  }

  const tabs = [
    { id: 'overview', label: '🏠 Overview', icon: '🏠' },
    { id: 'domain', label: '🌐 Domain Verification', phase: 'Phase 1' },
    { id: 'messaging', label: '💬 Real-time Chat', phase: 'Phase 2' },
    { id: 'gameforge', label: '🎮 GameForge', phase: 'Phase 3' },
    { id: 'calls', label: '📞 Voice/Video', phase: 'Phase 4' },
    { id: 'premium', label: '⭐ Premium', phase: 'Phase 6' }
  ];

  return (
    <SocketProvider>
      <div className="demo-app">
        <header className="demo-header">
          <div className="header-content">
            <div className="logo-section">
              <h1>🚀 AeThex Connect</h1>
              <p className="tagline">Next-Gen Communication for Gamers</p>
            </div>
            <div className="user-section">
              <div className="user-info">
                <span className="user-name">{user.name}</span>
                <span className="user-email">{user.email}</span>
              </div>
              {user.verifiedDomain && (
                <VerifiedDomainBadge
                  verifiedDomain={user.verifiedDomain}
                  verifiedAt={user.domainVerifiedAt}
                />
              )}
            </div>
          </div>
        </header>

        <nav className="demo-nav">
          {tabs.map(tab => (
            <button
              key={tab.id}
              className={`nav-tab ${activeTab === tab.id ? 'active' : ''}`}
              onClick={() => setActiveTab(tab.id)}
            >
              <span className="tab-label">{tab.label}</span>
              {tab.phase && <span className="tab-phase">{tab.phase}</span>}
            </button>
          ))}
        </nav>

        <main className="demo-main">
          {activeTab === 'overview' && (
            <div className="overview-section">
              <h2>Welcome to AeThex Connect</h2>
              <p className="intro">
                A comprehensive communication platform built specifically for gamers and game developers.
                Explore each feature using the tabs above.
              </p>

              <div className="feature-grid">
                <div className="feature-card">
                  <div className="feature-icon">🌐</div>
                  <h3>Domain Verification</h3>
                  <span className="badge phase-1">Phase 1</span>
                  <p>Verify ownership of traditional domains (DNS) or blockchain .aethex domains</p>
                  <ul>
                    <li>DNS TXT record verification</li>
                    <li>Blockchain domain integration</li>
                    <li>Verified profile badges</li>
                  </ul>
                </div>

                <div className="feature-card">
                  <div className="feature-icon">💬</div>
                  <h3>Real-time Messaging</h3>
                  <span className="badge phase-2">Phase 2</span>
                  <p>Instant, encrypted messaging with WebSocket connections</p>
                  <ul>
                    <li>Private conversations</li>
                    <li>Message history</li>
                    <li>Read receipts</li>
                    <li>Typing indicators</li>
                  </ul>
                </div>

                <div className="feature-card">
                  <div className="feature-icon">🎮</div>
                  <h3>GameForge Integration</h3>
                  <span className="badge phase-3">Phase 3</span>
                  <p>Built-in chat for game development teams</p>
                  <ul>
                    <li>Project channels</li>
                    <li>Team collaboration</li>
                    <li>Build notifications</li>
                    <li>Asset sharing</li>
                  </ul>
                </div>

                <div className="feature-card">
                  <div className="feature-icon">📞</div>
                  <h3>Voice & Video Calls</h3>
                  <span className="badge phase-4">Phase 4</span>
                  <p>High-quality WebRTC calls with screen sharing</p>
                  <ul>
                    <li>1-on-1 voice calls</li>
                    <li>Video conferencing</li>
                    <li>Screen sharing</li>
                    <li>Call recording</li>
                  </ul>
                </div>

                <div className="feature-card">
                  <div className="feature-icon">🔗</div>
                  <h3>Nexus Engine</h3>
                  <span className="badge phase-5">Phase 5</span>
                  <p>Cross-game identity and social features</p>
                  <ul>
                    <li>Unified player profiles</li>
                    <li>Friend system</li>
                    <li>Game lobbies</li>
                    <li>Rich presence</li>
                  </ul>
                </div>

                <div className="feature-card">
                  <div className="feature-icon">⭐</div>
                  <h3>Premium Subscriptions</h3>
                  <span className="badge phase-6">Phase 6</span>
                  <p>Monetization with blockchain domains</p>
                  <ul>
                    <li>.aethex domain marketplace</li>
                    <li>Premium tiers ($10/mo)</li>
                    <li>Enterprise plans</li>
                    <li>Stripe integration</li>
                  </ul>
                </div>
              </div>

              <div className="status-section">
                <h3>🚀 Phase 7: Full Platform (In Progress)</h3>
                <p>Transform AeThex Connect into cross-platform apps:</p>
                <div className="platform-badges">
                  <span className="platform-badge">🌐 Progressive Web App</span>
                  <span className="platform-badge">📱 iOS & Android</span>
                  <span className="platform-badge">💻 Windows, macOS, Linux</span>
                </div>
                <p className="timeline">Expected completion: May 2026 (5 months)</p>
              </div>

              <div className="quick-stats">
                <div className="stat">
                  <div className="stat-value">6</div>
                  <div className="stat-label">Phases Complete</div>
                </div>
                <div className="stat">
                  <div className="stat-value">1</div>
                  <div className="stat-label">Phase In Progress</div>
                </div>
                <div className="stat">
                  <div className="stat-value">3</div>
                  <div className="stat-label">Platforms</div>
                </div>
                <div className="stat">
                  <div className="stat-value">95%</div>
                  <div className="stat-label">Code Sharing</div>
                </div>
              </div>
            </div>
          )}

          {activeTab === 'domain' && (
            <div className="feature-section">
              <div className="section-header">
                <h2>🌐 Domain Verification</h2>
                <span className="badge phase-1">Phase 1</span>
              </div>
              <p className="section-description">
                Prove ownership of your domain to display it on your profile and prevent impersonation.
                Supports both traditional domains (via DNS) and blockchain .aethex domains.
              </p>
              <DomainVerification />
            </div>
          )}

          {activeTab === 'messaging' && (
            <div className="feature-section">
              <div className="section-header">
                <h2>💬 Real-time Messaging</h2>
                <span className="badge phase-2">Phase 2</span>
              </div>
              <p className="section-description">
                Private encrypted conversations with real-time delivery. Messages sync across all devices.
              </p>
              <Chat />
            </div>
          )}

          {activeTab === 'gameforge' && (
            <div className="feature-section">
              <div className="section-header">
                <h2>🎮 GameForge Integration</h2>
                <span className="badge phase-3">Phase 3</span>
              </div>
              <p className="section-description">
                Collaborate with your game development team. Channels auto-provision with your GameForge projects.
              </p>
              <GameForgeChat />
            </div>
          )}

          {activeTab === 'calls' && (
            <div className="feature-section">
              <div className="section-header">
                <h2>📞 Voice & Video Calls</h2>
                <span className="badge phase-4">Phase 4</span>
              </div>
              <p className="section-description">
                Crystal-clear WebRTC calls with screen sharing. Perfect for co-op gaming or team standups.
              </p>
              <Call />
            </div>
          )}

          {activeTab === 'premium' && (
            <div className="feature-section">
              <div className="section-header">
                <h2>⭐ Premium Subscriptions</h2>
                <span className="badge phase-6">Phase 6</span>
              </div>
              <p className="section-description">
                Upgrade to unlock blockchain .aethex domains, increased storage, and advanced features.
              </p>
              <UpgradeFlow />
            </div>
          )}
        </main>

        <footer className="demo-footer">
          <div className="footer-content">
            <div className="footer-section">
              <h4>AeThex Connect</h4>
              <p>Next-generation communication platform</p>
            </div>
            <div className="footer-section">
              <h4>Technology</h4>
              <ul>
                <li>React 18 + Vite</li>
                <li>WebSocket (Socket.io)</li>
                <li>WebRTC</li>
                <li>Stripe</li>
              </ul>
            </div>
            <div className="footer-section">
              <h4>Phases</h4>
              <ul>
                <li>✅ Phase 1-6 Complete</li>
                <li>🔄 Phase 7 In Progress</li>
              </ul>
            </div>
            <div className="footer-section">
              <h4>Links</h4>
              <ul>
                <li><a href="#" onClick={(e) => { e.preventDefault(); setActiveTab('overview'); }}>Overview</a></li>
                <li><a href="http://localhost:3000/health" target="_blank" rel="noopener noreferrer">API Health</a></li>
                <li><a href="https://github.com/AeThex-Corporation/AeThex-Connect" target="_blank" rel="noopener noreferrer">GitHub</a></li>
              </ul>
            </div>
          </div>
          <div className="footer-bottom">
            <p>&copy; 2026 AeThex Corporation. All rights reserved.</p>
          </div>
        </footer>
      </div>
    </SocketProvider>
  );
}

function Demo() {
  return (
    <AuthProvider>
      <DemoContent />
    </AuthProvider>
  );
}

export default Demo;
