import { useEffect, useState, useCallback, useRef } from 'react';
import { useSearchParams } from 'react-router-dom';
import { SearchApi } from '../api/client.js';
import EmailRow from '../components/EmailRow.jsx';
import BulkToolbar from '../components/BulkToolbar.jsx';
import useSelection from '../hooks/useSelection.js';
import useListKeyboardNav from '../hooks/useListKeyboardNav.js';
import useSavedSearches from '../hooks/useSavedSearches.js';

const PAGE_SIZE = 50;


export default function SearchResults() {
  const [searchParams] = useSearchParams();
  const q = searchParams.get('q') ?? '';

  const [emails, setEmails] = useState([]);
  const [totalCount, setTotalCount] = useState(null);
  const [page, setPage] = useState(1);
  const [hasMore, setHasMore] = useState(true);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);
  const { selected, toggle, clear, removeIds, selectedIds } = useSelection();
  const focusedId = useListKeyboardNav(emails, (id) => setEmails((prev) => prev.filter((x) => x.id !== id)));
  const { searches: savedSearches, add: addSavedSearch } = useSavedSearches();
  const isSaved = savedSearches.some((s) => s.query === q);

  const handleSave = () => {
    const label = window.prompt('Name this saved search:', q);
    if (label && label.trim()) addSavedSearch(label.trim(), q);
  };

  useEffect(() => {
    setEmails([]);
    setTotalCount(null);
    setPage(1);
    setHasMore(true);
    setError(null);
    clear();
  }, [q, clear]);

  const fetchPage = useCallback((p) => {
    if (!q.trim()) return;
    setLoading(true);
    SearchApi.query(q, p, PAGE_SIZE)
      .then((r) => {
        setEmails((prev) => p === 1 ? r.items : [...prev, ...r.items]);
        setTotalCount(r.totalCount);
        setHasMore(p < r.totalPages);
        setPage(p);
      })
      .catch(() => setError('Search failed. Please try again.'))
      .finally(() => setLoading(false));
  }, [q]);

  useEffect(() => { fetchPage(1); }, [fetchPage]);

  const sentinelRef = useRef(null);
  useEffect(() => {
    const el = sentinelRef.current;
    if (!el) return;
    const observer = new IntersectionObserver(
      (entries) => {
        if (entries[0].isIntersecting && hasMore && !loading) fetchPage(page + 1);
      },
      { rootMargin: '200px' }
    );
    observer.observe(el);
    return () => observer.disconnect();
  }, [hasMore, loading, page, fetchPage]);

  return (
    <div className="folder-view">
      <div className="folder-view-head saved-search-row">
        <h2 className="folder-view-title">🔍 "{q}"</h2>
        {totalCount !== null && (
          <span className="folder-view-count">{totalCount.toLocaleString()} result{totalCount !== 1 ? 's' : ''}</span>
        )}
        {q.trim() && (
          <button className="saved-search-save-btn" onClick={handleSave} disabled={isSaved}>
            {isSaved ? '★ Saved' : '☆ Save search'}
          </button>
        )}
      </div>

      {!q.trim() && <div className="fv-empty">Enter a search query above.</div>}
      {error && <div className="fv-error">{error}</div>}
      {!loading && !error && q.trim() && emails.length === 0 && !hasMore && (
        <div className="fv-empty">No results for "{q}".</div>
      )}

      <BulkToolbar
        selectedIds={selectedIds}
        onClear={clear}
        onDone={(action, ids) => {
          if (action === 'trash' || action === 'archive') {
            setEmails((prev) => prev.filter((x) => !ids.includes(x.id)));
            removeIds(ids);
          }
        }}
      />

      {emails.length > 0 && (
        <table className="email-list">
          <tbody>
            {emails.map((e) => (
              <EmailRow
                key={e.id}
                email={e}
                selected={selected.has(e.id)}
                onToggleSelect={toggle}
                focused={focusedId === e.id}
                onRemove={(id) => setEmails((prev) => prev.filter((x) => x.id !== id))}
              />
            ))}
          </tbody>
        </table>
      )}

      <div ref={sentinelRef} className="fv-sentinel" />
      {loading && <div className="fv-loading-more">Loading…</div>}
      {!hasMore && emails.length > 0 && (
        <div className="fv-end">— {emails.length.toLocaleString()} results —</div>
      )}
    </div>
  );
}