import React from 'react';
import { AuthProvider, useAuth } from './contexts/AuthContext';
import DomainVerification from './components/DomainVerification';
import VerifiedDomainBadge from './components/VerifiedDomainBadge';
import './App.css';

/**
 * Main application component
 * Demo of domain verification feature
 */
function App() {
  const { user, loading } = useAuth();
  const [showVerification, setShowVerification] = React.useState(false);

  if (loading) {
    return <div className="loading-screen">Loading...</div>;
  }

  return (
    <div className="app">
      <header className="app-header">
        <h1>AeThex Passport</h1>
        <p>Domain Verification</p>
      </header>

      <main className="app-main">
        {user && (
          <div className="user-profile">
            <div className="profile-header">
              <h2>{user.email}</h2>
              {user.verifiedDomain && (
                <VerifiedDomainBadge
                  verifiedDomain={user.verifiedDomain}
                  verifiedAt={user.domainVerifiedAt}
                />
              )}
            </div>

            <div className="profile-section">
              <button
                onClick={() => setShowVerification(!showVerification)}
                className="toggle-button"
              >
                {showVerification ? 'Hide' : 'Show'} Domain Verification
              </button>

              {showVerification && (
                <div className="verification-container">
                  <DomainVerification />
                </div>
              )}
            </div>
          </div>
        )}

        <div className="info-section">
          <h3>About Domain Verification</h3>
          <p>
            Domain verification allows you to prove ownership of a domain by adding
            a DNS TXT record or connecting a wallet that owns a .aethex blockchain domain.
          </p>
          <ul>
            <li>✓ Verify traditional domains via DNS TXT records</li>
            <li>✓ Verify .aethex domains via blockchain</li>
            <li>✓ Display verified domain on your profile</li>
            <li>✓ Prevent domain impersonation</li>
          </ul>
        </div>
      </main>

      <footer className="app-footer">
        <p>&copy; 2026 AeThex Corporation. All rights reserved.</p>
      </footer>
    </div>
  );
}

export default function AppWrapper() {
  return (
    <AuthProvider>
      <App />
    </AuthProvider>
  );
}
