import React, { useState, useEffect, useMemo } from 'react';
import { initializeApp } from 'firebase/app';
import { 
  getAuth, 
  signInAnonymously, 
  signInWithCustomToken, 
  onAuthStateChanged 
} from 'firebase/auth';
import { 
  getFirestore, 
  collection, 
  doc, 
  onSnapshot, 
  setDoc, 
  deleteDoc 
} from 'firebase/firestore';
import { 
  Rss, 
  Plus, 
  Trash2, 
  ExternalLink, 
  Search, 
  RefreshCw, 
  BookOpen, 
  X,
  Calendar,
  Clock,
  Filter,
  User,
  Moon,
  Sun,
  LayoutGrid,
  Hash,
  ChevronDown,
  Bookmark,
  History,
  Globe,
  Zap,
  ShieldAlert
} from 'lucide-react';

// Firebase configuration from environment
const firebaseConfig = JSON.parse(__firebase_config);
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
const db = getFirestore(app);
const appId = typeof __app_id !== 'undefined' ? __app_id : 'mlu-feed-pro';

const INITIAL_FEEDS = [
  { id: '1', name: 'XDA Developers', url: 'https://www.xda-developers.com/tag/rss/', category: 'Tech', type: 'rss' },
  { id: '2', name: 'The Verge', url: 'https://www.theverge.com/rss/index.xml', category: 'News', type: 'rss' }
];

