// middleware.ts - Next.js Middleware によるルートガード
import { NextRequest, NextResponse } from 'next/server';
import { auth } from '@/auth';
 
// 保護ルートの定義（パス → 許可ロール）
const protectedRoutes: Record<string, string[]> = {
  '/dashboard': ['viewer', 'editor', 'admin'],
  '/articles/new': ['editor', 'admin'],
  '/articles/edit': ['editor', 'admin'],
  '/admin': ['admin'],
  '/settings': ['editor', 'admin'],
  '/billing': ['admin'],
};
 
// 公開ルート（認証不要）
const publicRoutes = new Set([
  '/',
  '/login',
  '/register',
  '/forgot-password',
  '/reset-password',
  '/verify-email',
  '/about',
  '/pricing',
]);
 
export default auth((request) => {
  const { pathname } = request.nextUrl;
  const session = request.auth;
 
  // 静的ファイルと API ルートはスキップ
  if (
    pathname.startsWith('/_next') ||
    pathname.startsWith('/api/') ||
    pathname.includes('.')
  ) {
    return NextResponse.next();
  }
 
  // 公開ルートはそのまま
  if (publicRoutes.has(pathname)) {
    // ログイン済みユーザーが /login にアクセスした場合はリダイレクト
    if (session && pathname === '/login') {
      return NextResponse.redirect(new URL('/dashboard', request.url));
    }
    return NextResponse.next();
  }
 
  // 認証チェック
  if (!session) {
    const loginUrl = new URL('/login', request.url);
    loginUrl.searchParams.set('callbackUrl', pathname);
    return NextResponse.redirect(loginUrl);
  }
 
  // 保護ルートのロールチェック
  const matchedRoute = Object.keys(protectedRoutes).find(
    (route) => pathname.startsWith(route)
  );
 
  if (matchedRoute) {
    const allowedRoles = protectedRoutes[matchedRoute];
    const userRole = session.user?.role;
 
    if (!userRole || !allowedRoles.includes(userRole)) {
      // 権限不足: 403 ページにリダイレクト
      return NextResponse.redirect(new URL('/unauthorized', request.url));
    }
  }
 
  return NextResponse.next();
});
 
export const config = {
  matcher: [
    // 静的ファイルと内部パスを除外
    '/((?!_next/static|_next/image|favicon.ico).*)',
  ],
};

// 動的ルートでのリソースレベル認可
// middleware だけでは不十分な場合 → ページコンポーネントで追加チェック
 
// app/articles/[id]/edit/page.tsx
import { auth } from '@/auth';
import { redirect, notFound } from 'next/navigation';
 
export default async function EditArticlePage({
  params,
}: {
  params: { id: string };
}) {
  const session = await auth();
  if (!session) redirect('/login');
 
  // 記事の取得
  const article = await prisma.article.findUnique({
    where: { id: params.id },
  });
 
  if (!article) notFound();
 
  // リソースレベルの認可チェック
  const canEdit =
    session.user.role === 'admin' ||
    article.authorId === session.user.id;
 
  if (!canEdit) {
    redirect('/unauthorized');
  }
 
  return <ArticleEditor article={article} />;
}

// React Router v6 でのルートガード（SPA 向け）
 
import { Navigate, Outlet, useLocation } from 'react-router-dom';
import { useAuth } from '@/hooks/useAuth';
 
// 基本のルートガード
function ProtectedRoute({
  children,
  requiredRole,
  requiredPermission,
  fallback,
}: {
  children?: React.ReactNode;
  requiredRole?: string[];
  requiredPermission?: string;
  fallback?: React.ReactNode;
}) {
  const { user, isLoading, can } = useAuth();
  const location = useLocation();
 
  // ローディング中はスケルトンを表示
  if (isLoading) {
    return fallback ?? <FullPageSkeleton />;
  }
 
  // 未認証 → ログインページにリダイレクト
  if (!user) {
    return (
      <Navigate
        to="/login"
        state={{ from: location.pathname }}
        replace
      />
    );
  }
 
  // ロールチェック
  if (requiredRole && !requiredRole.includes(user.role)) {
    return <Navigate to="/unauthorized" replace />;
  }
 
  // パーミッションチェック
  if (requiredPermission && !can(requiredPermission)) {
    return <Navigate to="/unauthorized" replace />;
  }
 
  return children ?? <Outlet />;
}
 
