実装フェーズ2：高度な機能

// frontend/src/components/kanban/KanbanBoard.tsx
import { DndContext, DragOverlay, closestCorners,
         PointerSensor, TouchSensor, useSensors, useSensor } from '@dnd-kit/core';
import { SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable';
import { useState } from 'react';
import { SortableColumn } from './SortableColumn';
import { TaskCard } from './TaskCard';
import { useTaskDragDrop } from '@/hooks/useTaskDragDrop';

const COLUMNS = [
  { id: 'todo', title: 'Todo', color: 'bg-gray-100' },
  { id: 'in_progress', title: 'In Progress', color: 'bg-blue-50' },
  { id: 'done', title: 'Done', color: 'bg-green-50' },
];

export function KanbanBoard({ projectId }: { projectId: string }) {
  const { tasks, handleDragStart, handleDragOver,
          handleDragEnd, activeTask } = useTaskDragDrop(projectId);

  // マウスとタッチの両方に対応
  const sensors = useSensors(
    useSensor(PointerSensor, {
      activationConstraint: { distance: 8 },
    }),
    useSensor(TouchSensor, {
      activationConstraint: { delay: 200, tolerance: 5 },
    }),
  );

  return (
    <DndContext
      sensors={sensors}
      collisionDetection={closestCorners}
      onDragStart={handleDragStart}
      onDragOver={handleDragOver}
      onDragEnd={handleDragEnd}
    >
      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
        {COLUMNS.map((column) => (
          <SortableColumn
            key={column.id}
            column={column}
            tasks={tasks.filter(t => t.status === column.id)}
          />
        ))}
      </div>

      {/* ドラッグ中のオーバーレイ表示 */}
      <DragOverlay>
        {activeTask ? <TaskCard task={activeTask} isDragging /> : null}
      </DragOverlay>
    </DndContext>
  );
}

// frontend/src/components/kanban/SortableTaskCard.tsx
import { useSortable } from '@dnd-kit/sortable';
import { CSS } from '@dnd-kit/utilities';
import { TaskCard } from './TaskCard';
import type { Task } from '@/types';

export function SortableTaskCard({ task }: { task: Task }) {
  const {
    attributes,
    listeners,
    setNodeRef,
    transform,
    transition,
    isDragging,
  } = useSortable({ id: task.id });

  const style = {
    transform: CSS.Transform.toString(transform),
    transition,
    opacity: isDragging ? 0.5 : 1,
  };

  return (
    <div ref={setNodeRef} style={style} {...attributes} {...listeners}>
      <TaskCard task={task} isDragging={isDragging} />
    </div>
  );
}

# backend/app/websocket/manager.py
from fastapi import WebSocket
from typing import Dict, Set
import json

class ConnectionManager:
    """プロジェクト単位のWebSocket接続を管理"""

    def __init__(self):
        # { project_id: { user_id: WebSocket } }
        self.rooms: Dict[str, Dict[str, WebSocket]] = {}

    async def connect(
        self, websocket: WebSocket,
        project_id: str, user_id: str
    ):
        await websocket.accept()
        if project_id not in self.rooms:
            self.rooms[project_id] = {}
        self.rooms[project_id][user_id] = websocket

        # 他のメンバーに参加を通知
        await self.broadcast(project_id, {
            "type": "user_joined",
            "payload": {"user_id": user_id},
        }, exclude=user_id)

    async def disconnect(self, project_id: str, user_id: str):
        if project_id in self.rooms:
            self.rooms[project_id].pop(user_id, None)
            if not self.rooms[project_id]:
                del self.rooms[project_id]

        # 他のメンバーに退出を通知
        await self.broadcast(project_id, {
            "type": "user_left",
            "payload": {"user_id": user_id},
        })

    async def broadcast(
        self, project_id: str,
        message: dict, exclude: str = None
    ):
        """プロジェクト内の全接続にメッセージを送信"""
        if project_id not in self.rooms:
            return
        for uid, ws in self.rooms[project_id].items():
            if uid != exclude:
                try:
                    await ws.send_json(message)
                except Exception:
                    # 送信失敗時は切断扱い
                    await self.disconnect(project_id, uid)

manager = ConnectionManager()

// frontend/src/hooks/useWebSocket.ts
import { useEffect, useRef, useCallback, useState } from 'react';
import { useQueryClient } from '@tanstack/react-query';

type ConnectionState = 'connecting' | 'connected' | 'disconnected';

export function useWebSocket(projectId: string, token: string) {
  const wsRef = useRef<WebSocket | null>(null);
  const queryClient = useQueryClient();
  const [state, setState] = useState<ConnectionState>('disconnected');
  const retryCount = useRef(0);

  const connect = useCallback(() => {
    const ws = new WebSocket(
      `ws://localhost:8000/ws/${projectId}?token=${token}`
    );

    ws.onopen = () => {
      setState('connected');
      retryCount.current = 0;
    };

    ws.onmessage = (event) => {
      const data = JSON.parse(event.data);

      // メッセージタイプに応じてキャッシュを無効化
      switch (data.type) {
        case 'task_created':
        case 'task_updated':
        case 'task_deleted':
          queryClient.invalidateQueries({
            queryKey: ['tasks', projectId],
          });
          break;
        case 'user_joined':
        case 'user_left':
          queryClient.invalidateQueries({
            queryKey: ['members', projectId],
          });
          break;
      }
    };

    ws.onclose = () => {
      setState('disconnected');
      // 指数バックオフで再接続
      const delay = Math.min(1000 * 2 ** retryCount.current, 30000);
      retryCount.current += 1;
      setTimeout(connect, delay);
    };

    wsRef.current = ws;
  }, [projectId, token, queryClient]);

  useEffect(() => {
    connect();
    return () => wsRef.current?.close();
  }, [connect]);

  return { state, ws: wsRef.current };
}

// frontend/src/hooks/useUpdateTask.ts
import { useMutation, useQueryClient } from '@tanstack/react-query';
import { api } from '@/lib/api';
import { toast } from '@/components/Toast';
import type { Task } from '@/types';

export function useUpdateTask(projectId: string) {
  const queryClient = useQueryClient();

  return useMutation({
    mutationFn: (data: { taskId: string; updates: Partial<Task> }) =>
      api.patch(`/tasks/${data.taskId}`, data.updates),

    // 楽観的更新：APIレスポンス前にキャッシュを更新
    onMutate: async (data) => {
      // 進行中のクエリをキャンセル（競合防止）
      await queryClient.cancelQueries({
        queryKey: ['tasks', projectId],
      });

      // 現在のキャッシュを保存（ロールバック用）
      const previousTasks = queryClient.getQueryData<Task[]>(
        ['tasks', projectId]
      );

      // キャッシュを即座に更新
      queryClient.setQueryData<Task[]>(
        ['tasks', projectId],
        (old) => old?.map((task) =>
          task.id === data.taskId
            ? { ...task, ...data.updates }
            : task
        ) ?? []
      );

      return { previousTasks };
    },

    // エラー時：保存した状態にロールバック
    onError: (err, data, context) => {
      if (context?.previousTasks) {
        queryClient.setQueryData(
          ['tasks', projectId],
          context.previousTasks
        );
      }
      toast.error('タスクの更新に失敗しました');
    },

    // 完了時（成功/失敗問わず）：最新データを再取得
    onSettled: () => {
      queryClient.invalidateQueries({
        queryKey: ['tasks', projectId],
      });
    },
  });
}

# backend/app/api/members.py
from fastapi import APIRouter, Depends, HTTPException
from app.models.project_member import ProjectMember, Role
from app.services.invite import InviteService
from app.auth.deps import get_current_user, require_admin

router = APIRouter()

@router.post("/projects/{project_id}/invite")
async def invite_member(
    project_id: str,
    invite: InviteRequest,
    current_user = Depends(require_admin),
    invite_service: InviteService = Depends(),
):
    """メンバーを招待"""
    result = await invite_service.invite(
        project_id=project_id,
        email=invite.email,
        role=invite.role,
        invited_by=current_user.id,
    )
    return result

@router.get("/projects/{project_id}/members")
async def list_members(
    project_id: str,
    current_user = Depends(get_current_user),
):
    """メンバー一覧を取得"""
    members = await ProjectMember.filter(
        project_id=project_id
    ).prefetch_related("user").all()

    return [
        {
            "id": m.user.id,
            "name": m.user.name,
            "email": m.user.email,
            "role": m.role,
            "joined_at": m.created_at,
        }
        for m in members
    ]

@router.delete("/projects/{project_id}/members/{user_id}")
async def remove_member(
    project_id: str,
    user_id: str,
    current_user = Depends(require_admin),
):
    """メンバーを削除"""
    if user_id == current_user.id:
        raise HTTPException(400, "自分自身は削除できません")
    deleted = await ProjectMember.filter(
        project_id=project_id, user_id=user_id
    ).delete()
    if not deleted:
        raise HTTPException(404, "メンバーが見つかりません")
    return {"message": "メンバーを削除しました"}

// frontend/src/components/members/MemberList.tsx
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import { api } from '@/lib/api';
import type { Member, Role } from '@/types';

const ROLE_LABELS: Record<Role, string> = {
  admin: '管理者',
  member: 'メンバー',
  viewer: '閲覧者',
};

export function MemberList({
  projectId, isAdmin,
}: {
  projectId: string;
  isAdmin: boolean;
}) {
  const queryClient = useQueryClient();

  const { data: members = [] } = useQuery({
    queryKey: ['members', projectId],
    queryFn: () =>
      api.get<Member[]>(`/projects/${projectId}/members`),
  });

  const removeMutation = useMutation({
    mutationFn: (userId: string) =>
      api.delete(`/projects/${projectId}/members/${userId}`),
    onSuccess: () => {
      queryClient.invalidateQueries({
        queryKey: ['members', projectId],
      });
    },
  });

  return (
    <div className="divide-y">
      {members.map((member) => (
        <div key={member.id}
             className="flex items-center justify-between py-3">
          <div className="flex items-center gap-3">
            <div className="w-8 h-8 bg-purple-100
                            rounded-full flex items-center
                            justify-center text-sm font-bold
                            text-purple-600">
              {member.name[0]}
            </div>
            <div>
              <p className="font-medium">{member.name}</p>
              <p className="text-sm text-gray-500">
                {member.email}
              </p>
            </div>
          </div>
          <div className="flex items-center gap-2">
            <span className="text-sm px-2 py-1 bg-gray-100
                            rounded">
              {ROLE_LABELS[member.role]}
            </span>
            {isAdmin && member.role !== 'admin' && (
              <button
                onClick={() => removeMutation.mutate(member.id)}
                className="text-red-500 text-sm hover:underline"
              >
                削除
              </button>
            )}
          </div>
        </div>
      ))}
    </div>
  );
}