import Link from "next/link";
import type { Metadata } from "next";
import { notFound } from "next/navigation";

import { getArticle, listArticles } from "@/lib/api";
import ArticleCard from "@/components/ArticleCard";
import { sectionLabel } from "@/lib/sections";
import type { ArticleMeta } from "@/lib/types";
import type { Locale } from "@/lib/i18n";
import { isLocale } from "@/lib/i18n";
import { copy } from "@/lib/copy";

const SITE_URL = process.env.NEXT_PUBLIC_SITE_URL ?? "https://newsoras.com";

type Params = { locale: string; slug?: string };
type ParamsPromise = Promise<Params>;

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

export async function generateMetadata(
  { params }: { params: ParamsPromise }
): Promise<Metadata> {
  const { slug, locale: rawLocale } = await params;
  const locale: Locale = isLocale(rawLocale) ? rawLocale : "en";

  if (!slug) {
    return {
      title: "Newsoras",
      description: "Análisis, contexto y opinión sobre las noticias clave.",
    };
  }

  const a = await getArticle(slug);
  const title = `${a.title} | Newsoras`;
  const description = a.excerpt || a.subtitle || "Newsoras: análisis y contexto de la actualidad.";
  const cover = safeImgSrc(a.cover_image);
  const inline = safeImgSrc((a as any).inline_image);
  const images = [cover, inline].filter(Boolean) as string[];
  const url = `${SITE_URL}/${locale}/article/${a.slug}`;

  return {
    title,
    description,
    alternates: { canonical: url },
    keywords: a.tags ?? [],
    openGraph: {
      title, description,
      type: "article", url,
      images: images.length ? images : undefined,
    },
    twitter: {
      card: "summary_large_image",
      title, description,
      images: images.length ? images : undefined,
    },
  };
}

export default async function ArticlePage(
  { params }: { params: ParamsPromise }
) {
  const { slug, locale: rawLocale } = await params;
  const locale: Locale = isLocale(rawLocale) ? rawLocale : "en";

  if (!slug) notFound();

  const a = await getArticle(slug);

  const cover = safeImgSrc(a.cover_image);
  const inline = safeImgSrc((a as any).inline_image);
  const sectionName = sectionLabel(locale, a.section);
  const sectionHref = `/${locale}/section/${a.section}`;

  const relatedAll = await listArticles({
    section: a.section,
    limit: 12,
    offset: 0,
    locale,
  });

  const related: ArticleMeta[] = relatedAll
    .filter((r) => r.slug !== a.slug)
    .filter((r) => !r.locale || r.locale === locale)
    .slice(0, 5);

  const pageUrl = `${SITE_URL}/${locale}/article/${a.slug}`;
  const t = copy(locale);

  const articleJsonLd = {
    "@context": "https://schema.org",
    "@type": "Article",
    headline: a.title,
    description: a.excerpt || a.subtitle || "",
    datePublished: a.date,
    author: a.author ? { "@type": "Person", name: a.author } : undefined,
    mainEntityOfPage: { "@type": "WebPage", "@id": pageUrl },
    image: [cover, inline].filter(Boolean),
  };

  const railLabel =
    locale === "zh" ? "推荐文章" : locale === "en" ? "Recommended" : "Recomendados";

  return (
    <main className="container article-shell">
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(articleJsonLd) }}
      />

      <div className="article-grid">
        <article className="article-main">
          <header className="article-header">
            <div className="article-kicker">
              <Link href={sectionHref} className="badge" aria-label={sectionName}>
                {sectionName}
              </Link>
              <span className="dot">·</span>
              <time dateTime={a.date} className="muted">{a.date}</time>
              {a.author && (
                <>
                  <span className="dot">·</span>
                  <span className="muted">{a.author}</span>
                </>
              )}
            </div>

            <h1 className="article-title">{a.title}</h1>
            {a.subtitle && <p className="article-subtitle">{a.subtitle}</p>}
            {a.excerpt  && <p className="article-summary">{a.excerpt}</p>}

            <div className="article-actions">
              <button type="button" className="share-pill">Share</button>
            </div>
          </header>

          {cover && (
            <figure className="article-figure">
              <div className="article-media">
                <img
                  src={cover}
                  alt={a.title}
                  loading="eager"
                  decoding="async"
                  fetchPriority="high"
                />
              </div>
            </figure>
          )}

          <div className="article-body">
            {inline && (
              <figure className="article-figure article-figure-inline">
                <div className="article-media">
                  <img src={inline} alt={`${a.title} — imagen`} loading="lazy" decoding="async" />
                </div>
              </figure>
            )}

            <div
              className="article-html"
              dangerouslySetInnerHTML={{ __html: a.body_html }}
            />
          </div>

          <section className="article-more">
            <h2 className="h2">{t.moreFromSection}</h2>
            {related.length === 0 ? (
              <div className="card">
                <p className="p">{t.moreSoon}</p>
              </div>
            ) : (
              <div className="article-more-list">
                {related.map((r) => (
                  <ArticleCard key={r.slug} a={r} locale={locale} variant="teaser" />
                ))}
              </div>
            )}
          </section>
        </article>

        {/* Right rail — recommended articles */}
        <aside className="article-rail">
          <div className="card">
            <div className="sidebar-section-title">{railLabel}</div>
            <div>
              {related.slice(0, 4).map((r) => (
                <Link
                  key={r.slug}
                  href={`/${locale}/article/${r.slug}`}
                  className="sidebar-article"
                >
                  <div className="sidebar-article-date">{r.date}</div>
                  <div className="sidebar-article-title">{r.title}</div>
                </Link>
              ))}
              {related.length === 0 && (
                <p className="p" style={{ fontSize: "0.88rem" }}>{t.moreSoon}</p>
              )}
            </div>
          </div>

          <div className="card">
            <div className="sidebar-section-title">
              {locale === "zh" ? "更多栏目" : locale === "en" ? "More sections" : "Más secciones"}
            </div>
            <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
              <Link href={`/${locale}/section/nacionales`} className="badge">
                {locale === "zh" ? "国内" : locale === "en" ? "National" : "Nacionales"}
              </Link>
              <Link href={`/${locale}/section/internacionales`} className="badge">
                {locale === "zh" ? "国际" : locale === "en" ? "World" : "Mundo"}
              </Link>
              <Link href={`/${locale}/section/ciencias`} className="badge">
                {locale === "zh" ? "科学" : locale === "en" ? "Science" : "Ciencias"}
              </Link>
              <Link href={`/${locale}/section/criptos`} className="badge">
                {locale === "zh" ? "加密" : locale === "en" ? "Crypto" : "Criptos"}
              </Link>
              <Link href={`/${locale}/section/salud`} className="badge">
                {locale === "zh" ? "健康" : locale === "en" ? "Health" : "Salud"}
              </Link>
            </div>
          </div>
        </aside>
      </div>
    </main>
  );
}