import type { Metadata } from "next";
import Link from "next/link";
import { notFound } from "next/navigation";
import { PortalFooter, PortalHeader } from "./PortalChrome";
import "./portal.css";

type Block = { tipo: "PARRAFO" | "SUBTITULO" | "LISTA" | "CITA" | "ALERTA"; texto: string };
type Article = { slug: string; titulo: string; bajada: string; contenido: Block[]; categoria: string; categoria_slug: string; autor?: string | null; autor_slug?: string | null; publicado_en: string; actualizado_en: string; meta_titulo: string; meta_descripcion: string; imagen_url?: string | null; imagen_alt?: string | null; imagen_credito?: string | null; relacionados: Array<{ slug: string; titulo: string; bajada: string; tipo: string; categoria: string }> };
const internalApi = process.env.INTERNAL_API_BASE_URL || "http://api:8000/api/v1";

export async function getArticle(kind: "noticias" | "ayuda", slug: string): Promise<Article | null> {
  try { const response = await fetch(`${internalApi}/portal/editorial/${kind}/item/${encodeURIComponent(slug)}`, { cache: "no-store" }); return response.ok ? response.json() : null; }
  catch { return null; }
}

export async function articleMetadata(kind: "noticias" | "ayuda", slug: string): Promise<Metadata> {
  const article = await getArticle(kind, slug); if (!article) return { title: "Contenido no encontrado" };
  const url = `https://documenta.cl/${kind}/${article.slug}`;
  return { title: article.meta_titulo, description: article.meta_descripcion, alternates: { canonical: url },
    openGraph: { title: article.meta_titulo, description: article.meta_descripcion, url, siteName: "Documenta", locale: "es_CL", type: "article", images: article.imagen_url ? [{ url: `https://documenta.cl${article.imagen_url}`, alt: article.imagen_alt || "" }] : [] } };
}

function Body({ blocks }: { blocks: Block[] }) {
  return <div className="editorial-article-body">{blocks.map((block, index) => {
    if (block.tipo === "SUBTITULO") return <h2 key={index}>{block.texto}</h2>;
    if (block.tipo === "CITA") return <blockquote key={index}>{block.texto}</blockquote>;
    if (block.tipo === "ALERTA") return <aside key={index}>{block.texto}</aside>;
    if (block.tipo === "LISTA") return <ul key={index}>{block.texto.split("\n").map((item) => <li key={item}>{item.replace(/^[-•]\s*/, "")}</li>)}</ul>;
    return <p key={index}>{block.texto}</p>;
  })}</div>;
}

export async function EditorialArticle({ kind, slug }: { kind: "noticias" | "ayuda"; slug: string }) {
  const article = await getArticle(kind, slug); if (!article) notFound();
  const url = `https://documenta.cl/${kind}/${article.slug}`;
  const structured = { "@context": "https://schema.org", "@type": kind === "noticias" ? "NewsArticle" : "Article", headline: article.titulo, description: article.bajada, datePublished: article.publicado_en, dateModified: article.actualizado_en, mainEntityOfPage: url, publisher: { "@type": "Organization", name: "Documenta", url: "https://documenta.cl" }, author: { "@type": "Person", name: article.autor || "Equipo Documenta" } };
  return <div className="portal-site editorial-site"><a className="portal-skip" href="#contenido">Saltar al contenido</a><PortalHeader /><main id="contenido" className="editorial-article-page"><div className="portal-container editorial-article-shell"><nav className="editorial-breadcrumb"><Link href="/">Inicio</Link><span>/</span><Link href={`/${kind}`}>{kind === "noticias" ? "Noticias" : "Ayuda"}</Link><span>/</span><b>{article.titulo}</b></nav>
    <header className="editorial-article-header"><span>{article.categoria}</span><h1>{article.titulo}</h1><p>{article.bajada}</p><div><b>{article.autor || "Equipo Documenta"}</b><time>{new Intl.DateTimeFormat("es-CL", { dateStyle: "long", timeZone: "America/Santiago" }).format(new Date(article.publicado_en))}</time></div></header>
    {article.imagen_url && <figure className="editorial-cover"><img src={article.imagen_url} alt={article.imagen_alt || ""} />{article.imagen_credito && <figcaption>{article.imagen_credito}</figcaption>}</figure>}
    <Body blocks={article.contenido} />
    {article.relacionados.length > 0 && <section className="editorial-related"><span>CONTENIDO RELACIONADO</span><h2>También puede interesarte</h2><div>{article.relacionados.map((item) => { const destination = item.tipo === "NOTICIA" ? "noticias" : "ayuda"; return <article key={`${destination}-${item.slug}`}><small>{item.categoria}</small><h3><Link href={`/${destination}/${item.slug}`}>{item.titulo}</Link></h3><p>{item.bajada}</p></article>; })}</div></section>}
    <Link className="editorial-back" href={`/${kind}`}>← Volver a {kind === "noticias" ? "noticias" : "ayuda"}</Link></div><script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(structured).replaceAll("<", "\\u003c") }} /></main><PortalFooter /></div>;
}