Content Listing & Discovery

import { graphqlFetch, CACHE_TTL } from "@/lib/optimizely/client";

export interface ArticleListItem {
  title?: string | null;
  summary?: string | null;
  category?: string | null;
  _metadata?: {
    published?: string | null;
    url?: { default?: string | null } | null;
  } | null;
}

export interface ArticleFacetBucket {
  name: string;
  count: number;
}

export interface ArticleListResult {
  items: ArticleListItem[];
  total: number;
  nextCursor: string | null;
  facets: { category: ArticleFacetBucket[] };
  fromCms: boolean;
}

const GET_ARTICLES_QUERY = /* GraphQL */ `
  query GetArticles($limit: Int, $cursor: String) {
    ArticlePage(
      limit: $limit
      cursor: $cursor
      orderBy: { _metadata: { published: DESC } }
      where: { _metadata: { url: { default: { exist: true } } } }
    ) {
      total
      cursor
      items {
        title
        summary
        category
        _metadata { published url { default } }
      }
      facets {
        category { name count }
      }
    }
  }
`;

const GET_ARTICLES_FILTERED_QUERY = /* GraphQL */ `
  query GetArticlesFiltered($limit: Int, $cursor: String, $category: [String]!) {
    ArticlePage(
      limit: $limit
      cursor: $cursor
      orderBy: { _metadata: { published: DESC } }
      where: {
        _metadata: { url: { default: { exist: true } } }
        category: { in: $category }
      }
    ) {
      total
      cursor
      items {
        title
        summary
        category
        _metadata { published url { default } }
      }
      facets {
        category { name count }
      }
    }
  }
`;

interface GraphResponse {
  ArticlePage?: {
    total?: number | null;
    cursor?: string | null;
    items?: Array<ArticleListItem> | null;
    facets?: {
      category?: Array<{ name?: string | null; count?: number | null }> | null;
    } | null;
  } | null;
}

const EMPTY: ArticleListResult = {
  items: [],
  total: 0,
  nextCursor: null,
  facets: { category: [] },
  fromCms: false,
};

function mapResponse(data: GraphResponse | null): ArticleListResult {
  const page = data?.ArticlePage;
  if (!page) return EMPTY;
  return {
    items: (page.items ?? []).filter(Boolean) as ArticleListItem[],
    total: page.total ?? 0,
    nextCursor: page.cursor ?? null,
    facets: {
      category: (page.facets?.category ?? [])
        .filter((b): b is { name: string; count: number } => !!b.name && b.count != null)
        .map(b => ({ name: b.name, count: b.count })),
    },
    fromCms: (page.items?.length ?? 0) > 0,
  };
}

export async function getArticles(options?: {
  limit?: number;
  cursor?: string | null;
  category?: string[] | null;
}): Promise<ArticleListResult> {
  const { limit = 6, cursor, category } = options ?? {};
  try {
    if (category?.length) {
      const res = await graphqlFetch<GraphResponse>(
        GET_ARTICLES_FILTERED_QUERY,
        { limit, cursor: cursor ?? undefined, category },
        { next: { revalidate: CACHE_TTL, tags: ["page"] } }
      );
      return mapResponse(res.data);
    }
    const res = await graphqlFetch<GraphResponse>(
      GET_ARTICLES_QUERY,
      { limit, cursor: cursor ?? undefined },
      { next: { revalidate: CACHE_TTL, tags: ["page"] } }
    );
    return mapResponse(res.data);
  } catch {
    return EMPTY;
  }
}

export const SEARCH_RELEVANCE_QUERY = /* GraphQL */ `
  query SearchRelevance($query: String!, $locale: [Locales], $fuzzy: Boolean) {
    SEO(
      locale: $locale
      where: { _fulltext: { match: $query, synonyms: [ONE], fuzzy: $fuzzy } }
      orderBy: { _ranking: RELEVANCE }
      limit: 10
      pinned: { phrase: $query }
      tracking: { phrase: $query, source: "/search" }
    ) {
      total
      items {
        _track
        _score
        _metadata {
          displayName
          url { default }
        }
      }
    }
  }
`;

