// Search — find YouTube videos without leaving SoloTube.
// Goal-aware: if the user has set goals in Settings, those are shown as context.
// Results can be watched immediately (adds to Saved Videos + routes to player)
// or saved to the library without watching.

const { useState: useStateSr, useRef: useRefSr, useEffect: useEffectSr } = React;

function Search({ state, dispatch }) {
  const [query, setQuery] = useStateSr('');
  const [status, setStatus] = useStateSr('idle');
  const [results, setResults] = useStateSr([]);
  const [error, setError] = useStateSr(null);
  const inputRef = useRefSr(null);

  const profile = state.profile || {};
  const hasGoal = (profile.goal || '').trim() || (profile.topics || '').trim();

  useEffectSr(() => {
    if (inputRef.current) inputRef.current.focus();
  }, []);

  const doSearch = async (q = query) => {
    const trimmed = (q || '').trim();
    if (!trimmed) return;
    setStatus('loading');
    setError(null);
    setResults([]);
    try {
      const r = await fetch('/api/yt-search', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ query: trimmed, maxResults: 12 }),
      });
      const body = await r.json().catch(() => ({}));
      if (!r.ok) throw new Error(body?.error || `Search failed (${r.status})`);
      setResults(body.items || []);
      setStatus('ready');
    } catch (e) {
      setError(String(e?.message || e));
      setStatus('error');
    }
  };

  const watchItem = (item) => {
    dispatch({
      type: 'watch-external',
      youtubeId: item.youtubeId,
      title: item.title,
      thumbnail: item.thumbnail,
      channelTitle: item.channelTitle,
      publishedAt: item.publishedAt,
    });
  };

  const saveItem = (item) => {
    const videoId = `yt-${item.youtubeId}`;
    dispatch({
      type: 'add-single-video',
      video: {
        id: videoId,
        youtubeId: item.youtubeId,
        title: item.title,
        thumb: item.thumbnail,
        publishedAt: item.publishedAt ? new Date(item.publishedAt).getTime() : Date.now(),
        durationSec: 0,
        watched: false,
      },
    });
  };

  return (
    <div className="search-page">

      <div className="search-head">
        <div className="page-eyebrow" style={{ marginBottom: 14 }}>SEARCH YOUTUBE</div>
        <div className="search-bar-wrap">
          <input
            ref={inputRef}
            className="search-input"
            value={query}
            onChange={e => setQuery(e.target.value)}
            onKeyDown={e => e.key === 'Enter' && doSearch()}
            placeholder="Search for ideas, topics, or specific videos…"
          />
          <button
            className="btn-primary search-go"
            onClick={() => doSearch()}
            disabled={status === 'loading' || !query.trim()}
          >
            {status === 'loading' ? '…' : 'Search'}
          </button>
        </div>

        {hasGoal ? (
          <div className="search-goal-hint">
            ◎ Your goals are set — Scout uses them to calibrate recommendations
          </div>
        ) : (
          <div className="search-goal-hint search-goal-hint-empty">
            Add your goals in Settings → Your goals to make Scout more relevant
          </div>
        )}
      </div>

      {status === 'loading' && (
        <div className="search-loading">
          <span className="brief-spinner"></span>
          <span>Searching YouTube…</span>
        </div>
      )}

      {status === 'error' && (
        <div className="brief-error" style={{ margin: '24px 40px 0' }}>{error}</div>
      )}

      {status === 'ready' && (
        <div className="search-results">
          {results.length === 0 && (
            <div className="search-empty">No results for "{query}"</div>
          )}
          {results.map(item => {
            const inLib = state.videos.some(v => v.youtubeId === item.youtubeId);
            return (
              <div key={item.youtubeId} className="search-result">
                <div className="search-thumb-wrap" onClick={() => watchItem(item)}>
                  {item.thumbnail
                    ? <img className="search-thumb" src={item.thumbnail} alt="" loading="lazy" />
                    : <div className="search-thumb-blank" />}
                  {item.duration && <span className="search-dur">{item.duration}</span>}
                  <div className="search-thumb-play">▶</div>
                </div>
                <div className="search-result-body">
                  <div className="search-result-title" onClick={() => watchItem(item)}>
                    {item.title}
                  </div>
                  <div className="search-result-ch">{item.channelTitle}</div>
                  {item.publishedAt && (
                    <div className="search-result-date">
                      {new Date(item.publishedAt).toLocaleDateString('en-US', {
                        year: 'numeric', month: 'short', day: 'numeric',
                      })}
                    </div>
                  )}
                  <div className="search-result-actions">
                    <button className="search-act-watch" onClick={() => watchItem(item)}>
                      ▶ Watch
                    </button>
                    {inLib ? (
                      <span className="search-act-saved">✓ In library</span>
                    ) : (
                      <button className="search-act-save" onClick={() => saveItem(item)}>
                        + Save
                      </button>
                    )}
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      )}

      {status === 'idle' && (
        <div className="search-idle">
          <div className="search-idle-prompt">What are you curious about today?</div>
          <div className="search-idle-sub">
            Search YouTube and watch or save directly — no algorithm, no rabbit hole.
          </div>
          <div className="search-idle-or">— or let AI recommend something —</div>
          <button
            className="search-scout-btn"
            onClick={() => dispatch({ type: 'open-scout' })}
          >
            ◢ Open Scout
          </button>
        </div>
      )}

    </div>
  );
}

window.Search = Search;