// ==========================================
// 📂 app/page.tsx
// 서버 액션(Server Actions)을 사용한 게시글 작성
// ==========================================
import { revalidatePath } from 'next/cache';

// 1️⃣ 데이터베이스에 접근하는 마법의 서버 함수 (API 라우트 불필요!)
async function createPost(formData: FormData) {
  "use server"; // 이 함수는 절대로 브라우저로 전송되지 않고 서버에서만 실행됩니다!

  // 폼에서 전송된 데이터 추출
  const title = formData.get('title') as string;
  const content = formData.get('content') as string;

  // 바로 데이터베이스에 저장해버림 (완벽한 보안)
  await db.post.create({
    data: { title, content }
  });

  // 2️⃣ 저장이 완료되면 '/posts' 경로의 캐시를 박살내고 화면을 최신화!
  revalidatePath('/posts');
}

export default function ServerActionDemo() {
  return (
    <div className="p-8 max-w-xl mx-auto border rounded-xl bg-white shadow-sm mt-10">
      <h2 className="text-2xl font-bold mb-6 text-gray-800">새 글 작성</h2>
      
      {/* 3️⃣ 기존의 onSubmit, e.preventDefault(), fetch()... 전부 버리세요! 
          그냥 action 속성에 함수만 넘겨주면 Next.js가 다 알아서 처리합니다. */}
      <form action={createPost} className="space-y-4">
        
        <div>
          <label className="block text-sm font-semibold text-gray-700 mb-1">제목</label>
          <input 
            type="text" 
            name="title" // name 속성이 서버 액션 formData의 Key가 됩니다.
            required 
            className="w-full border p-2 rounded-lg"
          />
        </div>
        
        <div>
          <label className="block text-sm font-semibold text-gray-700 mb-1">내용</label>
          <textarea 
            name="content" 
            required 
            className="w-full border p-2 rounded-lg h-32"
          />
        </div>
        
        <button 
          type="submit" 
          className="w-full bg-blue-600 text-white font-bold py-3 rounded-lg hover:bg-blue-700 transition"
        >
          저장하기
        </button>
      </form>
    </div>
  );
}