// 使用例: ルート定義
import { createBrowserRouter, RouterProvider } from 'react-router-dom';
 
const router = createBrowserRouter([
  // 公開ルート
  { path: '/login', element: <LoginPage /> },
  { path: '/register', element: <RegisterPage /> },
 
  // 認証必須ルート
  {
    element: <ProtectedRoute />,
    children: [
      { path: '/dashboard', element: <DashboardPage /> },
      { path: '/profile', element: <ProfilePage /> },
    ],
  },
 
  // エディター以上
  {
    element: <ProtectedRoute requiredRole={['editor', 'admin']} />,
    children: [
      { path: '/articles/new', element: <NewArticlePage /> },
      { path: '/articles/:id/edit', element: <EditArticlePage /> },
    ],
  },
 
  // 管理者のみ
  {
    element: <ProtectedRoute requiredRole={['admin']} />,
    children: [
      { path: '/admin', element: <AdminDashboard /> },
      { path: '/admin/users', element: <UserManagementPage /> },
      { path: '/admin/settings', element: <AdminSettingsPage /> },
    ],
  },
 
  // パーミッションベース
  {
    element: <ProtectedRoute requiredPermission="billing:manage" />,
    children: [
      { path: '/billing', element: <BillingPage /> },
    ],
  },
 
  // 404 / 403
  { path: '/unauthorized', element: <UnauthorizedPage /> },
  { path: '*', element: <NotFoundPage /> },
]);

// lib/auth-context.tsx - 権限コンテキストの完全実装
'use client';
 
import {
  createContext,
  useContext,
  useCallback,
  useMemo,
  type ReactNode,
} from 'react';
import { useSession } from 'next-auth/react';
import { useQuery } from '@tanstack/react-query';
 
// 権限の型定義
type Permission = string; // "resource:action" 形式
 
interface AuthContextValue {
  // ユーザー情報
  user: {
    id: string;
    name: string;
    email: string;
    role: string;
    image?: string;
  } | null;
 
  // 認証状態
  isAuthenticated: boolean;
  isLoading: boolean;
 
  // 権限
  permissions: Set<Permission>;
  permissionsLoading: boolean;
 
  // 権限チェック関数
  can: (action: string, resource?: string) => boolean;
  canAny: (permissions: string[]) => boolean;
  canAll: (permissions: string[]) => boolean;
 
  // ロールチェック
  hasRole: (role: string) => boolean;
  hasAnyRole: (roles: string[]) => boolean;
}
 
const AuthContext = createContext<AuthContextValue>({
  user: null,
  isAuthenticated: false,
  isLoading: true,
  permissions: new Set(),
  permissionsLoading: true,
  can: () => false,
  canAny: () => false,
  canAll: () => false,
  hasRole: () => false,
  hasAnyRole: () => false,
});
 
// 権限のフェッチ
async function fetchPermissions(): Promise<Set<Permission>> {
  const res = await fetch('/api/auth/permissions');
  if (!res.ok) throw new Error('Failed to fetch permissions');
  const data = await res.json();
  return new Set<Permission>(data.permissions);
}
 
