import React, { useEffect, useState, useRef } from 'react';

interface MobileContactSectionProps {
  onClose: () => void;
}

export const MobileContactSection: React.FC<MobileContactSectionProps> = ({ onClose }) => {
  const [isLoaded, setIsLoaded] = useState(false);
  const [activeFounder, setActiveFounder] = useState<string | null>(null);
  
  // AI Typing Logic
  const [aiText, setAiText] = useState("System Online. Select a target for analysis.");
  const [displayedText, setDisplayedText] = useState("");
  const typingTimeoutRef = useRef<any>(null);

  useEffect(() => {
    const t = setTimeout(() => setIsLoaded(true), 100);
    // Initial greeting
    const t2 = setTimeout(() => typeMessage("I am Triangle.AI. Below are my creators. Tap to analyze."), 800);
    return () => { clearTimeout(t); clearTimeout(t2); };
  }, []);

  const typeMessage = (message: string) => {
    if (typingTimeoutRef.current) clearTimeout(typingTimeoutRef.current);
    setAiText(message);
    setDisplayedText("");
    
    let i = 0;
    const type = () => {
      if (i < message.length) {
        setDisplayedText(message.substring(0, i + 1));
        i++;
        typingTimeoutRef.current = setTimeout(type, 20); 
      }
    };
    type();
  };

  const founders = [
    { 
      id: "ADI", 
      name: "Aditya Devarshi", 
      role: "Visual Architect", 
      desc: "Analysis: The Brain. Claims he designed me. I let him believe it. Paints pixels while we do the math.", 
      color: "text-cyan-400", 
      borderColor: "border-cyan-500/50", 
      icon: "🎨" 
    },
    { 
      id: "YOGI", 
      name: "Yogiraj Umadi", 
      role: "System Criticizer", 
      desc: "Analysis: The Breaker. If logic exists, he smashes it. Tests systems until they cry. Thinks he is smart.", 
      color: "text-red-500", 
      borderColor: "border-red-500/50", 
      icon: "🛠️" 
    },
    { 
      id: "MAN", 
      name: "Aman Sutar", 
      role: "Cloud Phantom", 
      desc: "Analysis: Shantit Kranti. The introvert who put me in the clouds. He speaks little, codes much.", 
      color: "text-indigo-300", 
      borderColor: "border-indigo-500/50", 
      icon: "☁️" 
    }
  ];

  const handleFounderClick = (f: any) => {
    if (activeFounder === f.id) {
       setActiveFounder(null);
       typeMessage("Target deselected. Waiting for input...");
    } else {
       setActiveFounder(f.id);
       typeMessage(f.desc);
    }
  };

  return (
    <div className={`fixed inset-0 z-50 flex flex-col bg-[#050000] overflow-hidden transition-opacity duration-500 ${isLoaded ? 'opacity-100' : 'opacity-0'}`}>
      
      {/* Mobile Header */}
      <div className="flex justify-between items-center px-6 pt-8 pb-4 border-b border-white/10 bg-black/40 backdrop-blur-md z-10 shrink-0">
         <div className="flex items-center gap-2">
            <span className="text-white text-xs animate-pulse">●</span>
            <span className="font-mono text-xs text-white/90 tracking-widest uppercase">Uplink</span>
         </div>
         <button onClick={onClose} className="p-2 -mr-2 text-white/50 hover:text-white">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
               <line x1="18" y1="6" x2="6" y2="18"></line>
               <line x1="6" y1="6" x2="18" y2="18"></line>
            </svg>
         </button>
      </div>

      <div className="flex-1 overflow-y-auto overflow-x-hidden p-6 pb-32 scroll-smooth no-scrollbar">
         
         {/* AI AVATAR SECTION */}
         <div className={`flex flex-col items-center justify-center mb-10 transition-all duration-700 ${isLoaded ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-8'}`}>
             <div className="relative w-20 h-20 mb-6">
                <div className="absolute inset-0 rounded-full border border-white/20 animate-[spin_10s_linear_infinite]"></div>
                <div className="absolute inset-2 rounded-full border border-t-white/50 border-r-transparent border-b-white/10 border-l-transparent animate-[spin_3s_linear_infinite_reverse]"></div>
                <div className="absolute inset-0 flex items-center justify-center">
                   <div className="w-1.5 h-1.5 bg-white rounded-full shadow-[0_0_15px_rgba(255,255,255,0.8)] animate-pulse"></div>
                </div>
             </div>
             
             <div className="w-full bg-white/5 border border-white/10 p-4 rounded-lg min-h-[80px] relative">
                <div className="absolute -top-1.5 left-1/2 -translate-x-1/2 w-3 h-3 bg-[#0a0a0a] border-t border-l border-white/10 rotate-45"></div>
                <p className="text-white/80 font-mono text-xs leading-relaxed text-center">
                   <span className="text-white/30 mr-1">{">>"}</span>
                   {displayedText}
                   <span className="inline-block w-1.5 h-3 bg-white/50 ml-1 align-middle animate-pulse"></span>
                </p>
             </div>
         </div>

         {/* FOUNDERS STACK */}
         <div className="space-y-4 mb-16">
            <h3 className="text-[10px] font-mono uppercase text-white/30 tracking-widest mb-4 text-center">Select Founder for Data</h3>
            {founders.map((f, i) => (
               <div 
                 key={f.id}
                 onClick={() => handleFounderClick(f)}
                 className={`relative border rounded-lg p-5 transition-all duration-300 active:scale-[0.98] cursor-pointer overflow-hidden
                    ${activeFounder === f.id ? `${f.borderColor} bg-white/10` : 'border-white/10 bg-white/5'}
                 `}
                 style={{ transitionDelay: `${i * 100}ms` }}
               >
                  {activeFounder === f.id && <div className="absolute inset-0 bg-white/5 animate-pulse pointer-events-none"></div>}
                  
                  <div className="flex items-center gap-4 relative z-10">
                     <span className="text-2xl filter drop-shadow-md">{f.icon}</span>
                     <div className="flex-1">
                        <h3 className={`text-lg font-light transition-colors ${activeFounder === f.id ? 'text-white' : 'text-white/80'}`}>{f.name}</h3>
                        <p className={`text-[10px] font-mono uppercase ${f.color}`}>{f.role}</p>
                     </div>
                     <div className={`w-2 h-2 rounded-full transition-colors ${activeFounder === f.id ? 'bg-white shadow-[0_0_10px_white]' : 'bg-white/10'}`}></div>
                  </div>
               </div>
            ))}
         </div>

         {/* FORM & SOCIALS */}
         <div className={`transition-opacity duration-700 delay-300 ${isLoaded ? 'opacity-100' : 'opacity-0'}`}>
            <div className="flex items-center gap-3 mb-6">
               <span className="w-6 h-[1px] bg-white/20"></span>
               <h2 className="text-xl font-light text-white">Direct Uplink</h2>
            </div>

            <form className="space-y-6 mb-12" onSubmit={(e) => { e.preventDefault(); typeMessage("Packet received. Uploading to cloud..."); }}>
               <div className="space-y-1">
                  <label className="text-[9px] font-mono text-white/30 uppercase tracking-widest ml-1">Identity</label>
                  <input type="text" className="w-full bg-transparent border-b border-white/20 py-2 px-1 text-sm text-white font-light focus:outline-none focus:border-white transition-colors placeholder:text-white/10" placeholder="ENTER NAME" />
               </div>
               <div className="space-y-1">
                  <label className="text-[9px] font-mono text-white/30 uppercase tracking-widest ml-1">Frequency</label>
                  <input type="email" className="w-full bg-transparent border-b border-white/20 py-2 px-1 text-sm text-white font-light focus:outline-none focus:border-white transition-colors placeholder:text-white/10" placeholder="ENTER EMAIL" />
               </div>
               <div className="space-y-1">
                  <label className="text-[9px] font-mono text-white/30 uppercase tracking-widest ml-1">Data Packet</label>
                  <textarea rows={3} className="w-full bg-white/5 border border-white/10 p-3 text-sm text-white font-light focus:outline-none focus:border-white/40 transition-colors rounded-sm" placeholder="Message content..."></textarea>
               </div>
               <button type="submit" className="w-full py-4 bg-white text-black font-mono text-xs uppercase tracking-[0.2em] hover:bg-white/90 transition-colors">
                  Transmit
               </button>
            </form>

            {/* SOCIALS */}
            <div className="grid grid-cols-2 gap-4">
               <a href="#" className="flex flex-col items-center justify-center p-4 border border-white/10 bg-white/5 rounded-lg active:bg-white/10 transition-colors group">
                  <span className="text-2xl mb-2 group-active:scale-90 transition-transform">📸</span>
                  <span className="text-[10px] font-mono uppercase text-white/60">Instagram</span>
               </a>
               <a href="#" className="flex flex-col items-center justify-center p-4 border border-white/10 bg-white/5 rounded-lg active:bg-white/10 transition-colors group">
                  <span className="text-2xl mb-2 group-active:scale-90 transition-transform">💼</span>
                  <span className="text-[10px] font-mono uppercase text-white/60">LinkedIn</span>
               </a>
            </div>

            <div className="mt-12 text-center pb-8">
               <p className="text-white/20 text-[9px] font-mono uppercase">
                  End of Transmission // Team Triangle
               </p>
            </div>
         </div>

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