const { useState, useEffect, useMemo } = React;

// API Service Functions
// render-api URL (using Render placeholder, update with actual URL later)
const API_BASE_URL = window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1'
  ? 'http://localhost:5105' // Using 5105 for local render-api test
  : 'https://locayaan.onrender.com';

// Pipeline API URL is always localhost:7010
const PIPELINE_API_URL = 'http://localhost:7010';

async function fetchArticlesFeed(country = '', city = '', category = '') {
  try {
    const params = new URLSearchParams();
    if (country && country !== 'All') params.append('country', country);
    if (city) params.append('city', city);
    if (category && category !== 'All') params.append('category', category.toLowerCase());

    const response = await fetch(`${API_BASE_URL}/api/articles?${params.toString()}`);
    if (!response.ok) throw new Error(`HTTP error ${response.status}`);

    const data = await response.json();
    return data.articles || [];
  } catch (error) {
    console.error('Failed to fetch articles feed:', error);
    return [];
  }
}

async function askRAGQuery(queryText) {
  try {
    const response = await fetch(`${PIPELINE_API_URL}/ask`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ query: queryText })
    });

    if (!response.ok) throw new Error(`HTTP error ${response.status}`);

    return await response.json();
  } catch (error) {
    console.error('Failed to execute RAG query:', error);
    return {
      answer: "🛌 AI search is taking a nap right now — but here's what's happening today",
      citations: []
    };
  }
}

// Placeholder Component
function Placeholder({ message }) {
  return (
    <div className="placeholder" style={{ padding: '2rem', textAlign: 'center', color: 'var(--text-muted)' }}>
      <h2>{message || 'Articles coming soon...'}</h2>
      <p>Our content pipeline is still processing data. Please check back later.</p>
    </div>
  );
}

// Header Component
function Header({ savedCount, onViewSaved, showSavedOnly }) {
  return (
    <header className="masthead">
      <img className="masthead-mark" src="./locayaan-icon.svg" alt="" />
      <h1>Locayaan</h1>
      <p>Local Arabic city news, in plain English</p>
      <button
          className={`saved-toggle ${showSavedOnly ? 'active' : ''}`}
          onClick={onViewSaved}
          title={showSavedOnly ? "View Feed" : "View Bookmarked Articles"}
        >
          <i className={showSavedOnly ? "ti ti-bookmark-filled" : "ti ti-bookmark"}></i>
          <span>Saved</span>
          <span className="saved-count">{savedCount}</span>
      </button>
    </header>
  );
}

// SearchBar Component
function SearchBar({ searchQuery, onSearchChange, onTriggerRAG, isSearching }) {
  const handleKeyDown = (e) => {
    if (e.key === 'Enter' && searchQuery.trim()) {
      onTriggerRAG(searchQuery.trim());
    }
  };

  return (
    <div className="search-row">
      <label htmlFor="paper-search">Search the paper</label>
      <input
        id="paper-search"
        type="text"
        className="search-input"
        placeholder="e.g. hiring in Riyadh, labour law..."
        value={searchQuery}
        onChange={(e) => onSearchChange(e.target.value)}
        onKeyDown={handleKeyDown}
      />
      <button
        className="search-submit"
        onClick={() => searchQuery.trim() && onTriggerRAG(searchQuery.trim())}
        title="Search and summarize matching coverage"
        disabled={!searchQuery.trim() || isSearching}
      >
        {isSearching ? 'Searching...' : 'Search'}
      </button>
    </div>
  );
}

// FilterChips Component
function FilterChips({ activeRegion, onSelectRegion, activeCategory, onSelectCategory }) {
  const regions = ['All', 'Saudi Arabia', 'UAE', 'Qatar', 'Oman'];
  const categories = [
    { label: 'All', value: 'All' },
    { label: 'Business', value: 'Business' },
    { label: 'Jobs', value: 'Jobs' },
    { label: 'Tech', value: 'Tech' },
    { label: 'Rulings', value: 'Regulatory' }
  ];
  return (
    <div className="filter-list" aria-label="Edition filters">
      <div className="filter-row" role="group" aria-label="Filter by region">
        <span className="filter-label">Region:</span>
        {regions.map((region) => (
          <button key={region} className={activeRegion === region ? 'selected' : ''} onClick={() => onSelectRegion(region)}>
            {region}
          </button>
        ))}
      </div>
      <div className="filter-row" role="group" aria-label="Filter by section">
        <span className="filter-label">Section:</span>
        {categories.map((category) => (
          <button key={category.value} className={activeCategory === category.value ? 'selected' : ''} onClick={() => onSelectCategory(category.value)}>
            {category.label}
          </button>
        ))}
      </div>
    </div>
  );
}