export function AuthProvider({ children }: { children: ReactNode }) {
  const { data: session, status } = useSession();
  const isAuthenticated = status === 'authenticated';
 
  // 権限のフェッチ（React Query でキャッシュ管理）
  const {
    data: permissions = new Set<Permission>(),
    isLoading: permissionsLoading,
  } = useQuery({
    queryKey: ['permissions', session?.user?.id],
    queryFn: fetchPermissions,
    enabled: isAuthenticated,
    staleTime: 5 * 60 * 1000,   // 5 分間はキャッシュを使用
    gcTime: 30 * 60 * 1000,     // 30 分間メモリに保持
    refetchOnWindowFocus: false, // タブ切替時の再取得を防止
    retry: 2,
  });
 
  // 権限チェック: resource:action 形式
  const can = useCallback(
    (action: string, resource?: string): boolean => {
      if (!isAuthenticated) return false;
 
      // admin ロールは全権限を持つ
      if (session?.user?.role === 'admin') return true;
 
      const permission = resource ? `${resource}:${action}` : action;
      return permissions.has(permission);
    },
    [isAuthenticated, session?.user?.role, permissions]
  );
 
  // いずれかの権限を持っているか
  const canAny = useCallback(
    (perms: string[]): boolean => {
      return perms.some((p) => {
        const [resource, action] = p.split(':');
        return can(action, resource);
      });
    },
    [can]
  );
 
  // 全ての権限を持っているか
  const canAll = useCallback(
    (perms: string[]): boolean => {
      return perms.every((p) => {
        const [resource, action] = p.split(':');
        return can(action, resource);
      });
    },
    [can]
  );
 
  // ロールチェック
  const hasRole = useCallback(
    (role: string): boolean => {
      return session?.user?.role === role;
    },
    [session?.user?.role]
  );
 
  const hasAnyRole = useCallback(
    (roles: string[]): boolean => {
      return roles.includes(session?.user?.role ?? '');
    },
    [session?.user?.role]
  );
 
  const value = useMemo<AuthContextValue>(
    () => ({
      user: session?.user
        ? {
            id: session.user.id!,
            name: session.user.name!,
            email: session.user.email!,
            role: session.user.role as string,
            image: session.user.image ?? undefined,
          }
        : null,
      isAuthenticated,
      isLoading: status === 'loading',
      permissions,
      permissionsLoading,
      can,
      canAny,
      canAll,
      hasRole,
      hasAnyRole,
    }),
    [session, isAuthenticated, status, permissions, permissionsLoading,
     can, canAny, canAll, hasRole, hasAnyRole]
  );
 
  return (
    <AuthContext.Provider value={value}>
      {children}
    </AuthContext.Provider>
  );
}
 
export function useAuth(): AuthContextValue {
  const context = useContext(AuthContext);
  if (!context) {
    throw new Error('useAuth must be used within AuthProvider');
  }
  return context;
}

// app/api/auth/permissions/route.ts
import { auth } from '@/auth';
import { NextResponse } from 'next/server';
 
// ロールごとの権限マッピング
const rolePermissions: Record<string, string[]> = {
  viewer: [
    'articles:read',
    'comments:read',
    'comments:create',
    'profile:read',
    'profile:update',
  ],
  editor: [
    'articles:read',
    'articles:create',
    'articles:update',
    'articles:publish',
    'comments:read',
    'comments:create',
    'comments:update',
    'comments:delete',
    'media:upload',
    'profile:read',
    'profile:update',
  ],
  admin: [
    'admin', // 特殊権限: 全権限を包含
  ],
};
 
export async function GET() {
  const session = await auth();
 
  if (!session?.user) {
    return NextResponse.json({ permissions: [] }, { status: 401 });
  }
 
  const role = session.user.role as string;
  const permissions = rolePermissions[role] ?? [];
 
  // ユーザー固有の追加権限（DB から取得する場合）
  // const userPermissions = await prisma.userPermission.findMany({
  //   where: { userId: session.user.id },
  //   select: { permission: true },
  // });
  // const extraPermissions = userPermissions.map(p => p.permission);
 
  return NextResponse.json({
    permissions: [...permissions],
    role,
  });
}

// components/authorized.tsx - 宣言的な権限チェックコンポーネント
'use client';
 
import { useAuth } from '@/lib/auth-context';
import type { ReactNode } from 'react';
 
interface AuthorizedProps {
  // 単一権限チェック
  permission?: string;
  // 複数権限（いずれか）
  anyPermission?: string[];
  // 複数権限（全て）
  allPermissions?: string[];
  // ロールチェック
  role?: string;
  anyRole?: string[];
  // 権限がない場合の表示
  fallback?: ReactNode;
  // 権限がない場合にdisabledで表示するか
  showDisabled?: boolean;
  // 子要素
  children: ReactNode;
}
 
export function Authorized({
  permission,
  anyPermission,
  allPermissions,
  role,
  anyRole,
  fallback = null,
  showDisabled = false,
  children,
}: AuthorizedProps) {
  const { can, canAny, canAll, hasRole, hasAnyRole, permissionsLoading } = useAuth();
 
  // 権限ロード中は何も表示しない（ちらつき防止）
  if (permissionsLoading) return null;
 
  let authorized = true;
 
  // 権限チェック
  if (permission) {
    const [resource, action] = permission.split(':');
    authorized = can(action, resource);
  }
 
  if (anyPermission) {
    authorized = canAny(anyPermission);
  }
 
  if (allPermissions) {
    authorized = canAll(allPermissions);
  }
 
  // ロールチェック
  if (role) {
    authorized = hasRole(role);
  }
 
  if (anyRole) {
    authorized = hasAnyRole(anyRole);
  }
 
  if (!authorized) {
    if (showDisabled) {
      // disabled 状態で表示
      return (
        <div className="opacity-50 pointer-events-none" aria-disabled="true">
          {children}
        </div>
      );
    }
    return <>{fallback}</>;
  }
 
  return <>{children}</>;
}
 
