import React, { useState, useEffect, useCallback } from 'react';
import { NewsArticle, NewsCategory } from './types';
import { geminiService } from './services/geminiService';
import Header from './components/Header';
import CategoryBar from './components/CategoryBar';
import NewsCard from './components/NewsCard';
import ArticleModal from './components/ArticleModal';

const App: React.FC = () => {
  const [articles, setArticles] = useState<NewsArticle[]>([]);
  const [category, setCategory] = useState<string>(NewsCategory.LATEST);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
  
  // Summary State
  const [selectedArticle, setSelectedArticle] = useState<NewsArticle | null>(null);
  const [summary, setSummary] = useState<string | null>(null);
  const [summaryLoading, setSummaryLoading] = useState(false);

  const fetchNews = useCallback(async (query: string) => {
    setLoading(true);
    setError(null);
    try {
      const results = await geminiService.fetchNews(query);
      if (results.length === 0) {
        setError("No news found for this topic. Try something else!");
      } else {
        setArticles(results);
      }
    } catch (err) {
      setError("Failed to load news. Please check your connection or API key.");
    } finally {
      setLoading(false);
    }
  }, []);

  useEffect(() => {
    fetchNews(category);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [category]);

  const handleSearch = (query: string) => {
    setCategory(query);
  };

  const handleSummarize = async (article: NewsArticle) => {
    setSelectedArticle(article);
    setSummaryLoading(true);
    setSummary(null);
    try {
      const aiSummary = await geminiService.summarizeArticle(article.title, article.description);
      setSummary(aiSummary);
    } catch (err) {
      setSummary("Could not generate summary.");
    } finally {
      setSummaryLoading(false);
    }
  };

  const closeSummary = () => {
    setSelectedArticle(null);
    setSummary(null);
  };

  return (
    <div className="min-h-screen flex flex-col">
      <Header onSearch={handleSearch} />
      <CategoryBar 
        activeCategory={category} 
        onCategoryChange={(cat) => setCategory(cat)} 
      />

      <main className="flex-grow max-w-7xl mx-auto w-full px-4 sm:px-6 lg:px-8 py-8">
        {/* News Feed Heading */}
        <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-8">
          <div>
            <h1 className="text-3xl font-black text-slate-900 capitalize flex items-center gap-3">
              <span className="w-2 h-8 bg-indigo-600 rounded-full"></span>
              {category.replace('-', ' ')}
            </h1>
            <p className="text-slate-500 mt-1 font-medium">
              Curated by Nova AI intelligence
            </p>
          </div>
          <button 
            onClick={() => fetchNews(category)}
            className="flex items-center justify-center gap-2 px-4 py-2 bg-white border border-slate-200 rounded-xl text-sm font-bold text-slate-600 hover:bg-slate-50 hover:text-indigo-600 transition-all shadow-sm"
          >
            <i className={`fa-solid fa-arrows-rotate ${loading ? 'animate-spin' : ''}`}></i>
            Refresh
          </button>
        </div>

        {/* Error State */}
        {error && (
          <div className="bg-rose-50 border border-rose-100 rounded-2xl p-8 text-center max-w-xl mx-auto my-12">
            <div className="w-16 h-16 bg-rose-100 rounded-full flex items-center justify-center mx-auto mb-4">
              <i className="fa-solid fa-circle-exclamation text-rose-600 text-2xl"></i>
            </div>
            <h3 className="text-xl font-bold text-rose-900 mb-2">Oops! Something went wrong</h3>
            <p className="text-rose-600">{error}</p>
            <button 
              onClick={() => fetchNews(category)}
              className="mt-6 px-6 py-2 bg-rose-600 text-white rounded-xl font-bold hover:bg-rose-700 transition-all"
            >
              Try Again
            </button>
          </div>
        )}

        {/* Skeleton Loading State */}
        {loading && !error && (
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            {[...Array(6)].map((_, i) => (
              <div key={i} className="animate-pulse bg-white rounded-2xl border border-slate-100 overflow-hidden h-[450px]">
                <div className="bg-slate-200 aspect-video w-full"></div>
                <div className="p-5 space-y-4">
                  <div className="h-4 bg-slate-200 rounded w-1/4"></div>
                  <div className="h-6 bg-slate-200 rounded w-3/4"></div>
                  <div className="space-y-2">
                    <div className="h-3 bg-slate-200 rounded"></div>
                    <div className="h-3 bg-slate-200 rounded"></div>
                    <div className="h-3 bg-slate-200 rounded w-5/6"></div>
                  </div>
                  <div className="flex gap-2 pt-4">
                    <div className="h-10 bg-slate-200 rounded-xl flex-1"></div>
                    <div className="h-10 bg-slate-200 rounded-xl flex-1"></div>
                  </div>
                </div>
              </div>
            ))}
          </div>
        )}

        {/* Articles Grid */}
        {!loading && !error && (
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            {articles.map((article) => (
              <NewsCard 
                key={article.id} 
                article={article} 
                onSummarize={handleSummarize} 
              />
            ))}
          </div>
        )}
      </main>

      <footer className="bg-white border-t border-slate-200 py-12">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex flex-col md:flex-row justify-between items-center gap-8">
            <div className="flex items-center gap-2">
              <div className="w-8 h-8 bg-slate-900 rounded-lg flex items-center justify-center">
                <i className="fa-solid fa-bolt text-white text-sm"></i>
              </div>
              <span className="text-lg font-bold text-slate-900">NovaNews</span>
            </div>
            
            <div className="flex gap-8 text-sm font-semibold text-slate-500">
              <a href="#" className="hover:text-indigo-600 transition-colors">Privacy</a>
              <a href="#" className="hover:text-indigo-600 transition-colors">Terms</a>
              <a href="#" className="hover:text-indigo-600 transition-colors">API Docs</a>
              <a href="#" className="hover:text-indigo-600 transition-colors">Contact</a>
            </div>

            <p className="text-sm text-slate-400">
              © 2025 NovaNews AI. Built with Gemini 3.0
            </p>
          </div>
        </div>
      </footer>

      <ArticleModal 
        article={selectedArticle} 
        summary={summary} 
        loading={summaryLoading} 
        onClose={closeSummary} 
      />
    </div>
  );
};

export default App;