// ❌ Pages Router — ページ全体を 'use client' にしたアンチパターン

// 📁 app/posts/page.tsx
'use client';
import { useState, useEffect } from 'react';

interface Post { id: number; title: string; body: string; }

export default function PostsPage() {
  const [posts, setPosts] = useState<Post[]>([]);
  const [liked, setLiked] = useState<Set<number>>(new Set());

  // クライアントでデータフェッチ — 点滅・SEO損失・バンドルが重い
  useEffect(() => {
    fetch('/api/posts').then(r => r.json()).then(setPosts);
  }, []);

  const toggle = (id: number) => {
    const n = new Set(liked);
    n.has(id) ? n.delete(id) : n.add(id);
    setLiked(n);
  };

  return (
    <ul>
      {posts.map(p => (
        <li key={p.id}>
          <h2>{p.title}</h2>
          <p>{p.body}</p>
          <button onClick={() => toggle(p.id)}>
            {liked.has(p.id) ? '❤️' : '🤍'}
          </button>
        </li>
      ))}
    </ul>
  );
}

// 欠点:
// - posts データ・レンダーコードすべてクライアントバンドルに含まれる
// - 初期ページ = 空白画面 → useEffect 後に点滅 → 表示
// - SEO損失 (検索エンジンが空白のHTMLしか見ない)
// - DB直接アクセス不可 → 必ず /api/posts を経由する必要がある

// ✅ 境界をリーフまで下げる — Server がデータ、Client はトグルのみ

// 📁 app/posts/page.tsx (Server)
import { LikeButton } from './LikeButton';

interface Post { id: number; title: string; body: string; }

// コンポーネント自体が async — DB直接
export default async function PostsPage() {
  const posts: Post[] = await db.post.findMany();

  return (
    <ul>
      {posts.map(p => (
        <li key={p.id}>
          <h2>{p.title}</h2>
          <p>{p.body}</p>
          <LikeButton postId={p.id} />  {/* Client leaf */}
        </li>
      ))}
    </ul>
  );
}

// 📁 app/posts/LikeButton.tsx (Client)
'use client';
import { useState } from 'react';

export function LikeButton({ postId }: { postId: number }) {
  const [liked, setLiked] = useState(false);
  return (
    <button onClick={() => setLiked(!liked)}>
      {liked ? '❤️' : '🤍'}
    </button>
  );
}

// 📁 app/dashboard/page.tsx — children で Server コンテンツを挟む
import { ClientShell } from './ClientShell';
import { ServerStats } from './ServerStats';

export default function Dashboard() {
  return (
    <ClientShell>
      <ServerStats />  {/* Server コンポーネントを children で — OK */}
    </ClientShell>
  );
}

// 📁 app/dashboard/ClientShell.tsx
'use client';
import { useState } from 'react';

export function ClientShell({ children }: { children: React.ReactNode }) {
  const [open, setOpen] = useState(true);
  return (
    <div>
      <button onClick={() => setOpen(!open)}>トグル</button>
      {open && children}  {/* Server JSX がそのままレンダーされる */}
    </div>
  );
}

// 利点:
// - PostsPage のコードはクライアントバンドルに ❌ — HTML のみ送信
// - LikeButton のみ小さなチャンクで分離され hydration
// - SEO完璧 (サーバーですべての posts がレンダーされる)
// - DB直接アクセス可能