// 使用例
function ArticleCard({ article }: { article: Article }) {
  return (
    <div className="border rounded-lg p-4">
      <h2 className="text-xl font-bold">{article.title}</h2>
      <p className="text-gray-600 mt-2">{article.excerpt}</p>
 
      <div className="flex gap-2 mt-4">
        {/* 閲覧権限のある人だけに表示 */}
        <Authorized permission="articles:update">
          <Link href={`/articles/${article.id}/edit`} className="btn-secondary">
            編集
          </Link>
        </Authorized>
 
        {/* 削除権限: 無効化状態で表示 */}
        <Authorized
          permission="articles:delete"
          showDisabled
          fallback={
            <button disabled className="btn-danger opacity-50" title="削除権限がありません">
              削除
            </button>
          }
        >
          <button
            className="btn-danger"
            onClick={() => deleteArticle(article.id)}
          >
            削除
          </button>
        </Authorized>
 
        {/* 公開権限 */}
        <Authorized permission="articles:publish">
          {article.status === 'draft' && (
            <button
              className="btn-primary"
              onClick={() => publishArticle(article.id)}
            >
              公開
            </button>
          )}
        </Authorized>
 
        {/* 管理者のみ */}
        <Authorized role="admin">
          <button
            className="btn-outline"
            onClick={() => viewAuditLog(article.id)}
          >
            監査ログ
          </button>
        </Authorized>
      </div>
    </div>
  );
}

// hooks/useAuthorized.ts - フックとしての権限チェック
'use client';
 
import { useAuth } from '@/lib/auth-context';
import { useMemo } from 'react';
 
interface UseAuthorizedOptions {
  permission?: string;
  anyPermission?: string[];
  allPermissions?: string[];
  role?: string;
  anyRole?: string[];
}
 
interface UseAuthorizedResult {
  authorized: boolean;
  loading: boolean;
}
 
export function useAuthorized(options: UseAuthorizedOptions): UseAuthorizedResult {
  const { can, canAny, canAll, hasRole, hasAnyRole, permissionsLoading } = useAuth();
 
  const authorized = useMemo(() => {
    if (permissionsLoading) return false;
 
    if (options.permission) {
      const [resource, action] = options.permission.split(':');
      if (!can(action, resource)) return false;
    }
 
    if (options.anyPermission) {
      if (!canAny(options.anyPermission)) return false;
    }
 
    if (options.allPermissions) {
      if (!canAll(options.allPermissions)) return false;
    }
 
    if (options.role) {
      if (!hasRole(options.role)) return false;
    }
 
    if (options.anyRole) {
      if (!hasAnyRole(options.anyRole)) return false;
    }
 
    return true;
  }, [options, can, canAny, canAll, hasRole, hasAnyRole, permissionsLoading]);
 
  return {
    authorized,
    loading: permissionsLoading,
  };
}
 
// 使用例
function ArticleActions({ article }: { article: Article }) {
  const { authorized: canEdit } = useAuthorized({ permission: 'articles:update' });
  const { authorized: canDelete } = useAuthorized({ permission: 'articles:delete' });
  const { authorized: isAdmin } = useAuthorized({ role: 'admin' });
 
  return (
    <div className="flex gap-2">
      {canEdit && <EditButton articleId={article.id} />}
      {canDelete && <DeleteButton articleId={article.id} />}
      {isAdmin && <AdminActions articleId={article.id} />}
    </div>
  );
}

// lib/navigation.ts - ナビゲーション項目の定義
import {
  HomeIcon,
  DocumentIcon,
  UsersIcon,
  CogIcon,
  CreditCardIcon,
  ChartBarIcon,
  ShieldCheckIcon,
} from '@heroicons/react/24/outline';
 
export interface NavItem {
  label: string;
  href: string;
  icon: React.ComponentType<{ className?: string }>;
  permission?: string;   // 必要な権限
  role?: string;         // 必要なロール
  badge?: string;        // バッジ表示
  children?: NavItem[];
}
 
