/* global React, Icon, Button, Kicker, CtaBanner */
// RecipesPage — /recettes
// Le contenu est alimenté depuis Notion via la Cloudflare Pages Function
// /api/recettes (voir functions/api/recettes.js et RECETTES-NOTION.md).
// Tant que Notion n'est pas configuré / vide, la page affiche un état
// « bientôt disponible » ; un bouton permet d'afficher un aperçu de la mise
// en page avec des recettes d'exemple.

const RECIPES_ENDPOINT = "/api/recettes";

// Recettes d'exemple — UNIQUEMENT pour prévisualiser la mise en page.
// Elles ne s'affichent jamais sur le site en production tant que l'on n'a pas
// cliqué « Afficher un aperçu ». Aucune donnée structurée n'est émise pour elles.
const DEMO_RECIPES = [
{
  id: "demo-1",
  nom: "Huîtres Gigas Meduli chaudes au beurre persillé",
  categorie: "Huîtres",
  temps: "25 min",
  difficulte: "Facile",
  portions: "4 personnes",
  date: "2026-05-30",
  photo: "assets/photos/huitre-detail-restaurant.webp",
  resume:
  "Nos huîtres n°3 juste saisies au four, nappées d'un beurre d'herbes fraîches. Une entrée terre-mer qui réveille les repas de fête.",
  ingredients: [
  "24 huîtres Gigas Meduli n°3",
  "120 g de beurre demi-sel",
  "2 échalotes",
  "1 botte de persil plat",
  "1 gousse d'ail",
  "Poivre du moulin"],

  etapes: [
  "Préchauffer le four à 220 °C.",
  "Ouvrir les huîtres et les déposer sur un lit de gros sel.",
  "Travailler le beurre pommade avec l'ail, les échalotes et le persil finement hachés.",
  "Déposer une noisette de beurre persillé sur chaque huître.",
  "Enfourner 6 à 8 minutes, jusqu'à ce que le beurre grésille.",
  "Servir aussitôt avec un pain de campagne grillé."]

},
{
  id: "demo-2",
  nom: "Palourdes à la persillade",
  categorie: "Coquillages",
  temps: "20 min",
  difficulte: "Facile",
  portions: "2 personnes",
  date: "2026-05-27",
  photo: "assets/photos/palourdes.jpg",
  resume:
  "Un grand classique, vif et parfumé : les palourdes s'ouvrent dans un filet de vin blanc, ail et persil.",
  ingredients: [
  "1 kg de palourdes",
  "4 gousses d'ail",
  "1 botte de persil plat",
  "10 cl de vin blanc sec",
  "Huile d'olive",
  "Poivre"],

  etapes: [
  "Faire dégorger les palourdes 1 heure dans de l'eau salée, puis rincer.",
  "Faire revenir l'ail haché dans l'huile d'olive sans coloration.",
  "Ajouter les palourdes et le vin blanc, couvrir.",
  "Cuire à feu vif 5 minutes, jusqu'à ouverture complète.",
  "Parsemer de persil haché, poivrer et servir immédiatement."]

},
{
  id: "demo-3",
  nom: "Gambas snackées au court-bouillon parfumé",
  categorie: "Crustacés",
  temps: "15 min",
  difficulte: "Facile",
  portions: "4 personnes",
  date: "2026-05-24",
  photo: "assets/photos/gambas-white-tiger.webp",
  resume:
  "Nos gambas saisies à la plancha puis déglacées avec une louche de notre court-bouillon maison aux herbes et épices.",
  ingredients: [
  "16 gambas",
  "1 louche de court-bouillon parfumé",
  "2 cuillères d'huile d'olive",
  "1 citron",
  "Fleur de sel"],

  etapes: [
  "Décortiquer partiellement les gambas en gardant la queue.",
  "Saisir à la plancha bien chaude 1 à 2 minutes par face.",
  "Déglacer avec une louche de court-bouillon parfumé.",
  "Arroser d'un trait de citron, saler à la fleur de sel.",
  "Servir bien chaud, en apéritif ou en plat."]

}];


