// src/components/templates/recipes/LanguageSwitcher.tsx
import { jsx } from "react/jsx-runtime";
function LanguageSwitcher({ locale, onChange }) {
  return /* @__PURE__ */ jsx("div", {
    className: "border-border bg-card text-muted-foreground inline-flex rounded-full border p-1 text-xs font-semibold",
    children: ["EN", "FR"].map((language) => /* @__PURE__ */ jsx("button", {
      type: "button",
      className: `rounded-full px-3 py-1 transition ${locale === language ? "bg-violet-500 text-white" : "hover:text-foreground"}`,
      onClick: () => onChange(language),
      children: language === "EN" ? "English" : "Français"
    }, language))
  });
}

// src/components/templates/recipes/RecipeCard.tsx
import { Heart } from "lucide-react";
import { jsx as jsx2, jsxs } from "react/jsx-runtime";
function RecipeCard({
  recipe,
  onSelect,
  onToggleFavorite
}) {
  return /* @__PURE__ */ jsxs("button", {
    type: "button",
    onClick: () => onSelect?.(recipe),
    className: "border-border bg-card flex flex-col gap-3 rounded-2xl border text-left transition hover:border-violet-400",
    children: [
      recipe.heroImageUrl ? /* @__PURE__ */ jsx2("img", {
        src: recipe.heroImageUrl,
        alt: recipe.name,
        className: "h-40 w-full rounded-t-2xl object-cover"
      }) : /* @__PURE__ */ jsx2("div", {
        className: "bg-muted h-40 rounded-t-2xl"
      }),
      /* @__PURE__ */ jsxs("div", {
        className: "space-y-2 p-4",
        children: [
          /* @__PURE__ */ jsxs("div", {
            className: "flex items-center justify-between",
            children: [
              /* @__PURE__ */ jsx2("p", {
                className: "text-base font-semibold",
                children: recipe.name
              }),
              /* @__PURE__ */ jsx2("button", {
                type: "button",
                className: `inline-flex items-center justify-center rounded-full border border-transparent p-2 ${recipe.isFavorite ? "text-red-400" : "text-muted-foreground hover:text-red-400"}`,
                onClick: (event) => {
                  event.stopPropagation();
                  onToggleFavorite?.(recipe);
                },
                children: /* @__PURE__ */ jsx2(Heart, {
                  className: `h-4 w-4 ${recipe.isFavorite ? "fill-red-400" : ""}`
                })
              })
            ]
          }),
          /* @__PURE__ */ jsx2("p", {
            className: "text-muted-foreground line-clamp-2 text-sm",
            children: recipe.description
          }),
          /* @__PURE__ */ jsxs("div", {
            className: "text-muted-foreground flex flex-wrap gap-3 text-xs",
            children: [
              recipe.prepTimeMinutes ? /* @__PURE__ */ jsxs("span", {
                children: [
                  "Prep ",
                  recipe.prepTimeMinutes,
                  "m"
                ]
              }) : null,
              recipe.cookTimeMinutes ? /* @__PURE__ */ jsxs("span", {
                children: [
                  "Cook ",
                  recipe.cookTimeMinutes,
                  "m"
                ]
              }) : null,
              recipe.servings ? /* @__PURE__ */ jsxs("span", {
                children: [
                  recipe.servings,
                  " servings"
                ]
              }) : null
            ]
          })
        ]
      })
    ]
  });
}

// src/components/templates/recipes/RecipeDetail.tsx
import { BookOpen } from "lucide-react";
import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
function RecipeDetail({ recipe }) {
  if (!recipe) {
    return /* @__PURE__ */ jsx3("div", {
      className: "border-border flex flex-1 items-center justify-center rounded-2xl border border-dashed",
      children: /* @__PURE__ */ jsx3("p", {
        className: "text-muted-foreground text-sm",
        children: "Select a recipe to view details."
      })
    });
  }
  return /* @__PURE__ */ jsxs2("article", {
    className: "border-border bg-card space-y-4 rounded-2xl border p-6",
    children: [
      /* @__PURE__ */ jsxs2("header", {
        className: "flex flex-wrap items-center gap-3",
        children: [
          /* @__PURE__ */ jsx3(BookOpen, {
            className: "text-muted-foreground h-5 w-5"
          }),
          /* @__PURE__ */ jsxs2("div", {
            children: [
              /* @__PURE__ */ jsx3("h2", {
                className: "text-xl font-semibold",
                children: recipe.name
              }),
              /* @__PURE__ */ jsx3("p", {
                className: "text-muted-foreground text-sm",
                children: recipe.description
              })
            ]
          })
        ]
      }),
      /* @__PURE__ */ jsxs2("section", {
        children: [
          /* @__PURE__ */ jsx3("h3", {
            className: "text-muted-foreground text-sm font-semibold tracking-wide uppercase",
            children: "Ingredients"
          }),
          /* @__PURE__ */ jsx3("ul", {
            className: "text-foreground mt-2 list-disc space-y-1 pl-6 text-sm",
            children: recipe.ingredients.map((ingredient) => /* @__PURE__ */ jsxs2("li", {
              children: [
                ingredient.name,
                " – ",
                ingredient.quantity
              ]
            }, ingredient.id))
          })
        ]
      }),
      /* @__PURE__ */ jsxs2("section", {
        children: [
          /* @__PURE__ */ jsx3("h3", {
            className: "text-muted-foreground text-sm font-semibold tracking-wide uppercase",
            children: "Instructions"
          }),
          /* @__PURE__ */ jsx3("ol", {
            className: "text-foreground mt-2 list-decimal space-y-2 pl-6 text-sm",
            children: recipe.instructions.map((instruction) => /* @__PURE__ */ jsx3("li", {
              children: instruction.content
            }, instruction.id))
          })
        ]
      })
    ]
  });
}

