import type { Metadata } from 'next';
import UDPHolePunchingDiagram from '@/components/diagrams/UDPHolePunchingDiagram';
import NATTraversalDiagram from '@/components/diagrams/NATTraversalDiagram';
import PeerDiscoveryDiagram from '@/components/diagrams/PeerDiscoveryDiagram';

export const metadata: Metadata = {
  title: 'How P2P Works - Understanding Peer-to-Peer Networking',
  description: 'Learn about peer-to-peer networking, UDP hole-punching, NAT traversal, and how P2NS uses these technologies.',
  keywords: ['P2P networking', 'peer-to-peer', 'UDP hole-punching', 'NAT traversal', 'Hyperswarm', 'DHT', 'Corestore', 'P2P explained'],
  authors: [{ name: 'Raven Scott' }],
  openGraph: {
    title: 'How P2P Works - Understanding Peer-to-Peer Networking',
    description: 'Learn about peer-to-peer networking, UDP hole-punching, NAT traversal, and how P2NS uses these technologies.',
    url: 'https://p2ns.space/learn/p2p',
    siteName: 'P2NS',
    type: 'website',
  },
  twitter: {
    card: 'summary_large_image',
    title: 'How P2P Works - Understanding Peer-to-Peer Networking',
    description: 'Learn about peer-to-peer networking, UDP hole-punching, NAT traversal, and how P2NS uses these technologies.',
  },
  alternates: {
    canonical: 'https://p2ns.space/learn/p2p',
  },
};