const App = () => {
  const [user, setUser] = useState(null);
  const [feeds, setFeeds] = useState([]);
  const [savedArticles, setSavedArticles] = useState([]);
  const [articles, setArticles] = useState([]);
  const [loading, setLoading] = useState(true);
  const [refreshing, setRefreshing] = useState(false);
  const [newFeedUrl, setNewFeedUrl] = useState('');
  const [feedType, setFeedType] = useState('rss'); // 'rss' or 'scrape'
  const [searchTerm, setSearchTerm] = useState('');
  const [selectedArticle, setSelectedArticle] = useState(null);
  const [error, setError] = useState(null);
  const [activeTab, setActiveTab] = useState('all'); 
  const [timeFilter, setTimeFilter] = useState('any');
  const [isDarkMode, setIsDarkMode] = useState(false);
  const [viewMode, setViewMode] = useState('grid'); 

  // Authentication
  useEffect(() => {
    const initAuth = async () => {
      try {
        if (typeof __initial_auth_token !== 'undefined' && __initial_auth_token) {
          await signInWithCustomToken(auth, __initial_auth_token);
        } else {
          await signInAnonymously(auth);
        }
      } catch (err) {
        setError("Auth failed. Local mode enabled.");
      }
    };
    initAuth();
    const unsubscribe = onAuthStateChanged(auth, setUser);
    return () => unsubscribe();
  }, []);

  // Firestore Sync
  useEffect(() => {
    if (!user) return;

    const feedsRef = collection(db, 'artifacts', appId, 'users', user.uid, 'feeds');
    const unsubFeeds = onSnapshot(feedsRef, (snapshot) => {
      const feedsList = snapshot.docs.map(doc => ({ id: doc.id, ...doc.data() }));
      if (feedsList.length === 0) {
        INITIAL_FEEDS.forEach(async (f) => {
          await setDoc(doc(db, 'artifacts', appId, 'users', user.uid, 'feeds', f.id), f);
        });
      } else {
        setFeeds(feedsList);
      }
      setLoading(false);
    });

    const savedRef = collection(db, 'artifacts', appId, 'users', user.uid, 'savedArticles');
    const unsubSaved = onSnapshot(savedRef, (snapshot) => {
      setSavedArticles(snapshot.docs.map(doc => ({ id: doc.id, ...doc.data() })));
    });

    return () => {
      unsubFeeds();
      unsubSaved();
    };
  }, [user]);

  // RSS & Scrape Engine
  const fetchArticles = async () => {
    if (feeds.length === 0) return;
    setRefreshing(true);
    try {
      const fetchPromises = feeds.map(async (feed) => {
        // Option 1: Standard RSS
        if (feed.type === 'rss') {
          const response = await fetch(`https://api.rss2json.com/v1/api.json?rss_url=${encodeURIComponent(feed.url)}`);
          const data = await response.json();
          if (data.status === 'ok') {
            return data.items.map(item => ({
              ...item,
              sourceName: feed.name,
              sourceId: feed.id,
              category: feed.category || 'General',
              timestamp: new Date(item.pubDate).getTime()
            }));
          }
        } 
        // Option 2: Web Scraper (Integrated into the app logic)
        else if (feed.type === 'scrape') {
          const response = await fetch(`https://api.allorigins.win/get?url=${encodeURIComponent(feed.url)}`);
          const data = await response.json();
          const html = data.contents;
          const parser = new DOMParser();
          const doc = parser.parseFromString(html, "text/html");
          
          // Enhanced Scraper Logic: Finding actual content containers
          const selectors = ['article', '.post', '.entry', '.card', '.item'];
          let items = [];
          
          selectors.forEach(selector => {
            if (items.length > 0) return;
            const found = doc.querySelectorAll(selector);
            if (found.length > 3) items = Array.from(found);
          });

          // Fallback to searching for substantial links
          if (items.length === 0) {
            items = Array.from(doc.querySelectorAll('a'))
              .filter(a => a.innerText.trim().length > 30)
              .slice(0, 15);
          }
            
          return items.map((el, idx) => {
            const link = el.querySelector('a') || (el.tagName === 'A' ? el : null);
            const title = el.querySelector('h1, h2, h3, h4, .title') || el;
            const img = el.querySelector('img');
            
            return {
              title: title.innerText.trim(),
              link: link ? (link.href.startsWith('http') ? link.href : new URL(feed.url).origin + link.getAttribute('href')) : feed.url,
              pubDate: new Date().toISOString(),
              thumbnail: img ? img.src : null,
              description: "Live content extracted via Mlu's Scraping Engine.",
              sourceName: feed.name,
              sourceId: feed.id,
              timestamp: Date.now() - (idx * 3600000)
            };
          }).filter(item => item.title && item.link);
        }
        return [];
      });
      const results = await Promise.all(fetchPromises);
      setArticles(results.flat().sort((a, b) => b.timestamp - a.timestamp));
    } catch (err) {
      setError('Connection error. Some sites might be blocking external access.');
    } finally {
      setRefreshing(false);
    }
  };

  useEffect(() => {
    if (feeds.length > 0) fetchArticles();
  }, [feeds]);

  const addFeed = async (e) => {
    e.preventDefault();
    if (!newFeedUrl || !user) return;
    try {
      const url = new URL(newFeedUrl);
      const id = Date.now().toString();
      const newFeed = {
        id,
        name: url.hostname.replace('www.', '').split('.')[0],
        url: newFeedUrl,
        category: feedType === 'rss' ? 'Tech' : 'Custom',
        type: feedType
      };
      await setDoc(doc(db, 'artifacts', appId, 'users', user.uid, 'feeds', id), newFeed);
      setNewFeedUrl('');
    } catch {
      setError('Please enter a valid URL');
    }
  };

  const removeFeed = async (id) => {
    if (!user || feeds.length <= 1) return;
    await deleteDoc(doc(db, 'artifacts', appId, 'users', user.uid, 'feeds', id));
  };

  const toggleSaveArticle = async (e, article) => {
    e.stopPropagation();
    if (!user) return;
    const articleId = btoa(article.link).substring(0, 50);
    const isSaved = savedArticles.some(a => a.link === article.link);
    try {
      const savedDocRef = doc(db, 'artifacts', appId, 'users', user.uid, 'savedArticles', articleId);
      if (isSaved) await deleteDoc(savedDocRef);
      else await setDoc(savedDocRef, { ...article, savedAt: Date.now() });
    } catch (err) {
      setError("Storage error.");
    }
  };

  const filteredArticles = useMemo(() => {
    const baseList = activeTab === 'saved' ? savedArticles : articles;
    const now = Date.now();
    const limits = { today: 86400000, week: 604800000, month: 2592000000 };
    return baseList.filter(a => {
      const matchSearch = a.title.toLowerCase().includes(searchTerm.toLowerCase());
      const matchTab = activeTab === 'all' || activeTab === 'saved' || a.sourceId === activeTab;
      const matchDate = timeFilter === 'any' || (now - a.timestamp) < limits[timeFilter];
      return matchSearch && matchTab && matchDate;
    });
  }, [articles, savedArticles, searchTerm, activeTab, timeFilter]);

  if (loading) return (
    <div className={`min-h-screen flex items-center justify-center ${isDarkMode ? 'bg-slate-900' : 'bg-slate-50'}`}>
      <RefreshCw className="animate-spin text-blue-500" size={32} />
    </div>
  );

  return (
    <div className={`min-h-screen transition-colors duration-300 ${isDarkMode ? 'bg-slate-950 text-slate-100' : 'bg-slate-50 text-slate-900'}`}>
      {/* Navigation */}
      <nav className={`sticky top-0 z-50 border-b backdrop-blur-md px-4 h-16 flex items-center justify-between ${isDarkMode ? 'bg-slate-900/80 border-slate-800' : 'bg-white/80 border-slate-200'}`}>
        <div className="flex items-center gap-3">
          <div className="bg-gradient-to-tr from-blue-600 to-blue-400 p-2 rounded-xl text-white shadow-lg shadow-blue-500/20">
            <Rss size={20} />
          </div>
          <span className="font-black text-xl tracking-tighter">Mlu's <span className="text-blue-500">Feed</span></span>
        </div>

        <div className="hidden md:flex flex-1 max-w-lg mx-8 relative">
          <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400" size={16} />
          <input 
            type="text" 
            placeholder="Search news..." 
            className={`w-full pl-10 pr-4 py-2 rounded-full border-none focus:ring-2 focus:ring-blue-500 text-sm outline-none transition-all ${isDarkMode ? 'bg-slate-800' : 'bg-slate-100'}`}
            value={searchTerm}
            onChange={(e) => setSearchTerm(e.target.value)}
          />
        </div>

        <div className="flex items-center gap-2">
          <button onClick={() => setIsDarkMode(!isDarkMode)} className={`p-2 rounded-full transition-colors ${isDarkMode ? 'hover:bg-slate-800' : 'hover:bg-slate-100'}`}>
            {isDarkMode ? <Sun size={20} /> : <Moon size={20} />}
          </button>
          <button onClick={fetchArticles} className={`p-2 rounded-full transition-colors ${refreshing ? 'animate-spin text-blue-500' : ''}`}>
            <RefreshCw size={20} />
          </button>
          <div className="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 font-bold text-xs border border-blue-200" title={user?.uid}>
            {user?.uid.substring(0, 2).toUpperCase() || 'M'}
          </div>
        </div>
      </nav>

      <div className="max-w-7xl mx-auto px-4 py-8 flex flex-col lg:flex-row gap-8">
        {/* Sidebar */}
        <aside className="w-full lg:w-72 space-y-8">
          <section>
            <div className="flex items-center justify-between mb-4 px-2">
              <h2 className="text-[10px] font-black uppercase tracking-widest text-slate-400">Navigation</h2>
              <LayoutGrid size={12} className="text-slate-400" />
            </div>
            <div className="space-y-1">
              <button 
                onClick={() => { setActiveTab('all'); setTimeFilter('any'); }}
                className={`w-full flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm font-medium transition-all ${activeTab === 'all' && timeFilter === 'any' ? 'bg-blue-500 text-white shadow-lg shadow-blue-500/30' : 'hover:bg-blue-500/10'}`}
              >
                <Hash size={16} /> All Items
              </button>
              <button 
                onClick={() => setActiveTab('saved')}
                className={`w-full flex items-center justify-between px-3 py-2.5 rounded-xl text-sm font-medium transition-all ${activeTab === 'saved' ? 'bg-blue-500 text-white shadow-lg shadow-blue-500/30' : 'hover:bg-blue-500/10'}`}
              >
                <div className="flex items-center gap-3">
                  <Bookmark size={16} /> Bookmarks
                </div>
                {savedArticles.length > 0 && <span className="text-[10px] bg-white/20 px-1.5 rounded">{savedArticles.length}</span>}
              </button>
            </div>
          </section>

          <section>
            <h2 className="text-[10px] font-black uppercase tracking-widest text-slate-400 mb-4 px-2">Timeframe</h2>
            <div className="grid grid-cols-2 lg:grid-cols-1 gap-1">
              {[
                { id: 'today', label: 'Past 24 Hours', icon: Clock },
                { id: 'week', label: 'Past 7 Days', icon: Calendar },
                { id: 'month', label: 'Past 30 Days', icon: History }
              ].map(item => (
                <button 
                  key={item.id}
                  onClick={() => setTimeFilter(item.id)}
                  className={`flex items-center gap-3 px-3 py-2 rounded-xl text-sm font-medium transition-all ${timeFilter === item.id ? 'bg-slate-200 dark:bg-slate-800 text-blue-600 dark:text-blue-400' : 'hover:bg-blue-500/10'}`}
                >
                  <item.icon size={14} /> {item.label}
                </button>
              ))}
            </div>
          </section>

          <section>
            <h2 className="text-[10px] font-black uppercase tracking-widest text-slate-400 mb-4 px-2">Sources</h2>
            <div className={`rounded-2xl border p-2 space-y-1 ${isDarkMode ? 'bg-slate-900 border-slate-800' : 'bg-white border-slate-200'}`}>
              {feeds.map(f => (
                <div key={f.id} className="group flex items-center gap-1">
                  <button 
                    onClick={() => setActiveTab(f.id)}
                    className={`flex-1 text-left px-3 py-2 rounded-lg text-sm truncate transition-colors ${activeTab === f.id ? 'bg-blue-500 text-white' : 'hover:bg-slate-100 dark:hover:bg-slate-800'}`}
                  >
                    <div className="flex items-center gap-2">
                      {f.type === 'scrape' ? <Globe size={12}/> : <Rss size={12}/>}
                      {f.name}
                    </div>
                  </button>
                  <button onClick={() => removeFeed(f.id)} className="opacity-0 group-hover:opacity-100 p-2 text-red-400 hover:text-red-600 transition-all">
                    <Trash2 size={14} />
                  </button>
                </div>
              ))}
            </div>
          </section>

          <section className={`p-5 rounded-3xl border ${isDarkMode ? 'bg-slate-900 border-slate-800' : 'bg-white border-slate-200 shadow-sm'}`}>
            <h3 className="text-sm font-bold mb-4 flex items-center gap-2 text-blue-500">
              <Zap size={16} /> New Resource
            </h3>
            
            <div className="flex bg-slate-100 dark:bg-slate-800 p-1 rounded-xl mb-3">
              <button 
                onClick={() => setFeedType('rss')}
                className={`flex-1 py-1.5 rounded-lg text-[10px] font-bold transition-all ${feedType === 'rss' ? 'bg-white dark:bg-slate-700 shadow-sm text-blue-500' : 'text-slate-500'}`}
              >
                RSS FEED
              </button>
              <button 
                onClick={() => setFeedType('scrape')}
                className={`flex-1 py-1.5 rounded-lg text-[10px] font-bold transition-all ${feedType === 'scrape' ? 'bg-white dark:bg-slate-700 shadow-sm text-blue-500' : 'text-slate-500'}`}
              >
                WEB SCRAPE
              </button>
            </div>

            <form onSubmit={addFeed} className="space-y-3">
              <input 
                type="url" 
                placeholder={feedType === 'rss' ? "https://site.com/rss" : "https://site.com/news"} 
                className={`w-full px-4 py-2 text-xs rounded-xl border focus:ring-2 focus:ring-blue-500 outline-none transition-all ${isDarkMode ? 'bg-slate-800 border-slate-700' : 'bg-slate-50 border-slate-200'}`}
                value={newFeedUrl}
                onChange={(e) => setNewFeedUrl(e.target.value)}
              />
              <p className="text-[10px] text-slate-400 px-1">
                {feedType === 'rss' ? 'Syncs via standard RSS/XML.' : 'Heuristic Scraper: Extracts news from HTML.'}
              </p>
              <button className="w-full py-2.5 bg-slate-900 text-white dark:bg-blue-600 rounded-xl text-xs font-bold hover:scale-[1.02] active:scale-95 transition-all">
                Add {feedType === 'rss' ? 'Feed' : 'Site'}
              </button>
            </form>
          </section>
        </aside>

        {/* Main Feed Content */}
        <main className="flex-1">
          <div className="mb-8 flex flex-col sm:flex-row sm:items-center justify-between gap-4">
            <div>
              <h1 className="text-2xl font-black tracking-tight flex items-center gap-2 text-blue-600 dark:text-blue-400">
                {activeTab === 'all' ? 'Unified Stream' : 
                 activeTab === 'saved' ? 'Saved Articles' : 
                 feeds.find(f => f.id === activeTab)?.name}
              </h1>
              <div className="flex items-center gap-3 text-slate-400 text-sm mt-1">
                <span>{filteredArticles.length} items found</span>
                {timeFilter !== 'any' && <span className="flex items-center gap-1 text-blue-500 font-bold capitalize"><Clock size={12}/> {timeFilter}</span>}
              </div>
            </div>
            <div className="flex bg-slate-200 dark:bg-slate-800 p-1 rounded-xl">
              <button onClick={() => setViewMode('grid')} className={`px-4 py-2 rounded-lg text-xs font-bold transition-all ${viewMode === 'grid' ? 'bg-white dark:bg-slate-700 shadow-sm text-blue-600' : 'text-slate-500'}`}>Grid</button>
              <button onClick={() => setViewMode('list')} className={`px-4 py-2 rounded-lg text-xs font-bold transition-all ${viewMode === 'list' ? 'bg-white dark:bg-slate-700 shadow-sm text-blue-600' : 'text-slate-500'}`}>List</button>
            </div>
          </div>

          <div className={`grid gap-6 ${viewMode === 'grid' ? 'grid-cols-1 md:grid-cols-2' : 'grid-cols-1'}`}>
            {filteredArticles.map((article, idx) => {
              const isBookmarked = savedArticles.some(a => a.link === article.link);
              return (
                <article 
                  key={idx} 
                  onClick={() => setSelectedArticle(article)}
                  className={`group relative cursor-pointer rounded-3xl border transition-all hover:border-blue-500 hover:shadow-xl hover:shadow-blue-500/5 ${isDarkMode ? 'bg-slate-900 border-slate-800' : 'bg-white border-slate-200'}`}
                >
                  <button 
                    onClick={(e) => toggleSaveArticle(e, article)}
                    className={`absolute top-4 right-4 z-10 p-2 rounded-full transition-all ${isBookmarked ? 'bg-blue-600 text-white scale-110 shadow-lg' : 'bg-black/20 text-white backdrop-blur-md opacity-0 group-hover:opacity-100'}`}
                  >
                    <Bookmark size={16} fill={isBookmarked ? "currentColor" : "none"} />
                  </button>

                  <div className={`flex ${viewMode === 'list' ? 'flex-row' : 'flex-col'}`}>
                    {article.thumbnail && (
                      <div className={`${viewMode === 'list' ? 'w-32 h-32' : 'w-full h-48'} overflow-hidden relative rounded-t-3xl ${viewMode === 'list' ? 'rounded-l-3xl rounded-tr-none' : ''}`}>
                        <img src={article.thumbnail} className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500" alt="" />
                      </div>
                    )}
                    <div className="p-6 flex-1">
                      <div className="flex items-center justify-between mb-3">
                        <div className="flex items-center gap-2">
                          <span className="text-[10px] font-bold text-blue-500 px-2 py-0.5 bg-blue-50 dark:bg-blue-900/30 rounded-lg">{article.sourceName}</span>
                        </div>
                        <span className="text-[10px] text-slate-400 flex items-center gap-1 font-mono">
                          <Clock size={10}/> {new Date(article.pubDate).toLocaleDateString()}
                        </span>
                      </div>
                      <h3 className="text-lg font-bold leading-snug mb-3 group-hover:text-blue-500 transition-colors line-clamp-2">
                        {article.title}
                      </h3>
                      <p className={`text-sm text-slate-500 leading-relaxed line-clamp-2 ${viewMode === 'list' ? 'hidden sm:block' : ''}`}>
                        {article.description.replace(/<[^>]*>?/gm, '').substring(0, 140)}...
                      </p>
                    </div>
                  </div>
                </article>
              );
            })}
          </div>

          {filteredArticles.length === 0 && (
            <div className="text-center py-32 border-2 border-dashed border-slate-200 dark:border-slate-800 rounded-3xl bg-white/50 dark:bg-slate-900/50">
              <ShieldAlert className="mx-auto text-slate-300 mb-4" size={48} />
              <h3 className="text-xl font-bold">No items found</h3>
              <p className="text-slate-400 mt-2 max-w-xs mx-auto">Try refreshing your feeds or checking your scraper sources.</p>
            </div>
          )}
        </main>
      </div>

      {/* Reader Modal */}
      {selectedArticle && (
        <div className="fixed inset-0 z-[60] flex items-center justify-center p-4 bg-black/80 backdrop-blur-sm">
          <div className={`w-full max-w-4xl max-h-[95vh] rounded-[40px] overflow-hidden flex flex-col shadow-2xl animate-in zoom-in duration-300 ${isDarkMode ? 'bg-slate-900' : 'bg-white'}`}>
            <div className="p-6 border-b flex items-center justify-between px-8 bg-slate-50 dark:bg-slate-950">
              <div className="flex items-center gap-4">
                <button 
                  onClick={(e) => toggleSaveArticle(e, selectedArticle)}
                  className={`flex items-center gap-2 px-4 py-2 rounded-full text-[10px] font-black uppercase tracking-widest transition-all ${savedArticles.some(a => a.link === selectedArticle.link) ? 'bg-blue-600 text-white shadow-lg' : 'bg-slate-200 dark:bg-slate-800 hover:bg-blue-100 dark:hover:bg-blue-900/20 text-slate-500'}`}
                >
                  <Bookmark size={14} fill={savedArticles.some(a => a.link === selectedArticle.link) ? "currentColor" : "none"} />
                  {savedArticles.some(a => a.link === selectedArticle.link) ? 'Archived' : 'Bookmark Article'}
                </button>
                <div className="h-4 w-[1px] bg-slate-200 dark:bg-slate-800"></div>
                <span className="text-xs text-slate-400 font-mono tracking-tighter">{selectedArticle.sourceName}</span>
              </div>
              <button onClick={() => setSelectedArticle(null)} className="p-2 hover:bg-red-50 dark:hover:bg-red-900/20 text-slate-400 hover:text-red-500 rounded-full transition-all"><X size={24} /></button>
            </div>
            
            <div className="flex-1 overflow-y-auto px-8 md:px-20 py-12 scroll-smooth">
              <h2 className="text-3xl md:text-5xl font-black mb-10 leading-[1.1] tracking-tight">{selectedArticle.title}</h2>
              {selectedArticle.thumbnail && <img src={selectedArticle.thumbnail} className="w-full h-auto rounded-[32px] mb-12 shadow-2xl border border-slate-100 dark:border-slate-800" alt="" />}
              <div 
                className={`prose prose-lg max-w-none leading-relaxed prose-blue ${isDarkMode ? 'prose-invert text-slate-300' : 'text-slate-700'}`} 
                dangerouslySetInnerHTML={{ __html: selectedArticle.content || selectedArticle.description }} 
              />
            </div>

            <div className={`p-8 border-t flex flex-col sm:flex-row items-center justify-between gap-6 ${isDarkMode ? 'bg-slate-950' : 'bg-slate-50'}`}>
              <div className="flex items-center gap-3 text-slate-400 text-sm">
                <Globe size={18} /> Source: {new URL(selectedArticle.link).hostname}
              </div>
              <a 
                href={selectedArticle.link} 
                target="_blank" 
                rel="noopener noreferrer" 
                className="w-full sm:w-auto px-12 py-5 bg-blue-600 hover:bg-blue-700 text-white font-black rounded-2xl transition-all flex items-center justify-center gap-3 shadow-xl shadow-blue-500/30 active:scale-95"
              >
                VISIT SOURCE <ExternalLink size={20} />
              </a>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

export default App;