import { useEffect, useMemo, useState } from 'react';
import { useAuth, useCollection, exportCSV, exportJSON } from '@deplixo/sdk';
import { FeedTimeline } from './components/FeedTimeline.jsx';
import { FeedManager } from './components/FeedManager.jsx';

function App() {
  const { user, loading, login, logout } = useAuth();
  const [activeTab, setActiveTab] = useState('timeline');
  const [keywordInput, setKeywordInput] = useState('');
  const [digestEnabled, setDigestEnabled] = useState(true);
  const [matchedOnly, setMatchedOnly] = useState(false);

  const categoryOptions = useMemo(
    () => ['All', 'Tech', 'Sports', 'Business', 'World', 'Science', 'Entertainment'],
    []
  );

  const feedsCollection = useCollection('rss_feeds', { personal: true });
  const savedArticlesCollection = useCollection('saved_articles', { personal: true });
  const filtersCollection = useCollection('rss_filters', { personal: true });
  const filterStatsCollection = useCollection('rss_filter_stats', { personal: true });

  const feeds = feedsCollection.items || [];
  const savedArticles = savedArticlesCollection.items || [];
  const filtersItems = filtersCollection.items || [];
  const filterStatsItems = filterStatsCollection.items || [];

  const keywordFilters = filtersItems[0] || null;
  const filterStats = filterStatsItems[0] || null;

  const [keywords, setKeywords] = useState([]);

  useEffect(() => {
    const rawKeywords = keywordFilters?.keywords;
    const normalized = Array.isArray(rawKeywords)
      ? rawKeywords
      : typeof rawKeywords === 'string'
        ? rawKeywords.split(',')
        : [];

    setKeywords(
      normalized
        .map((item) => String(item).trim())
        .filter(Boolean)
    );
    setDigestEnabled(keywordFilters?.digestEnabled !== false);
    setMatchedOnly(Boolean(keywordFilters?.matchedOnly));
  }, [keywordFilters]);

  const cleanedKeywords = useMemo(
    () => keywords.map((keyword) => keyword.trim()).filter(Boolean),
    [keywords]
  );

  const keywordPreview = cleanedKeywords.slice(0, 6);

  const handleAddKeyword = async () => {
    const next = keywordInput.trim();
    if (!next || cleanedKeywords.some((keyword) => keyword.toLowerCase() === next.toLowerCase())) {
      setKeywordInput('');
      return;
    }

    const updatedKeywords = [...cleanedKeywords, next];
    setKeywords(updatedKeywords);
    setKeywordInput('');

    const payload = {
      keywords: updatedKeywords,
      digestEnabled,
      matchedOnly,
      updatedAt: new Date().toISOString(),
    };

    if (keywordFilters?.id) {
      await filtersCollection.update(keywordFilters.id, payload);
    } else {
      await filtersCollection.add(payload);
    }
  };

  const handleRemoveKeyword = async (keywordToRemove) => {
    const updatedKeywords = cleanedKeywords.filter(
      (keyword) => keyword.toLowerCase() !== keywordToRemove.toLowerCase()
    );
    setKeywords(updatedKeywords);

    const payload = {
      keywords: updatedKeywords,
      digestEnabled,
      matchedOnly,
      updatedAt: new Date().toISOString(),
    };

    if (keywordFilters?.id) {
      await filtersCollection.update(keywordFilters.id, payload);
    } else {
      await filtersCollection.add(payload);
    }
  };

  const handleToggleSetting = async (field, nextValue) => {
    if (field === 'digestEnabled') setDigestEnabled(nextValue);
    if (field === 'matchedOnly') setMatchedOnly(nextValue);

    const payload = {
      keywords: cleanedKeywords,
      digestEnabled: field === 'digestEnabled' ? nextValue : digestEnabled,
      matchedOnly: field === 'matchedOnly' ? nextValue : matchedOnly,
      updatedAt: new Date().toISOString(),
    };

    if (keywordFilters?.id) {
      await filtersCollection.update(keywordFilters.id, payload);
    } else {
      await filtersCollection.add(payload);
    }
  };

  const handleExportBookmarksJSON = () => {
    exportJSON(savedArticles, { filename: 'bookmarks.json' });
  };

  const handleExportBookmarksCSV = () => {
    const rows = savedArticles.map((item) => ({
      title: item.title || '',
      source: item.source || item.feedName || '',
      url: item.url || item.link || '',
      date: item.date || item.createdAt || '',
      summary: item.summary || item.snippet || '',
    }));

    exportCSV(rows, {
      filename: 'bookmarks.csv',
      columns: ['title', 'source', 'url', 'date', 'summary'],
    });
  };

  const statusLabel = digestEnabled ? 'Daily digest enabled' : 'Daily digest paused';
  const matcherLabel = matchedOnly ? 'Hourly matcher: keyword matches only' : 'Hourly matcher: all feeds';
  const lastUpdated = keywordFilters?.updatedAt || keywordFilters?.createdAt || 'Not configured yet';

  if (loading) {
    return <div className="auth-loading">Signing in...</div>;
  }

  if (!user) {
    return (
      <div className="auth-screen">
        <div className="auth-card">
          <div className="auth-brand">
            <span className="header-icon">◉</span>
            <h1 className="header-title">Feedstream</h1>
          </div>
          <h2 className="auth-title">Sign in to save your feeds and bookmarks</h2>
          <p className="auth-text">
            Connect with Google to keep your RSS feed list, keyword filters, and bookmarked articles personal and synced to your account.
          </p>
          <button className="auth-login-btn" onClick={() => login('google')}>
            Continue with Google
          </button>
        </div>
      </div>
    );
  }

  return (
    <div className="app-container">
      <header className="app-header">
        <div className="header-left">
          <span className="header-icon">◉</span>
          <h1 className="header-title">Feedstream</h1>
        </div>
        <div className="header-right">
          <span className="user-chip">{user.name}</span>
          <span className="feed-scope-chip">{feeds.length} saved feeds</span>
          <span className="feed-scope-chip">{savedArticles.length} saved articles</span>
          <button
            className="export-btn"
            onClick={handleExportBookmarksJSON}
            disabled={!savedArticles.length}
            title="Download bookmarked articles as JSON"
          >
            Export JSON
          </button>
          <button
            className="export-btn"
            onClick={handleExportBookmarksCSV}
            disabled={!savedArticles.length}
            title="Download bookmarked articles as CSV"
          >
            Export CSV
          </button>
          <button className="logout-btn" onClick={logout}>
            Sign Out
          </button>
        </div>
        <nav className="tab-nav">
          <button
            className={`tab-btn ${activeTab === 'timeline' ? 'active' : ''}`}
            onClick={() => setActiveTab('timeline')}
          >
            Timeline
          </button>
          <button
            className={`tab-btn ${activeTab === 'feeds' ? 'active' : ''}`}
            onClick={() => setActiveTab('feeds')}
          >
            Manage Feeds
          </button>
          <button
            className={`tab-btn ${activeTab === 'filters' ? 'active' : ''}`}
            onClick={() => setActiveTab('filters')}
          >
            Filters & Status
          </button>
        </nav>
      </header>
      <main className="app-main">
        {activeTab === 'timeline' && <FeedTimeline savedArticlesCollection={savedArticlesCollection} />}
        {activeTab === 'feeds' && <FeedManager categoryOptions={categoryOptions} />}
        {activeTab === 'filters' && (
          <section className="filters-container">
            <div className="filters-panel">
              <div className="section-header-row">
                <div>
                  <h2 className="section-title">Keyword Filters</h2>
                  <p className="section-desc">
                    Manage the keywords used by the hourly matcher and the daily digest.
                  </p>
                </div>
                <span className="feed-count-badge">{cleanedKeywords.length} keywords</span>
              </div>

              <div className="filters-summary-grid">
                <div className="filters-summary-card">
                  <span className="filters-summary-label">Digest status</span>
                  <strong className={`filters-summary-value ${digestEnabled ? 'positive' : ''}`}>{statusLabel}</strong>
                </div>
                <div className="filters-summary-card">
                  <span className="filters-summary-label">Matcher status</span>
                  <strong className="filters-summary-value">{matcherLabel}</strong>
                </div>
                <div className="filters-summary-card">
                  <span className="filters-summary-label">Last updated</span>
                  <strong className="filters-summary-value">{lastUpdated}</strong>
                </div>
              </div>

              <div className="filters-toggle-row">
                <label className="filters-toggle">
                  <input
                    type="checkbox"
                    checked={digestEnabled}
                    onChange={(e) => handleToggleSetting('digestEnabled', e.target.checked)}
                  />
                  <span>Enable daily digest</span>
                </label>
                <label className="filters-toggle">
                  <input
                    type="checkbox"
                    checked={matchedOnly}
                    onChange={(e) => handleToggleSetting('matchedOnly', e.target.checked)}
                  />
                  <span>Only surface matching articles</span>
                </label>
              </div>

              <div className="add-feed-row filters-add-row">
                <input
                  className="feed-url-input"
                  type="text"
                  value={keywordInput}
                  onChange={(e) => setKeywordInput(e.target.value)}
                  placeholder="Add keyword, e.g. AI, startups, cybersecurity"
                  onKeyDown={(e) => {
                    if (e.key === 'Enter') {
                      e.preventDefault();
                      handleAddKeyword();
                    }
                  }}
                />
                <button className="add-feed-btn" onClick={handleAddKeyword} disabled={!keywordInput.trim()}>
                  Add Keyword
                </button>
              </div>

              <div className="keyword-chip-grid">
                {keywordPreview.length > 0 ? (
                  keywordPreview.map((keyword) => (
                    <button
                      key={keyword}
                      className="keyword-chip"
                      onClick={() => handleRemoveKeyword(keyword)}
                      title="Remove keyword"
                    >
                      {keyword} <span aria-hidden="true">×</span>
                    </button>
                  ))
                ) : (
                  <div className="empty-feeds">
                    <p className="empty-feeds-text">No keyword filters yet. Add a few terms to tune your digest.</p>
                  </div>
                )}
              </div>
            </div>

            <div className="filters-panel">
              <div className="section-header-row">
                <div>
                  <h2 className="section-title">Notification & Digest Status</h2>
                  <p className="section-desc">
                    Track what the background RSS jobs can use for filtering and delivery.
                  </p>
                </div>
                <span className="feed-count-badge">{filterStats?.matchedCount || 0} matched</span>
              </div>

              <div className="status-stack">
                <div className="status-row">
                  <span className="status-label">Current feed count</span>
                  <strong className="status-value">{feeds.length}</strong>
                </div>
                <div className="status-row">
                  <span className="status-label">Saved article count</span>
                  <strong className="status-value">{savedArticles.length}</strong>
                </div>
                <div className="status-row">
                  <span className="status-label">Configured keywords</span>
                  <strong className="status-value">{cleanedKeywords.length ? cleanedKeywords.join(', ') : 'None'}</strong>
                </div>
                <div className="status-row">
                  <span className="status-label">Delivery mode</span>
                  <strong className="status-value">{digestEnabled ? 'Digest active' : 'Digest disabled'}</strong>
                </div>
              </div>

              <div className="status-note">
                Use these controls to configure the filters that your hourly matcher and daily digest should respect. The background jobs can read this collection to determine which articles to surface and summarize.
              </div>
            </div>
          </section>
        )}
      </main>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);