import { Search } from "lucide-preact";
import type { SearchDetail, SearchResultItem } from "@/lib/api";
import { MarkdownContent } from "@/components/markdown/markdown-content";

function cleanResultText(input: string) {
  return input
    .replace(/\[([^\]]+)\]\((https?:\/\/[^\s)]+)\)/g, "$1")
    .replace(/\[\s*\]/g, " ")
    .replace(/(^|\s)#{1,6}\s*/g, "$1")
    .replace(/^\s*[-*+]\s+/gm, "")
    .replace(/(\*\*|__|\*|_|`{1,3}|~~)/g, "")
    .replace(/\r?\n+/g, " ")
    .replace(/\s{2,}/g, " ")
    .trim();
}

function summarizeResult(result: SearchResultItem) {
  const highlights = Array.isArray(result.highlights) ? result.highlights.filter(Boolean) : [];
  const raw = highlights.length ? highlights.join(" ") : result.text ?? "";
  const cleaned = cleanResultText(raw);
  if (cleaned.length <= 680) return cleaned;
  return `${cleaned.slice(0, 679).trimEnd()}…`;
}

function formatHost(url: string) {
  try {
    return new URL(url).hostname.replace(/^www\./, "");
  } catch {
    return url;
  }
}

function normalizeHref(href: string) {
  try {
    const parsed = new URL(href);
    parsed.hash = "";
    const normalized = parsed.toString();
    return normalized.endsWith("/") ? normalized.slice(0, -1) : normalized;
  } catch {
    return href.trim().replace(/\/$/, "");
  }
}

type Props = {
  search: SearchDetail | null;
  isLoading: boolean;
  isRunning: boolean;
  showPrompt?: boolean;
  className?: string;
};

export function SearchResultsPanel({ search, isLoading, isRunning, showPrompt = true, className }: Props) {
  const citationEntries = (search?.answerCitations ?? [])
    .map((citation, index) => {
      const href = citation.url || citation.id || "";
      if (!href) return null;
      return {
        href,
        normalizedHref: normalizeHref(href),
        index: index + 1,
        label: citation.title?.trim() || formatHost(href),
      };
    })
    .filter((entry): entry is { href: string; normalizedHref: string; index: number; label: string } => !!entry);

  const resolveCitationIndex = (href: string) => {
    const normalized = normalizeHref(href);
    return citationEntries.find((entry) => entry.normalizedHref === normalized)?.index;
  };

  return (
    <div className={className ?? "mx-auto w-full max-w-4xl"}>
      {search?.query ? (
        <div className="mb-5">
          <p className="text-sm text-muted-foreground">Results for</p>
          <h2 className="mt-1 text-xl font-semibold">{search.query}</h2>
          <p className="mt-1 text-xs text-muted-foreground">
            {search.results.length} result{search.results.length === 1 ? "" : "s"}
            {search.latencyMs ? ` • ${search.latencyMs} ms` : ""}
          </p>
        </div>
      ) : null}

      {(isRunning || !!search?.answerText || !!search?.answerError) && (
        <section className="mb-6 rounded-xl border border-slate-600/60 bg-[#121a2e] p-4">
          <p className="text-xs font-semibold uppercase tracking-wide text-sky-300/90">Answer</p>
          {isRunning && !search?.answerText ? <p className="mt-2 text-sm text-muted-foreground">Generating answer...</p> : null}
          {search?.answerText ? (
            <MarkdownContent
              markdown={search.answerText}
              mode="citationTokens"
              resolveCitationIndex={resolveCitationIndex}
              className="mt-2 text-sm leading-6 text-slate-100"
            />
          ) : null}
          {search?.answerError ? <p className="mt-2 text-sm text-red-500">{search.answerError}</p> : null}
          {!!citationEntries.length && (
            <div className="mt-3 flex flex-wrap gap-2">
              {citationEntries.slice(0, 8).map((citation) => {
                return (
                  <a
                    key={`${citation.href}-${citation.index}`}
                    href={citation.href}
                    target="_blank"
                    rel="noreferrer"
                    className="rounded-md border border-slate-500/60 px-2 py-1 text-xs text-sky-200 hover:bg-slate-700/40"
                  >
                    <span className="mr-1 rounded bg-slate-700/80 px-1 py-0.5 text-[10px] text-slate-100">{citation.index}</span>
                    {citation.label}
                  </a>
                );
              })}
            </div>
          )}
        </section>
      )}

      {(isLoading || isRunning) && !search?.results.length ? (
        <p className="text-sm text-muted-foreground">{isRunning ? "Searching Exa..." : "Loading search..."}</p>
      ) : null}

      {showPrompt && !isLoading && !search?.query ? (
        <div className="flex flex-col items-center justify-center gap-2 rounded-xl border border-dashed p-8 text-center">
          <Search className="h-6 w-6 text-muted-foreground" />
          <h2 className="text-lg font-semibold">Search the web</h2>
          <p className="text-sm text-muted-foreground">Use the composer below to run a new Exa search.</p>
        </div>
      ) : null}

      {!isLoading && !isRunning && !!search?.query && search.results.length === 0 ? (
        <p className="text-sm text-muted-foreground">No results found.</p>
      ) : null}

      <div className="space-y-6">
        {search?.results.map((result) => {
          const summary = summarizeResult(result);
          return (
            <article key={result.id} className="rounded-lg border border-border bg-[#0d1322] px-4 py-4 shadow-sm">
              <p className="text-xs text-emerald-300/85">{formatHost(result.url)}</p>
              <a href={result.url} target="_blank" rel="noreferrer" className="mt-1 block text-lg font-medium text-sky-300 hover:underline">
                {result.title || result.url}
              </a>
              {(result.publishedDate || result.author) && (
                <p className="mt-1 text-xs text-muted-foreground">{[result.publishedDate, result.author].filter(Boolean).join(" • ")}</p>
              )}
              {summary ? <p className="mt-2 text-sm leading-6 text-slate-200">{summary}</p> : null}
            </article>
          );
        })}
      </div>

      {search?.error ? <p className="mt-4 text-sm text-red-600">{search.error}</p> : null}
    </div>
  );
}