// ❌ Pages Router — 폼 1개에 파일 3개 + 보일러플레이트

// 📁 pages/api/posts.ts — API 라우트
import type { NextApiRequest, NextApiResponse } from 'next';

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  if (req.method !== 'POST') return res.status(405).end();
  const { title } = req.body;
  if (!title) return res.status(400).json({ error: '제목 필요' });
  try {
    const post = await db.post.create({ data: { title } });
    return res.status(200).json(post);
  } catch (e) {
    return res.status(500).json({ error: '저장 실패' });
  }
}

// 📁 components/PostForm.tsx — 클라이언트 폼
import { useState, type FormEvent } from 'react';
import { useRouter } from 'next/router';

export function PostForm() {
  const router = useRouter();
  const [title, setTitle] = useState('');
  const [pending, setPending] = useState(false);
  const [error, setError] = useState<string | null>(null);

  async function onSubmit(e: FormEvent) {
    e.preventDefault();
    setPending(true);
    setError(null);
    try {
      const res = await fetch('/api/posts', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ title }),
      });
      if (!res.ok) {
        const { error } = await res.json();
        throw new Error(error);
      }
      setTitle('');
      router.refresh();  // 목록 새로고침
    } catch (e) {
      setError(e instanceof Error ? e.message : '알 수 없는 에러');
    } finally {
      setPending(false);
    }
  }

  return (
    <form onSubmit={onSubmit}>
      <input value={title} onChange={(e) => setTitle(e.target.value)} required />
      <button disabled={pending}>{pending ? '저장 중...' : '저장'}</button>
      {error && <p>{error}</p>}
    </form>
  );
}

// 단점:
// - 파일 2개 + 60줄
// - 로딩·에러·캐시 무효화 손수
// - JS 안 켜진 환경에서 동작 X (onSubmit preventDefault)
// - 타입 안전성: API request/response 양쪽에 인터페이스 중복 정의

// ✅ App Router — Server Action + useActionState

// 📁 app/posts/actions.ts — Server Action 들
'use server';

import { revalidatePath } from 'next/cache';
import { redirect } from 'next/navigation';

export type FormState = {
  error: string | null;
  success: boolean;
};

export async function createPost(
  prevState: FormState,
  formData: FormData,
): Promise<FormState> {
  const title = (formData.get('title') as string)?.trim();
  if (!title) return { error: '제목이 비었습니다', success: false };

  try {
    await db.post.create({ data: { title } });
  } catch (e) {
    return { error: '저장 실패', success: false };
  }

  revalidatePath('/posts');           // 목록 캐시 무효화
  return { error: null, success: true };
}

export async function deletePost(id: number): Promise<void> {
  'use server';
  await db.post.delete({ where: { id } });
  revalidatePath('/posts');
}

// 📁 app/posts/PostForm.tsx — Client (form UX)
'use client';
import { useActionState } from 'react';
import { useFormStatus } from 'react-dom';
import { createPost, type FormState } from './actions';

const initialState: FormState = { error: null, success: false };

export function PostForm() {
  const [state, formAction] = useActionState(createPost, initialState);

  return (
    <form action={formAction}>
      <input name="title" required placeholder="제목" />
      <SubmitButton />
      {state.error && <p className="text-red-500">{state.error}</p>}
      {state.success && <p className="text-green-500">저장됨!</p>}
    </form>
  );
}

// 자식 컴포넌트에서 부모 form 의 pending 상태 직접 읽기
function SubmitButton() {
  const { pending } = useFormStatus();
  return (
    <button disabled={pending}>
      {pending ? '저장 중...' : '저장'}
    </button>
  );
}

// 📁 app/posts/page.tsx — Server Component
import { PostForm } from './PostForm';
import { deletePost } from './actions';

export default async function Posts() {
  const posts = await db.post.findMany({ orderBy: { id: 'desc' } });
  return (
    <div>
      <PostForm />
      <ul>
        {posts.map((p) => (
          <li key={p.id}>
            {p.title}
            {/* Server Action 을 form action 으로 직접 — JS 없어도 작동 */}
            <form action={deletePost.bind(null, p.id)}>
              <button>삭제</button>
            </form>
          </li>
        ))}
      </ul>
    </div>
  );
}

// 장점:
// - 파일 1개 + 함수 1개
// - 캐시 무효화 1줄 (revalidatePath)
// - JS 안 켜진 환경에서도 폼 제출 동작 (Progressive Enhancement)
// - 타입: action 의 시그니처가 곧 계약 — 클라이언트·서버 양쪽 자동 추론