export const navItems: NavItem[] = [
  {
    label: 'ダッシュボード',
    href: '/dashboard',
    icon: HomeIcon,
    // 全ユーザーがアクセス可能
  },
  {
    label: '記事',
    href: '/articles',
    icon: DocumentIcon,
    permission: 'articles:read',
    children: [
      { label: '一覧', href: '/articles', icon: DocumentIcon },
      { label: '新規作成', href: '/articles/new', icon: DocumentIcon, permission: 'articles:create' },
      { label: '下書き', href: '/articles/drafts', icon: DocumentIcon, permission: 'articles:update' },
    ],
  },
  {
    label: 'ユーザー管理',
    href: '/admin/users',
    icon: UsersIcon,
    permission: 'users:read',
  },
  {
    label: '分析',
    href: '/analytics',
    icon: ChartBarIcon,
    permission: 'analytics:read',
  },
  {
    label: '設定',
    href: '/settings',
    icon: CogIcon,
    children: [
      { label: '一般', href: '/settings/general', icon: CogIcon },
      { label: '請求', href: '/settings/billing', icon: CreditCardIcon, permission: 'billing:manage' },
      { label: 'メンバー', href: '/settings/members', icon: UsersIcon, permission: 'users:read' },
      { label: 'セキュリティ', href: '/settings/security', icon: ShieldCheckIcon, role: 'admin' },
    ],
  },
];

// components/sidebar.tsx - 権限ベースのサイドバー
'use client';
 
import { useAuth } from '@/lib/auth-context';
import { navItems, type NavItem } from '@/lib/navigation';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { useState } from 'react';
 
export function Sidebar() {
  const { can, hasRole, permissionsLoading } = useAuth();
  const pathname = usePathname();
 
  // 権限に基づいてナビゲーション項目をフィルタリング
  const filterNavItems = (items: NavItem[]): NavItem[] => {
    return items
      .filter((item) => {
        // 権限チェック
        if (item.permission) {
          const [resource, action] = item.permission.split(':');
          if (!can(action, resource)) return false;
        }
        // ロールチェック
        if (item.role && !hasRole(item.role)) return false;
        return true;
      })
      .map((item) => ({
        ...item,
        // 子項目も再帰的にフィルタリング
        children: item.children ? filterNavItems(item.children) : undefined,
      }))
      // 子項目がすべてフィルタリングされた親は非表示
      .filter((item) => {
        if (item.children && item.children.length === 0) return false;
        return true;
      });
  };
 
  // 権限ロード中はスケルトン表示
  if (permissionsLoading) {
    return <SidebarSkeleton />;
  }
 
  const visibleItems = filterNavItems(navItems);
 
  return (
    <nav className="w-64 bg-gray-900 text-white min-h-screen p-4">
      {visibleItems.map((item) => (
        <NavLink key={item.href} item={item} pathname={pathname} />
      ))}
    </nav>
  );
}
 
function NavLink({ item, pathname }: { item: NavItem; pathname: string }) {
  const [isOpen, setIsOpen] = useState(
    item.children?.some((child) => pathname.startsWith(child.href)) ?? false
  );
  const isActive = pathname === item.href;
  const Icon = item.icon;
 
  if (item.children && item.children.length > 0) {
    return (
      <div>
        <button
          onClick={() => setIsOpen(!isOpen)}
          className={`w-full flex items-center gap-3 px-3 py-2 rounded-lg
            hover:bg-gray-800 transition-colors ${
              isActive ? 'bg-gray-800' : ''
            }`}
        >
          <Icon className="w-5 h-5" />
          <span className="flex-1 text-left">{item.label}</span>
          <ChevronIcon className={`w-4 h-4 transition-transform ${isOpen ? 'rotate-90' : ''}`} />
        </button>
        {isOpen && (
          <div className="ml-4 mt-1 space-y-1">
            {item.children.map((child) => (
              <NavLink key={child.href} item={child} pathname={pathname} />
            ))}
          </div>
        )}
      </div>
    );
  }
 
  return (
    <Link
      href={item.href}
      className={`flex items-center gap-3 px-3 py-2 rounded-lg
        hover:bg-gray-800 transition-colors ${
          isActive ? 'bg-gray-800 text-white' : 'text-gray-300'
        }`}
    >
      <Icon className="w-5 h-5" />
      <span>{item.label}</span>
      {item.badge && (
        <span className="ml-auto bg-blue-500 text-xs px-2 py-0.5 rounded-full">
          {item.badge}
        </span>
      )}
    </Link>
  );
}