export const SEARCH_FACETED_QUERY = /* GraphQL */ `
  query SearchFaceted($query: String!, $categories: [String!], $tags: [String!], $locale: [Locales], $fuzzy: Boolean) {
    ArticlePage(
      locale: $locale
      where: {
        _fulltext: { match: $query, fuzzy: $fuzzy }
        category: { in: $categories }
        tags: { in: $tags }
      }
      orderBy: { _ranking: RELEVANCE }
      limit: 10
      tracking: { phrase: $query, source: "/demo/listing" }
    ) {
      total
      items {
        _score
        category
        tags
        _metadata {
          displayName
          url { default }
        }
      }
      facets {
        category(orderType: COUNT, orderBy: DESC, limit: 10) { name count }
        tags(orderType: COUNT, orderBy: DESC, limit: 12) { name count }
      }
    }
  }
`;

export const AUTOCOMPLETE_QUERY = /* GraphQL */ `
  query Autocomplete($value: String!) {
    ArticlePage {
      autocomplete {
        tags(limit: 5, value: $value)
      }
    }
    SEO {
      autocomplete {
        _metadata {
          url { default(limit: 6, value: $value) }
        }
      }
    }
  }
`;

export const SEARCH_SEMANTIC_QUERY = /* GraphQL */ `
  query SearchSemantic($query: String!, $weight: Float!, $locale: [Locales], $fuzzy: Boolean) {
    SEO(
      locale: $locale
      where: { _fulltext: { match: $query, synonyms: [ONE], fuzzy: $fuzzy } }
      orderBy: { _ranking: SEMANTIC, _semanticWeight: $weight }
      limit: 10
      pinned: { phrase: $query }
      tracking: { phrase: $query, source: "/search" }
    ) {
      total
      items {
        _track
        _score
        _metadata {
          displayName
          url { default }
        }
      }
    }
  }
`;

import { type NextRequest, NextResponse } from "next/server";
import { graphqlFetch } from "@/lib/optimizely/client";
import {
  SEARCH_FACETED_QUERY,
  SEARCH_RELEVANCE_QUERY,
  SEARCH_SEMANTIC_QUERY,
} from "@/lib/graphql/queries/SearchContent";

const SINGLE_KEY = process.env.OPTIMIZELY_GRAPH_SINGLE_KEY ?? "";

// Pinned results carry a _score boosted by 2^32-1 (~4.29e9); organic scores stay
// in the hundreds/thousands. 1e9 is an unambiguous cutoff for flagging a pinned hit.
const PINNED_SCORE_THRESHOLD = 1_000_000_000;

function listParam(value: string | null): string[] | null {
  const parsed = value?.split(",").map((v) => v.trim()).filter(Boolean) ?? [];
  return parsed.length > 0 ? parsed : null; // null = Graph ignores the filter
}

export async function GET(request: NextRequest) {
  const { searchParams } = request.nextUrl;
  const q      = searchParams.get("q")?.trim() ?? "";
  const mode   = searchParams.get("mode") === "semantic" ? "semantic" : "relevance";
  const weight = Math.min(1, Math.max(0, parseFloat(searchParams.get("weight") ?? "0.5")));
  const locale = [searchParams.get("locale") ?? "en"];
  // Fuzzy (typo-tolerant) matching is on by default; only an explicit fuzzy=0 disables it.
  const fuzzy  = searchParams.get("fuzzy") !== "0";

  if (!q || q.length < 2) {
    return NextResponse.json({ total: 0, items: [] });
  }

  if (searchParams.get("facets") === "1") {
    return facetedSearch(q, listParam(searchParams.get("category")), listParam(searchParams.get("tags")), locale, fuzzy);
  }

  try {
    const result = await graphqlFetch<any>(
      mode === "semantic" ? SEARCH_SEMANTIC_QUERY : SEARCH_RELEVANCE_QUERY,
      mode === "semantic" ? { query: q, weight, locale, fuzzy } : { query: q, locale, fuzzy },
      { cache: "no-store" }
    );

    const raw = result.data?.SEO ?? { total: 0, items: [] };

    const items = (raw.items ?? [])
      .filter((item: any) => item?._metadata?.displayName && item?._metadata?.url?.default)
      .map((item: any) => {
        const score = (item._score as number | null | undefined) ?? 0;
        return {
          title:    item._metadata.displayName as string,
          url:      item._metadata.url.default as string,
          score,
          pinned:   score >= PINNED_SCORE_THRESHOLD,
          trackUrl: (() => {
            const t = item._track as string | null | undefined;
            return t && SINGLE_KEY ? `${t}&auth=${SINGLE_KEY}` : (t ?? null);
          })(),
        };
      });

    return NextResponse.json({ total: raw.total ?? items.length, items });
  } catch (error) {
    console.error("[Search] Query failed:", error);
    return NextResponse.json({ error: "Search failed" }, { status: 500 });
  }
}

