import { useState } from 'react';
import { Send, Loader2, CheckCircle, Code, Eye, Copy } from 'lucide-react';

export default function Generator() {
  const [prompt, setPrompt] = useState('');
  const [isGenerating, setIsGenerating] = useState(false);
  const [result, setResult] = useState(null);

  const handleGenerate = async () {
    if (!prompt) return;
    setIsGenerating(true);
    
    // Simulate API call
    setTimeout(() {
      setResult({
        code: `export default function LandingPage() {
  return (
    <div className="min-h-screen bg-black text-white">
      <nav className="p-6 flex justify-between">
        <h1 className="font-bold">Brand</h1>
        <button>Get Started</button>
      </nav>
      <main className="pt-20 text-center">
        <h2 className="text-5xl font-bold mb-4">Welcome Future</h2>
        <p className="text-gray-400">Built with AI.</p>
      </main>
    </div>
  );
}`,
        preview: 'Generated UI Preview'
      });
      setIsGenerating(false);
    }, 2000);
  };

  return (
    <div className="flex-1 flex flex-col h-full overflow-hidden relative">
      {/* Background Grid */}
      <div className="absolute inset-0 bg-[url('https://grainy-gradients.vercel.app/noise.svg')] opacity-20 pointer-events-none"></div>
      
      <div className="flex-1 overflow-y-auto p-4 md:p-8 max-w-5xl mx-auto w-full z-10">
        
        {/* Input Area */}
        {!result && !isGenerating && (
          <div className="mt-20 flex flex-col items-center text-center animate-in">
            <h1 className="text-4xl md:text-6xl font-bold mb-6 tracking-tight">
              Describe your <span className="gradient-text">digital reality</span>
            </h1>
            <p className="text-gray-400 mb-10 max-w-lg text-lg">
              No tokens. No limits. Just pure generative power. Type what you need, get the code instantly.
            </p>
            
            <div className="w-full max-w-2xl relative group">
              <div className="absolute -inset-1 bg-gradient-to-r from-indigo-500 to-purple-600 rounded-2xl opacity-20 group-hover:opacity-40 transition duration-500 blur"></div>
              <div className="relative bg-black border border-gray-800 rounded-2xl p-4 shadow-2xl">
                <textarea
                  value={prompt}
                  onChange={(e) => setPrompt(e.target.value)}
                  placeholder="Create a landing page for a coffee shop with a dark theme..."
                  className="w-full bg-transparent text-white placeholder-gray-500 text-lg resize-none focus:outline-none h-32"
                />
                <div className="flex justify-between items-center mt-4 pt-4 border-t border-gray-800/50">
                  <span className="text-xs text-gray-500 font-mono">AI Model: V4.0 (Unlimited)</span>
                  <button 
                    onClick={handleGenerate}
                    disabled={!prompt}
                    className="bg-white text-black px-6 py-2 rounded-lg font-semibold hover:bg-gray-200 transition-colors flex items-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed"
                  >
                    Generate <Send className="w-4 h-4" />
                  </button>
                </div>
              </div>
            </div>
          </div>
        )}

        {/* Loading State */}
        {isGenerating && (
          <div className="mt-20 flex flex-col items-center">
            <div className="relative w-24 h-24">
              <div className="absolute inset-0 border-4 border-indigo-500/30 rounded-full"></div>
              <div className="absolute inset-0 border-4 border-indigo-500 rounded-full animate-spin border-top-transparent"></div>
              <Loader2 className="w-12 h-12 text-indigo-500 absolute inset-0 animate-pulse" />
            </div>
            <h3 className="mt-8 text-2xl font-semibold text-white">Architecting Interface...</h3>
            <p className="text-gray-400 mt-2">Analyzing constraints & optimizing layout</p>
          </div>
        )}

        {/* Result State */}
        {result && (
          <div className="space-y-6 animate-in">
            <div className="flex justify-between items-center mb-4">
              <h2 className="text-2xl font-bold text-white">Generated Result</h2>
              <div className="flex gap-2">
                <button className="px-4 py-2 bg-gray-800 hover:bg-gray-700 text-white rounded-lg text-sm font-medium flex items-center gap-2 transition-colors">
                  <Eye className="w-4 h-4" /> Preview
                </button>
                <button className="px-4 py-2 bg-indigo-600 hover:bg-indigo-700 text-white rounded-lg text-sm font-medium flex items-center gap-2 transition-colors">
                  <Copy className="w-4 h-4" /> Copy Code
                </button>
              </div>
            </div>

            <div className="grid md:grid-cols-2 gap-6 h-[600px]">
              {/* Code Editor View */}
              <div className="bg-[#0d1117] rounded-xl border border-gray-800 p-4 font-mono text-sm overflow-auto text-gray-300 shadow-lg">
                <div className="flex items-center gap-2 mb-4 border-b border-gray-800 pb-2">
                  <Code className="w-4 h-4 text-indigo-400" />
                  <span className="text-xs text-gray-500">App.jsx</span>
                </div>
                <pre>{result.code}</pre>
              </div>

              {/* Visual Preview */}
              <div className="bg-white rounded-xl border border-gray-200 overflow-hidden relative flex flex-col">
                <div className="h-8 bg-gray-100 border-b border-gray-200 flex items-center px-4 gap-2">
                  <div className="w-3 h-3 rounded-full bg-red-400"></div>
                  <div className="w-3 h-3 rounded-full bg-yellow-400"></div>
                  <div className="w-3 h-3 rounded-full bg-green-400"></div>
                </div>
                <div className="flex-1 bg-black text-white p-8 flex flex-col justify-center items-center">
                  <h1 className="text-3xl font-bold mb-4">Coffee & Code</h1>
                  <p className="text-gray-400">The best brew for developers.</p>
                  <button className="mt-6 px-6 py-2 bg-indigo-600 rounded-full text-sm font-bold">Order Now</button>
                </div>
              </div>
            </div>
            
            <div className="mt-8 flex justify-center">
              <button 
                onClick={() { setResult(null); setPrompt(''); }}
                className="text-gray-400 hover:text-white underline underline-offset-4"
              >
                Start New Generation
              </button>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}