// ── petites briques visuelles ────────────────────────────────────────────────
function DifficultyDots({ level }) {
  const map = { facile: 1, moyen: 2, moyenne: 2, difficile: 3, "élevé": 3 };
  const n = map[(level || "").toLowerCase()] || 1;
  return (
    <span className="inline-flex items-center gap-1" title={"Difficulté : " + level}>
      {[1, 2, 3].map((i) =>
      <span key={i} className={"w-1.5 h-1.5 rounded-full " + (i <= n ? "bg-primary" : "bg-primary/20")} />
      )}
    </span>);

}

function MetaRow({ recipe, className = "" }) {
  const bits = [];
  if (recipe.temps) bits.push({ icon: "clock", label: recipe.temps });
  if (recipe.portions) bits.push({ icon: "user", label: recipe.portions });
  return (
    <div className={"flex flex-wrap items-center gap-x-5 gap-y-2 text-mute text-[14px] " + className}>
      {bits.map((b) =>
      <span key={b.label} className="inline-flex items-center gap-1.5"><Icon name={b.icon} size={15} className="text-primary-light" />{b.label}</span>
      )}
      {recipe.difficulte &&
      <span className="inline-flex items-center gap-2"><DifficultyDots level={recipe.difficulte} /><span>{recipe.difficulte}</span></span>
      }
    </div>);

}

function RecipePhoto({ recipe, className }) {
  if (recipe.photo) {
    return <img src={recipe.photo} alt={recipe.nom} className={className + " object-cover"} loading="lazy" />;
  }
  return (
    <div
      className={className + " grid place-items-center bg-foam"}
      style={{ backgroundImage: "repeating-linear-gradient(135deg, rgba(3,75,134,.05) 0 10px, transparent 10px 20px)" }}>
      <Icon name="chef-hat" size={40} className="text-primary/30" />
    </div>);

}

function RecipeCard({ recipe, onOpen }) {
  return (
    <button type="button" onClick={() => onOpen(recipe)} className="panel overflow-hidden text-left flex flex-col hover:shadow-marine transition-shadow group">
      <div className="aspect-photo overflow-hidden">
        <RecipePhoto recipe={recipe} className="w-full h-full transition-transform duration-700 group-hover:scale-[1.04]" />
      </div>
      <div className="p-5 md:p-6 flex flex-col flex-1">
        {recipe.categorie && <Kicker>{recipe.categorie}</Kicker>}
        <h3 className="font-serif text-primary text-[21px] md:text-[23px] leading-tight mt-2">{recipe.nom}</h3>
        {recipe.resume && <p className="body-sm mt-2 flex-1">{recipe.resume}</p>}
        <div className="mt-4 pt-4 flex items-center justify-between">
          <MetaRow recipe={recipe} />
          <span className="text-primary-light inline-flex items-center gap-1 text-[14px] font-medium shrink-0">Voir<Icon name="arrow-right" size={15} /></span>
        </div>
      </div>
    </button>);

}

