// ❌ Broken — async function with "use server" but no validation, no error handling
async function createComment(formData: FormData) {
  'use server'
  const content = formData.get('content')
  await db.comments.create({ data: { content } }) // content could be null, XSS payload, or 50,000 chars
}

export default function CommentForm() {
  return (
    <form action={createComment}>
      <textarea name="content" />
      <button type="submit">Post</button>
    </form>
  )
}

POST /_next/action/[hash]
Content-Type: multipart/form-data | application/x-www-form-urlencoded | application/json

# The request body is serialized FormData — exactly as a native HTML form POST

// ✅ Type-safe FormData extraction with Zod validation
import { z } from 'zod'
import { redirect } from 'next/navigation'

// Schema-first: define the shape before writing the action
const CommentSchema = z.object({
  content: z
    .string()
    .min(1, 'Comment cannot be empty')
    .max(1000, 'Comment must be under 1000 characters')
    .trim(),
  parentId: z.string().cuid().optional(),
})

export type CommentFormState = {
  errors?: {
    content?: string[]
    parentId?: string[]
  }
  message?: string
}

async function createComment(
  prevState: CommentFormState,
  formData: FormData,
): Promise<CommentFormState> {
  'use server'

  // Step 1: Extract raw values from FormData
  const rawData = {
    content: formData.get('content'),
    parentId: formData.get('parentId'),
  }

  // Step 2: Validate with Zod — safeParse does not throw, returns a result object
  const validated = CommentSchema.safeParse(rawData)

  if (!validated.success) {
    return {
      errors: validated.error.flatten().fieldErrors,
      message: 'Validation failed. Please check the form.',
    }
  }

  // Step 3: Act on validated data — the type is now { content: string; parentId?: string }
  try {
    await db.comments.create({
      data: {
        content: validated.data.content,
        parentId: validated.data.parentId ?? null,
        authorId: await getCurrentUserId(), // verified server-side — cannot be spoofed
      },
    })
  } catch (error) {
    return { message: 'Database error. Your comment could not be saved.' }
  }

  // Step 4: On success, revalidate the cache and redirect
  revalidateTag('comments')
  redirect(`/posts/${postId}`)
}

// ✅ useActionState — connects form to Server Action return value
'use client'
import { useActionState } from 'react'
import { createComment, type CommentFormState } from './actions'

const initialState: CommentFormState = {}

export function CommentForm({ postId }: { postId: string }) {
  const [state, action, isPending] = useActionState(createComment, initialState)
  //     ^state: CommentFormState (return value from the Server Action)
  //             ^action: the enhanced form action (wraps createComment with state)
  //                      ^isPending: true while the Server Action is in-flight

  return (
    <form action={action}>
      <textarea
        name="content"
        aria-invalid={!!state.errors?.content}
        aria-describedby="content-error"
        disabled={isPending}
      />

      {/* Display server-returned validation errors */}
      {state.errors?.content && (
        <p id="content-error" role="alert" className="field-error">
          {state.errors.content[0]}
        </p>
      )}

      {state.message && (
        <p role="status" className="form-message">
          {state.message}
        </p>
      )}

      <button type="submit" disabled={isPending}>
        {isPending ? 'Posting…' : 'Post Comment'}
      </button>
    </form>
  )
}

// ✅ Progressive enhancement — works with JS disabled
export function CommentForm() {
  return (
    <form action={createComment}> {/* Native HTML form action — works without JS */}
      <textarea name="content" required maxLength={1000} />
      <button type="submit">Post Comment</button>
    </form>
  )
}

// ❌ Broken progressive enhancement — requires JavaScript
export function CommentFormBroken() {
  const handleClick = async () => {
    // This is a JavaScript-only click handler — no native form POST fallback
    await createComment(new FormData())
  }
  return <button onClick={handleClick}>Post Comment</button>
}

'use client'
import { useOptimistic, useActionState } from 'react'

interface Comment {
  id: string
  content: string
  author: string
  pending?: boolean
}

export function CommentThread({
  comments,
  postId,
}: {
  comments: Comment[]
  postId: string
}) {
  const [optimisticComments, addOptimisticComment] = useOptimistic(
    comments,
    // Reducer: how to derive optimistic state from current committed state
    (currentComments: Comment[], newComment: Comment) => [
      ...currentComments,
      { ...newComment, pending: true }, // Mark as pending — show dim in UI
    ],
  )

  const [state, action, isPending] = useActionState(createComment, {})

  async function handleSubmit(formData: FormData) {
    // Apply optimistic update immediately — before the Server Action completes
    addOptimisticComment({
      id: `optimistic-${Date.now()}`,
      content: formData.get('content') as string,
      author: 'You',
    })
    await action(formData) // Call the actual Server Action
    // If the action fails, React automatically reverts to the committed state
  }

  return (
    <div>
      <ul>
        {optimisticComments.map(comment => (
          <li key={comment.id} style={{ opacity: comment.pending ? 0.6 : 1 }}>
            <strong>{comment.author}</strong>: {comment.content}
            {comment.pending && <span> (posting…)</span>}
          </li>
        ))}
      </ul>
      <form action={handleSubmit}>
        <textarea name="content" />
        <button type="submit" disabled={isPending}>Post</button>
      </form>
    </div>
  )
}

// ✅ Correct — Server Action in a dedicated "use server" module
// app/actions/comments.ts
'use server' // Module-level directive — all exports are Server Actions

export async function createComment(prevState: CommentFormState, formData: FormData) {
  // ... validated data, DB write, revalidation
}

export async function deleteComment(commentId: string) {
  // ...
}

// ✅ Client Component imports from the "use server" module
'use client'
import { createComment } from '@/app/actions/comments' // ✅ Allowed — dedicated module

export function CommentForm() {
  const [state, action] = useActionState(createComment, {})
  return <form action={action}>...</form>
}

// ❌ Broken — Server Action defined inside a Server Component file
// app/posts/[id]/page.tsx (a Server Component file — no 'use client')

async function createComment(formData: FormData) {
  'use server' // Function-level directive
  // ...
}

// This action can be passed as a prop to a Client Component — but it cannot be imported
// by a Client Component from this file. A Client Component importing this file would
// attempt to import a Server Component module, which the bundler forbids.