// src/components/templates/recipes/RecipeList.tsx
import { useState } from "react";
import { useMutation, useQuery } from "@apollo/client/react";
import { gql } from "@apollo/client";
import {
  registerTemplateComponents,
  useTemplateRuntime
} from "@contractspec/lib.example-shared-ui";
import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
"use client";
var RECIPES_QUERY = gql`
  query Recipes($projectId: ID!, $locale: RecipeLocale!) {
    recipes(projectId: $projectId, locale: $locale) {
      id
      name
      description
      heroImageUrl
      prepTimeMinutes
      cookTimeMinutes
      servings
      isFavorite
      locale
      category {
        id
        nameEn
        nameFr
      }
      ingredients {
        id
        name
        quantity
      }
      instructions {
        id
        content
        ordering
      }
    }
  }
`;
var FAVORITE_RECIPE = gql`
  mutation FavoriteRecipe($id: ID!, $isFavorite: Boolean!) {
    favoriteRecipe(id: $id, isFavorite: $isFavorite) {
      id
      isFavorite
    }
  }
`;
function RecipeList() {
  const { projectId } = useTemplateRuntime();
  const [locale, setLocale] = useState("EN");
  const [selected, setSelected] = useState();
  const [search, setSearch] = useState("");
  const { data, loading } = useQuery(RECIPES_QUERY, {
    variables: { projectId, locale },
    fetchPolicy: "cache-and-network"
  });
  const [favoriteRecipe] = useMutation(FAVORITE_RECIPE);
  const recipes = data?.recipes ?? [];
  const filtered = recipes.filter((recipe) => recipe.name.toLowerCase().includes(search.toLowerCase()));
  const handleToggleFavorite = async (recipe) => {
    await favoriteRecipe({
      variables: { id: recipe.id, isFavorite: !recipe.isFavorite },
      optimisticResponse: {
        favoriteRecipe: {
          __typename: "Recipe",
          id: recipe.id,
          isFavorite: !recipe.isFavorite
        }
      }
    });
  };
  return /* @__PURE__ */ jsxs3("div", {
    className: "space-y-4",
    children: [
      /* @__PURE__ */ jsxs3("div", {
        className: "flex flex-wrap items-center gap-3",
        children: [
          /* @__PURE__ */ jsx4(LanguageSwitcher, {
            locale,
            onChange: setLocale
          }),
          /* @__PURE__ */ jsx4("input", {
            type: "search",
            placeholder: locale === "EN" ? "Search recipes" : "Rechercher des recettes",
            className: "border-border bg-card flex-1 rounded-full border px-4 py-2 text-sm",
            value: search,
            onChange: (event) => setSearch(event.target.value)
          })
        ]
      }),
      loading ? /* @__PURE__ */ jsx4("p", {
        className: "text-muted-foreground text-sm",
        children: "Loading recipes…"
      }) : /* @__PURE__ */ jsx4("div", {
        className: "grid gap-4 md:grid-cols-3",
        children: filtered.map((recipe) => /* @__PURE__ */ jsx4(RecipeCard, {
          recipe,
          onSelect: setSelected,
          onToggleFavorite: handleToggleFavorite
        }, recipe.id))
      }),
      /* @__PURE__ */ jsx4(RecipeDetail, {
        recipe: selected
      })
    ]
  });
}
registerTemplateComponents("recipe-app-i18n", {
  list: RecipeList,
  detail: RecipeDetail
});
export {
  RecipeList
};
