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

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

interface BlogPost {
  id: string;
  title: string;
  date: string;
  url: string;
  category: string;
}

export const ResearchSection: React.FC<ResearchSectionProps> = ({ onClose }) => {
  const [isLoaded, setIsLoaded] = useState(false);
  const [role, setRole] = useState<'passenger' | 'rider'>('passenger');
  
  // Blog State
  const [visibleCount, setVisibleCount] = useState(3);
  const [searchQuery, setSearchQuery] = useState('');

  const blogs: BlogPost[] = [
    {
      id: 'mcp',
      title: "The Incredible Journey of MCP: Unleashing AI’s True Potential",
      date: "April 12, 2025",
      url: "https://medium.com/@devarshia5/the-incredible-journey-of-mcp-unleashing-ais-true-potential-f386161c65e8",
      category: "Architecture"
    },
    {
      id: 'plato',
      title: "When I Discovered That Plato Predicted AI: A Weekend Deep Dive",
      date: "July 20, 2025",
      url: "https://medium.com/@devarshia5/when-i-discovered-that-plato-predicted-ai-a-weekend-deep-dive-872e9421e280",
      category: "Philosophy"
    },
    {
      id: 'time',
      title: "Time Is Universal : Burns Relentlessly",
      date: "July 05, 2025",
      url: "https://medium.com/@devarshia5/time-is-universal-burns-relentlessly-7f5ecfbc606f",
      category: "Entropy"
    },
    {
      id: 'logistic',
      title: "Logistic Regression: The Magic of Predicting Yes or No",
      date: "March 26, 2025",
      url: "https://medium.com/@devarshia5/logistic-regression-the-magic-of-predicting-yes-or-no-f766703ee581",
      category: "Mathematics"
    }
  ];

  useEffect(() => {
    const t = setTimeout(() => setIsLoaded(true), 100);
    return () => clearTimeout(t);
  }, []);

  const toggleRole = () => {
    setRole(prev => prev === 'passenger' ? 'rider' : 'passenger');
  };

  const filteredBlogs = useMemo(() => {
    return blogs.filter(b => b.title.toLowerCase().includes(searchQuery.toLowerCase()));
  }, [searchQuery]);

  const displayedBlogs = filteredBlogs.slice(0, visibleCount);

  return (
    <div className={`fixed inset-0 z-50 flex flex-col bg-[#050000]/95 backdrop-blur-xl overflow-hidden transition-opacity duration-700 ${isLoaded ? 'opacity-100' : 'opacity-0'}`}>
      
      {/* Top Bar */}
      <div className="w-full max-w-[1400px] mx-auto px-6 py-6 md:px-12 flex justify-between items-center z-10 border-b border-white/5">
        <div className="flex items-center gap-4">
           <span className="text-cyan-400 font-mono text-xs animate-pulse">◈</span>
           <span className="text-white/80 font-mono text-xs uppercase tracking-widest">R&D Division</span>
        </div>
        <button 
          onClick={onClose}
          className="group flex items-center gap-3 text-white/50 hover:text-white transition-colors"
        >
          <span className="text-[10px] uppercase tracking-widest group-hover:tracking-[0.2em] transition-all duration-300">Abort</span>
          <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>

      {/* Main Content */}
      <div className="flex-1 w-full overflow-y-auto overflow-x-hidden scroll-smooth custom-scrollbar">
        <div className="w-full max-w-[1400px] mx-auto px-6 md:px-12 pt-12 pb-32">
          
          {/* Header Title */}
          <div className={`mb-16 transition-all duration-1000 delay-100 ease-out ${isLoaded ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-12'}`}>
            <h1 className="text-5xl md:text-7xl lg:text-8xl font-light text-white tracking-tight leading-none">
              Experimental <br />
              <span className="text-cyan-500/50 font-serif italic">Protocols.</span>
            </h1>
          </div>

          {/* FEATURED PROJECT: ANTARAM */}
          <div 
            className={`relative w-full rounded-sm border border-white/10 bg-gradient-to-br from-white/5 to-transparent overflow-hidden transition-all duration-1000 delay-300 ${isLoaded ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-12'}`}
          >
            {/* Background Decor */}
            <div className="absolute -top-24 -right-24 w-64 h-64 bg-cyan-500/20 rounded-full blur-[100px] pointer-events-none"></div>

            <div className="grid grid-cols-1 lg:grid-cols-2 min-h-[500px]">
              
              {/* Left Column: The Pitch */}
              <div className="p-8 md:p-12 flex flex-col justify-between relative z-10">
                <div>
                   <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full border border-cyan-500/30 bg-cyan-500/10 mb-6">
                      <span className="w-1.5 h-1.5 rounded-full bg-cyan-400 animate-pulse"></span>
                      <span className="text-[10px] font-mono uppercase tracking-widest text-cyan-300">Live Beta</span>
                   </div>
                   <h2 className="text-4xl md:text-5xl font-light text-white mb-4">Antaram</h2>
                   <p className="text-white/60 text-lg leading-relaxed max-w-md">
                     The open-source answer to the last-mile problem. We removed the corporate middleman so you don't have to pay for their yacht.
                   </p>
                </div>
                
                <div className="mt-12 space-y-6">
                  <div className="flex flex-col gap-1">
                    <p className="text-xs font-mono uppercase text-white/30 tracking-widest">Core Directive</p>
                    <p className="text-white/80 font-light">"Why pay surge pricing when your neighbor is going the same way?"</p>
                  </div>
                  
                  <a 
                    href="https://www.antaram.org" 
                    target="_blank" 
                    rel="noreferrer"
                    className="inline-flex items-center gap-3 text-cyan-400 hover:text-white transition-colors group cursor-pointer"
                  >
                    <span className="text-sm border-b border-cyan-500/30 pb-0.5 group-hover:border-white transition-all">Deploy on Network (www.antaram.org)</span>
                    <span className="transform group-hover:translate-x-1 transition-transform">→</span>
                  </a>
                </div>
              </div>

              {/* Right Column: The Interactive Demo */}
              <div className="relative border-t lg:border-t-0 lg:border-l border-white/10 bg-black/20 p-8 md:p-12 flex flex-col items-center justify-center">
                 
                 {/* Simulation UI */}
                 <div className="w-full max-w-sm">
                    {/* Toggle Switch */}
                    <div className="flex justify-center mb-10">
                       <button 
                         onClick={toggleRole}
                         className="relative w-64 h-14 bg-white/5 rounded-full border border-white/10 p-1 flex items-center cursor-pointer transition-all hover:border-white/20"
                       >
                          <div 
                            className={`absolute top-1 bottom-1 w-[calc(50%-4px)] bg-gradient-to-r ${role === 'passenger' ? 'from-cyan-600 to-cyan-400 left-1' : 'from-purple-600 to-purple-400 left-[calc(50%+2px)]'} rounded-full shadow-lg transition-all duration-500 cubic-bezier(0.4, 0, 0.2, 1)`}
                          ></div>
                          <span className={`flex-1 text-center text-[10px] font-mono uppercase tracking-widest z-10 transition-colors duration-300 ${role === 'passenger' ? 'text-white' : 'text-white/30'}`}>Passenger</span>
                          <span className={`flex-1 text-center text-[10px] font-mono uppercase tracking-widest z-10 transition-colors duration-300 ${role === 'rider' ? 'text-white' : 'text-white/30'}`}>Rider</span>
                       </button>
                    </div>

                    {/* Dynamic Card */}
                    <div className={`p-6 rounded-sm border transition-all duration-500 ${role === 'passenger' ? 'border-cyan-500/30 bg-cyan-900/10' : 'border-purple-500/30 bg-purple-900/10'}`}>
                       <div className="flex justify-between items-start mb-4">
                          <div className={`text-xs font-mono uppercase tracking-widest ${role === 'passenger' ? 'text-cyan-400' : 'text-purple-400'}`}>
                            {role === 'passenger' ? 'Status: Requesting' : 'Status: Online'}
                          </div>
                          <div className="flex gap-1">
                             <div className="w-1 h-1 bg-white/40 rounded-full"></div>
                             <div className="w-1 h-1 bg-white/40 rounded-full"></div>
                             <div className="w-1 h-1 bg-white/40 rounded-full"></div>
                          </div>
                       </div>
                       
                       <div className="h-24 flex items-center justify-center border border-dashed border-white/10 rounded-sm mb-4">
                          <p className="text-white/40 font-mono text-xs text-center px-4">
                             {role === 'passenger' 
                               ? "Searching for nearby community drivers..." 
                               : "Scanning for passengers on your route..."}
                          </p>
                       </div>

                       <div className="text-sm text-white/70 font-light">
                          {role === 'passenger' ? (
                             <>
                                <p className="mb-2">✓ No algorithm surge fees</p>
                                <p>✓ Direct P2P Payment</p>
                             </>
                          ) : (
                             <>
                                <p className="mb-2">✓ Keep 100% of the fare</p>
                                <p>✓ Zero platform commission</p>
                             </>
                          )}
                       </div>
                    </div>
                    
                    <p className="text-[10px] text-white/20 font-mono text-center mt-6">
                       *Simulated Interface. Actual freedom may vary.
                    </p>
                 </div>
              </div>

            </div>
          </div>

          {/* SECONDARY RESEARCH GRID */}
          <div className="mt-24 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
             <div className={`p-8 border border-white/5 hover:border-white/10 hover:bg-white/5 transition-all duration-500 delay-500 ${isLoaded ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-8'}`}>
                <h3 className="text-white/80 font-light text-xl mb-2">Zero-Knowledge Identity</h3>
                <p className="text-white/40 text-sm font-mono leading-relaxed mb-4">
                   Proving you are human without revealing who you are. The end of the data-harvesting era.
                </p>
                <div className="w-full h-1 bg-white/5 overflow-hidden">
                   <div className="h-full bg-cyan-500/50 w-2/3"></div>
                </div>
                <span className="text-[10px] text-cyan-500/50 font-mono mt-2 block">Progress: 65%</span>
             </div>

             <div className={`p-8 border border-white/5 hover:border-white/10 hover:bg-white/5 transition-all duration-500 delay-600 ${isLoaded ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-8'}`}>
                <h3 className="text-white/80 font-light text-xl mb-2">Cognitive Noise Filtering</h3>
                <p className="text-white/40 text-sm font-mono leading-relaxed mb-4">
                   Audio models that strip environmental chaos from voice data in real-time, purely on-device.
                </p>
                <div className="w-full h-1 bg-white/5 overflow-hidden">
                   <div className="h-full bg-purple-500/50 w-1/3"></div>
                </div>
                <span className="text-[10px] text-purple-500/50 font-mono mt-2 block">Progress: 32%</span>
             </div>

             <div className={`p-8 border border-white/5 hover:border-white/10 hover:bg-white/5 transition-all duration-500 delay-700 ${isLoaded ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-8'}`}>
                <h3 className="text-white/80 font-light text-xl mb-2">Generative UI Streams</h3>
                <p className="text-white/40 text-sm font-mono leading-relaxed mb-4">
                   Interfaces that build themselves based on user intent and context, discarding static templates.
                </p>
                <div className="w-full h-1 bg-white/5 overflow-hidden">
                   <div className="h-full bg-emerald-500/50 w-4/5"></div>
                </div>
                <span className="text-[10px] text-emerald-500/50 font-mono mt-2 block">Progress: 89%</span>
             </div>
          </div>

          {/* LATEST BLOGS (FIELD NOTES) */}
          <div className={`mt-32 transition-all duration-700 delay-300 ${isLoaded ? 'opacity-100' : 'opacity-0'}`}>
            <div className="flex flex-col md:flex-row justify-between items-end mb-12 border-b border-white/10 pb-6 gap-6">
              <div>
                <h2 className="text-3xl md:text-4xl font-light text-white mb-2">Field Notes</h2>
                <p className="text-white/40 text-sm font-mono">Transmissions from the lab.</p>
              </div>
              
              {/* Search Bar */}
              <div className="relative w-full md:w-64">
                <input 
                  type="text" 
                  placeholder="SEARCH_DB..." 
                  value={searchQuery}
                  onChange={(e) => setSearchQuery(e.target.value)}
                  className="w-full bg-white/5 border border-white/10 text-white text-xs font-mono p-3 pl-8 focus:outline-none focus:border-cyan-500/50 transition-colors uppercase tracking-widest placeholder:text-white/20"
                />
                <span className="absolute left-3 top-1/2 -translate-y-1/2 text-white/30 text-xs">🔍</span>
              </div>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
              {displayedBlogs.map((blog) => (
                <a 
                  key={blog.id} 
                  href={blog.url} 
                  target="_blank" 
                  rel="noreferrer"
                  className="group block"
                >
                  <div className="bg-white/5 border border-white/5 p-6 h-full transition-all duration-300 group-hover:bg-white/10 group-hover:border-white/20 group-hover:-translate-y-1">
                    <div className="flex justify-between items-center mb-4">
                       <span className="text-[10px] font-mono uppercase tracking-widest text-cyan-500/70 border border-cyan-500/20 px-2 py-0.5 rounded-full">{blog.category}</span>
                       <span className="text-[10px] font-mono text-white/30">{blog.date}</span>
                    </div>
                    <h3 className="text-lg md:text-xl font-light text-white/90 group-hover:text-cyan-400 transition-colors leading-snug mb-4">
                      {blog.title}
                    </h3>
                    <div className="flex items-center text-[10px] font-mono uppercase tracking-widest text-white/40 group-hover:text-white transition-colors mt-auto">
                       <span>Read Transmission</span>
                       <span className="ml-2 group-hover:translate-x-1 transition-transform">→</span>
                    </div>
                  </div>
                </a>
              ))}
            </div>

            {/* Load More / Pagination */}
            {filteredBlogs.length > visibleCount && (
              <div className="mt-12 flex justify-center">
                <button 
                  onClick={() => setVisibleCount(prev => prev + 3)}
                  className="text-xs font-mono uppercase tracking-[0.2em] text-white/40 hover:text-cyan-400 transition-colors border-b border-white/10 hover:border-cyan-400 pb-1"
                >
                  Load_More_Entries [+]
                </button>
              </div>
            )}
            
            {filteredBlogs.length === 0 && (
              <div className="py-12 text-center border border-dashed border-white/10">
                 <p className="text-white/30 font-mono text-xs">No records found matching query sequence.</p>
              </div>
            )}
          </div>

          {/* Footer Humor */}
          <div className="mt-24 border-t border-white/5 pt-8 text-center">
             <p className="text-white/30 font-mono text-xs">
                "We break things so you don't have to."
             </p>
          </div>

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