'use client';

import { motion } from 'framer-motion';
import { Network, Search, Users } from 'lucide-react';

export default function PeerDiscoveryDiagram() {
  return (
    <div className="bg-gray-50 dark:bg-gray-800 rounded-lg p-8 border border-gray-200 dark:border-gray-700">
      <div className="text-center mb-8">
        <div className="inline-flex items-center space-x-2 px-4 py-2 bg-purple-100 dark:bg-purple-900 rounded-lg mb-4">
          <Search className="h-5 w-5 text-purple-600 dark:text-purple-400" />
          <span className="text-sm font-medium text-gray-900 dark:text-white">
            Topic: sha256('p2ns-dns')
          </span>
        </div>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-4 gap-6">
        {[
          { name: 'Peer 1', status: 'Online' },
          { name: 'Peer 2', status: 'Online' },
          { name: 'Peer 3', status: 'Online' },
          { name: 'Peer 4', status: 'Online' },
        ].map((peer, index) => (
          <motion.div
            key={peer.name}
            initial={{ opacity: 0, scale: 0.9 }}
            whileInView={{ opacity: 1, scale: 1 }}
            viewport={{ once: true }}
            transition={{ duration: 0.3, delay: index * 0.1 }}
            className="bg-white dark:bg-gray-900 p-4 rounded-lg border border-gray-200 dark:border-gray-700 text-center"
          >
            <Network className="h-8 w-8 text-blue-600 dark:text-blue-400 mx-auto mb-2" />
            <h4 className="font-semibold text-gray-900 dark:text-white text-sm mb-1">
              {peer.name}
            </h4>
            <span className="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200">
              {peer.status}
            </span>
          </motion.div>
        ))}
      </div>

      <div className="mt-8 grid md:grid-cols-3 gap-6">
        <div className="bg-white dark:bg-gray-900 p-4 rounded-lg border border-gray-200 dark:border-gray-700">
          <h4 className="font-semibold text-gray-900 dark:text-white mb-2 text-sm">1. Join Topic</h4>
          <p className="text-xs text-gray-600 dark:text-gray-400">
            Peers announce themselves to the DHT using the P2NS topic
          </p>
        </div>
        <div className="bg-white dark:bg-gray-900 p-4 rounded-lg border border-gray-200 dark:border-gray-700">
          <h4 className="font-semibold text-gray-900 dark:text-white mb-2 text-sm">2. Discover Peers</h4>
          <p className="text-xs text-gray-600 dark:text-gray-400">
            Query the DHT to find other peers interested in the same topic
          </p>
        </div>
        <div className="bg-white dark:bg-gray-900 p-4 rounded-lg border border-gray-200 dark:border-gray-700">
          <h4 className="font-semibold text-gray-900 dark:text-white mb-2 text-sm">3. Connect</h4>
          <p className="text-xs text-gray-600 dark:text-gray-400">
            Establish direct connections using UDP hole-punching
          </p>
        </div>
      </div>

      <div className="mt-6 p-4 bg-purple-50 dark:bg-purple-900 rounded-lg border border-purple-200 dark:border-purple-700">
        <div className="flex items-center space-x-2">
          <Users className="h-5 w-5 text-purple-600 dark:text-purple-400" />
          <p className="text-sm text-purple-800 dark:text-purple-200">
            <strong>Hyperswarm</strong> automatically handles peer churn and reconnection, ensuring the network 
            remains connected even as peers join and leave.
          </p>
        </div>
      </div>
    </div>
  );
}