import { useEffect, useState } from 'react'
import type { Noticia } from '../types'

function formatFecha(iso: string | null): string {
  if (!iso) return ''
  const d = new Date(iso)
  if (isNaN(d.getTime())) return iso
  return d.toLocaleString('es-ES', {
    day: '2-digit',
    month: '2-digit',
    year: 'numeric',
    hour: '2-digit',
    minute: '2-digit',
  })
}

export function NewsList() {
  const [noticias, setNoticias] = useState<Noticia[] | null>(null)
  const [error, setError] = useState<string | null>(null)

  useEffect(() => {
    let cancelled = false
    fetch('/api/home/news/', { headers: { Accept: 'application/json' } })
      .then((r) => {
        if (!r.ok) throw new Error(`HTTP ${r.status}`)
        return r.json()
      })
      .then((data: { noticias: Noticia[] }) => {
        if (!cancelled) setNoticias(data.noticias)
      })
      .catch((e) => {
        if (!cancelled) setError(String(e))
      })
    return () => {
      cancelled = true
    }
  }, [])

  if (error) {
    return <p>No se pudieron cargar las noticias.</p>
  }
  if (noticias === null) {
    return <p>Cargando noticias…</p>
  }
  if (noticias.length === 0) {
    return <p>No hay noticias disponibles en este momento.</p>
  }

  return (
    <>
      {noticias.map((n) => (
        <div key={n.id} className="noticia-item">
          <h3>{n.titulo}</h3>
          <span className="date">{formatFecha(n.fecha)}</span>
          <div
            className="noticia-contenido"
            dangerouslySetInnerHTML={{ __html: n.contenido }}
          />
          {n.enlace && (
            <p>
              Enlace:{' '}
              <a href={n.enlace} target="_blank" rel="noopener noreferrer">
                aquí
              </a>
            </p>
          )}
          <br />
          <hr />
          <br />
        </div>
      ))}
      <p className="centered third-brown">
        <i>* Mostrando las últimas 50 noticias</i>
      </p>
      <br />
    </>
  )
}
