// ❌ Old pattern (still valid in client components)
function UserProfile({ userId }: { userId: string }) {
  const [user, setUser] = useState<User | null>(null);
  const [loading, setLoading] = useState(true);
  
  useEffect(() => {
    fetch(`/api/users/${userId}`)
      .then(r => r.json())
      .then(setUser)
      .finally(() => setLoading(false));
  }, [userId]);
  
  if (loading) return <Spinner />;
  if (!user) return <NotFound />;
  return <div>{user.name}</div>;
}

// ✅ New pattern (Server Component)
async function UserProfile({ userId }: { userId: string }) {
  // Direct DB query — no API route needed
  const user = await db.users.findUnique({ where: { id: userId } });
  
  if (!user) notFound();  // Next.js built-in
  
  return <div>{user.name}</div>;
}

// Server Component: each PostCard fetches its own data
async function PostCard({ postId }: { postId: string }) {
  // These will be deduplicated by React if multiple PostCards 
  // fetch the same user
  const post = await db.posts.findUnique({ where: { id: postId } });
  const author = await db.users.findUnique({ where: { id: post.authorId } });
  
  return (
    <article>
      <h2>{post.title}</h2>
      <p>By {author.name}</p>
    </article>
  );
}

// Parent: just map over IDs — no need to preload authors
async function PostList() {
  const postIds = await db.posts.findMany({ 
    select: { id: true },
    orderBy: { createdAt: 'desc' },
    take: 20
  });
  
  return (
    <div>
      {postIds.map(({ id }) => <PostCard key={id} postId={id} />)}
    </div>
  );
}

import { cache } from 'react';
import { db } from '@/lib/db';

// Wrap expensive operations in cache()
export const getUser = cache(async (userId: string) => {
  console.log(`Fetching user ${userId}`); // Only logged once per request
  return db.users.findUnique({ where: { id: userId } });
});

// Now multiple components can call getUser() with the same ID
// and the DB query only runs once per request
async function Header({ userId }: { userId: string }) {
  const user = await getUser(userId); // DB hit
  return <nav>{user.name}</nav>;
}

async function Sidebar({ userId }: { userId: string }) {
  const user = await getUser(userId); // Cache hit — no DB query
  return <aside>Welcome, {user.name}</aside>;
}

// ❌ Sequential: each await blocks the next (waterfall)
async function Dashboard({ userId }: { userId: string }) {
  const user = await getUser(userId);
  const stats = await getUserStats(userId);  // Waits for user
  const posts = await getRecentPosts(userId); // Waits for stats
  
  return <DashboardView user={user} stats={stats} posts={posts} />;
}

// ✅ Parallel: independent fetches run concurrently
async function Dashboard({ userId }: { userId: string }) {
  const [user, stats, posts] = await Promise.all([
    getUser(userId),
    getUserStats(userId),
    getRecentPosts(userId),
  ]);
  
  return <DashboardView user={user} stats={stats} posts={posts} />;
}

// ✅ Even better: use Suspense to stream results independently
function Dashboard({ userId }: { userId: string }) {
  return (
    <div>
      {/* User info loads first (fast) */}
      <Suspense fallback={<HeaderSkeleton />}>
        <UserHeader userId={userId} />
      </Suspense>
      
      {/* Stats can load independently (slower) */}
      <Suspense fallback={<StatsSkeleton />}>
        <UserStats userId={userId} />
      </Suspense>
      
      {/* Posts stream in last */}
      <Suspense fallback={<PostsSkeleton />}>
        <RecentPosts userId={userId} />
      </Suspense>
    </div>
  );
}

// ❌ This breaks — client components can't import server components
"use client"
import { ServerComponent } from './ServerComponent'; // Error!

// ✅ Pass server components as props/children instead
"use client"
function ClientWrapper({ children }: { children: React.ReactNode }) {
  const [open, setOpen] = useState(false);
  return (
    <div>
      <button onClick={() => setOpen(!open)}>Toggle</button>
      {open && children}
    </div>
  );
}

// In a server component:
<ClientWrapper>
  <ServerComponent /> {/* Server component passed as children ✅ */}
</ClientWrapper>

// ❌ Can't pass class instances, functions, or non-serializable objects
<ClientComponent callback={() => console.log("hi")} />

// ✅ Pass primitive data, let the client component define handlers
<ClientComponent data= />

// No API route needed — this function runs on the server
async function createPost(formData: FormData) {
  "use server"; // This directive marks it as a server action
  
  const title = formData.get("title") as string;
  const content = formData.get("content") as string;
  
  // Validate
  if (!title || title.length < 3) {
    return { error: "Title must be at least 3 characters" };
  }
  
  // Direct DB write
  await db.posts.create({
    data: { title, content, authorId: await getCurrentUserId() }
  });
  
  // Revalidate the posts cache
  revalidatePath("/posts");
  redirect("/posts");
}

// Use directly in JSX
function NewPostForm() {
  return (
    <form action={createPost}>
      <input name="title" placeholder="Post title" />
      <textarea name="content" placeholder="Content..." />
      <button type="submit">Publish</button>
    </form>
  );
}

// This MUST be a client component
"use client"
import { useState } from "react";
import { motion } from "framer-motion"; // Animation library

export function AnimatedCounter({ initial }: { initial: number }) {
  const [count, setCount] = useState(initial);
  
  return (
    <motion.div
      key={count}
      initial=
      animate=
    >
      <span>{count}</span>
      <button onClick={() => setCount(c => c + 1)}>+</button>
    </motion.div>
  );
}