Next.js - Server Components

// app/products/page.tsx (這是 Server Component，預設)
import { db } from '@/lib/database'

export default async function ProductsPage() {
  const products = await db.products.findAll() // 直接查資料庫
  return <div>{products.map(p => p.name)}</div>
}

// app/components/Counter.tsx (這是 Client Component)
'use client'

import { useState } from 'react'

export default function Counter() {
  const [count, setCount] = useState(0)
  return <button onClick={() => setCount(count + 1)}>Count: {count}</button>
}

// app/products/[id]/page.tsx (Server Component)
import { db } from '@/lib/database'
import { ProductDetail } from './ProductDetail'
import { AddToCartButton } from './AddToCartButton'
import { ReviewSection } from './ReviewSection'
import { RelatedProducts } from './RelatedProducts'

export default async function ProductPage({ params }: { params: { id: string } }) {
  // 查資料庫拿產品資訊
  const product = await db.products.findById(params.id)
  const reviews = await db.reviews.findByProductId(params.id)
  const relatedProducts = await db.products.findRelated(product.categoryId)
  
  return (
    <div>
      <ProductDetail product={product} />
      <AddToCartButton productId={product.id} /> {/* Client Component */}
      <ReviewSection reviews={reviews} productId={product.id} /> {/* 混合 */}
      <RelatedProducts products={relatedProducts} />
    </div>
  )
}

// app/products/[id]/AddToCartButton.tsx (Client Component)
'use client'

import { useState } from 'react'

export function AddToCartButton({ productId }: { productId: string }) {
  const [quantity, setQuantity] = useState(1)
  const [loading, setLoading] = useState(false)

  const handleAddToCart = async () => {
    setLoading(true)
    await fetch('/api/cart', {
      method: 'POST',
      body: JSON.stringify({ productId, quantity })
    })
    setLoading(false)
  }

  return (
    <div>
      <input
        type="number"
        value={quantity}
        onChange={e => setQuantity(+e.target.value)}
        min="1"
      />
      <button onClick={handleAddToCart} disabled={loading}>
        {loading ? 'Adding...' : 'Add to Cart'}
      </button>
    </div>
  )
}

// app/products/[id]/ReviewSection.tsx (Server Component)
import { ReviewList } from './ReviewList'
import { AddReviewForm } from './AddReviewForm'

export function ReviewSection({ reviews, productId }: any) {
  return (
    <div>
      <h2>Reviews ({reviews.length})</h2>
      <ReviewList reviews={reviews} /> {/* Server Component */}
      <AddReviewForm productId={productId} /> {/* Client Component */}
    </div>
  )
}

// app/products/[id]/AddReviewForm.tsx (Client Component)
'use client'

import { useState } from 'react'

export function AddReviewForm({ productId }: { productId: string }) {
  const [rating, setRating] = useState(5)
  const [text, setText] = useState('')
  const [submitting, setSubmitting] = useState(false)

  const handleSubmit = async () => {
    setSubmitting(true)
    await fetch('/api/reviews', {
      method: 'POST',
      body: JSON.stringify({ productId, rating, text })
    })
    setText('')
    setSubmitting(false)
  }

  return (
    <form onSubmit={e => { e.preventDefault(); handleSubmit() }}>
      <select value={rating} onChange={e => setRating(+e.target.value)}>
        <option value="1">1 Star</option>
        <option value="5">5 Stars</option>
      </select>
      <textarea
        value={text}
        onChange={e => setText(e.target.value)}
        placeholder="Your review..."
      />
      <button type="submit" disabled={submitting}>
        {submitting ? 'Submitting...' : 'Submit Review'}
      </button>
    </form>
  )
}

// app/inventory/page.tsx (Server Component)
import { db } from '@/lib/database'
import { InventoryTable } from './InventoryTable'
import { AddProductForm } from './AddProductForm'