// ArticleCard Component
function ArticleCard({ article, isBookmarked, onToggleBookmark, lead = false }) {
  const { englishTitle, originalTitle, englishSummary, sourceName, city, country, category, publishedDate, sourceUrl } = article;

  const formatTime = (dateStr) => {
    if (!dateStr) return 'Recently';
    const diffHours = Math.round((new Date() - new Date(dateStr)) / (1000 * 60 * 60));
    return diffHours <= 0 ? 'Just now' : `${diffHours}h ago`;
  };

  const handleShare = async () => {
    if (navigator.share) {
      try {
        await navigator.share({
          title: englishTitle || originalTitle,
          text: `Check out this GCC news update via Locayaan:`,
          url: sourceUrl
        });
      } catch (err) {
        console.log('Share canceled or failed:', err);
      }
    } else {
      await navigator.clipboard.writeText(sourceUrl);
      alert('Article link copied to clipboard!');
    }
  };

  return (
    <article className={`story ${lead ? 'lead-story' : ''}`}>
      <p className="story-kicker">{category === 'Regulatory' ? 'Rulings' : category || 'News'}{city ? ` · ${city}` : ''}{country ? `, ${country}` : ''}</p>
      {lead ? <h2><a
        href={sourceUrl} 
        target="_blank" 
        rel="noopener noreferrer" 
        className="article-title"
        title={originalTitle ? `Original Arabic Title: ${originalTitle}` : ''}
      >
        {englishTitle || originalTitle}
      </a></h2> : <h3><a
        href={sourceUrl}
        target="_blank"
        rel="noopener noreferrer"
        className="article-title"
        title={originalTitle ? `Original Arabic Title: ${originalTitle}` : ''}
      >
        {englishTitle || originalTitle}
      </a></h3>}

      <p className="article-meta">
        {sourceName || 'Local source'} · {formatTime(publishedDate)}{article.originalLanguage === 'ar' ? ' · translated from Arabic' : ''}
      </p>
      {englishSummary && <p className="story-summary">{englishSummary}</p>}

      <div className="story-actions">
          <button 
            className={`action-btn ${isBookmarked ? 'bookmarked' : ''}`}
            onClick={() => onToggleBookmark(article)}
            title={isBookmarked ? 'Remove Bookmark' : 'Bookmark Article'}
            aria-label={isBookmarked ? 'Remove bookmark' : 'Bookmark article'}
          >
            <i className={isBookmarked ? 'ti ti-bookmark-filled' : 'ti ti-bookmark'}></i>
          </button>

          <button 
            className="action-btn"
            onClick={handleShare}
            title="Share Article Link"
            aria-label="Share article"
          >
            <i className="ti ti-share-2"></i>
          </button>
      </div>
    </article>
  );
}

// AISummaryPanel Component
function AISummaryPanel({ ragResponse, isLoading }) {
  if (isLoading) {
    return (
      <div className="ai-summary-card">
        <div className="ai-header">
          <i className="ti ti-sparkles spin"></i>
          <span>Synthesizing GCC News...</span>
        </div>
        <p className="ai-answer-text" style={{ color: 'var(--text-muted)' }}>
          Retrieving matching vector chunks and generating cited English answer...
        </p>
      </div>
    );
  }

  if (!ragResponse) return null;

  return (
    <div className="ai-summary-card">
      <div className="ai-header">
        <i className="ti ti-sparkles"></i>
        <span>AI News Summary</span>
      </div>

      <p className="ai-answer-text">{ragResponse.answer}</p>

      {ragResponse.citations && ragResponse.citations.length > 0 && (
        <div className="citations-list">
          {ragResponse.citations.map((cite, index) => (
            <a
              key={cite.articleId || index}
              href={cite.url}
              target="_blank"
              rel="noopener noreferrer"
              className="citation-chip"
              title={cite.englishTitle}
            >
              [{index + 1}] {cite.sourceName} ({cite.city})
            </a>
          ))}
        </div>
      )}
    </div>
  );
}

