import React, { useState, useEffect, useMemo, useRef } from 'react';
import { ViewType, ClassLevel, EBook, VideoLecture, User, Course, CartItem } from './types';
import Header from './components/Header';
import Sidebar from './components/Sidebar';
import AITutor from './components/AITutor';
import Quiz from './components/Quiz';
import AdminPortal from './components/AdminPortal';
import { CLASSES, SUBJECTS, MOCK_EBOOKS, MOCK_COURSES } from './constants';

const SubHeader: React.FC<{ onClassClick: (cls: string) => void }> = ({ onClassClick }) => (
  <div className="fixed top-16 left-0 md:left-64 right-0 h-10 bg-white/90 dark:bg-slate-900/90 backdrop-blur-xl border-b dark:border-slate-800 z-50 flex items-center px-4 overflow-x-auto scrollbar-hide gap-2 shadow-sm">
    <div className="flex items-center space-x-2 shrink-0 border-r dark:border-slate-800 pr-3 mr-1">
      <span className="text-[9px] font-black uppercase text-indigo-600 tracking-tight">Navigate:</span>
    </div>
    <div className="flex items-center gap-1.5">
      {CLASSES.map(cls => (
        <button 
          key={cls} 
          onClick={() => onClassClick(cls)}
          className="text-[10px] font-bold text-slate-500 hover:text-white hover:bg-indigo-600 dark:text-slate-400 whitespace-nowrap px-2.5 py-1 rounded-md border dark:border-slate-800 transition-all active:scale-95"
        >
          {cls}
        </button>
      ))}
    </div>
  </div>
);

