import Navbar from "@/components/Navbar";
import Footer from "@/components/Footer";
import ActualitesClient from "./ActualitesClient";
import Link from "next/link";
import { Newspaper } from "@phosphor-icons/react/dist/ssr";
import pool, { initDB } from "@/lib/db";

export const dynamic = "force-dynamic";

export const metadata = {
  title: "Actualités",
  description:
    "Suivez les dernières nouvelles d'Asli Food : nouveautés produits, promotions, offres d'emploi, événements et actions de solidarité en Mauritanie.",
  openGraph: {
    title:       "Actualités — Asli Food",
    description: "Nouveautés, promotions et événements Asli Food en Mauritanie.",
    url:         "https://asli-food.com/actualites",
  },
};

interface Actualite {
  id:         number;
  title:      string;
  excerpt:    string;
  content:    string;
  tag:        string;
  image_url:  string;
  video_url:  string;
  published:  boolean;
  created_at: string;
}

async function getPublishedActualites(): Promise<Actualite[]> {
  try {
    await initDB();
    const { rows } = await pool.query(
      "SELECT id, title, excerpt, content, tag, image_url, video_url, published, created_at FROM actualites WHERE published = true ORDER BY created_at DESC"
    );
    return rows;
  } catch {
    return [];
  }
}

export default async function ActualitesPage() {
  const actualites = await getPublishedActualites();

  return (
    <>
      <Navbar />

      {actualites.length === 0 ? (
        <section className="bg-brand-off-white pt-36 pb-32 px-6">
          <div className="max-w-xl mx-auto text-center">
            <div className="w-16 h-16 rounded-2xl bg-brand-yellow/20 flex items-center justify-center mx-auto mb-6">
              <Newspaper size={28} weight="bold" className="text-brand-dark" />
            </div>
            <h2 className="text-2xl font-black text-brand-dark mb-3" style={{ fontFamily: "var(--font-space, sans-serif)" }}>
              Bientôt disponible
            </h2>
            <p className="text-brand-dark/45 text-sm leading-relaxed mb-8">
              Nos actualités arrivent bientôt. Suivez-nous sur les réseaux sociaux pour ne rien manquer.
            </p>
            <div className="flex flex-wrap gap-3 justify-center">
              <a
                href="https://www.facebook.com/p/Asli-Food-61578120753965/"
                target="_blank" rel="noopener noreferrer"
                className="inline-flex items-center gap-2 bg-brand-dark text-brand-yellow font-bold px-6 py-3 rounded-full text-sm tracking-wide hover:scale-105 transition-transform duration-300"
              >
                Suivre sur Facebook →
              </a>
              <Link
                href="/"
                className="inline-flex items-center gap-2 border border-brand-dark/20 text-brand-dark font-bold px-6 py-3 rounded-full text-sm tracking-wide hover:scale-105 transition-transform duration-300"
              >
                Retour à l&apos;accueil
              </Link>
            </div>
          </div>
        </section>
      ) : (
        <ActualitesClient actualites={actualites} />
      )}

      <Footer />
    </>
  );
}