// Main App Component
function App() {
  const [articles, setArticles] = useState([]);
  const [isLoading, setIsLoading] = useState(true);
  const [activeRegion, setActiveRegion] = useState('All');
  const [activeCategory, setActiveCategory] = useState('All');
  const [searchQuery, setSearchQuery] = useState('');
  const [ragResponse, setRagResponse] = useState(null);
  const [isSearchingRAG, setIsSearchingRAG] = useState(false);

  const [savedArticles, setSavedArticles] = useState(() => {
    try {
      const stored = localStorage.getItem('locayaan_saved_articles');
      return stored ? JSON.parse(stored) : [];
    } catch (e) {
      return [];
    }
  });
  
  const [showSavedOnly, setShowSavedOnly] = useState(false);

  useEffect(() => {
    try {
      localStorage.setItem('locayaan_saved_articles', JSON.stringify(savedArticles));
    } catch (e) {
      console.error('Failed to save bookmarks to localStorage', e);
    }
  }, [savedArticles]);

  useEffect(() => {
    async function loadFeed() {
      setIsLoading(true);
      const countryParam = activeRegion === 'All' ? '' : activeRegion;
      const categoryParam = activeCategory === 'All' ? '' : activeCategory;

      const fetched = await fetchArticlesFeed(countryParam, '', categoryParam);
      if (fetched && fetched.length > 0) {
        setArticles(fetched);
      } else {
        setArticles([]);
      }
      setIsLoading(false);
    }

    loadFeed();
  }, [activeRegion, activeCategory]);

  const toggleBookmark = (article) => {
    setSavedArticles((prev) => {
      const exists = prev.some((item) => item.articleId === article.articleId);
      if (exists) {
        return prev.filter((item) => item.articleId !== article.articleId);
      } else {
        return [...prev, article];
      }
    });
  };

  const handleTriggerRAG = async (queryText) => {
    setIsSearchingRAG(true);
    const result = await askRAGQuery(queryText);
    setRagResponse(result);
    setIsSearchingRAG(false);
  };

  const displayedArticles = useMemo(() => {
    let list = showSavedOnly ? savedArticles : articles;

    if (activeRegion !== 'All') list = list.filter((item) => item.country === activeRegion);
    if (activeCategory !== 'All') list = list.filter((item) => item.category?.toLowerCase() === activeCategory.toLowerCase());

    if (searchQuery.trim()) {
      const q = searchQuery.toLowerCase();
      list = list.filter((item) => 
        (item.englishTitle && item.englishTitle.toLowerCase().includes(q)) ||
        (item.originalTitle && item.originalTitle.toLowerCase().includes(q)) ||
        (item.sourceName && item.sourceName.toLowerCase().includes(q)) ||
        (item.city && item.city.toLowerCase().includes(q))
      );
    }

    return list;
  }, [articles, savedArticles, showSavedOnly, activeRegion, activeCategory, searchQuery]);

  return (
    <main className="edition-shell">
      <div className="edition-strip">
        <span>{new Intl.DateTimeFormat('en-GB', { weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' }).format(new Date())}</span>
        <span>GCC Edition · Free, always</span>
      </div>
      <Header
        savedCount={savedArticles.length}
        onViewSaved={() => setShowSavedOnly(!showSavedOnly)}
        showSavedOnly={showSavedOnly}
      />
      <nav className="section-nav" aria-label="News sections">Business <span>·</span> Technology <span>·</span> Jobs <span>·</span> Rulings</nav>

      <SearchBar
        searchQuery={searchQuery}
        onSearchChange={setSearchQuery}
        onTriggerRAG={handleTriggerRAG}
        isSearching={isSearchingRAG}
      />

      <FilterChips
        activeRegion={activeRegion}
        onSelectRegion={setActiveRegion}
        activeCategory={activeCategory}
        onSelectCategory={setActiveCategory}
      />

      {(isSearchingRAG || ragResponse) && (
        <AISummaryPanel
          ragResponse={ragResponse}
          isLoading={isSearchingRAG}
        />
      )}

      <section className="edition-content" aria-label={showSavedOnly ? 'Saved articles' : 'Today’s edition'}>
        <div className="edition-heading">
          <h2>{showSavedOnly ? 'Saved Articles' : 'Today’s Edition'}</h2>
          {!isLoading && <span>{displayedArticles.length} {displayedArticles.length === 1 ? 'story' : 'stories'}</span>}
        </div>
        {isLoading ? (
          <div className="loading-state">Loading GCC local news...</div>
        ) : displayedArticles.length > 0 ? (
          <>
            <ArticleCard
              key={displayedArticles[0].articleId}
              article={displayedArticles[0]}
              isBookmarked={savedArticles.some((item) => item.articleId === displayedArticles[0].articleId)}
              onToggleBookmark={toggleBookmark}
              lead
            />
            <div className="story-columns">
              {displayedArticles.slice(1).map((article) => (
                <ArticleCard
                  key={article.articleId}
                  article={article}
                  isBookmarked={savedArticles.some((item) => item.articleId === article.articleId)}
                  onToggleBookmark={toggleBookmark}
                />
              ))}
            </div>
          </>
        ) : (
          <Placeholder message={showSavedOnly ? 'No saved articles yet.' : 'No stories match this edition.'} />
        )}
      </section>

      <footer className="paper-footer">
        <div className="footer-ornament">✳ &nbsp; ✳ &nbsp; ✳</div>
        <p>Created by <a href="https://zeeshank.me/" target="_blank" rel="noopener noreferrer">Zeeshan Khan</a></p>
        <span>Every story links to its original publisher · Arabic sources translated automatically</span>
      </footer>
    </main>
  );
}

// Render React App component into root DOM container
const rootElement = document.getElementById('root');
const root = ReactDOM.createRoot(rootElement);
root.render(<App />);