async function facetedSearch(q: string, categories: string[] | null, tags: string[] | null, locale: string[] = ["en"], fuzzy = true) {
  try {
    const result = await graphqlFetch<any>(
      SEARCH_FACETED_QUERY,
      { query: q, categories, tags, locale, fuzzy },
      { cache: "no-store" }
    );

    const raw = result.data?.ArticlePage ?? { total: 0, items: [], facets: {} };

    const items = (raw.items ?? [])
      .filter((item: any) => item?._metadata?.displayName && item?._metadata?.url?.default)
      .map((item: any) => ({
        title:    item._metadata.displayName as string,
        url:      item._metadata.url.default as string,
        score:    (item._score as number | null | undefined) ?? 0,
        category: (item.category as string | null | undefined) ?? null,
        tags:     (item.tags as string[] | null | undefined) ?? [],
      }));

    return NextResponse.json({
      total: raw.total ?? items.length,
      items,
      facets: {
        category: raw.facets?.category ?? [],
        tags:     raw.facets?.tags ?? [],
      },
    });
  } catch (error) {
    console.error("[Search] Faceted query failed:", error);
    return NextResponse.json({ error: "Search failed" }, { status: 500 });
  }
}

import { type NextRequest, NextResponse } from "next/server";
import { graphqlFetch } from "@/lib/optimizely/client";
import { AUTOCOMPLETE_QUERY } from "@/lib/graphql/queries/SearchContent";

export async function GET(request: NextRequest) {
  const q = request.nextUrl.searchParams.get("q")?.trim() ?? "";

  if (!q || q.length < 2) {
    return NextResponse.json({ tags: [], paths: [] });
  }

  try {
    const result = await graphqlFetch<any>(AUTOCOMPLETE_QUERY, { value: q }, { cache: "no-store" });

    return NextResponse.json({
      tags:  result.data?.ArticlePage?.autocomplete?.tags ?? [],
      paths: result.data?.SEO?.autocomplete?._metadata?.url?.default ?? [],
    });
  } catch (error) {
    console.error("[Autocomplete] Query failed:", error);
    return NextResponse.json({ error: "Autocomplete failed" }, { status: 500 });
  }
}

"use client";
import { useCallback, useEffect, useRef, useState } from "react";

type FacetValue = { name: string; count: number };
type SearchResult = {
  title: string;
  url: string;
  score: number;
  category: string | null;
  tags: string[];
};
type SearchResponse = {
  total: number;
  items: SearchResult[];
  facets: { category: FacetValue[]; tags: FacetValue[] };
};
type Suggestions = { tags: string[]; paths: string[] };

const EMPTY_SUGGESTIONS: Suggestions = { tags: [], paths: [] };