export default async function InventoryPage() {
  // 初始化時從資料庫拿所有產品
  const products = await db.inventory.getAllProducts()
  const totalValue = await db.inventory.calculateTotalValue()

  return (
    <div>
      <h1>Inventory Management</h1>
      <p>Total Value: ${totalValue}</p>
      
      <AddProductForm /> {/* Client Component - 新增產品 */}
      <InventoryTable initialProducts={products} /> {/* Client Component - 實時更新 */}
    </div>
  )
}

// app/inventory/InventoryTable.tsx (Client Component)
'use client'

import { useEffect, useState } from 'react'

export function InventoryTable({ initialProducts }: { initialProducts: any[] }) {
  const [products, setProducts] = useState(initialProducts)
  const [connection, setConnection] = useState<any>(null)

  useEffect(() => {
    // 連接 WebSocket 接收實時更新
    const conn = new WebSocket('ws://localhost:8000/ws/inventory')
    
    conn.onmessage = (event) => {
      const { type, product } = JSON.parse(event.data)
      
      if (type === 'INVENTORY_UPDATED') {
        // 當其他收銀台進行銷售時，馬上更新本地狀態
        setProducts(prev => 
          prev.map(p => p.id === product.id ? product : p)
        )
      }
    }
    
    setConnection(conn)
    return () => conn.close()
  }, [])

  const handleSale = async (productId: string, quantity: number) => {
    // 發送銷售事件到後端
    // 後端會更新資料庫，然後透過 WebSocket 推送給所有連接
    await fetch('/api/inventory/sale', {
      method: 'POST',
      body: JSON.stringify({ productId, quantity })
    })
  }

  const handleRestock = async (productId: string, quantity: number) => {
    await fetch('/api/inventory/restock', {
      method: 'POST',
      body: JSON.stringify({ productId, quantity })
    })
  }

  return (
    <table>
      <thead>
        <tr>
          <th>Product Name</th>
          <th>Current Stock</th>
          <th>Actions</th>
        </tr>
      </thead>
      <tbody>
        {products.map(product => (
          <tr key={product.id}>
            <td>{product.name}</td>
            <td>{product.stock}</td>
            <td>
              <button onClick={() => handleSale(product.id, 1)}>-1</button>
              <button onClick={() => handleRestock(product.id, 1)}>+1</button>
            </td>
          </tr>
        ))}
      </tbody>
    </table>
  )
}

// app/inventory/AddProductForm.tsx (Client Component)
'use client'

import { useState } from 'react'

export function AddProductForm() {
  const [name, setName] = useState('')
  const [price, setPrice] = useState(0)
  const [stock, setStock] = useState(0)
  const [adding, setAdding] = useState(false)

  const handleSubmit = async () => {
    setAdding(true)
    await fetch('/api/inventory/add', {
      method: 'POST',
      body: JSON.stringify({ name, price, stock })
    })
    setName('')
    setPrice(0)
    setStock(0)
    setAdding(false)
  }

  return (
    <form onSubmit={e => { e.preventDefault(); handleSubmit() }}>
      <input
        value={name}
        onChange={e => setName(e.target.value)}
        placeholder="Product name"
      />
      <input
        type="number"
        value={price}
        onChange={e => setPrice(+e.target.value)}
        placeholder="Price"
      />
      <input
        type="number"
        value={stock}
        onChange={e => setStock(+e.target.value)}
        placeholder="Initial stock"
      />
      <button type="submit" disabled={adding}>
        {adding ? 'Adding...' : 'Add Product'}
      </button>
    </form>
  )
}

// 錯誤
export default async function Page() {
  const product = await getProduct()
  // product.createdAt 是 Date 物件，無法序列化
  return <ClientComponent product={product} />
}

// 正確
export default async function Page() {
  const product = await getProduct()
  return (
    <ClientComponent 
      product={{
        ...product,
        createdAt: product.createdAt.toISOString() // 轉成字串
      }} 
    />
  )
}

// 錯誤
'use client'

import ServerComponent from './ServerComponent'

export default function ClientComponent() {
  return <ServerComponent /> // 這會失敗
}