// ❌ 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が有効でない環境では動作しない (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>
  );
}

// 子コンポーネントから親フォームの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のシグネチャがそのまま契約 — クライアント・サーバー両方で自動推論