function RecipeDetail({ recipe, onBack }) {
  React.useEffect(() => {window.scrollTo({ top: 0, behavior: "auto" });}, [recipe && recipe.id]);
  return (
    <>
      <section className="bg-foam pt-10 md:pt-14 pb-10 md:pb-14">
        <div className="container-x max-w-[980px]">
          <button onClick={onBack} className="inline-flex items-center gap-2 text-primary hover:text-primary-dark font-medium mb-7">
            <Icon name="arrow-left" size={18} /> Toutes les recettes
          </button>
          <div className="grid md:grid-cols-12 gap-8 md:gap-12 items-center">
            <div className="md:col-span-6">
              <RecipePhoto recipe={recipe} className="w-full aspect-photo rounded-hero shadow-marine" />
            </div>
            <div className="md:col-span-6">
              {recipe.categorie && <Kicker>{recipe.categorie}</Kicker>}
              <h1 className="font-serif text-primary text-[32px] md:text-[46px] leading-[1.05] mt-3">{recipe.nom}</h1>
              {recipe.resume && <p className="lead mt-4">{recipe.resume}</p>}
              <MetaRow recipe={recipe} className="mt-6" />
            </div>
          </div>
        </div>
      </section>

      <section className="py-14 md:py-20 bg-white">
        <div className="container-x max-w-[980px] grid md:grid-cols-12 gap-10 md:gap-16 items-start">
          {recipe.ingredients && recipe.ingredients.length > 0 &&
          <div className="md:col-span-5 md:sticky md:top-28">
              <div className="panel p-6 md:p-7">
                <h2 className="font-serif text-primary text-[22px] md:text-[26px] leading-tight">Ingrédients</h2>
                <ul className="mt-5 space-y-3">
                  {recipe.ingredients.map((ing, i) =>
                <li key={i} className="flex items-start gap-3 text-ink/90 text-[16px]">
                      <span className="w-1.5 h-1.5 rounded-full bg-primary-light mt-2.5 shrink-0" />{ing}
                    </li>
                )}
                </ul>
              </div>
            </div>
          }
          {recipe.etapes && recipe.etapes.length > 0 &&
          <div className="md:col-span-7">
              <h2 className="font-serif text-primary text-[22px] md:text-[26px] leading-tight">Préparation</h2>
              <ol className="mt-6 space-y-6">
                {recipe.etapes.map((step, i) =>
              <li key={i} className="flex gap-4">
                    <span className="shrink-0 w-9 h-9 rounded-full bg-primary text-white grid place-items-center font-serif text-[17px]">{i + 1}</span>
                    <p className="body pt-1">{step}</p>
                  </li>
              )}
              </ol>
            </div>
          }
        </div>
      </section>
    </>);

}

// ── état « bientôt disponible » + aperçu ─────────────────────────────────────
function EmptyState({ onPreview, loading }) {
  return (
    <section className="py-20 md:py-28 bg-white">
      <div className="container-x max-w-[680px] text-center">
        <span className="inline-grid place-items-center w-16 h-16 rounded-full bg-foam text-primary mb-6"><Icon name="book-open" size={30} /></span>
        <h2 className="h-section">Nos premières recettes arrivent</h2>
        <p className="body mt-4">
          Nous publions régulièrement de nouvelles idées pour cuisiner nos huîtres, coquillages et crustacés. Revenez bientôt&nbsp;: cette page s'enrichit en continu.
        </p>
        {!loading &&
        <div className="mt-8 flex flex-wrap justify-center gap-3">
            <Button variant="secondary" iconRight="arrow-right" onClick={onPreview}>Afficher un aperçu de la mise en page</Button>
          </div>
        }
      </div>
    </section>);

}

