// ❌ Pages Router — コンポーネントを手動で作成 + 条件付きレンダリング

// 📁 components/Loading.tsx
export function Loading() {
  return <div className="animate-pulse">読み込み中...</div>;
}

// 📁 components/ErrorBoundary.tsx
import { Component, type ReactNode } from 'react';

class ErrorBoundary extends Component<{ children: ReactNode }, { error: Error | null }> {
  state = { error: null as Error | null };
  static getDerivedStateFromError(error: Error) { return { error }; }
  render() {
    if (this.state.error) {
      return (
        <div>
          <h2>エラー: {this.state.error.message}</h2>
          <button onClick={() => this.setState({ error: null })}>再試行</button>
        </div>
      );
    }
    return this.props.children;
  }
}
export { ErrorBoundary };

// 📁 pages/posts/index.tsx
import { useState, useEffect } from 'react';
import { Loading } from '../../components/Loading';
import { ErrorBoundary } from '../../components/ErrorBoundary';

export default function PostsPage() {
  const [posts, setPosts] = useState(null);
  const [error, setError] = useState<Error | null>(null);

  useEffect(() => {
    fetch('/api/posts')
      .then(r => { if (!r.ok) throw new Error('失敗'); return r.json(); })
      .then(setPosts)
      .catch(setError);
  }, []);

  if (error) return <div>エラー: {error.message}</div>;
  if (!posts) return <Loading />;
  return <ul>{posts.map(p => <li key={p.id}>{p.title}</li>)}</ul>;
}

// 📁 pages/_error.tsx — グローバルエラー (Pages Router 専用)
function Error({ statusCode }: { statusCode: number }) {
  return <p>{statusCode ? `サーバー ${statusCode} エラー` : 'クライアントエラー'}</p>;
}
Error.getInitialProps = ({ res, err }) => {
  const statusCode = res?.statusCode ?? err?.statusCode ?? 404;
  return { statusCode };
};
export default Error;

// 📁 pages/404.tsx — 404ページ (Pages Router 専用)
export default function Custom404() {
  return <h1>404 — 見つかりません</h1>;
}

// ✅ App Router — ファイル名だけで自動適用

// 📁 app/posts/page.tsx (Server Component)
interface Post { id: number; title: string; }

export default async function PostsPage() {
  const posts: Post[] = await fetch('https://api/posts', {
    next: { revalidate: 60 },
  }).then(r => {
    if (!r.ok) throw new Error('posts fetch 失敗');
    return r.json();
  });

  return <ul>{posts.map(p => <li key={p.id}>{p.title}</li>)}</ul>;
}

// 📁 app/posts/loading.tsx — 自動的に Suspense fallback
export default function Loading() {
  return (
    <div className="animate-pulse space-y-2">
      <div className="h-4 bg-gray-200 rounded" />
      <div className="h-4 bg-gray-200 rounded" />
      <div className="h-4 bg-gray-200 rounded w-2/3" />
    </div>
  );
}

// 📁 app/posts/error.tsx — 自動的に Error Boundary
'use client'; // ★ error は常に Client

export default function Error({
  error,
  reset,
}: {
  error: Error & { digest?: string };
  reset: () => void;
}) {
  return (
    <div>
      <h2>posts を読み込めませんでした</h2>
      <p className="text-gray-600">{error.message}</p>
      {error.digest && <p className="text-xs">エラー ID: {error.digest}</p>}
      <button onClick={() => reset()}>再試行</button>
    </div>
  );
}

// 📁 app/posts/[id]/page.tsx — 特定の記事ページ
import { notFound } from 'next/navigation';

export default async function PostPage({ params }: { params: { id: string } }) {
  const post = await db.post.findUnique({ where: { id: Number(params.id) } });
  if (!post) notFound(); // ★ これを呼び出すと not-found.tsx がレンダー
  return <article>{post.title}</article>;
}

// 📁 app/posts/[id]/not-found.tsx — 自動的に 404 UI
import Link from 'next/link';
export default function NotFound() {
  return (
    <div>
      <h2>お探しの記事はありません</h2>
      <Link href="/posts">← リストへ</Link>
    </div>
  );
}

// フォルダーツリー:
// app/posts/
// ├── page.tsx          ← リストページ
// ├── loading.tsx       ← リスト読み込み UI
// ├── error.tsx         ← リストエラー UI
// └── [id]/
//     ├── page.tsx      ← 詳細ページ
//     └── not-found.tsx ← 詳細 404 UI
// 登録・import コード 0行。ファイル名だけで動作。