// Next.js Server Components での認可（推奨）
// サーバーサイドで権限チェック → クライアントに不要な情報を送らない
 
// app/articles/[id]/page.tsx
import { auth } from '@/auth';
import { redirect, notFound } from 'next/navigation';
 
export default async function ArticlePage({
  params,
}: {
  params: { id: string };
}) {
  const session = await auth();
  if (!session) redirect('/login');
 
  // 記事データの取得
  const article = await prisma.article.findUnique({
    where: { id: params.id },
    include: {
      author: { select: { name: true, image: true } },
      comments: {
        orderBy: { createdAt: 'desc' },
        take: 20,
      },
    },
  });
 
  if (!article) notFound();
 
  // サーバーサイドで権限を判定
  const permissions = {
    canEdit:
      session.user.role === 'admin' ||
      article.authorId === session.user.id,
    canPublish:
      ['admin', 'editor'].includes(session.user.role) &&
      article.status === 'draft',
    canDelete:
      session.user.role === 'admin',
    canModerateComments:
      ['admin', 'moderator'].includes(session.user.role),
    canViewAnalytics:
      session.user.role === 'admin' ||
      article.authorId === session.user.id,
  };
 
  return (
    <div className="max-w-4xl mx-auto">
      {/* 記事コンテンツ（Server Component） */}
      <article>
        <h1 className="text-3xl font-bold">{article.title}</h1>
        <AuthorInfo author={article.author} />
        <ArticleContent content={article.content} />
      </article>
 
      {/* アクションバー（Client Component、権限は props で渡す） */}
      <ArticleActions
        articleId={article.id}
        status={article.status}
        {...permissions}
      />
 
      {/* コメントセクション */}
      <CommentSection
        comments={article.comments}
        canModerate={permissions.canModerateComments}
      />
 
      {/* 分析データ（権限がある場合のみサーバーで取得） */}
      {permissions.canViewAnalytics && (
        <ArticleAnalytics articleId={article.id} />
      )}
    </div>
  );
}

// クライアントコンポーネント（権限は props で受け取る）
// サーバーで判定済みの権限フラグを使用
'use client';
 
interface ArticleActionsProps {
  articleId: string;
  status: string;
  canEdit: boolean;
  canPublish: boolean;
  canDelete: boolean;
}
 
function ArticleActions({
  articleId,
  status,
  canEdit,
  canPublish,
  canDelete,
}: ArticleActionsProps) {
  return (
    <div className="flex gap-2 border-t border-b py-4 my-8">
      {canEdit && (
        <Link href={`/articles/${articleId}/edit`} className="btn-secondary">
          編集
        </Link>
      )}
      {canPublish && (
        <button
          className="btn-primary"
          onClick={() => publishArticle(articleId)}
        >
          公開
        </button>
      )}
      {canDelete && (
        <button
          className="btn-danger"
          onClick={() => {
            if (confirm('本当に削除しますか？')) {
              deleteArticle(articleId);
            }
          }}
        >
          削除
        </button>
      )}
    </div>
  );
}

// lib/permissions-provider.tsx
'use client';
 
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
import { useState, type ReactNode } from 'react';
 
export function PermissionsProvider({ children }: { children: ReactNode }) {
  const [queryClient] = useState(
    () =>
      new QueryClient({
        defaultOptions: {
          queries: {
            staleTime: 5 * 60 * 1000, // 5分
            gcTime: 30 * 60 * 1000,   // 30分
          },
        },
      })
  );
 
  return (
    <QueryClientProvider client={queryClient}>
      {children}
      {process.env.NODE_ENV === 'development' && (
        <ReactQueryDevtools initialIsOpen={false} />
      )}
    </QueryClientProvider>
  );
}

// hooks/usePermissions.ts
'use client';
 
import { useQuery, useQueryClient } from '@tanstack/react-query';
import { useSession } from 'next-auth/react';
import { useCallback } from 'react';
 