export default function P2PPage() {
  return (
    <div className="min-h-screen">
      {/* Introduction */}
      <section className="py-20 bg-gradient-to-b from-blue-50 to-white dark:from-gray-900 dark:to-gray-800">
        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
          <h1 className="text-4xl sm:text-5xl font-bold text-gray-900 dark:text-white mb-6">
            Understanding Peer-to-Peer Networking
          </h1>
          <p className="text-xl text-gray-600 dark:text-gray-300 leading-relaxed mb-8">
            Peer-to-peer (P2P) networking is a distributed architecture where participants (peers) share resources 
            and communicate directly without relying on a central server. P2NS leverages P2P technology to create 
            a resilient, decentralized DNS system.
          </p>
          <div className="bg-blue-100 dark:bg-blue-900 border-l-4 border-blue-500 p-4 rounded">
            <p className="text-sm text-blue-800 dark:text-blue-200">
              <strong>Key Concept:</strong> In a P2P network, each node can act as both a client and a server, 
              enabling direct communication and resource sharing between peers.
            </p>
          </div>
        </div>
      </section>

      {/* UDP Hole Punching */}
      <section className="py-20 bg-white dark:bg-gray-900">
        <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
          <h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-4">
            UDP Hole Punching
          </h2>
          <p className="text-lg text-gray-600 dark:text-gray-300 mb-8">
            UDP hole-punching lets two peers behind NAT establish a direct path. In the Holepunch stack
            (used by Hyperswarm and Holesail), peers coordinate through <strong>HyperDHT</strong>—a distributed
            hash table—not a single central rendezvous server. When both sides use predictable NAT ports,
            most sessions connect directly; symmetric NAT or blocked UDP may fall back to encrypted relays.
          </p>
          
          <UDPHolePunchingDiagram />

          <div className="mt-8 prose prose-lg dark:prose-invert max-w-none">
            <h3 className="text-2xl font-semibold text-gray-900 dark:text-white mb-4">How It Works</h3>
            <ol className="list-decimal pl-6 space-y-3 text-gray-600 dark:text-gray-300">
              <li>
                <strong>Announce on the DHT:</strong> Each peer registers its public endpoints with HyperDHT
                under its cryptographic identity.
              </li>
              <li>
                <strong>Signaling through the DHT:</strong> When Alice wants Bob, the DHT routes a connect
                intent so both sides learn each other&apos;s public IP and port.
              </li>
              <li>
                <strong>Simultaneous UDP probes:</strong> Both peers send UDP packets to each other&apos;s
                public endpoints at the same time (often via libudx).
              </li>
              <li>
                <strong>NAT creates a &quot;hole&quot;:</strong> Outgoing packets open a temporary mapping so
                return traffic from that peer can pass through the firewall.
              </li>
              <li>
                <strong>Direct path or relay:</strong> On success, peers talk directly; if hole-punching fails
                (e.g. symmetric NAT on both sides), Hyperswarm can route through blind relays that only see
                encrypted Noise traffic (~85% of connections succeed with hole punching in typical conditions).
              </li>
            </ol>
          </div>
        </div>
      </section>

      {/* NAT Traversal */}
      <section className="py-20 bg-gray-50 dark:bg-gray-800">
        <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
          <h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-4">
            NAT Traversal
          </h2>
          <p className="text-lg text-gray-600 dark:text-gray-300 mb-8">
            Network Address Translation (NAT) is used by routers to share a single public IP address among multiple 
            devices. NAT traversal techniques allow P2P connections to work through these devices.
          </p>

          <NATTraversalDiagram />

          <div className="mt-8 grid md:grid-cols-2 gap-6">
            <div className="bg-white dark:bg-gray-900 p-6 rounded-lg border border-gray-200 dark:border-gray-700">
              <h3 className="text-xl font-semibold text-gray-900 dark:text-white mb-3">Types of NAT</h3>
              <ul className="space-y-2 text-gray-600 dark:text-gray-300">
                <li><strong>Open NAT:</strong> Predictable mapping—hole punching usually works.</li>
                <li><strong>Consistent NAT:</strong> Same external port per internal port—still punchable with coordination.</li>
                <li><strong>Random / symmetric NAT:</strong> Unpredictable external ports—often needs a relay fallback.</li>
              </ul>
            </div>
            <div className="bg-white dark:bg-gray-900 p-6 rounded-lg border border-gray-200 dark:border-gray-700">
              <h3 className="text-xl font-semibold text-gray-900 dark:text-white mb-3">CGNAT Challenges</h3>
              <p className="text-gray-600 dark:text-gray-300 mb-3">
                Carrier-Grade NAT (CGNAT) adds an additional layer of NAT, making traversal even more complex. 
                P2NS uses Holesail, which is specifically designed to handle these challenging scenarios.
              </p>
              <p className="text-gray-600 dark:text-gray-300">
                Holesail implements advanced techniques including:
              </p>
              <ul className="list-disc pl-6 mt-2 text-gray-600 dark:text-gray-300">
                <li>Multiple simultaneous connection attempts</li>
                <li>Protocol-specific optimizations</li>
              </ul>
            </div>
          </div>
        </div>
      </section>

      {/* Peer Discovery */}
      <section className="py-20 bg-white dark:bg-gray-900">
        <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
          <h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-4">
            Peer Discovery with Hyperswarm
          </h2>
          <p className="text-lg text-gray-600 dark:text-gray-300 mb-8">
            Hyperswarm is a high-level API on top of <strong>HyperDHT</strong> (Kademlia-style DHT). Peers
            announce and discover each other by 32-byte topics without a central directory server.
          </p>

          <PeerDiscoveryDiagram />

          <div className="mt-8 prose prose-lg dark:prose-invert max-w-none">
            <h3 className="text-2xl font-semibold text-gray-900 dark:text-white mb-4">How Hyperswarm Works</h3>
            <div className="space-y-4 text-gray-600 dark:text-gray-300">
              <p>
                <strong>Topic-based discovery:</strong> P2NS hashes <code className="rounded bg-gray-200 px-1.5 py-0.5 font-mono text-sm text-gray-900 dark:bg-gray-700 dark:text-gray-200">TOPIC_SEED</code> (default <code className="rounded bg-gray-200 px-1.5 py-0.5 font-mono text-sm text-gray-900 dark:bg-gray-700 dark:text-gray-200">p2ns-dns</code>) with SHA-256 to form a 32-byte topic. Every node interested in the network joins that topic.
              </p>
              <p>
                <strong>DHT lookup:</strong> HyperDHT returns peers that have announced on the topic. DHT results are candidates only—each connection still completes a Noise XX handshake so the remote party must prove key ownership.
              </p>
              <p>
                <strong>Connection establishment:</strong> Hyperswarm coordinates UDP hole punching (and relay fallback when needed), then runs encrypted streams for Core RPC and plugin traffic.
              </p>
              <p>
                <strong>Automatic Reconnection:</strong> Hyperswarm automatically handles peer churn, reconnecting 
                when peers go offline and come back online.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* Holepunch stack */}
      <section className="py-20 bg-gray-50 dark:bg-gray-800">
        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
          <h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-4">
            The Holepunch Connection Stack
          </h2>
          <p className="text-lg text-gray-600 dark:text-gray-300 mb-6">
            P2NS uses the Holepunch stack in layers: raw UDP paths, then encryption, then application protocols.
          </p>
          <ol className="list-decimal pl-6 space-y-2 text-gray-600 dark:text-gray-300">
            <li><strong>libudx</strong> — reliable UDP between peers after hole punching</li>
            <li><strong>Secret Stream (Noise XX)</strong> — mutual authentication and XChaCha20-Poly1305 encryption</li>
            <li><strong>Protomux / protomux-rpc</strong> — multiplexed channels for core invites, consensus, and plugins</li>
            <li><strong>Hypercore / Corestore</strong> — append-only, Merkle-verified logs for DNS state</li>
          </ol>
          <p className="text-sm text-gray-500 dark:text-gray-400 mt-4">
            Domain tunnels use <strong>Holesail</strong> (separate hashes on the DHT) for reaching services behind NAT; the P2NS swarm topic is only for DNS peer sync.
          </p>
        </div>
      </section>

      {/* Corestore & Autopass */}
      <section className="py-20 bg-white dark:bg-gray-900">
        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
          <h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-4">
            Decentralized Storage & Security
          </h2>
          <div className="grid md:grid-cols-2 gap-8">
            <div className="bg-gray-50 dark:bg-gray-800 p-6 rounded-lg border border-gray-200 dark:border-gray-700">
              <h3 className="text-xl font-semibold text-gray-900 dark:text-white mb-3">Corestore</h3>
              <p className="text-gray-600 dark:text-gray-300 mb-3">
                Corestore manages Hypercore append-only logs. Each block is Merkle-linked and signed with Ed25519,
                so peers verify data by proof—not by trusting who delivered it. P2NS stores domain claims and votes in this replicated log.
              </p>
              <ul className="list-disc pl-6 space-y-1 text-gray-600 dark:text-gray-300">
                <li>Immutable append-only history</li>
                <li>Sparse replication of blocks</li>
                <li>Automatic sync across peers</li>
                <li>Domain conflicts resolved by peer voting (not Autobase)</li>
              </ul>
            </div>
            <div className="bg-gray-50 dark:bg-gray-800 p-6 rounded-lg border border-gray-200 dark:border-gray-700">
              <h3 className="text-xl font-semibold text-gray-900 dark:text-white mb-3">Autopass</h3>
              <p className="text-gray-600 dark:text-gray-300 mb-3">
                Autopass manages secure writer additions to the Corestore. It ensures only authorized peers can 
                write to the ledger, preventing spam and attacks.
              </p>
              <ul className="list-disc pl-6 space-y-1 text-gray-600 dark:text-gray-300">
                <li>Invitation-based access control</li>
                <li>Genesis master creates the ledger; masters and writers issue invites</li>
                <li>One <code className="bg-gray-800 dark:bg-gray-700 text-gray-100 dark:text-gray-200 px-1.5 py-0.5 rounded">networkId</code> per network (manifest)</li>
                <li>Cryptographic verification</li>
              </ul>
            </div>
          </div>
        </div>
      </section>

      {/* Glossary */}
      <section className="py-20 bg-white dark:bg-gray-900">
        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
          <h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-8">
            Glossary
          </h2>
          <dl className="space-y-6">
            {[
              { term: 'NAT (Network Address Translation)', definition: 'A method of remapping IP addresses, allowing multiple devices to share a single public IP address.' },
              { term: 'CGNAT (Carrier-Grade NAT)', definition: 'A large-scale NAT implementation used by ISPs to conserve IPv4 addresses, adding complexity to P2P connections.' },
              { term: 'UDP Hole Punching', definition: 'A technique that allows two peers behind NAT devices to establish a direct connection by coordinating simultaneous UDP probes, usually signaled over HyperDHT.' },
              { term: 'HyperDHT', definition: 'The Kademlia DHT used by Hyperswarm for peer announcements, lookups, and hole-punch coordination—distributed, not a single rendezvous server.' },
              { term: 'DHT (Distributed Hash Table)', definition: 'A decentralized key-value store that allows peers to find each other without a central directory.' },
              { term: 'Peer Discovery', definition: 'The process of finding other peers in a P2P network, typically using DHT topics (as P2NS does on Hyperswarm).' },
              { term: 'Consensus', definition: 'In P2NS, agreement on domain ownership through voting on claims in the shared Corestore log (distinct from Autobase-style multi-writer ordering).' },
            ].map((item) => (
              <div key={item.term} className="border-l-4 border-blue-500 pl-4">
                <dt className="text-lg font-semibold text-gray-900 dark:text-white mb-1">
                  {item.term}
                </dt>
                <dd className="text-gray-600 dark:text-gray-300">
                  {item.definition}
                </dd>
              </div>
            ))}
          </dl>
        </div>
      </section>
    </div>
  );
}