export default function FacetedSearchDemo() {
  const [query, setQuery] = useState("");
  const [categories, setCategories] = useState<string[]>([]);
  const [tags, setTags] = useState<string[]>([]);
  const [fuzzy, setFuzzy] = useState(true);
  const [response, setResponse] = useState<SearchResponse | null>(null);
  const [suggestions, setSuggestions] = useState<Suggestions>(EMPTY_SUGGESTIONS);
  const [showSuggestions, setShowSuggestions] = useState(false);
  const [loading, setLoading] = useState(false);
  const searchDebounce = useRef<ReturnType<typeof setTimeout> | null>(null);
  const autocompleteDebounce = useRef<ReturnType<typeof setTimeout> | null>(null);

  const search = useCallback((q: string, cats: string[], tgs: string[], fz: boolean) => {
    if (searchDebounce.current) clearTimeout(searchDebounce.current);
    if (!q || q.length < 2) {
      setResponse(null);
      return;
    }
    searchDebounce.current = setTimeout(async () => {
      setLoading(true);
      try {
        const params = new URLSearchParams({ q, facets: "1" });
        if (cats.length > 0) params.set("category", cats.join(","));
        if (tgs.length > 0) params.set("tags", tgs.join(","));
        if (!fz) params.set("fuzzy", "0");
        const res = await fetch(`/api/search?${params}`);
        setResponse(await res.json());
      } catch {
        setResponse(null);
      } finally {
        setLoading(false);
      }
    }, 300);
  }, []);

  const autocomplete = useCallback((q: string) => {
    if (autocompleteDebounce.current) clearTimeout(autocompleteDebounce.current);
    if (!q || q.length < 2) {
      setSuggestions(EMPTY_SUGGESTIONS);
      return;
    }
    autocompleteDebounce.current = setTimeout(async () => {
      try {
        const res = await fetch(`/api/search/autocomplete?q=${encodeURIComponent(q)}`);
        const data = await res.json();
        setSuggestions({ tags: data.tags ?? [], paths: data.paths ?? [] });
      } catch {
        setSuggestions(EMPTY_SUGGESTIONS);
      }
    }, 200);
  }, []);

  useEffect(() => {
    search(query, categories, tags, fuzzy);
  }, [query, categories, tags, fuzzy, search]);

  function toggle(list: string[], value: string, set: (next: string[]) => void) {
    set(list.includes(value) ? list.filter((v) => v !== value) : [...list, value]);
  }

  function applySuggestion(value: string) {
    setShowSuggestions(false);
    if (value.startsWith("/")) {
      window.location.href = value;
      return;
    }
    setQuery(value);
    autocomplete("");
  }

  const hasSuggestions = suggestions.tags.length > 0 || suggestions.paths.length > 0;

  return (
    <div data-component="FacetedSearchDemo" className="bg-surface-lowest border border-ghost-border rounded-2xl p-6 space-y-4">
      <div className="relative">
        <input
          type="text"
          value={query}
          onChange={(e) => {
            setQuery(e.target.value);
            autocomplete(e.target.value);
            setShowSuggestions(true);
          }}
          onFocus={() => setShowSuggestions(true)}
          onBlur={() => setTimeout(() => setShowSuggestions(false), 150)}
          placeholder="Search articles - try banking, mortgage, savings…"
          className="w-full px-4 py-2 text-sm bg-surface border border-ghost-border rounded-xl text-on-surface placeholder:text-on-surface-variant/50 focus:outline-none focus:ring-2 focus:ring-brand/30"
        />
        {showSuggestions && hasSuggestions && (
          <div className="absolute z-20 mt-1 w-full bg-surface border border-ghost-border rounded-xl shadow-lift overflow-hidden">
            {suggestions.tags.length > 0 && (
              <div className="p-2">
                <p className="text-[10px] uppercase tracking-widest font-semibold text-on-surface-variant px-2 pb-1">Tags</p>
                {suggestions.tags.map((s) => (
                  <button
                    key={s}
                    type="button"
                    onMouseDown={() => applySuggestion(s)}
                    className="block w-full text-left px-2 py-1.5 text-sm text-on-surface rounded-lg hover:bg-surface-low"
                  >
                    {s}
                  </button>
                ))}
              </div>
            )}
            {suggestions.paths.length > 0 && (
              <div className="p-2 border-t border-ghost-border">
                <p className="text-[10px] uppercase tracking-widest font-semibold text-on-surface-variant px-2 pb-1">Pages</p>
                {suggestions.paths.map((s) => (
                  <button
                    key={s}
                    type="button"
                    onMouseDown={() => applySuggestion(s)}
                    className="block w-full text-left px-2 py-1.5 text-sm font-mono text-brand rounded-lg hover:bg-surface-low truncate"
                  >
                    {s}
                  </button>
                ))}
              </div>
            )}
          </div>
        )}
      </div>

      <label className="flex items-center gap-2 text-xs text-on-surface-variant cursor-pointer">
        <input
          type="checkbox"
          checked={fuzzy}
          onChange={(e) => setFuzzy(e.target.checked)}
          className="accent-brand"
        />
        Fuzzy matching (typo tolerance) - sends{" "}
        <code className="bg-surface px-1 rounded font-mono">fuzzy: true</code>
      </label>

      <div className="grid md:grid-cols-[220px_1fr] gap-6">
        <div className="space-y-4">
          <FacetGroup
            label="Category"
            values={response?.facets.category ?? []}
            selected={categories}
            onToggle={(v) => toggle(categories, v, setCategories)}
          />
          <FacetGroup
            label="Tags"
            values={response?.facets.tags ?? []}
            selected={tags}
            onToggle={(v) => toggle(tags, v, setTags)}
          />
          {(categories.length > 0 || tags.length > 0) && (
            <button
              type="button"
              onClick={() => {
                setCategories([]);
                setTags([]);
              }}
              className="text-xs text-brand hover:underline"
            >
              Clear filters
            </button>
          )}
        </div>

        <div className="space-y-2 min-h-24">
          {loading && <p className="text-xs text-on-surface-variant">Searching…</p>}
          {!loading && response && (
            <p className="text-xs text-on-surface-variant">
              {response.total} result{response.total !== 1 ? "s" : ""} for{" "}
              <strong className="text-on-surface">&ldquo;{query}&rdquo;</strong>
              {categories.length + tags.length > 0 && (
                <> · {categories.length + tags.length} filter{categories.length + tags.length !== 1 ? "s" : ""} active</>
              )}
            </p>
          )}
          {!loading && response && response.items.length > 0 && (
            <ul className="space-y-2 divide-y divide-ghost-border">
              {response.items.map((r) => (
                <li key={r.url} className="pt-2 first:pt-0 text-sm">
                  <div className="flex items-center justify-between gap-4">
                    <a href={r.url} className="text-brand hover:underline truncate">{r.title}</a>
                    <span className="text-xs font-mono text-on-surface-variant shrink-0">{r.score.toFixed(1)}</span>
                  </div>
                  <p className="text-xs text-on-surface-variant mt-0.5">
                    {r.category && <span className="font-mono">{r.category}</span>}
                    {r.tags.length > 0 && <span className="font-mono"> · {r.tags.join(", ")}</span>}
                  </p>
                </li>
              ))}
            </ul>
          )}
          {!loading && query.length >= 2 && response && response.items.length === 0 && (
            <p className="text-xs text-on-surface-variant italic">No results match the query and active filters.</p>
          )}
          {query.length < 2 && (
            <p className="text-xs text-on-surface-variant italic">
              Type at least two characters. Facet counts appear with the first results.
            </p>
          )}
        </div>
      </div>

      <p className="text-xs text-on-surface-variant border-t border-ghost-border pt-3">
        Calls <code className="bg-surface px-1 rounded font-mono">/api/search?facets=1</code> and{" "}
        <code className="bg-surface px-1 rounded font-mono">/api/search/autocomplete</code> - facet
        counts are computed by Graph on the filtered result set, so they narrow as you drill down.
      </p>
    </div>
  );
}

function FacetGroup({
  label,
  values,
  selected,
  onToggle,
}: {
  label: string;
  values: FacetValue[];
  selected: string[];
  onToggle: (value: string) => void;
}) {
  return (
    <div data-component="FacetGroup">
      <p className="text-[10px] uppercase tracking-widest font-semibold text-on-surface-variant mb-2">{label}</p>
      {values.length === 0 ? (
        <p className="text-xs text-on-surface-variant italic">No values yet.</p>
      ) : (
        <ul className="space-y-1">
          {values.map((v) => (
            <li key={v.name}>
              <label className="flex items-center gap-2 text-xs text-on-surface cursor-pointer">
                <input
                  type="checkbox"
                  checked={selected.includes(v.name)}
                  onChange={() => onToggle(v.name)}
                  className="accent-brand"
                />
                <span className="truncate">{v.name}</span>
                <span className="ml-auto font-mono text-on-surface-variant">{v.count}</span>
              </label>
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}