export function usePermissions() {
  const { data: session } = useSession();
 
  return useQuery({
    queryKey: ['permissions'],
    queryFn: async (): Promise<Set<string>> => {
      const res = await fetch('/api/auth/permissions');
      if (!res.ok) throw new Error('Failed to fetch permissions');
      const data = await res.json();
      return new Set<string>(data.permissions);
    },
    enabled: !!session,
    staleTime: 5 * 60 * 1000,
    gcTime: 30 * 60 * 1000,
    refetchOnWindowFocus: false,
    // ログインイベントで自動更新される
  });
}
 
// 権限の手動更新（ロール変更時、権限変更時）
export function useInvalidatePermissions() {
  const queryClient = useQueryClient();
 
  return useCallback(() => {
    queryClient.invalidateQueries({ queryKey: ['permissions'] });
  }, [queryClient]);
}
 
// 権限のプリフェッチ（ログイン直後に呼ぶ）
export function usePrefetchPermissions() {
  const queryClient = useQueryClient();
 
  return useCallback(() => {
    queryClient.prefetchQuery({
      queryKey: ['permissions'],
      queryFn: async () => {
        const res = await fetch('/api/auth/permissions');
        const data = await res.json();
        return new Set<string>(data.permissions);
      },
    });
  }, [queryClient]);
}

// hooks/usePermissionsSync.ts
// WebSocket または Server-Sent Events で権限変更を検知
 
'use client';
 
import { useEffect } from 'react';
import { useInvalidatePermissions } from './usePermissions';
import { useSession } from 'next-auth/react';
 
export function usePermissionsSync() {
  const invalidatePermissions = useInvalidatePermissions();
  const { data: session } = useSession();
 
  useEffect(() => {
    if (!session?.user?.id) return;
 
    // Server-Sent Events で権限変更を監視
    const eventSource = new EventSource(
      `/api/auth/permissions/stream?userId=${session.user.id}`
    );
 
    eventSource.addEventListener('permissions_changed', () => {
      // 権限キャッシュを無効化して再取得
      invalidatePermissions();
    });
 
    eventSource.addEventListener('role_changed', () => {
      invalidatePermissions();
    });
 
    eventSource.onerror = () => {
      // 接続エラー時は 5 秒後に再接続
      eventSource.close();
      setTimeout(() => {
        // 再接続ロジック（実装は省略）
      }, 5000);
    };
 
    return () => {
      eventSource.close();
    };
  }, [session?.user?.id, invalidatePermissions]);
}

// lib/ability.ts - CASL による権限定義
import { AbilityBuilder, createMongoAbility, MongoAbility } from '@casl/ability';
 
// アクションの型定義
type Actions = 'create' | 'read' | 'update' | 'delete' | 'publish' | 'manage';
 
// サブジェクト（リソース）の型定義
type Subjects =
  | 'Article'
  | 'Comment'
  | 'User'
  | 'Organization'
  | 'all';
 
export type AppAbility = MongoAbility<[Actions, Subjects]>;
 
// ロールに基づく Ability の構築
export function defineAbilityFor(user: {
  id: string;
  role: string;
  organizationId?: string;
}): AppAbility {
  const { can, cannot, build } = new AbilityBuilder<AppAbility>(createMongoAbility);
 
  switch (user.role) {
    case 'admin':
      // 管理者は全権限
      can('manage', 'all');
      break;
 
    case 'editor':
      can('read', 'Article');
      can('create', 'Article');
      // 自分の記事のみ編集・削除可能
      can('update', 'Article', { authorId: user.id });
      can('delete', 'Article', { authorId: user.id });
      can('publish', 'Article', { authorId: user.id });
      // コメント
      can('read', 'Comment');
      can('create', 'Comment');
      can('update', 'Comment', { authorId: user.id });
      can('delete', 'Comment', { authorId: user.id });
      break;
 
    case 'viewer':
      can('read', 'Article');
      can('read', 'Comment');
      can('create', 'Comment');
      can('update', 'Comment', { authorId: user.id });
      // 公開記事のみ
      cannot('read', 'Article', { status: 'draft' });
      break;
 
    default:
      // ゲスト: 公開記事の閲覧のみ
      can('read', 'Article', { status: 'published' });
  }
 
  return build();
}

// components/can.tsx - CASL の React コンポーネント
'use client';
 
import { createContext, useContext, type ReactNode } from 'react';
import { createContextualCan } from '@casl/react';
import { type AppAbility } from '@/lib/ability';
 
// Ability コンテキスト
const AbilityContext = createContext<AppAbility>(undefined!);
 
