import React, { useState } from 'react';
import { Download, CheckCircle, Loader2, Monitor, Zap, Shield, Code } from 'lucide-react';

export default function DownloadPage() {
  const [downloading, setDownloading] = useState(false);
  const [progress, setProgress] = useState(0);

  const handleDownload = async () => {
    setDownloading(true);
    setProgress(0);

    try {
      // Fetch the installer
      const response = await fetch('/api/download/desktop');
      const contentLength = response.headers.get('content-length');
      const total = parseInt(contentLength || '0', 10);

      const reader = response.body?.getReader();
      const chunks: Uint8Array[] = [];
      let receivedLength = 0;

      if (reader) {
        while (true) {
          const { done, value } = await reader.read();
          if (done) break;

          chunks.push(value);
          receivedLength += value.length;
          setProgress(Math.round((receivedLength / total) * 100));
        }
      }

      // Combine chunks and create blob
      const blob = new Blob(chunks);
      const url = window.URL.createObjectURL(blob);

      // Trigger download
      const a = document.createElement('a');
      a.href = url;
      a.download = 'AeThex-OS-setup.exe';
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
      window.URL.revokeObjectURL(url);

      setProgress(100);

      // Show success message
      setTimeout(() => {
        setDownloading(false);
        setProgress(0);
      }, 2000);
    } catch (error) {
      console.error('Download failed:', error);
      setDownloading(false);
      setProgress(0);
      alert('Download failed. Please try again.');
    }
  };

  return (
    <div className="min-h-screen bg-gradient-to-br from-gray-900 via-purple-900 to-black text-white">
      {/* Hero Section */}
      <div className="container mx-auto px-4 py-20">
        <div className="text-center max-w-4xl mx-auto">
          <h1 className="text-6xl font-bold mb-6 bg-gradient-to-r from-purple-400 via-pink-400 to-blue-400 bg-clip-text text-transparent">
            Download AeThex OS
          </h1>
          <p className="text-xl text-gray-300 mb-12">
            The complete learning ecosystem. Build, learn, and deploy compliant software.
          </p>

          {/* Download Button */}
          <div className="bg-gray-800/50 backdrop-blur-lg rounded-2xl p-8 border border-gray-700 max-w-2xl mx-auto">
            <div className="flex items-center justify-between mb-6">
              <div className="text-left">
                <h3 className="text-2xl font-bold mb-2">AeThex OS Desktop</h3>
                <p className="text-gray-400">Version 0.1.0 • Windows x64 • 2.5 MB</p>
              </div>
              <Monitor className="w-12 h-12 text-purple-400" />
            </div>

            {!downloading ? (
              <button
                onClick={handleDownload}
                className="w-full bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 text-white font-bold py-4 px-8 rounded-xl transition-all transform hover:scale-105 flex items-center justify-center gap-3 text-lg"
              >
                <Download className="w-6 h-6" />
                Download for Windows
              </button>
            ) : (
              <div className="space-y-4">
                <div className="flex items-center justify-center gap-3 text-lg font-semibold">
                  {progress < 100 ? (
                    <>
                      <Loader2 className="w-6 h-6 animate-spin" />
                      Downloading... {progress}%
                    </>
                  ) : (
                    <>
                      <CheckCircle className="w-6 h-6 text-green-400" />
                      Download Complete!
                    </>
                  )}
                </div>
                <div className="w-full bg-gray-700 rounded-full h-3 overflow-hidden">
                  <div
                    className="bg-gradient-to-r from-purple-600 to-pink-600 h-full transition-all duration-300"
                    style={{ width: `${progress}%` }}
                  />
                </div>
                {progress === 100 && (
                  <p className="text-sm text-gray-400">
                    Open the downloaded file to install AeThex OS
                  </p>
                )}
              </div>
            )}

            <div className="mt-6 text-sm text-gray-400 text-center">
              Supports Windows 10 and later
            </div>
          </div>

          {/* Installation Steps */}
          <div className="mt-16 grid md:grid-cols-3 gap-6 text-left">
            <div className="bg-gray-800/30 backdrop-blur-sm rounded-xl p-6 border border-gray-700">
              <div className="w-12 h-12 bg-purple-600/20 rounded-lg flex items-center justify-center mb-4">
                <span className="text-2xl font-bold text-purple-400">1</span>
              </div>
              <h3 className="text-lg font-bold mb-2">Download</h3>
              <p className="text-gray-400">Click the download button to get the installer</p>
            </div>

            <div className="bg-gray-800/30 backdrop-blur-sm rounded-xl p-6 border border-gray-700">
              <div className="w-12 h-12 bg-purple-600/20 rounded-lg flex items-center justify-center mb-4">
                <span className="text-2xl font-bold text-purple-400">2</span>
              </div>
              <h3 className="text-lg font-bold mb-2">Install</h3>
              <p className="text-gray-400">Run the installer and follow the setup wizard</p>
            </div>

            <div className="bg-gray-800/30 backdrop-blur-sm rounded-xl p-6 border border-gray-700">
              <div className="w-12 h-12 bg-purple-600/20 rounded-lg flex items-center justify-center mb-4">
                <span className="text-2xl font-bold text-purple-400">3</span>
              </div>
              <h3 className="text-lg font-bold mb-2">Start Learning</h3>
              <p className="text-gray-400">Launch AeThex OS and begin your journey</p>
            </div>
          </div>
        </div>

        {/* Features */}
        <div className="mt-24 max-w-6xl mx-auto">
          <h2 className="text-4xl font-bold text-center mb-12">What's Inside</h2>
          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
            <div className="bg-gray-800/30 backdrop-blur-sm rounded-xl p-6 border border-gray-700">
              <Code className="w-10 h-10 text-purple-400 mb-4" />
              <h3 className="text-xl font-bold mb-2">Full IDE</h3>
              <p className="text-gray-400">Monaco editor with syntax highlighting and IntelliSense</p>
            </div>

            <div className="bg-gray-800/30 backdrop-blur-sm rounded-xl p-6 border border-gray-700">
              <Monitor className="w-10 h-10 text-pink-400 mb-4" />
              <h3 className="text-xl font-bold mb-2">Terminal</h3>
              <p className="text-gray-400">Full-featured terminal with command execution</p>
            </div>

            <div className="bg-gray-800/30 backdrop-blur-sm rounded-xl p-6 border border-gray-700">
              <Zap className="w-10 h-10 text-blue-400 mb-4" />
              <h3 className="text-xl font-bold mb-2">AeThex Language</h3>
              <p className="text-gray-400">Write once, compile to JS, Lua, Verse, C#</p>
            </div>

            <div className="bg-gray-800/30 backdrop-blur-sm rounded-xl p-6 border border-gray-700">
              <Shield className="w-10 h-10 text-green-400 mb-4" />
              <h3 className="text-xl font-bold mb-2">Compliance</h3>
              <p className="text-gray-400">Built-in COPPA, GDPR, CCPA compliance tools</p>
            </div>
          </div>
        </div>

        {/* System Requirements */}
        <div className="mt-24 max-w-4xl mx-auto bg-gray-800/30 backdrop-blur-sm rounded-xl p-8 border border-gray-700">
          <h2 className="text-3xl font-bold mb-6">System Requirements</h2>
          <div className="grid md:grid-cols-2 gap-8">
            <div>
              <h3 className="text-xl font-semibold mb-4 text-purple-400">Minimum</h3>
              <ul className="space-y-2 text-gray-300">
                <li>• Windows 10 or later</li>
                <li>• 4 GB RAM</li>
                <li>• 500 MB available space</li>
                <li>• 1280x720 display</li>
              </ul>
            </div>
            <div>
              <h3 className="text-xl font-semibold mb-4 text-pink-400">Recommended</h3>
              <ul className="space-y-2 text-gray-300">
                <li>• Windows 11</li>
                <li>• 8 GB RAM or more</li>
                <li>• 2 GB available space</li>
                <li>• 1920x1080 display</li>
              </ul>
            </div>
          </div>
        </div>

        {/* FAQ */}
        <div className="mt-24 max-w-4xl mx-auto">
          <h2 className="text-4xl font-bold text-center mb-12">Frequently Asked Questions</h2>
          <div className="space-y-6">
            <div className="bg-gray-800/30 backdrop-blur-sm rounded-xl p-6 border border-gray-700">
              <h3 className="text-xl font-bold mb-2">Is AeThex OS free?</h3>
              <p className="text-gray-400">Yes! AeThex OS is completely free to download and use.</p>
            </div>

            <div className="bg-gray-800/30 backdrop-blur-sm rounded-xl p-6 border border-gray-700">
              <h3 className="text-xl font-bold mb-2">Does it require an internet connection?</h3>
              <p className="text-gray-400">You can use many features offline, but some features like cloud sync and updates require internet.</p>
            </div>

            <div className="bg-gray-800/30 backdrop-blur-sm rounded-xl p-6 border border-gray-700">
              <h3 className="text-xl font-bold mb-2">How do I get updates?</h3>
              <p className="text-gray-400">AeThex OS automatically checks for updates and will notify you when a new version is available.</p>
            </div>

            <div className="bg-gray-800/30 backdrop-blur-sm rounded-xl p-6 border border-gray-700">
              <h3 className="text-xl font-bold mb-2">Is my data safe?</h3>
              <p className="text-gray-400">Yes. All your data is stored locally on your device. Optional cloud sync is encrypted end-to-end.</p>
            </div>
          </div>
        </div>

        {/* CTA */}
        <div className="mt-24 text-center">
          <h2 className="text-4xl font-bold mb-6">Ready to start building?</h2>
          <button
            onClick={handleDownload}
            className="bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 text-white font-bold py-4 px-12 rounded-xl transition-all transform hover:scale-105 inline-flex items-center gap-3 text-lg"
          >
            <Download className="w-6 h-6" />
            Download Now
          </button>
        </div>
      </div>
    </div>
  );
}