// app/page.tsx
// ✅ SSG happens automatically when:
// 1. No request-specific data (no cookies, headers, searchParams)
// 2. All data can be fetched at build time
// 3. No dynamic segments without generateStaticParams

export default async function Home() {
  // This runs at BUILD TIME, not request time
  const [recipes, categories] = await Promise.all([
    getRecipes(),      // Static data from JSON/database
    getCategories()    // Available at build time
  ]);

  const featuredRecipes = recipes.slice(0, 3);

  return (
    <div>
      <h1>Featured Recipes</h1>
      {featuredRecipes.map((recipe) => (
        <RecipeCard key={recipe.id} recipe={recipe} />
      ))}
    </div>
  );
}

// 🚫 This would force SSR instead:
// export default async function Home({ searchParams }) {
//   const query = searchParams.q; // Request-specific data = SSR
//   const recipes = await searchRecipes(query);
//   return <div>...</div>;
// }

// Comments are server-rendered for fresh data
export default async function RecipePage({ params }: RecipePageProps) {
  const [recipe, comments] = await Promise.all([
    getRecipe(params.id),
    getComments(params.id) // Fresh comments on every request
  ]);

  return (
    <section>
      <h2>Reviews ({comments.length})</h2>
      {comments.map((comment) => (
        <div key={comment.id}>
          <div className="font-semibold">{comment.author}</div>
          <p>{comment.content}</p>
          <time className="text-gray-500">
            {new Date(comment.createdAt).toLocaleDateString()}
          </time>
        </div>
      ))}
    </section>
  );
}

'use client';

export default function SearchPage() {
  const [query, setQuery] = useState('');
  const [recipes, setRecipes] = useState<Recipe[]>([]);
  const [loading, setLoading] = useState(false);

  const searchRecipes = useCallback(async (searchQuery: string) => {
    setLoading(true);
    try {
      const response = await fetch(`/api/search?q=${encodeURIComponent(searchQuery)}`);
      const data = await response.json();
      setRecipes(data.recipes || []);
    } finally {
      setLoading(false);
    }
  }, []);

  // Debounced search
  useEffect(() => {
    const timeoutId = setTimeout(() => {
      searchRecipes(query);
    }, 300);
    return () => clearTimeout(timeoutId);
  }, [query, searchRecipes]);

  return (
    <div>
      <input
        value={query}
        onChange={(e) => setQuery(e.target.value)}
        placeholder="Search recipes..."
        className="w-full px-4 py-2 border rounded-lg"
      />
      {loading ? <Spinner /> : <RecipeList recipes={recipes} />}
    </div>
  );
}

// 🔑 KEY: This export enables ISR
export const revalidate = 3600; // Revalidate every hour

// Generate static params for all recipe pages
export async function generateStaticParams() {
  const recipes = await getRecipes();
  return recipes.map((recipe) => ({
    id: recipe.id,  // Pre-generate /recipe/spaghetti-carbonara, etc.
  }));
}

export default async function RecipePage({ params }: RecipePageProps) {
  // This runs at build time AND periodically after deployment
  const recipe = await getRecipe(params.id);
  
  return (
    <article>
      <h1>{recipe.title}</h1>
      <p>{recipe.description}</p>
      <div className="ingredients">
        {recipe.ingredients.map((ingredient, i) => (
          <div key={`ingredient-${i}`}>{ingredient}</div>
        ))}
      </div>
    </article>
  );
}

// 🎯 What triggers ISR:
// ✅ export const revalidate = number
// ✅ generateStaticParams for dynamic routes  
// ✅ No request-specific data (like searchParams)