export function AbilityProvider({
  ability,
  children,
}: {
  ability: AppAbility;
  children: ReactNode;
}) {
  return (
    <AbilityContext.Provider value={ability}>
      {children}
    </AbilityContext.Provider>
  );
}
 
export function useAbility(): AppAbility {
  return useContext(AbilityContext);
}
 
// CASL の Can コンポーネント
export const Can = createContextualCan(AbilityContext.Consumer);
 
// 使用例
function ArticleActions({ article }: { article: Article }) {
  return (
    <div className="flex gap-2">
      <Can I="update" this={article}>
        <Link href={`/articles/${article.id}/edit`}>編集</Link>
      </Can>
 
      <Can I="delete" this={article}>
        <button onClick={() => deleteArticle(article.id)}>削除</button>
      </Can>
 
      <Can I="publish" this={article}>
        {article.status === 'draft' && (
          <button onClick={() => publishArticle(article.id)}>公開</button>
        )}
      </Can>
 
      {/* not で否定 */}
      <Can not I="update" this={article}>
        <p className="text-gray-500">この記事を編集する権限がありません</p>
      </Can>
    </div>
  );
}

// app/unauthorized/page.tsx - 403 Unauthorized ページ
import { auth } from '@/auth';
import Link from 'next/link';
 
export default async function UnauthorizedPage() {
  const session = await auth();
 
  return (
    <div className="min-h-screen flex items-center justify-center bg-gray-50">
      <div className="text-center max-w-md">
        <div className="text-6xl font-bold text-gray-300">403</div>
        <h1 className="text-2xl font-bold mt-4">アクセスが拒否されました</h1>
        <p className="text-gray-600 mt-2">
          このページにアクセスする権限がありません。
        </p>
 
        {session ? (
          <div className="mt-6 space-y-3">
            <p className="text-sm text-gray-500">
              ログイン中: {session.user?.email}
              （ロール: {session.user?.role}）
            </p>
            <div className="flex gap-3 justify-center">
              <Link href="/dashboard" className="btn-primary">
                ダッシュボードに戻る
              </Link>
              <Link href="/settings" className="btn-secondary">
                権限を確認
              </Link>
            </div>
          </div>
        ) : (
          <div className="mt-6">
            <Link href="/login" className="btn-primary">
              ログインする
            </Link>
          </div>
        )}
 
        <p className="text-xs text-gray-400 mt-8">
          この問題が続く場合は、管理者にお問い合わせください。
        </p>
      </div>
    </div>
  );
}

// ✗ 危険: フロントエンドのみで認可（バックエンドチェックなし）
function DeleteButton({ articleId }: { articleId: string }) {
  const { user } = useAuth();
 
  if (user?.role !== 'admin') return null; // これだけでは不十分！
 
  const handleDelete = async () => {
    // API 側で権限チェックがないと、直接 API を叩かれる
    await fetch(`/api/articles/${articleId}`, { method: 'DELETE' });
  };
 
  return <button onClick={handleDelete}>削除</button>;
}
 
// ✓ 正しい: フロントエンド + バックエンドの両方でチェック
// API 側:
// if (session.user.role !== 'admin') {
//   return NextResponse.json({ error: 'Forbidden' }, { status: 403 });
// }

// ✗ 問題: 権限をフロントエンドにハードコード
const ADMIN_EMAILS = ['admin@example.com', 'boss@example.com'];
 
function AdminPanel() {
  const { user } = useAuth();
  if (!ADMIN_EMAILS.includes(user?.email ?? '')) return null;
  return <AdminDashboard />;
}
 
// ✓ 正しい: サーバーから権限を取得
function AdminPanel() {
  const { hasRole } = useAuth();
  if (!hasRole('admin')) return null;
  return <AdminDashboard />;
}

// ✗ 問題: フロントとバックで異なるロジック
// フロントエンド: editor でも公開可能
const canPublish = hasRole('editor') || hasRole('admin');
 
// バックエンド: admin のみ公開可能
// if (user.role !== 'admin') return 403;
 
// → エディターが公開ボタンを押すと 403 エラー
// → UX が悪い（ボタンは見えるのにエラー）
 
// ✓ 正しい: 権限の判定ロジックを共有する
// 共通の権限ファイルを定義し、フロントとバックで共有
// または、権限 API からフラグを取得