// Author: fruit.com.cn
import { Search as SearchIcon } from 'lucide-react';
import { useSearchParams } from 'react-router-dom';
import { useLocale } from '../../app/providers/AppProviders';
import { SectionHeading } from '../../shared/components/SectionHeading';
import { VideoGrid } from '../../shared/components/VideoGrid';
import { VideoGridSkeleton } from '../../shared/components/skeletons';
import { useRequest } from '../../shared/hooks/useRequest';
import { normalizePage } from '../../shared/lib/pagination';
import { dramaApi } from '../../entities/drama/api';
import { normalizeDrama, uniqueDramas } from '../../entities/drama/model';
import { searchApi } from './api';

async function loadSearchResults(keyword, localeCode, signal) {
  if (keyword) {
    const payload = await searchApi.search(keyword, { signal });
    return normalizePage(payload).list.map((item) => normalizeDrama(item, localeCode));
  }
  const payload = await dramaApi.homeFeed({ signal });
  const items = payload?.sections?.flatMap((section) => section.dramas || []) || [];
  return uniqueDramas(items.map((item) => normalizeDrama(item, localeCode)));
}

export function SearchPage() {
  const { locale } = useLocale();
  const [params] = useSearchParams();
  const query = (params.get('q') || '').trim();
  const request = useRequest(({ signal }) => loadSearchResults(query, locale.code, signal), [query, locale.code]);
  const results = request.data || [];

  return (
    <>
      <SectionHeading title={query ? `${locale.searchResults} “${query}”` : locale.picks} />
      {request.loading ? <VideoGridSkeleton count={6} label={locale.loading} /> : (
        <>
          {request.error && <div className="api-note warning">{locale.apiFallback}</div>}
          {!request.error && query && results.length === 0 ? (
            <div className="search-empty">
              <SearchIcon size={28} />
              <b>{locale.noResults} “{query}”</b>
            </div>
          ) : (
            <VideoGrid items={results} />
          )}
        </>
      )}
    </>
  );
}