import Link from "next/link";
import type { ArticleMeta } from "@/lib/types";
import { sectionLabel } from "@/lib/sections";
import type { Locale } from "@/lib/i18n";

type Variant = "default" | "hero" | "teaser";

function safeCoverSrc(a: ArticleMeta): string | null {
  const raw = a?.cover_image as string | null | undefined;
  if (!raw) return null;
  let s = String(raw).trim();
  if (s.startsWith("javascript:") || s.startsWith("data:")) return null;
  if (s.startsWith("/images/")) s = `/api${s}`;
  if (s.startsWith("https://") || s.startsWith("http://") || s.startsWith("/")) return s;
  return null;
}

function trimExcerpt(text: string | null | undefined, max: number): string | null {
  if (!text) return null;
  const t = text.trim();
  return t.length <= max ? t : t.slice(0, max).trimEnd() + "…";
}

export default function ArticleCard({
  a,
  locale,
  variant = "default",
}: {
  a: ArticleMeta;
  locale: Locale;
  variant?: Variant;
}) {
  const sectionName = sectionLabel(locale, a.section);
  const articleHref = `/${locale}/article/${a.slug}`;
  const cover = safeCoverSrc(a);

  const excerptMax = variant === "hero" ? 200 : variant === "teaser" ? 130 : 160;
  const excerpt = trimExcerpt(a.excerpt, excerptMax);

  return (
    <article className={`acard acard--${variant}`}>
      <Link href={articleHref} className="acard-link" aria-label={a.title}>
        {/* Image */}
        <div className="acard-img">
          {cover
            ? <img src={cover} alt={a.title} loading={variant === "hero" ? "eager" : "lazy"} decoding="async" />
            : <div className="acard-ph" />
          }
        </div>

        {/* Body */}
        <div className="acard-body">
          <div className="acard-meta">
            <span className="acard-section">{sectionName}</span>
            <span className="acard-dot">·</span>
            <time className="acard-date" dateTime={a.date}>{a.date}</time>
            {a.author && (
              <>
                <span className="acard-dot">·</span>
                <span className="acard-author">{a.author}</span>
              </>
            )}
          </div>

          <h2 className="acard-title">{a.title}</h2>

          {a.subtitle && (
            <p className="acard-subtitle">{a.subtitle}</p>
          )}

          {excerpt && (
            <p className="acard-excerpt">{excerpt}</p>
          )}

          {variant === "default" && a.tags && a.tags.length > 0 && (
            <div className="acard-tags">
              {a.tags.slice(0, 5).map((t) => (
                <span key={t} className="badge badge-tag">{t}</span>
              ))}
            </div>
          )}
        </div>
      </Link>
    </article>
  );
}