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

export const dynamic = "force-dynamic";

export const metadata = {
  title: "Nos Recettes",
  description:
    "Recettes mauritaniennes authentiques préparées avec les produits Asli Food : tchakry, lacciri, karaw, et bien d'autres saveurs traditionnelles.",
  openGraph: {
    title:       "Nos Recettes — Asli Food",
    description: "Recettes mauritaniennes authentiques avec les produits Asli Food.",
    url:         "https://asli-food.com/recettes",
  },
};

interface Recette {
  id:           number;
  title:        string;
  description:  string;
  image_url:    string;
  ingredients:  string[];
  steps:        string[];
  product_name: string | null;
  published:    boolean;
  created_at:   string;
}

async function getPublishedRecettes(): Promise<Recette[]> {
  try {
    await initDB();
    const { rows } = await pool.query(
      "SELECT id, title, description, image_url, ingredients, steps, published, created_at FROM recettes WHERE published = true ORDER BY created_at DESC"
    );
    return rows;
  } catch {
    return [];
  }
}

export default async function RecettesPage() {
  const recettes = await getPublishedRecettes();

  return (
    <>
      <Navbar />

      {recettes.length === 0 ? (
        /* Coming soon */
        <section className="bg-brand-sand-light pt-36 pb-32 px-6">
          <div className="max-w-xl mx-auto text-center">
            <div className="w-20 h-20 rounded-3xl bg-brand-peach flex items-center justify-center mx-auto mb-8">
              <BookOpen size={36} weight="bold" className="text-brand-yellow" />
            </div>
            <h2
              className="text-3xl font-bold text-brand-dark mb-4"
              style={{ fontFamily: "var(--font-space, sans-serif)" }}
            >
              Bientôt disponible
            </h2>
            <p className="text-brand-dark/50 text-sm leading-relaxed mb-10">
              Nous préparons une collection de recettes authentiques pour vous.
              Revenez nous rendre visite bientôt !
            </p>
            <Link
              href="/produits"
              className="inline-flex items-center gap-2 bg-brand-dark text-brand-yellow font-bold px-8 py-4 rounded-full text-sm tracking-wide hover:bg-brand-dark/80 hover:scale-105 transition-transform duration-300"
            >
              Découvrir nos produits →
            </Link>
          </div>
        </section>
      ) : (
        <RecettesClient recettes={recettes} />
      )}

      <Footer />
    </>
  );
}