import React, { useState, useEffect, useRef } from 'react';
import { 
  Send, 
  Users, 
  Share2, 
  PlusCircle, 
  Bot, 
  User, 
  Check,
  Star,
  Plus,
  Mic,
  Camera,
  Image as ImageIcon,
  FileText,
  Moon,
  Globe,
  Book,
  ShoppingBag,
  Lightbulb,
  Search,
  X,
  LogOut,
  Copy,
  ChevronLeft
} from 'lucide-react';

const apiKey = ""; // Environment provided key

const App = () => {
  // --- State ---
  const [user, setUser] = useState({ name: 'User', uid: 'AB12CD34' });
  const [messages, setMessages] = useState([]);
  const [input, setInput] = useState('');
  const [roomId, setRoomId] = useState('');
  const [isAiLoading, setIsAiLoading] = useState(false);
  const [menuOpen, setMenuOpen] = useState(false);
  const [dreamOpen, setDreamOpen] = useState(false);
  const [copied, setCopied] = useState(false);
  const scrollRef = useRef(null);

  // --- Helpers ---
  const generateId = (len = 12) => {
    const chars = 'abcdefghijklmnopqrstuvwxyz0123456789';
    return Array.from({ length: len }, () => chars[Math.floor(Math.random() * chars.length)]).join('');
  };

  const getAvatarColor = (id) => {
    const colors = ['#1a6fff', '#7b2fff', '#ff6b35', '#00c9a7', '#ff3d71', '#ffa94d'];
    const charSum = [...id].reduce((a, c) => a + c.charCodeAt(0), 0);
    return colors[charSum % colors.length];
  };

  // --- Effects ---
  useEffect(() => {
    if (!roomId) {
      const newId = generateId();
      setRoomId(newId);
      setMessages([{
        id: 'sys-1',
        text: 'Room created! Invite friends to join. Type @nieo to talk to the AI.',
        sender: 'system',
        time: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
      }]);
    }
  }, []);

  useEffect(() => {
    scrollRef.current?.scrollIntoView({ behavior: 'smooth' });
  }, [messages, isAiLoading]);

  // --- Handlers ---
  const copyRoomLink = () => {
    const link = `https://nieo.pages.dev/${roomId}`;
    try {
      const el = document.createElement('textarea');
      el.value = link;
      document.body.appendChild(el);
      el.select();
      document.execCommand('copy');
      document.body.removeChild(el);
      setCopied(true);
      setTimeout(() => setCopied(false), 2000);
    } catch (e) { console.error(e); }
  };

  const getAiResponse = async (userPrompt) => {
    setIsAiLoading(true);
    try {
      let retryCount = 0;
      const maxRetries = 5;
      const systemPrompt = "You are Nieo, a helpful AI assistant. You only respond when tagged with @nieo. Keep responses concise, friendly, and helpful.";

      const callApi = async () => {
        const response = await fetch(`https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash-preview-09-2025:generateContent?key=${apiKey}`, {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({
            contents: [{ parts: [{ text: userPrompt }] }],
            systemInstruction: { parts: [{ text: systemPrompt }] }
          })
        });
        if (!response.ok) throw new Error('API Error');
        return response.json();
      };

      const executeWithRetry = async () => {
        try { return await callApi(); } 
        catch (err) {
          if (retryCount < maxRetries) {
            const delay = Math.pow(2, retryCount) * 1000;
            retryCount++;
            await new Promise(res => setTimeout(res, delay));
            return executeWithRetry();
          }
          throw err;
        }
      };

      const result = await executeWithRetry();
      const aiText = result.candidates?.[0]?.content?.parts?.[0]?.text || "I'm sorry, I'm having trouble thinking right now.";
      
      setMessages(prev => [...prev, {
        id: 'ai-' + Date.now(),
        text: aiText,
        sender: 'Nieo AI',
        isAi: true,
        time: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
      }]);
    } catch (error) {
      setMessages(prev => [...prev, {
        id: 'err-' + Date.now(),
        text: "Connection error. Please try again later.",
        sender: 'system',
        time: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
      }]);
    } finally {
      setIsAiLoading(false);
    }
  };

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

    const userMsg = {
      id: 'u-' + Date.now(),
      text: input,
      sender: 'You',
      isAi: false,
      time: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
    };

    setMessages(prev => [...prev, userMsg]);
    const currentInput = input;
    setInput('');

    if (currentInput.toLowerCase().includes('@nieo')) {
      getAiResponse(currentInput.replace(/@nieo/gi, '').trim());
    }
  };

  // --- Components ---
  const Avatar = ({ name, id, size = 40 }) => {
    const col = getAvatarColor(id || name);
    const initials = name.split(' ').map(w => w[0]).join('').toUpperCase().slice(0, 2);
    return (
      <div 
        style={{ 
          width: size, height: size, 
          background: `linear-gradient(135deg, ${col}cc, ${col}66)`,
          borderColor: `${col}44` 
        }}
        className="rounded-full flex-shrink-0 border-[1.5px] flex items-center justify-center font-bold text-white shadow-lg"
      >
        <span style={{ fontSize: size * 0.38 }}>{initials}</span>
      </div>
    );
  };

  const MenuOverlay = () => (
    <div 
      className={`fixed inset-0 z-40 bg-black/40 backdrop-blur-sm transition-opacity duration-300 ${menuOpen ? 'opacity-100' : 'opacity-0 pointer-events-none'}`}
      onClick={() => setMenuOpen(false)}
    >
      <div 
        className={`fixed bottom-[130px] left-1/2 -translate-x-1/2 w-[calc(100%-32px)] max-w-[388px] bg-[#18181e] border border-white/10 rounded-[22px] overflow-hidden shadow-2xl transition-all duration-300 transform ${menuOpen ? 'translate-y-0 scale-100' : 'translate-y-10 scale-95'}`}
        onClick={e => e.stopPropagation()}
      >
        {[
          { icon: <Camera size={18} />, label: 'Camera', color: '#4d9fff' },
          { icon: <ImageIcon size={18} />, label: 'Photos', color: '#ff9f4d' },
          { icon: <FileText size={18} />, label: 'Files', color: '#7fff9f' },
          { icon: <Bot size={18} />, label: 'Nieo Assistant', color: '#b47fff' },
          { icon: <Moon size={18} />, label: 'Dream Analyzer', color: '#ff7fb4', isNew: true, action: () => { setDreamOpen(true); setMenuOpen(false); } },
          { icon: <Search size={18} />, label: 'Deep Research', color: '#4daaff' },
        ].map((item, i) => (
          <button 
            key={i} 
            onClick={item.action || (() => setMenuOpen(false))}
            className="w-full flex items-center gap-4 px-5 py-4 hover:bg-white/5 transition-colors border-b border-white/5 last:border-0"
          >
            <div style={{ color: item.color }} className="w-10 h-10 rounded-full bg-white/5 flex items-center justify-center">
              {item.icon}
            </div>
            <span className="flex-1 text-left text-sm font-medium text-white/90">{item.label}</span>
            {item.isNew && <span className="text-[10px] font-black bg-gradient-to-r from-blue-500 to-purple-600 px-2 py-0.5 rounded-full">NEW</span>}
          </button>
        ))}
      </div>
    </div>
  );

  return (
    <div className="flex justify-center bg-[#0a0a0c] min-h-screen text-[#f2f2ff] font-sans selection:bg-blue-500/30">
      <div className="w-full max-w-[420px] flex flex-col h-screen overflow-hidden relative border-x border-white/5 shadow-2xl">
        
        {/* Header */}
        <header className="flex items-center justify-between px-5 py-4 bg-[#0a0a0c]/90 backdrop-blur-xl border-b border-white/5 sticky top-0 z-20">
          <div className="flex items-center gap-3">
            <div className="text-2xl font-black tracking-tighter bg-gradient-to-br from-white to-[#4d9fff] bg-clip-text text-transparent">nieo</div>
            <div className="flex items-center gap-1.5 px-3 py-1 bg-blue-500/10 border border-blue-400/20 rounded-full text-[11px] font-bold text-[#4d9fff]">
              <Star size={10} fill="currentColor" /> PLUS
            </div>
          </div>
          <div className="flex items-center gap-2">
            <Avatar name={user.name} id={user.uid} size={36} />
            <button className="p-2 bg-white/5 rounded-full border border-white/10 hover:bg-white/10 transition-colors">
              <LogOut size={16} className="text-white/40" />
            </button>
          </div>
        </header>

        {/* Room Info Bar */}
        <div className="px-5 py-3 bg-[#111115] border-b border-white/5 flex items-center justify-between">
          <div className="flex flex-col">
            <span className="text-xs font-bold text-white/80 uppercase tracking-widest flex items-center gap-2">
              <Users size={12} className="text-[#4d9fff]" /> Friends Group
            </span>
            <span className="text-[10px] font-mono text-white/30 uppercase tracking-tighter">ID: {roomId}</span>
          </div>
          <button 
            onClick={copyRoomLink}
            className={`flex items-center gap-2 px-3 py-1.5 rounded-lg text-xs font-bold transition-all ${copied ? 'bg-green-500/20 text-green-400' : 'bg-white/5 text-white/60 hover:bg-white/10'}`}
          >
            {copied ? <Check size={14} /> : <Share2 size={14} />}
            {copied ? 'Copied' : 'Share'}
          </button>
        </div>

        {/* Main Chat Area */}
        <main className="flex-1 overflow-y-auto p-4 space-y-4 pb-24 custom-scrollbar">
          {messages.length === 0 && (
            <div className="h-full flex flex-col items-center justify-center text-center px-8 opacity-40">
              <div className="w-16 h-16 bg-white/5 rounded-3xl flex items-center justify-center mb-4">
                <Plus size={32} />
              </div>
              <h2 className="text-xl font-bold mb-2">No messages yet</h2>
              <p className="text-sm">Type @nieo to chat with the AI or invite friends using the room link.</p>
            </div>
          )}

          {messages.map((msg) => (
            <div key={msg.id} className={`flex flex-col ${msg.sender === 'system' ? 'items-center' : msg.sender === 'You' ? 'items-end' : 'items-start'} animate-in fade-in slide-in-from-bottom-2 duration-300`}>
              {msg.sender === 'system' ? (
                <span className="bg-white/5 text-white/30 text-[10px] font-bold px-3 py-1 rounded-full uppercase tracking-widest my-2">
                  {msg.text}
                </span>
              ) : (
                <div className={`max-w-[85%] flex gap-3 ${msg.sender === 'You' ? 'flex-row-reverse' : 'flex-row'}`}>
                  {msg.sender !== 'You' && <Avatar name={msg.sender} id={msg.id} size={32} />}
                  <div className={`flex flex-col ${msg.sender === 'You' ? 'items-end' : 'items-start'}`}>
                    {msg.sender !== 'You' && <span className="text-[10px] font-black text-white/30 mb-1 ml-1 tracking-wider uppercase">{msg.sender}</span>}
                    <div className={`px-4 py-3 rounded-2xl text-[14px] leading-relaxed shadow-lg ${
                      msg.sender === 'You' 
                        ? 'bg-[#1a6fff] text-white rounded-tr-none' 
                        : msg.isAi 
                          ? 'bg-gradient-to-br from-indigo-500/10 to-purple-500/10 border border-blue-500/20 text-white rounded-tl-none' 
                          : 'bg-[#18181e] border border-white/10 text-white rounded-tl-none'
                    }`}>
                      {msg.text}
                    </div>
                    <span className="text-[9px] text-white/20 mt-1 mx-1 font-bold">{msg.time}</span>
                  </div>
                </div>
              )}
            </div>
          ))}

          {isAiLoading && (
            <div className="flex items-start gap-3 animate-pulse">
              <div className="w-8 h-8 rounded-full bg-blue-500/20 border border-blue-400/20 flex items-center justify-center">
                <Bot size={16} className="text-[#4d9fff]" />
              </div>
              <div className="bg-[#18181e] border border-white/10 px-4 py-3 rounded-2xl rounded-tl-none flex gap-1.5 items-center">
                <div className="w-1.5 h-1.5 bg-blue-400/50 rounded-full animate-bounce" style={{ animationDelay: '0s' }}></div>
                <div className="w-1.5 h-1.5 bg-blue-400/50 rounded-full animate-bounce" style={{ animationDelay: '0.2s' }}></div>
                <div className="w-1.5 h-1.5 bg-blue-400/50 rounded-full animate-bounce" style={{ animationDelay: '0.4s' }}></div>
              </div>
            </div>
          )}
          <div ref={scrollRef} />
        </main>

        {/* Input Bar */}
        <footer className="fixed bottom-0 left-1/2 -translate-x-1/2 w-full max-w-[420px] p-4 bg-[#0a0a0c]/90 backdrop-blur-xl border-t border-white/5 z-30">
          <form onSubmit={sendMessage} className="flex items-center gap-2">
            <button 
              type="button"
              onClick={() => setMenuOpen(true)}
              className="w-11 h-11 rounded-full bg-[#18181e] border border-white/10 flex items-center justify-center text-white/40 hover:bg-[#2a2a35] transition-colors flex-shrink-0"
            >
              <Plus size={20} />
            </button>
            <div className="flex-1 relative">
              <input
                type="text"
                value={input}
                onChange={(e) => setInput(e.target.value)}
                placeholder="Ask Nieo anything... (use @nieo)"
                className="w-full bg-[#18181e] border border-white/10 rounded-full pl-5 pr-12 py-3 text-sm text-white placeholder-white/20 outline-none focus:border-blue-500/50 transition-all"
              />
              <button 
                type="button"
                className="absolute right-3 top-1/2 -translate-y-1/2 text-white/20 hover:text-blue-400 transition-colors"
              >
                <Mic size={18} />
              </button>
            </div>
            <button 
              type="submit"
              disabled={!input.trim() || isAiLoading}
              className="w-11 h-11 rounded-full bg-[#1a6fff] flex items-center justify-center text-white shadow-lg shadow-blue-500/20 hover:bg-blue-600 disabled:opacity-20 disabled:grayscale transition-all active:scale-95 flex-shrink-0"
            >
              <Send size={18} />
            </button>
          </form>
          <div className="text-center text-[9px] text-white/20 font-black mt-3 uppercase tracking-widest">
            Only messages with <span className="text-[#4d9fff]">@nieo</span> trigger AI
          </div>
        </footer>

        {/* Overlays */}
        <MenuOverlay />
        
        {/* Dream Analyzer Modal */}
        <div 
          className={`fixed inset-0 z-50 bg-black/60 backdrop-blur-md flex items-end justify-center transition-all duration-500 ${dreamOpen ? 'opacity-100' : 'opacity-0 pointer-events-none'}`}
          onClick={() => setDreamOpen(false)}
        >
          <div 
            className={`w-full max-w-[420px] bg-[#111115] border-t border-white/10 rounded-t-[32px] p-8 transition-transform duration-500 transform ${dreamOpen ? 'translate-y-0' : 'translate-y-full'}`}
            onClick={e => e.stopPropagation()}
          >
            <div className="w-12 h-1.5 bg-white/10 rounded-full mx-auto mb-6" />
            <div className="inline-flex items-center gap-2 bg-gradient-to-r from-blue-500 to-purple-600 px-4 py-1.5 rounded-full text-[10px] font-black tracking-widest uppercase mb-4">
              <Star size={10} fill="currentColor" /> New Feature
            </div>
            <h3 className="text-2xl font-black mb-3">Dream Analyzer</h3>
            <p className="text-white/60 text-sm leading-relaxed mb-8">
              Describe your dream and Nieo uncovers hidden symbols, emotions, and subconscious meanings. Powered by advanced psychological AI models.
            </p>
            <button 
              onClick={() => { setInput("Analyze my dream: "); setDreamOpen(false); }}
              className="w-full py-4 bg-gradient-to-r from-blue-500 to-purple-600 rounded-2xl font-bold text-white shadow-xl shadow-blue-500/20 active:scale-[0.98] transition-transform"
            >
              Try Dream Analyzer
            </button>
          </div>
        </div>

      </div>
      
      {/* Global CSS for scrollbars */}
      <style>{`
        .custom-scrollbar::-webkit-scrollbar { width: 0px; }
        * { -webkit-tap-highlight-color: transparent; }
      `}</style>
    </div>
  );
};

export default App;