function RecipesPage({ onNav }) {
  const [recipes, setRecipes] = React.useState(null); // null = en chargement
  const [source, setSource] = React.useState("live"); // "live" | "preview"
  const [selected, setSelected] = React.useState(null);

  React.useEffect(() => {
    let alive = true;
    (async () => {
      try {
        const res = await fetch(RECIPES_ENDPOINT, { headers: { Accept: "application/json" } });
        const ct = res.headers.get("content-type") || "";
        if (!ct.includes("application/json")) throw new Error("non-json");
        const data = await res.json();
        if (alive) setRecipes(Array.isArray(data.recipes) ? data.recipes : []);
      } catch (e) {
        // En préversion locale (fonction absente) ou erreur réseau : liste vide.
        if (alive) setRecipes([]);
      }
    })();
    return () => {alive = false;};
  }, []);

  // Données structurées Recipe — uniquement pour le contenu LIVE réel.
  React.useEffect(() => {
    if (source !== "live" || !recipes || recipes.length === 0) return;
    const data = {
      "@context": "https://schema.org",
      "@type": "ItemList",
      itemListElement: recipes.map((r, i) => ({
        "@type": "ListItem",
        position: i + 1,
        item: {
          "@type": "Recipe",
          name: r.nom,
          description: r.resume || undefined,
          image: r.photo || undefined,
          recipeCategory: r.categorie || undefined,
          totalTime: r.temps || undefined,
          recipeYield: r.portions || undefined,
          datePublished: r.date || undefined,
          recipeIngredient: r.ingredients && r.ingredients.length ? r.ingredients : undefined,
          recipeInstructions:
          r.etapes && r.etapes.length ?
          r.etapes.map((s) => ({ "@type": "HowToStep", text: s })) :
          undefined,
          author: { "@type": "Organization", name: "Ferme Eau Médoc" }
        }
      }))
    };
    const el = document.createElement("script");
    el.type = "application/ld+json";
    el.id = "recipes-jsonld";
    el.textContent = JSON.stringify(data);
    document.head.appendChild(el);
    return () => {el.remove();};
  }, [recipes, source]);

  const showPreview = () => {setSource("preview");setRecipes(DEMO_RECIPES);};

  // Détail d'une recette
  if (selected) {
    return (
      <>
        {source === "preview" && <PreviewBanner />}
        <RecipeDetail recipe={selected} onBack={() => setSelected(null)} />
        <CtaBanner
          image={"assets/photos/marais-coucher-soleil.webp"}
          title="Envie de cuisiner nos produits ?"
          subtitle="Réservez vos huîtres, coquillages et crustacés pour un retrait à Saint-Vivien ou Eysines."
          primary="Commander en ligne"
          secondary="Où nous trouver"
          onPrimary={() => onNav("commander")}
          onSecondary={() => onNav("ou-trouver")} />
      </>);

  }

  const loading = recipes === null;
  const hasRecipes = recipes && recipes.length > 0;

  return (
    <>
      {source === "preview" && <PreviewBanner />}

      {/* HERO */}
      <section className="bg-foam pt-16 md:pt-24 pb-12 md:pb-16">
        <div className="container-x">
          <div className="max-w-[820px]">
            <Kicker>Cuisine & inspiration</Kicker>
            <h1 className="h-display mt-3">Nos <span className="italic text-primary-light">recettes</span></h1>
            <p className="lead mt-5">Des idées simples et de saison pour sublimer nos produits. De nouvelles recettes sont ajoutées régulièrement.

            </p>
          </div>
        </div>
      </section>

      {loading &&
      <section className="py-20 md:py-28 bg-white">
          <div className="container-x grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
            {[0, 1, 2].map((i) =>
          <div key={i} className="panel overflow-hidden">
                <div className="aspect-photo img-shimmer" />
                <div className="p-6"><div className="h-4 w-24 bg-foam rounded mb-3" /><div className="h-5 w-3/4 bg-foam rounded" /></div>
              </div>
          )}
          </div>
        </section>
      }

      {!loading && !hasRecipes && <EmptyState onPreview={showPreview} loading={loading} />}

      {!loading && hasRecipes &&
      <section className="py-16 md:py-24 bg-white">
          <div className="container-x">
            <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-7">
              {recipes.map((r) =>
            <RecipeCard key={r.id} recipe={r} onOpen={setSelected} />
            )}
            </div>
          </div>
        </section>
      }

      <CtaBanner
        image={"assets/photos/marais-coucher-soleil.webp"}
        title="Envie de cuisiner nos produits ?"
        subtitle="Réservez vos huîtres, coquillages et crustacés pour un retrait à Saint-Vivien ou Eysines."
        primary="Commander en ligne"
        secondary="Où nous trouver"
        onPrimary={() => onNav("commander")}
        onSecondary={() => onNav("ou-trouver")} />
    </>);

}

function PreviewBanner() {
  return (
    <div className="bg-warning/10 text-warning">
      <div className="container-x py-2.5 text-[13px] md:text-[14px] flex items-center gap-2 justify-center text-center">
        <Icon name="alert-triangle" size={15} />
        Aperçu de la mise en page · recettes d'exemple, non publiées sur le site.
      </div>
    </div>);

}

window.RecipesPage = RecipesPage;