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

type Article = { id: number; slug: string; titulo: string; bajada: string; categoria: string; autor?: string | null; publicado_en: string; imagen_url?: string | null; imagen_alt?: string | null; destacado: boolean };
type Category = { id: number; nombre: string; slug: string; articulos: number };
type Listing = { items: Article[]; total: number; offset: number; limit: number; query?: string | null; unavailable?: boolean };

const internalApi = process.env.INTERNAL_API_BASE_URL || "http://api:8000/api/v1";

async function getJson<T>(path: string, fallback: T): Promise<T> {
  try { const response = await fetch(`${internalApi}${path}`, { cache: "no-store" }); return response.ok ? response.json() : fallback; }
  catch { return fallback; }
}

export async function EditorialListing({ kind, searchParams }: { kind: "noticias" | "ayuda"; searchParams: Promise<Record<string, string | string[] | undefined>> }) {
  const source = await searchParams;
  const q = typeof source.q === "string" ? source.q.slice(0, 120) : "";
  const category = typeof source.categoria === "string" ? source.categoria.slice(0, 140) : "";
  const requestedPage = Number(typeof source.pagina === "string" ? source.pagina : "1");
  const page = Number.isSafeInteger(requestedPage) && requestedPage > 0 ? Math.min(requestedPage, 10000) : 1;
  const limit = 12; const offset = (page - 1) * limit;
  const query = new URLSearchParams({ offset: String(offset), limit: String(limit) });
  if (q) query.set("q", q); if (category) query.set("categoria", category);
  const type = kind === "noticias" ? "NOTICIA" : "AYUDA";
  const [listing, categoryData] = await Promise.all([
    getJson<Listing>(`/portal/editorial/${kind}?${query}`, { items: [], total: 0, offset, limit, unavailable: true }),
    getJson<{ items: Category[] }>(`/portal/editorial/categories?tipo=${type}`, { items: [] }),
  ]);
  const pages = Math.max(1, Math.ceil(listing.total / limit));
  const title = kind === "noticias" ? "Noticias Documenta" : "Centro de ayuda";
  const lead = kind === "noticias" ? "Noticias y guías sobre trámites notariales, registrales y judiciales en Chile." : "Instrucciones para completar solicitudes, pagos y gestión de documentos.";
  const hrefFor = (target: number) => { const values = new URLSearchParams(); if (q) values.set("q", q); if (category) values.set("categoria", category); values.set("pagina", String(target)); return `/${kind}?${values}`; };

  return <div className="portal-site editorial-site"><a className="portal-skip" href="#contenido">Saltar al contenido</a><PortalHeader />
    <main id="contenido" className="editorial-public-page">
      <section className="editorial-public-hero"><div className="portal-container"><span>{kind === "noticias" ? "ACTUALIDAD" : "SOPORTE DOCUMENTA"}</span><h1>{title}</h1><p>{lead}</p>
        <form className="editorial-search" action={`/${kind}`} method="get"><label><span className="sr-only">Buscar</span><input name="q" defaultValue={q} placeholder={kind === "noticias" ? "Buscar noticias…" : "¿En qué necesitas ayuda?"} /></label>{category && <input type="hidden" name="categoria" value={category} />}<button>Buscar</button></form>
      </div></section>
      <section className="portal-container editorial-public-content">
        <nav className="editorial-category-nav" aria-label="Categorías"><Link className={!category ? "is-active" : ""} href={`/${kind}${q ? `?q=${encodeURIComponent(q)}` : ""}`}>Todo</Link>{categoryData.items.map((item) => <Link className={category === item.slug ? "is-active" : ""} key={item.id} href={`/${kind}?categoria=${encodeURIComponent(item.slug)}${q ? `&q=${encodeURIComponent(q)}` : ""}`}>{item.nombre}<small>{item.articulos}</small></Link>)}</nav>
        <div className="editorial-result-heading"><div><span>{listing.total.toLocaleString("es-CL")} resultados</span><h2>{q ? `Resultados para “${q}”` : category ? categoryData.items.find((item) => item.slug === category)?.nombre : kind === "noticias" ? "Lo más reciente" : "Explora las respuestas"}</h2></div>{(q || category) && <Link href={`/${kind}`}>Limpiar filtros</Link>}</div>
        {listing.items.length ? <div className="editorial-card-grid">{listing.items.map((article) => <article className={article.destacado ? "is-featured" : ""} key={article.id}>{article.imagen_url && <Link className="editorial-card-image" href={`/${kind}/${article.slug}`}><img src={article.imagen_url} alt={article.imagen_alt || ""} /></Link>}<div><small>{article.categoria}</small><h3><Link href={`/${kind}/${article.slug}`}>{article.titulo}</Link></h3><p>{article.bajada}</p><footer><span>{new Intl.DateTimeFormat("es-CL", { dateStyle: "long", timeZone: "America/Santiago" }).format(new Date(article.publicado_en))}</span><Link href={`/${kind}/${article.slug}`}>Leer {kind === "noticias" ? "noticia" : "respuesta"} →</Link></footer></div></article>)}</div> : <div className="editorial-public-empty"><strong>{listing.unavailable ? "El contenido no está disponible por ahora." : q || category ? "No encontramos contenido con esos filtros." : kind === "ayuda" ? "Todavía no hay respuestas publicadas." : "Todavía no hay noticias publicadas."}</strong><p>{listing.unavailable ? "Intenta nuevamente en unos minutos." : q || category ? "Prueba otra palabra o revisa todas las categorías." : "Vuelve más tarde para ver las publicaciones."}</p>{(q || category) && !listing.unavailable && <Link className="portal-button portal-button-primary" href={`/${kind}`}>Ver todo</Link>}</div>}
        {pages > 1 && <nav className="editorial-pagination" aria-label="Paginación"><Link aria-disabled={page <= 1} href={hrefFor(Math.max(1, page - 1))}>← Anterior</Link><span>Página {Math.min(page, pages)} de {pages}</span><Link aria-disabled={page >= pages} href={hrefFor(Math.min(pages, page + 1))}>Siguiente →</Link></nav>}
      </section>
    </main><PortalFooter /></div>;
}