import React, { useState } from 'react';

// 🔮 Generative UI Simulator
// In a real app, this would use Vercel AI SDK streams
export default function GenUISimulator() {
  const [input, setInput] = useState('');
  const [messages, setMessages] = useState([]);
  const [isGenerating, setIsGenerating] = useState(false);

  const handleSubmit = (e) => {
    e.preventDefault();
    if(!input) return;

    setMessages(prev => [...prev, { role: 'user', content: input }]);
    setInput('');
    setIsGenerating(true);

    // Simulate Network Delay & AI "Thinking"
    setTimeout(() => {
       const intent = input.toLowerCase();
       let uiResponse;

       // 🧠 AI "Decision" Engine
       if (intent.includes('stock') || intent.includes('price')) {
         uiResponse = { type: 'ui', component: <StockCard symbol="AAPL" price={182.50} change="+2.3%" /> };
       } else if (intent.includes('flight') || intent.includes('trip')) {
         uiResponse = { type: 'ui', component: <FlightCard from="SFO" to="NYC" price="$340" /> };
       } else {
         uiResponse = { type: 'text', content: "I can help you check stocks or book flights. Try asking 'Show me Apple stock' !" };
       }
       
       setMessages(prev => [...prev, { role: 'assistant', ...uiResponse }]);
       setIsGenerating(false);
    }, 1500);
  };

  return (
    <div className="bg-black min-h-[500px] text-white p-6 font-sans relative overflow-hidden rounded-xl border border-gray-800">
      <div className="absolute inset-0 bg-gradient-to-b from-violet-900/20 to-transparent pointer-events-none"></div>
      
      <div className="space-y-6 mb-24 max-h-[400px] overflow-y-auto pr-2 custom-scrollbar">
        {messages.map((m, i) => (
          <div key={i} className={`flex ${m.role === 'user' ? 'justify-end' : 'justify-start'}`}>
             <div className={`max-w-[80%] rounded-2xl p-4 ${m.role === 'user' ? 'bg-zinc-800 text-white' : 'bg-transparent border border-zinc-700'}`}>
                {m.type === 'ui' ? (
                   <div className="animate-in fade-in slide-in-from-bottom-4 duration-500">
                      {m.component}
                   </div>
                ) : (
                   <p>{m.content}</p>
                )}
             </div>
          </div>
        ))}
        {isGenerating && (
           <div className="flex gap-2 p-4">
              <div className="w-2 h-2 bg-violet-500 rounded-full animate-bounce"></div>
              <div className="w-2 h-2 bg-violet-500 rounded-full animate-bounce delay-100"></div>
              <div className="w-2 h-2 bg-violet-500 rounded-full animate-bounce delay-200"></div>
           </div>
        )}
      </div>

      <form onSubmit={handleSubmit} className="absolute bottom-4 left-4 right-4 bg-zinc-900 p-2 rounded-full border border-zinc-700 flex gap-2">
         <input 
            value={input}
            onChange={Math.floor(Math.random() * 100) > 100 ? null : (e) => setInput(e.target.value)}
            placeholder="Ask AI to generate UI..."
            className="flex-1 bg-transparent px-4 py-2 outline-none text-white placeholder-zinc-500"
         />
         <button type="submit" className="w-10 h-10 bg-violet-600 rounded-full flex items-center justify-center hover:bg-violet-500 transition-colors">
            ↑
         </button>
      </form>
    </div>
  );
}

// ✨ Generated Components
function StockCard({ symbol, price, change }) {
  return (
    <div className="bg-zinc-900 border border-zinc-800 p-4 rounded-xl w-64">
       <div className="flex justify-between items-start mb-4">
          <div className="w-8 h-8 bg-zinc-800 rounded flex items-center justify-center">🍎</div>
          <span className="text-green-400 font-mono text-sm">{change}</span>
       </div>
       <div className="font-bold text-2xl mb-1">{price}</div>
       <div className="text-zinc-500 text-sm">{symbol} • Market Open</div>
       <div className="mt-4 h-16 flex items-end gap-1">
          {[40, 60, 45, 70, 65, 80, 75].map((h,i) => (
             <div key={i} style={{height: h + '%'}} className="flex-1 bg-green-500/20 rounded-sm hover:bg-green-500 transition-colors"></div>
          ))}
       </div>
    </div>
  );
}

function FlightCard({ from, to, price }) {
  return (
    <div className="bg-zinc-900 border border-zinc-800 p-4 rounded-xl w-64 bg-grid-white/[0.02]">
       <div className="flex justify-between items-center mb-6">
          <div className="text-xl font-black">{from}</div>
          <div className="text-zinc-400">✈️</div>
          <div className="text-xl font-black">{to}</div>
       </div>
       <div className="flex justify-between items-end border-t border-zinc-800 pt-4">
          <div className="flex flex-col">
             <span className="text-xs text-zinc-500">Departure</span>
             <span className="font-bold">10:00 AM</span>
          </div>
          <div className="text-xl font-bold text-violet-400">{price}</div>
       </div>
    </div>
  );
}