/**
 * Trouve-KA — un résultat de recherche (favicon, titre, extrait, vignette, pastilles)
 * Author: Simon-Pierre Boucher
 * Contact: contact@spboucher.ai
 */

import { Favicon } from "@/components/favicon";
import { ResultThumbnail } from "@/components/result-thumbnail";
import { Snippet } from "@/components/snippet";
import { Badge } from "@/components/ui/badge";
import { formatDate } from "@/lib/format";
import type { SearchResult } from "@/lib/types";

function badgeVariant(
  label: string,
): "quebec" | "government" | "news" | "education" | "default" {
  if (label === "Québec") return "quebec";
  if (label === "Gouvernement") return "government";
  if (label === "Actualités") return "news";
  if (label === "Éducation") return "education";
  return "default";
}

/** Intensité québécoise de la pastille (◆ / ◆◆ / ◆◆◆), sobre et graduée. */
function quebecMarks(score: number): string {
  if (score >= 0.85) return "◆◆◆";
  if (score >= 0.65) return "◆◆";
  return "◆";
}

interface ResultItemProps {
  result: SearchResult;
}

export function ResultItem({ result }: ResultItemProps) {
  const publishedAt = result.published_at
    ? formatDate(result.published_at)
    : "";
  const hasBadges = Boolean(result.badges && result.badges.length > 0);

  return (
    <article className="group flex items-start gap-4 py-6 sm:gap-6">
      <div className="min-w-0 flex-1">
        <div className="flex items-center gap-2">
          <Favicon domain={result.domain} />
          <span className="gk-mono truncate text-xs font-medium text-green">
            {result.display_url || result.domain}
          </span>
        </div>
        <h3 className="mt-1.5 text-[17px] font-bold leading-snug tracking-[-0.02em] sm:text-lg">
          <a
            href={result.url}
            className="rounded-sm text-ink underline decoration-transparent decoration-[3px] underline-offset-[3px] transition-colors hover:decoration-lime focus-visible:decoration-lime"
          >
            {result.title || result.url}
          </a>
        </h3>
        <Snippet
          html={result.snippet}
          className="mt-1.5 text-sm leading-relaxed text-ink-2"
        />
        {publishedAt || hasBadges ? (
          <div className="mt-2.5 flex flex-wrap items-center gap-x-2 gap-y-1.5">
            {result.badges?.map((badge, index) => (
              <Badge
                key={badge}
                variant={badgeVariant(badge)}
                title={
                  badge === "Québec" && result.quebec_score >= 0.45
                    ? `Score Québec ${Math.round(result.quebec_score * 100)} %`
                    : undefined
                }
                className={index === 0 ? "-rotate-1 hover:rotate-0" : undefined}
              >
                {badge === "Québec" ? (
                  <span aria-hidden="true" className="text-[8px] leading-none">
                    {result.quebec_score >= 0.45
                      ? quebecMarks(result.quebec_score)
                      : "◆"}
                  </span>
                ) : null}
                {badge}
              </Badge>
            ))}
            {publishedAt ? (
              <span className="klabel normal-case tracking-[0.04em]">
                {publishedAt}
              </span>
            ) : null}
          </div>
        ) : null}
      </div>
      {result.image ? (
        <ResultThumbnail src={result.image} href={result.url} />
      ) : null}
    </article>
  );
}