import React, { useState, useEffect } from 'react';
import { 
  Download, 
  Star, 
  GitBranch, 
  ExternalLink, 
  Code, 
  Terminal,
  Package,
  Shield,
  Zap,
  Globe,
  ChevronDown
} from 'lucide-react';

const HazeSDKsPage = () => {
  const [selectedMaturity, setSelectedMaturity] = useState('All');
  const [selectedLanguage, setSelectedLanguage] = useState('All');
  const [matrixRain, setMatrixRain] = useState([]);

  // Black & White Matrix Rain Effect
  useEffect(() => {
    const characters = '01';
    const columns = Math.floor(window.innerWidth / 20);
    const drops = [];

    for (let i = 0; i < columns; i++) {
      drops[i] = Math.random() * -100;
    }

    const drawMatrix = () => {
      const newRain = [];
      for (let i = 0; i < columns; i++) {
        const char = characters[Math.floor(Math.random() * characters.length)];
        newRain.push({
          id: i,
          x: i * 20,
          y: drops[i] * 20,
          char,
          opacity: Math.random()
        });
        
        if (drops[i] * 20 > window.innerHeight && Math.random() > 0.975) {
          drops[i] = 0;
        }
        drops[i]++;
      }
      setMatrixRain(newRain);
    };

    const interval = setInterval(drawMatrix, 100);
    return () => clearInterval(interval);
  }, []);

  const sdks = [
    {
      name: 'haze-js-sdk',
      maturity: 'Stable',
      language: 'JavaScript',
      description: 'Official JavaScript/TypeScript SDK for Haze Protocol with full Web3 integration',
      install: 'npm install @haze/js-sdk',
      features: ['Web3 Auth', 'Node Management', 'Real-time Messaging', 'P2P Discovery'],
      version: '1.2.0'
    },
    {
      name: 'haze-python',
      maturity: 'Stable', 
      language: 'Python',
      description: 'Python implementation for server-side Haze Protocol integration',
      install: 'pip install haze-protocol',
      features: ['Async Support', 'FastAPI Integration', 'Node Automation', 'Message Processing'],
      version: '0.8.1'
    },
    {
      name: 'haze-rust-sdk',
      maturity: 'Beta',
      language: 'Rust',
      description: 'High-performance Rust SDK for building Haze Protocol applications',
      install: 'cargo add haze-protocol',
      features: ['Zero-Copy', 'Embedded Support', 'WASM Compatible', 'Memory Safe'],
      version: '0.5.2'
    },
    {
      name: 'haze-go',
      maturity: 'Beta',
      language: 'Go',
      description: 'Golang client library for Haze Protocol integration',
      install: 'go get go.haze.network/sdk',
      features: ['Goroutine Support', 'Docker Integration', 'CLI Tools', 'Enterprise'],
      version: '0.6.0'
    },
    {
      name: 'haze-swift',
      maturity: 'Alpha',
      language: 'Swift',
      description: 'Native iOS/macOS SDK for Haze Protocol mobile applications',
      install: "pod 'HazeProtocol'",
      features: ['SwiftUI Support', 'Background Sync', 'Keychain', 'Push Notifications'],
      version: '0.3.0'
    },
    {
      name: 'haze-kotlin',
      maturity: 'Alpha',
      language: 'Kotlin',
      description: 'Android SDK for building Haze Protocol mobile clients',
      install: "implementation 'network.haze:sdk'",
      features: ['Jetpack Compose', 'Room Database', 'WorkManager', 'Biometric Auth'],
      version: '0.2.8'
    }
  ];

  const filteredSDKs = sdks.filter(sdk => {
    return (selectedMaturity === 'All' || sdk.maturity === selectedMaturity) &&
           (selectedLanguage === 'All' || sdk.language === selectedLanguage);
  });

  // CRT Scanlines
  const scanlineStyle = {
    background: `repeating-linear-gradient(
      0deg,
      transparent,
      transparent 2px,
      rgba(255, 255, 255, 0.03) 2px,
      rgba(255, 255, 255, 0.03) 4px
    )`,
    pointerEvents: 'none'
  };

  return (
    <div className="min-h-screen bg-black text-white relative overflow-hidden" style={{fontFamily: 'monospace'}}>
      {/* CRT Scanlines */}
      <div className="absolute inset-0 z-50" style={scanlineStyle}></div>
      
      {/* Clean black background */}

      {/* Navigation Header */}
      <nav className="relative z-50 border-b-2 border-white bg-black">
        <div className="max-w-7xl mx-auto px-8">
          <div className="flex items-center justify-between h-16">
            <div className="flex items-center space-x-8">
              <div className="flex items-center space-x-3">
                <div className="w-8 h-8 border-2 border-white flex items-center justify-center">
                  <Zap className="w-4 h-4" />
                </div>
                <span className="font-bold tracking-widest text-lg">HAZE PROTOCOL</span>
              </div>
            </div>
            
            <div className="flex items-center space-x-8 text-sm uppercase tracking-wider font-mono">
              <a href="#" className="hover:text-gray-300 transition-colors">SOLUTION</a>
              <a href="#" className="hover:text-gray-300 transition-colors">BENEFITS</a>
              <a href="#" className="text-white font-bold">ECOSYSTEM</a>
              <a href="#" className="hover:text-gray-300 transition-colors">FEATURES</a>
              <a href="#" className="hover:text-gray-300 transition-colors">BACKERS</a>
              <a href="#" className="hover:text-gray-300 transition-colors">SECURITY</a>
              <a href="#" className="hover:text-gray-300 transition-colors">TEAM</a>
              <a href="#" className="hover:text-gray-300 transition-colors">FAQ</a>
              <button className="border-2 border-white hover:bg-white hover:text-black px-4 py-2 text-xs font-bold transition-all">
                GET SDK
              </button>
            </div>
          </div>
        </div>
      </nav>

      {/* Main Content */}
      <div className="relative z-40 flex items-center justify-center min-h-screen px-8">
        <div className="max-w-4xl mx-auto text-center">
          
          {/* Hero Section */}
          <div className="mb-16">
            <h1 className="text-6xl md:text-8xl font-black mb-8 tracking-tight">
              THE SDK
              <br />
              <span className="text-gray-400">(RE)ECOSYSTEM</span>
            </h1>
            
            <p className="text-xl mb-8 max-w-2xl mx-auto leading-relaxed">
              <span className="text-gray-400">[dev]</span> Multi-language SDKs, 
              <span className="text-gray-400"> [api]</span> Developer Tools and 
              <span className="text-gray-400"> [lib]</span> Client Libraries to unlock the potential of 
              <span className="text-white font-bold"> decentralized messaging</span>
            </p>

            <button className="border-2 border-white hover:bg-white hover:text-black px-8 py-4 text-sm font-bold tracking-widest transition-all mb-12">
              BROWSE SDKs
            </button>
          </div>

          {/* Filters */}
          <div className="flex justify-center space-x-8 mb-12">
            <div className="flex items-center space-x-3">
              <span className="text-gray-400 text-sm font-mono">MATURITY:</span>
              <div className="relative">
                <select 
                  value={selectedMaturity}
                  onChange={(e) => setSelectedMaturity(e.target.value)}
                  className="bg-black border-2 border-white text-white px-4 py-2 pr-8 text-sm focus:outline-none appearance-none font-mono"
                >
                  <option value="All">ALL</option>
                  <option value="Stable">STABLE</option>
                  <option value="Beta">BETA</option>
                  <option value="Alpha">ALPHA</option>
                </select>
                <ChevronDown className="absolute right-2 top-1/2 transform -translate-y-1/2 w-4 h-4 pointer-events-none" />
              </div>
            </div>

            <div className="flex items-center space-x-3">
              <span className="text-gray-400 text-sm font-mono">LANGUAGE:</span>
              <div className="relative">
                <select 
                  value={selectedLanguage}
                  onChange={(e) => setSelectedLanguage(e.target.value)}
                  className="bg-black border-2 border-white text-white px-4 py-2 pr-8 text-sm focus:outline-none appearance-none font-mono"
                >
                  <option value="All">ALL</option>
                  <option value="JavaScript">JAVASCRIPT</option>
                  <option value="Python">PYTHON</option>
                  <option value="Rust">RUST</option>
                  <option value="Go">GO</option>
                  <option value="Swift">SWIFT</option>
                  <option value="Kotlin">KOTLIN</option>
                </select>
                <ChevronDown className="absolute right-2 top-1/2 transform -translate-y-1/2 w-4 h-4 pointer-events-none" />
              </div>
            </div>
          </div>

          {/* SDK Grid */}
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {filteredSDKs.map((sdk, index) => (
              <div 
                key={index} 
                className="border-2 border-white bg-black p-6 hover:bg-white hover:text-black transition-all duration-300 group"
                style={{boxShadow: '0 0 10px rgba(255, 255, 255, 0.2)'}}
              >
                {/* Header */}
                <div className="flex items-start justify-between mb-4">
                  <div>
                    <h3 className="text-lg font-bold mb-1">{sdk.name}</h3>
                    <div className="flex items-center space-x-3 text-sm font-mono">
                      <span className="text-gray-400 group-hover:text-gray-600">{sdk.language}</span>
                      <span className="font-bold">
                        {sdk.maturity}
                      </span>
                    </div>
                  </div>
                  <span className="text-xs text-gray-400 group-hover:text-gray-600 font-mono">v{sdk.version}</span>
                </div>

                {/* Description */}
                <p className="text-gray-300 group-hover:text-gray-700 text-sm mb-4 leading-relaxed">
                  {sdk.description}
                </p>

                {/* Features */}
                <div className="mb-4">
                  <div className="text-xs text-gray-400 group-hover:text-gray-600 mb-2 font-mono">FEATURES:</div>
                  <div className="grid grid-cols-2 gap-1 text-xs">
                    {sdk.features.map((feature, fIndex) => (
                      <div key={fIndex} className="flex items-center">
                        <span className="text-gray-400 group-hover:text-gray-600 mr-1">&gt;</span>
                        <span className="text-gray-300 group-hover:text-gray-700">{feature}</span>
                      </div>
                    ))}
                  </div>
                </div>

                {/* Installation */}
                <div className="bg-gray-900 group-hover:bg-gray-200 border-2 border-gray-600 group-hover:border-gray-400 p-3 mb-4">
                  <div className="text-xs text-gray-400 group-hover:text-gray-600 mb-1 font-mono">INSTALL:</div>
                  <code className="text-white group-hover:text-black text-xs break-all font-mono">{sdk.install}</code>
                </div>

                {/* Actions */}
                <div className="flex space-x-2">
                  <button className="flex-1 border-2 border-white group-hover:border-black group-hover:bg-black group-hover:text-white py-2 text-xs font-bold transition-all font-mono">
                    <GitBranch className="w-3 h-3 inline mr-1" />
                    REPO
                  </button>
                  <button className="flex-1 border-2 border-gray-400 group-hover:border-gray-600 group-hover:bg-gray-600 group-hover:text-white py-2 text-xs font-bold transition-all font-mono">
                    <Download className="w-3 h-3 inline mr-1" />
                    DOCS
                  </button>
                </div>
              </div>
            ))}
          </div>

          {/* Stats */}
          <div className="mt-16 text-center">
            <div className="inline-flex items-center space-x-8 text-sm font-mono">
              <span><span className="text-gray-400">[</span>{filteredSDKs.length}<span className="text-gray-400">]</span> SHOWING</span>
              <span><span className="text-gray-400">[</span>{sdks.length}<span className="text-gray-400">]</span> TOTAL</span>
              <span><span className="text-gray-400">[</span>{sdks.filter(s => s.maturity === 'Stable').length}<span className="text-gray-400">]</span> STABLE</span>
            </div>
          </div>

          {/* Bottom CTA */}
          <div className="mt-16 border-2 border-white p-8">
            <h3 className="text-2xl font-bold mb-4">BUILD THE FUTURE</h3>
            <p className="text-gray-300 mb-6 max-w-2xl mx-auto">
              Join the Haze Protocol ecosystem. Create decentralized messaging applications, 
              contribute to open source SDKs, and shape the future of private communication.
            </p>
            <div className="flex justify-center space-x-4">
              <button className="border-2 border-white hover:bg-white hover:text-black px-6 py-3 text-sm font-bold transition-all font-mono">
                VIEW DOCS
              </button>
              <button className="border-2 border-gray-400 hover:border-white hover:bg-white hover:text-black px-6 py-3 text-sm font-bold transition-all font-mono">
                JOIN COMMUNITY
              </button>
            </div>
          </div>

        </div>
      </div>
    </div>
  );
};

export default HazeSDKsPage;