const ClassSection: React.FC<{
  cls: ClassLevel;
  idx: number;
  books: EBook[];
  onBookClick: (book: EBook) => void;
  onCourseClick: () => void;
}> = ({ cls, idx, books, onBookClick, onCourseClick }) => {
  const [isVisible, setIsVisible] = useState(false);
  const sectionRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const observer = new IntersectionObserver(
      ([entry]) => { if (entry.isIntersecting) { setIsVisible(true); observer.disconnect(); } },
      { rootMargin: '100px' }
    );
    if (sectionRef.current) observer.observe(sectionRef.current);
    return () => observer.disconnect();
  }, []);

  return (
    <section ref={sectionRef} id={`section-${cls.replace(' ', '-')}`} className="relative group scroll-mt-28 mb-12">
      {isVisible ? (
        <div className="space-y-4 animate-in fade-in duration-300">
          <div className="flex items-center justify-between border-b dark:border-slate-900 pb-2">
            <div className="flex items-center space-x-3">
              <span className="px-1.5 py-0.5 bg-indigo-600 text-white text-[9px] font-black rounded uppercase">Lvl {idx + 1}</span>
              <h2 className="text-xl font-black tracking-tighter text-slate-900 dark:text-white">{cls}</h2>
              <span className="text-slate-400 font-bold text-[10px] uppercase tracking-widest hidden sm:block">• Mastery Path</span>
            </div>
            <button onClick={onCourseClick} className="text-[9px] font-black uppercase text-indigo-600 hover:underline transition-all">Enroll Mastery</button>
          </div>

          <div className="grid grid-cols-2 sm:grid-cols-4 md:grid-cols-5 lg:grid-cols-6 xl:grid-cols-7 gap-3">
            {books.slice(0, 14).map(book => (
              <div 
                key={book.id} 
                onClick={() => onBookClick(book)} 
                className="group relative bg-white dark:bg-slate-900 rounded-xl border dark:border-slate-800 hover:border-indigo-500 transition-all cursor-pointer overflow-hidden shadow-sm hover:shadow-md"
              >
                <div className="relative aspect-[3/4] overflow-hidden bg-slate-100 dark:bg-slate-800">
                  <img src={book.thumbnail} loading="lazy" className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105" alt={book.title} />
                  {book.price === 0 && <div className="absolute top-1.5 left-1.5 bg-emerald-500 text-white px-1.5 py-0.5 rounded text-[7px] font-black uppercase">FREE</div>}
                </div>
                <div className="p-2 space-y-0.5">
                  <p className="text-[7px] font-black text-indigo-500 uppercase tracking-tighter">{book.subject}</p>
                  <h6 className="font-bold text-[10px] line-clamp-1 dark:text-slate-200 leading-tight">{book.title}</h6>
                  <div className="flex justify-between items-center pt-1">
                    <span className="text-[10px] font-black text-slate-900 dark:text-slate-100">₹{book.price}</span>
                    <span className="text-amber-500 text-[8px] font-black">★ {book.rating?.toFixed(1)}</span>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      ) : (
        <div className="h-48 w-full bg-slate-100 dark:bg-slate-900/30 rounded-xl animate-pulse" />
      )}
    </section>
  );
};

const AdminAuth: React.FC<{ type: 'login' | 'register', onAuth: () => void, setView: (v: ViewType) => void }> = ({ type, onAuth, setView }) => {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  return (
    <div className="fixed inset-0 bg-slate-50/80 dark:bg-slate-950/80 backdrop-blur-sm z-[200] flex items-center justify-center p-4">
      <div className="w-full max-w-sm bg-white dark:bg-slate-900 p-8 rounded-3xl shadow-3xl border dark:border-slate-800 space-y-6 animate-in zoom-in-95 duration-200">
        <div className="text-center space-y-2">
          <div className="text-2xl mx-auto w-12 h-12 bg-indigo-600 rounded-xl flex items-center justify-center text-white font-black shadow-lg">A</div>
          <h2 className="text-xl font-black tracking-tighter">{type === 'login' ? 'Admin Portal' : 'Register Admin'}</h2>
        </div>
        <div className="space-y-3">
          <input type="email" value={email} onChange={e => setEmail(e.target.value)} placeholder="Email" className="w-full bg-slate-50 dark:bg-slate-800 p-3 rounded-xl border border-transparent focus:border-indigo-600 outline-none text-sm dark:text-white" />
          <input type="password" value={password} onChange={e => setPassword(e.target.value)} placeholder="Key" className="w-full bg-slate-50 dark:bg-slate-800 p-3 rounded-xl border border-transparent focus:border-indigo-600 outline-none text-sm dark:text-white" />
        </div>
        <button onClick={onAuth} className="w-full bg-indigo-600 text-white py-3.5 rounded-xl font-black text-sm shadow-lg hover:bg-indigo-700 transition-all">Confirm Identity</button>
        <button onClick={() => setView('home')} className="w-full text-[10px] font-black uppercase text-slate-400 tracking-widest hover:text-indigo-600">Cancel Access</button>
      </div>
    </div>
  );
};

const App: React.FC = () => {
  const [currentView, setCurrentView] = useState<ViewType>('home');
  const [isDarkMode, setIsDarkMode] = useState(() => localStorage.getItem('theme') === 'dark');
  const [user, setUser] = useState<User | null>(null);
  const [adminUser, setAdminUser] = useState<User | null>(null);
  const [cart, setCart] = useState<CartItem[]>([]);
  const [purchasedIds, setPurchasedIds] = useState<string[]>(() => JSON.parse(localStorage.getItem('tn_purchased') || '[]'));
  const [selectedEbook, setSelectedEbook] = useState<EBook | null>(null);

  useEffect(() => {
    document.documentElement.classList.toggle('dark', isDarkMode);
    localStorage.setItem('theme', isDarkMode ? 'dark' : 'light');
  }, [isDarkMode]);

  const handleClassJump = (cls: string) => {
    const el = document.getElementById(`section-${cls.replace(' ', '-')}`);
    if (el) window.scrollTo({ top: el.offsetTop - 110, behavior: 'smooth' });
  };

  const renderContent = () => {
    switch (currentView) {
      case 'admin-login': return <AdminAuth type="login" setView={setCurrentView} onAuth={() => { setAdminUser({ id: 'a1', role: 'admin', name: 'Nexus Admin', email: 'admin@nexus.com', streak: 0, joinedAt: '', lastActive: '' }); setCurrentView('admin'); }} />;
      case 'admin': 
        if (!adminUser) { setCurrentView('admin-login'); return null; }
        return <AdminPortal onContentUpdate={() => {}} />;
      case 'home':
        return (
          <div className="space-y-12 pb-20">
            <section className="relative h-[240px] md:h-[280px] rounded-3xl overflow-hidden flex items-center px-6 md:px-12 premium-gradient shadow-xl">
              <div className="relative z-10 max-w-2xl space-y-4 animate-in slide-in-from-left duration-500">
                <span className="bg-white/10 backdrop-blur-md px-2 py-0.5 rounded text-[8px] font-black text-white uppercase tracking-widest border border-white/20">Nexus v3.5 Stable</span>
                <h1 className="text-4xl md:text-5xl lg:text-6xl font-black text-white leading-none tracking-tighter">THE TOPPER<br/><span className="text-indigo-200 uppercase">Network.</span></h1>
                <p className="text-white/90 text-sm md:text-base font-bold max-w-md leading-snug">Elite NCERT preparation logic mapped for precision academic results.</p>
                <div className="flex gap-3 pt-2">
                  <button onClick={() => setCurrentView('ebooks')} className="bg-white text-indigo-700 px-5 py-2.5 rounded-xl font-black text-xs shadow-lg hover:scale-105 transition-all">Explore Vault</button>
                  <button onClick={() => setCurrentView('courses')} className="bg-indigo-500/30 text-white border border-white/20 px-5 py-2.5 rounded-xl font-black text-xs hover:bg-white/10 transition-all">Elite Courses</button>
                </div>
              </div>
            </section>
            
            <div className="space-y-4">
              {CLASSES.map((cls, idx) => (
                <ClassSection 
                  key={cls} 
                  cls={cls} 
                  idx={idx} 
                  books={MOCK_EBOOKS.filter(b => b.class === cls)}
                  onBookClick={b => { setSelectedEbook(b); setCurrentView('ebook-detail'); window.scrollTo(0,0); }}
                  onCourseClick={() => setCurrentView('courses')}
                />
              ))}
            </div>
          </div>
        );
      case 'ebook-detail':
        if (!selectedEbook) return null;
        return (
          <div className="max-w-5xl mx-auto space-y-10 pb-20 animate-in fade-in">
             <div className="grid grid-cols-1 md:grid-cols-12 gap-8 items-start">
                <div className="md:col-span-4 sticky top-32">
                  <div className="bg-white dark:bg-slate-900 p-3 rounded-3xl shadow-xl border dark:border-slate-800">
                    <img src={selectedEbook.thumbnail} className="w-full aspect-[3/4] object-cover rounded-2xl" alt={selectedEbook.title} />
                  </div>
                </div>
                <div className="md:col-span-8 space-y-6">
                   <div className="space-y-2">
                     <div className="flex items-center space-x-2">
                       <span className="px-2 py-0.5 bg-indigo-100 dark:bg-indigo-900/50 text-indigo-600 dark:text-indigo-400 text-[8px] font-black rounded uppercase">{selectedEbook.subject}</span>
                       <span className="px-2 py-0.5 bg-slate-100 dark:bg-slate-800 text-slate-500 text-[8px] font-black rounded uppercase">{selectedEbook.class}</span>
                     </div>
                     <h1 className="text-3xl md:text-4xl font-black tracking-tighter leading-tight text-slate-900 dark:text-white">{selectedEbook.title}</h1>
                     <p className="text-sm text-slate-400 font-bold">Logic Unit by {selectedEbook.author}</p>
                   </div>
                   
                   <div className="grid grid-cols-2 gap-4">
                     <div className="bg-indigo-600 p-5 rounded-2xl text-white flex justify-between items-center shadow-lg">
                        <div className="space-y-0.5">
                          <p className="text-[7px] font-black uppercase opacity-70 tracking-widest">Valuation</p>
                          <span className="text-2xl font-black">₹{selectedEbook.price}</span>
                        </div>
                        <button 
                          onClick={() => { if(!purchasedIds.includes(selectedEbook.id)) { setCart([...cart, { ...selectedEbook, type: 'ebook' }]); setCurrentView('cart'); } }}
                          className="bg-white text-indigo-600 px-4 py-2 rounded-xl font-black text-[10px] hover:scale-105 transition-all"
                        >
                          {purchasedIds.includes(selectedEbook.id) ? 'Unlocked' : 'Acquire'}
                        </button>
                     </div>
                     <div className="bg-white dark:bg-slate-900 p-5 rounded-2xl border dark:border-slate-800 flex justify-between items-center">
                        <div className="space-y-0.5">
                          <p className="text-[7px] font-black uppercase text-slate-400 tracking-widest">Topper Score</p>
                          <span className="text-2xl font-black text-amber-500">★ {selectedEbook.rating?.toFixed(1)}</span>
                        </div>
                        <div className="text-right">
                          <p className="text-indigo-600 font-black text-[10px]">{selectedEbook.purchases?.toLocaleString()}+</p>
                          <p className="text-[6px] font-black uppercase text-slate-400">Synced</p>
                        </div>
                     </div>
                   </div>

                   <div className="space-y-4">
                     <h3 className="text-sm font-black uppercase tracking-widest text-slate-400">Node Specs</h3>
                     <p className="text-sm text-slate-500 dark:text-slate-400 leading-relaxed font-medium">Precision-solved exercises and exam logic mapped for the 2025 Board Session. Optimized for high-retention learning.</p>
                     <div className="flex flex-wrap gap-2">
                       {['Precision', '2025 Ready', 'Exam Logic'].map(tag => (
                         <span key={tag} className="text-[8px] font-black uppercase px-2 py-1 bg-slate-50 dark:bg-slate-900 border dark:border-slate-800 rounded-md text-slate-500">{tag}</span>
                       ))}
                     </div>
                   </div>
                </div>
             </div>
          </div>
        );
      case 'ebooks':
        return (
          <div className="space-y-8 pb-20">
            <h1 className="text-2xl font-black tracking-tighter text-center">Digital Vault</h1>
            <div className="grid grid-cols-2 sm:grid-cols-4 lg:grid-cols-6 gap-3">
              {MOCK_EBOOKS.map(book => (
                <div key={book.id} onClick={() => { setSelectedEbook(book); setCurrentView('ebook-detail'); window.scrollTo(0,0); }} className="bg-white dark:bg-slate-900 p-2 rounded-xl border dark:border-slate-800 hover:shadow-lg transition-all cursor-pointer">
                  <div className="aspect-[3/4] rounded-lg overflow-hidden mb-2 bg-slate-100 dark:bg-slate-800">
                    <img src={book.thumbnail} loading="lazy" className="w-full h-full object-cover" />
                  </div>
                  <h4 className="font-bold text-[10px] line-clamp-1 h-3">{book.title}</h4>
                  <p className="text-indigo-600 font-black text-[10px] mt-1">₹{book.price}</p>
                </div>
              ))}
            </div>
          </div>
        );
      case 'cart':
        const total = cart.reduce((acc, curr) => acc + curr.price, 0);
        return (
          <div className="max-w-xl mx-auto space-y-6 py-10 animate-in slide-in-from-bottom-2">
            <h2 className="text-3xl font-black tracking-tighter text-center">Preparation Bag</h2>
            <div className="space-y-2">
              {cart.map(item => (
                <div key={item.id} className="bg-white dark:bg-slate-900 p-4 rounded-2xl border dark:border-slate-800 flex items-center justify-between">
                  <div className="flex items-center space-x-4">
                    <img src={item.thumbnail} className="w-10 h-12 rounded-lg object-cover" />
                    <div><h4 className="font-bold text-sm">{item.title}</h4><p className="text-indigo-600 font-black text-xs">₹{item.price}</p></div>
                  </div>
                  <button onClick={() => setCart(cart.filter(c => c.id !== item.id))} className="text-red-400 p-2 font-black">✕</button>
                </div>
              ))}
              {cart.length === 0 && <div className="text-center py-10 opacity-30 text-xs font-black uppercase tracking-widest">Bag is Empty</div>}
            </div>
            {cart.length > 0 && (
              <div className="bg-slate-900 dark:bg-indigo-600 rounded-3xl p-6 text-white text-center space-y-4 shadow-xl">
                 <div className="flex justify-between items-center border-b border-white/10 pb-2">
                   <p className="text-sm font-bold opacity-80">Total</p>
                   <p className="text-2xl font-black">₹{total}</p>
                 </div>
                 <button onClick={() => { setPurchasedIds([...purchasedIds, ...cart.map(x => x.id)]); setCart([]); setCurrentView('profile'); }} className="w-full bg-white text-indigo-700 py-3 rounded-xl font-black text-sm hover:scale-105 transition-all">Establish Connections</button>
              </div>
            )}
          </div>
        );
      case 'profile':
        return (
          <div className="max-w-3xl mx-auto space-y-8 pb-20">
             <div className="bg-indigo-600 p-6 rounded-[32px] text-white flex items-center gap-6 shadow-xl">
                <div className="w-16 h-16 rounded-2xl bg-white text-indigo-600 flex items-center justify-center text-3xl font-black">S</div>
                <div>
                  <h2 className="text-2xl font-black tracking-tighter">Topper Scholar</h2>
                  <p className="text-xs text-white/70 font-bold uppercase tracking-widest">Scholar ID: Active</p>
                </div>
             </div>
             <div className="space-y-4">
               <h3 className="text-sm font-black uppercase tracking-widest text-slate-400">Active Nodes</h3>
               <div className="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-5 gap-3">
                 {purchasedIds.map(id => {
                   const b = MOCK_EBOOKS.find(x => x.id === id);
                   return b ? (
                     <div key={id} className="bg-white dark:bg-slate-900 p-2 rounded-xl border dark:border-slate-800 flex flex-col group">
                       <img src={b.thumbnail} className="aspect-[3/4] object-cover rounded-lg mb-2" alt={b.title} />
                       <h5 className="font-bold text-[9px] line-clamp-1">Launch</h5>
                     </div>
                   ) : null;
                 })}
               </div>
             </div>
          </div>
        );
      case 'ai-tutor': return <AITutor />;
      case 'quizzes': return <Quiz />;
      case 'courses':
        return (
          <div className="space-y-8 pb-20">
            <h1 className="text-2xl font-black tracking-tighter text-center">Elite Mastery</h1>
            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
              {MOCK_COURSES.map(course => (
                <div key={course.id} className="bg-white dark:bg-slate-900 rounded-3xl overflow-hidden border dark:border-slate-800 shadow-sm flex flex-col group">
                  <div className="h-40 relative overflow-hidden bg-slate-100 dark:bg-slate-800 shrink-0">
                    <img src={course.thumbnail} className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-1000" />
                  </div>
                  <div className="p-6 space-y-4 flex-1 flex flex-col">
                    <h3 className="text-lg font-black leading-tight text-slate-900 dark:text-white">{course.title}</h3>
                    <div className="mt-auto pt-4 border-t dark:border-slate-800 flex justify-between items-center">
                      <span className="text-lg font-black text-indigo-600">₹{course.price}</span>
                      <button onClick={() => { setCart([...cart, { ...course, type: 'course' }]); setCurrentView('cart'); }} className="bg-slate-900 dark:bg-indigo-600 text-white px-4 py-2 rounded-lg font-black text-[10px] uppercase tracking-widest transition-all">Enroll</button>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        );
      default: return null;
    }
  };

  return (
    <div className="min-h-screen transition-all duration-300 bg-slate-50 dark:bg-slate-950 flex flex-col">
      <Header 
        isDarkMode={isDarkMode} toggleDarkMode={() =><link rel="me" href="https://www.blogger.com/profile/12226258670249526843" />
<meta name='google-adsense-platform-account' content='ca-host-pub-1556223355139109'/>
<meta name='google-adsense-platform-domain' content='blogspot.com'/>
<!-- --><style type="text/css">@import url(//www.blogger.com/static/v1/v-css/navbar/3334278262-classic.css);
div.b-mobile {display:none;}
</style>

</head><body><script type="text/javascript">
    function setAttributeOnload(object, attribute, val) {
      if(window.addEventListener) {
        window.addEventListener('load',
          function(){ object[attribute] = val; }, false);
      } else {
        window.attachEvent('onload', function(){ object[attribute] = val; });
      }
    }
  </script>
<div id="navbar-iframe-container"></div>
<script type="text/javascript" src="https://apis.google.com/js/platform.js"></script>
<script type="text/javascript">
      gapi.load("gapi.iframes:gapi.iframes.style.bubble", function() {
        if (gapi.iframes && gapi.iframes.getContext) {
          gapi.iframes.getContext().openChild({
              url: 'https://www.blogger.com/navbar/1986481578313229107?origin\x3dhttps://toppernexusncertportal.blogspot.com',
              where: document.getElementById("navbar-iframe-container"),
              id: "navbar-iframe"
          });
        }
      });
    </script> setIsDarkMode(!isDarkMode)} 
        onAdminClick={() => setCurrentView('admin-login')} 
        onProfileClick={() => setCurrentView('profile')}
        onCartClick={() => setCurrentView('cart')}
        searchItems={[]} onResultClick={() => {}}
        user={user} cartCount={cart.length}
      />
      <SubHeader onClassClick={handleClassJump} />
      <Sidebar currentView={currentView} setView={setCurrentView} />
      
      <main className="md:ml-64 pt-32 px-4 md:px-8 flex-1">
        <div className="max-w-[1400px] mx-auto">
          {renderContent()}
        </div>
      </main>

      <footer className="md:ml-64 mt-10 py-10 px-6 border-t dark:border-slate-900 bg-white dark:bg-slate-950 text-slate-400">
        <div className="max-w-7xl mx-auto flex flex-col md:flex-row justify-between items-center gap-4 opacity-50">
          <h4 className="text-sm font-black text-slate-900 dark:text-white italic tracking-tighter">TOPPERNEXUS.</h4>
          <p className="text-[8px] font-black uppercase tracking-[0.5em]">© 2024 NEXUS SYSTEMS INTERFACE</p>
          <div className="flex gap-4 text-[8px] font-black uppercase tracking-widest">
            <button onClick={() => setCurrentView('admin-login')}>Admin Port</button>
            <span>Uptime: 99.9%</span>
          </div>
        </div>
      </footer>
    </div>
  );
};

export default App;
</body></html>