// app/page.tsx — Server Component (default, no directive needed)
import { db } from '@/lib/database'
import LikeButton from './LikeButton'  // This is a Client Component

export default async function ProductPage({ params }: { params: { id: string } }) {
  // Direct DB access — no API route needed!
  const product = await db.products.findById(params.id)
  
  if (!product) return <div>Product not found</div>
  
  return (
    <div>
      <h1>{product.name}</h1>
      <p>{product.description}</p>
      <p>${product.price}</p>
      {/* Pass serializable data to Client Component */}
      <LikeButton productId={product.id} initialLikes={product.likes} />
    </div>
  )
}

// app/LikeButton.tsx — Client Component
'use client'  // This directive marks the "client boundary"

import { useState } from 'react'

interface Props {
  productId: string
  initialLikes: number
}

export default function LikeButton({ productId, initialLikes }: Props) {
  const [likes, setLikes] = useState(initialLikes)
  const [liked, setLiked] = useState(false)
  
  async function handleLike() {
    if (liked) return
    setLiked(true)
    setLikes(l => l + 1)
    
    // API call for persistence
    await fetch('/api/likes', {
      method: 'POST',
      body: JSON.stringify({ productId }),
    })
  }
  
  return (
    <button onClick={handleLike} disabled={liked}>
      ❤️ {likes} {liked ? '(liked!)' : ''}
    </button>
  )
}

// 1. Write an API route
// app/api/products/[id]/route.ts
export async function GET(req: Request, { params }) {
  const product = await db.products.findById(params.id)
  return Response.json(product)
}

// 2. Fetch it client-side (with loading states, error handling...)
'use client'
import { useState, useEffect } from 'react'

export default function ProductPage({ id }) {
  const [product, setProduct] = useState(null)
  const [loading, setLoading] = useState(true)
  
  useEffect(() => {
    fetch(`/api/products/${id}`)
      .then(r => r.json())
      .then(data => {
        setProduct(data)
        setLoading(false)
      })
  }, [id])
  
  if (loading) return <Spinner />
  return <div>{product?.name}</div>
}

// That's it. No API route. No useEffect. No loading state.
export default async function ProductPage({ params }) {
  const product = await db.products.findById(params.id)
  return <div>{product?.name}</div>
}

// app/dashboard/page.tsx
import { Suspense } from 'react'
import RecentOrders from './RecentOrders'        // Slow: complex query
import Analytics from './Analytics'              // Fast: cached data
import UserProfile from './UserProfile'          // Medium: simple query

export default function Dashboard() {
  return (
    <div className="dashboard">
      {/* Renders immediately — no async work */}
      <h1>Dashboard</h1>
      
      {/* Fast section: shows first */}
      <Suspense fallback={<CardSkeleton />}>
        <UserProfile />
      </Suspense>
      
      {/* Medium section: shows when ready */}
      <Suspense fallback={<ChartSkeleton />}>
        <Analytics />
      </Suspense>
      
      {/* Slow section: shows last, doesn't block the rest */}
      <Suspense fallback={<TableSkeleton />}>
        <RecentOrders />
      </Suspense>
    </div>
  )
}

// app/actions.ts
'use server'  // Everything in this file runs server-side

import { db } from '@/lib/database'
import { revalidatePath } from 'next/cache'

export async function createComment(formData: FormData) {
  const content = formData.get('content') as string
  const postId = formData.get('postId') as string
  
  // Direct DB write — no API route needed
  await db.comments.create({
    content,
    postId,
    createdAt: new Date(),
  })
  
  // Invalidate the cache for this post's page
  revalidatePath(`/posts/${postId}`)
}

// app/CommentForm.tsx
'use client'
import { createComment } from '../actions'

export default function CommentForm({ postId }: { postId: string }) {
  return (
    <form action={createComment}>
      <input type="hidden" name="postId" value={postId} />
      <textarea name="content" placeholder="Write a comment..." required />
      <button type="submit">Post Comment</button>
    </form>
  )
}

// ❌ Wrong: Functions can't be serialized
<ClientComponent onClick={() => console.log('click')} />

// ✅ Correct: Define handlers inside Client Components
// Or use Server Actions for server-side behavior

// Server Component: runs once on server, no re-fetching
async function ProductList() {
  const products = await db.products.findAll()  // Direct DB call
  return <ul>{products.map(p => <li key={p.id}>{p.name}</li>)}</ul>
}

// Client Component: fetches from browser, re-fetches on demand
'use client'
function SearchResults({ query }) {
  const { data } = useSWR(`/api/search?q=${query}`)  // API call
  return <ul>{data?.map(p => <li key={p.id}>{p.name}</li>)}</ul>
}