[V0_FILE]typescriptreact:file="app/loading.tsx" isFixed="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="components/player-document.tsx" "use client" import { useState } from "react" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Textarea } from "@/components/ui/textarea" import { Badge } from "@/components/ui/badge" import { Avatar, AvatarFallback } from "@/components/ui/avatar" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Label } from "@/components/ui/label" import { Calendar } from "@/components/ui/calendar" import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover" import { Save, Edit3, Plus, Trash2, CalendarIcon, User, FileText, TrendingUp, Target, Heart, Activity, } from "lucide-react" import { format } from "date-fns" import { ja } from "date-fns/locale" interface Player { id: number name: string position: string number: number goals: number assists: number matches: number } interface PlayerNote { id: string date: Date title: string content: string category: "performance" | "training" | "medical" | "personal" | "tactical" } interface PlayerStats { height: string weight: string age: string dominantFoot: "右足" | "左足" | "両足" joinDate: string previousClub: string emergencyContact: string medicalNotes: string } interface PlayerDocumentProps { player: Player onClose: () => void } const categoryColors = { performance: "bg-green-100 text-green-800", training: "bg-blue-100 text-blue-800", medical: "bg-red-100 text-red-800", personal: "bg-purple-100 text-purple-800", tactical: "bg-orange-100 text-orange-800", } const categoryLabels = { performance: "パフォーマンス", training: "練習", medical: "医療", personal: "個人", tactical: "戦術", } export function PlayerDocument({ player, onClose }: PlayerDocumentProps) { const [activeTab, setActiveTab] = useState("overview") const [isEditing, setIsEditing] = useState(false) const [showAddNote, setShowAddNote] = useState(false) // 選手の基本情報 const [playerStats, setPlayerStats] = useState({ height: "175cm", weight: "70kg", age: "23歳", dominantFoot: "右足", joinDate: "2023-04-01", previousClub: "青春FC", emergencyContact: "090-1234-5678", medicalNotes: "特になし", }) // ノート管理 const [notes, setNotes] = useState([ { id: "1", date: new Date("2024-01-15"), title: "優秀なパフォーマンス", content: "今日の試合で2ゴール1アシストの活躍。ポジショニングが特に良かった。", category: "performance", }, { id: "2", date: new Date("2024-01-10"), title: "練習での改善点", content: "シュート精度の向上が必要。来週から特別練習を実施予定。", category: "training", }, ]) // 新しいノート追加 const [newNote, setNewNote] = useState({ title: "", content: "", category: "performance" as PlayerNote["category"], date: new Date(), }) const handleSaveStats = () => { setIsEditing(false) // ここで実際のデータ保存処理を行う } const handleAddNote = () => { if (newNote.title.trim() && newNote.content.trim()) { const note: PlayerNote = { id: Date.now().toString(), ...newNote, } setNotes([note, ...notes]) setNewNote({ title: "", content: "", category: "performance", date: new Date(), }) setShowAddNote(false) } } const handleDeleteNote = (noteId: string) => { setNotes(notes.filter((note) => note.id !== noteId)) } return (

{/* ヘッダー */}

{player.number}

{player.name}

{player.position} #{player.number}

{/* タブナビゲーション */}

概要記録統計目標

{/* 概要タブ */}

{/* 基本情報 */} 基本情報 {isEditing ? ( <>

身長 setPlayerStats({ ...playerStats, height: e.target.value })} />

体重 setPlayerStats({ ...playerStats, weight: e.target.value })} />

年齢 setPlayerStats({ ...playerStats, age: e.target.value })} />

利き足

入団日 setPlayerStats({ ...playerStats, joinDate: e.target.value })} />

前所属クラブ setPlayerStats({ ...playerStats, previousClub: e.target.value })} />

緊急連絡先 setPlayerStats({ ...playerStats, emergencyContact: e.target.value })} />

) : (

身長: {playerStats.height}

体重: {playerStats.weight}

年齢: {playerStats.age}

利き足: {playerStats.dominantFoot}

入団日: {playerStats.joinDate}

前所属: {playerStats.previousClub}

緊急連絡先: {playerStats.emergencyContact}

)} {/* 今シーズンの成績 */} 今シーズンの成績

{player.goals}

得点

{player.assists}

アシスト

{player.matches}

出場試合

{/* 医療情報 */} 医療・健康情報 {isEditing ? (

setPlayerStats({ ...playerStats, medicalNotes: e.target.value })}
                      placeholder="医療情報、アレルギー、既往歴など..."
                      rows={4}
                    />
                  ) : (
                    <p className="text-muted-foreground">{playerStats.medicalNotes || "記録なし"}</p>
                  )}
                </CardContent>
              </Card>
            </TabsContent>

{/* 記録タブ */}
            <TabsContent value="notes" className="p-6 space-y-6">
              <div className="flex items-center justify-between">
                <h3 className="text-lg font-semibold">選手記録</h3>
                <Button onClick={() => setShowAddNote(true)}>
                  <Plus className="h-4 w-4 mr-2" />
                  新しい記録を追加
                </Button>
              </div>

{/* 新しい記録追加フォーム */}
              {showAddNote && (
                <Card>
                  <CardHeader>
                    <CardTitle>新しい記録を追加</CardTitle>
                  </CardHeader>
                  <CardContent className="space-y-4">
                    <div>
                      <Label htmlFor="noteTitle">タイトル</Label>
                      <Input
                        id="noteTitle"
                        value={newNote.title}
                        onChange={(e) => setNewNote({ ...newNote, title: e.target.value })}
                        placeholder="記録のタイトルを入力..."
                      />
                    </div>
                    <div>
                      <Label htmlFor="noteCategory">カテゴリ</Label>
                      <select
                        id="noteCategory"
                        className="w-full p-2 border rounded-md"
                        value={newNote.category}
                        onChange={(e) => setNewNote({ ...newNote, category: e.target.value as PlayerNote["category"] })}
                      >
                        <option value="performance">パフォーマンス</option>
                        <option value="training">練習</option>
                        <option value="medical">医療</option>
                        <option value="personal">個人</option>
                        <option value="tactical">戦術</option>
                      </select>
                    </div>
                    <div>
                      <Label htmlFor="noteDate">日付</Label>
                      <Popover>
                        <PopoverTrigger asChild>
                          <Button
                            variant="outline"
                            className="w-full justify-start text-left font-normal bg-transparent"
                          >
                            <CalendarIcon className="mr-2 h-4 w-4" />
                            {format(newNote.date, "PPP", { locale: ja })}
                          </Button>
                        </PopoverTrigger>
                        <PopoverContent className="w-auto p-0">
                          <Calendar
                            mode="single"
                            selected={newNote.date}
                            onSelect={(date) => date && setNewNote({ ...newNote, date })}
                            initialFocus
                          />
                        </PopoverContent>
                      </Popover>
                    </div>
                    <div>
                      <Label htmlFor="noteContent">内容</Label>
                      <Textarea
                        id="noteContent"
                        value={newNote.content}
                        onChange={(e) => setNewNote({ ...newNote, content: e.target.value })}
                        placeholder="記録の詳細を入力..."
                        rows={4}
                      />
                    </div>
                    <div className="flex space-x-2">
                      <Button onClick={handleAddNote}>
                        <Save className="h-4 w-4 mr-2" />
                        保存
                      </Button>
                      <Button variant="outline" onClick={() => setShowAddNote(false)}>
                        キャンセル
                      </Button>
                    </div>
                  </CardContent>
                </Card>
              )}

{/* 記録一覧 */}
              <div className="space-y-4">
                {notes.map((note) => (
                  <Card key={note.id}>
                    <CardHeader className="pb-3">
                      <div className="flex items-center justify-between">
                        <div className="flex items-center space-x-3">
                          <Badge className={categoryColors[note.category]}>{categoryLabels[note.category]}</Badge>
                          <span className="text-sm text-muted-foreground">
                            {format(note.date, "yyyy年MM月dd日", { locale: ja })}
                          </span>
                        </div>
                        <Button variant="ghost" size="sm" onClick={() => handleDeleteNote(note.id)}>
                          <Trash2 className="h-4 w-4" />
                        </Button>
                      </div>
                      <CardTitle className="text-lg">{note.title}</CardTitle>
                    </CardHeader>
                    <CardContent>
                      <p className="text-muted-foreground whitespace-pre-wrap">{note.content}</p>
                    </CardContent>
                  </Card>
                ))}
              </div>
            </TabsContent>

{/* 統計タブ */}
            <TabsContent value="stats" className="p-6">
              <div className="grid gap-6 md:grid-cols-2">
                <Card>
                  <CardHeader>
                    <CardTitle>月別パフォーマンス</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <div className="space-y-4">
                      <div className="flex items-center justify-between">
                        <span>1月</span>
                        <div className="flex space-x-2">
                          <Badge variant="outline">3得点</Badge>
                          <Badge variant="outline">2アシスト</Badge>
                        </div>
                      </div>
                      <div className="flex items-center justify-between">
                        <span>12月</span>
                        <div className="flex space-x-2">
                          <Badge variant="outline">5得点</Badge>
                          <Badge variant="outline">1アシスト</Badge>
                        </div>
                      </div>
                      <div className="flex items-center justify-between">
                        <span>11月</span>
                        <div className="flex space-x-2">
                          <Badge variant="outline">2得点</Badge>
                          <Badge variant="outline">3アシスト</Badge>
                        </div>
                      </div>
                    </div>
                  </CardContent>
                </Card>

<Card>
                  <CardHeader>
                    <CardTitle>ポジション別出場時間</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <div className="space-y-4">
                      <div className="flex items-center justify-between">
                        <span>{player.position}</span>
                        <span className="font-medium">85%</span>
                      </div>
                      <div className="w-full bg-gray-200 rounded-full h-2">
                        <div className="bg-blue-600 h-2 rounded-full" style={{ width: "85%" }}></div>
                      </div>
                    </div>
                  </CardContent>
                </Card>
              </div>
            </TabsContent>

{/* 目標タブ */}
            <TabsContent value="goals" className="p-6">
              <Card>
                <CardHeader>
                  <CardTitle className="flex items-center space-x-2">
                    <Target className="h-5 w-5" />
                    <span>今シーズンの目標</span>
                  </CardTitle>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div className="grid gap-4 md:grid-cols-2">
                    <div className="p-4 border rounded-lg">
                      <h4 className="font-semibold mb-2">得点目標</h4>
                      <div className="flex items-center justify-between">
                        <span>現在: {player.goals}得点</span>
                        <span className="text-muted-foreground">目標: 20得点</span>
                      </div>
                      <div className="w-full bg-gray-200 rounded-full h-2 mt-2">
                        <div
                          className="bg-green-600 h-2 rounded-full"
                          style={{ width: `${(player.goals / 20) * 100}%` }}
                        ></div>
                      </div>
                    </div>
                    <div className="p-4 border rounded-lg">
                      <h4 className="font-semibold mb-2">アシスト目標</h4>
                      <div className="flex items-center justify-between">
                        <span>現在: {player.assists}アシスト</span>
                        <span className="text-muted-foreground">目標: 15アシスト</span>
                      </div>
                      <div className="w-full bg-gray-200 rounded-full h-2 mt-2">
                        <div
                          className="bg-blue-600 h-2 rounded-full"
                          style={{ width: `${(player.assists / 15) * 100}%` }}
                        ></div>
                      </div>
                    </div>
                  </div>
                  <div className="p-4 border rounded-lg">
                    <h4 className="font-semibold mb-2">個人目標・改善点</h4>
                    <Textarea
                      placeholder="個人的な目標や改善したいスキルを記録..."
                      rows={4}
                      defaultValue="シュート精度の向上、左足でのシュート練習、守備時のポジショニング改善"
                    />
                  </div>
                </CardContent>
              </Card>
            </TabsContent>
          </div>
        </Tabs>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/page.tsx"
"use client"

import { useState } from "react"
import { CalendarIcon, Users, Trophy, BarChart3, Settings, Plus, Search, X, Edit2, Trash2 } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Badge } from "@/components/ui/badge"
import { Avatar, AvatarFallback } from "@/components/ui/avatar"
import { Calendar } from "@/components/ui/calendar"
import { SoccerField } from "@/components/soccer-field"
import { PlayerDocument } from "@/components/player-document"
import { Label } from "@/components/ui/label"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"

interface Player {
  id: number
  name: string
  position: string
  number: number
  goals: number
  assists: number
  matches: number
}

interface Match {
  id: number
  opponent: string
  date: string
  time: string
  venue: string
  result: string
}

interface TeamStats {
  totalMatches: number
  wins: number
  draws: number
  losses: number
  goalsFor: number
  goalsAgainst: number
}

interface FieldPlayer {
  id: number
  name: string
  position: string
  number: number
  x: number
  y: number
}

export default function SoccerManagementApp() {
  const [activeTab, setActiveTab] = useState("dashboard")
  const [selectedDate, setSelectedDate] = useState<Date | undefined>(new Date())
  const [calendarView, setCalendarView] = useState<"list" | "calendar">("list")
  const [showOpponentTeam, setShowOpponentTeam] = useState(false)
  const [selectedPlayer, setSelectedPlayer] = useState<Player | null>(null)
  const [searchQuery, setSearchQuery] = useState("")

// 空の選手データ（状態管理）
  const [players, setPlayers] = useState<Player[]>([])
  const [showAddPlayerDialog, setShowAddPlayerDialog] = useState(false)
  
  // フィールド選手とベンチ選手の状態
  const [startingPlayers, setStartingPlayers] = useState<FieldPlayer[]>([])
  const [benchPlayers, setBenchPlayers] = useState<FieldPlayer[]>([])
  const [newPlayer, setNewPlayer] = useState<Partial<Player>>({
    name: "",
    position: "MF",
    number: 1,
    goals: 0,
    assists: 0,
    matches: 0,
  })

// 空の試合データ（状態管理）
  const [matches, setMatches] = useState<Match[]>([])
  const [showAddMatchDialog, setShowAddMatchDialog] = useState(false)
  const [newMatch, setNewMatch] = useState<Partial<Match>>({
    opponent: "",
    date: "",
    time: "",
    venue: "ホーム",
    result: "未定",
  })

// チーム統計（状態管理）
  const [teamStats, setTeamStats] = useState<TeamStats>({
    totalMatches: 0,
    wins: 0,
    draws: 0,
    losses: 0,
    goalsFor: 0,
    goalsAgainst: 0,
  })

// 選手追加
  const handleAddPlayer = () => {
    if (newPlayer.name && newPlayer.position && newPlayer.number) {
      const player: Player = {
        id: Date.now(),
        name: newPlayer.name,
        position: newPlayer.position,
        number: newPlayer.number,
        goals: newPlayer.goals || 0,
        assists: newPlayer.assists || 0,
        matches: newPlayer.matches || 0,
      }
      setPlayers([...players, player])
      setNewPlayer({
        name: "",
        position: "MF",
        number: players.length + 1,
        goals: 0,
        assists: 0,
        matches: 0,
      })
      setShowAddPlayerDialog(false)
    }
  }

// 選手削除
  const handleDeletePlayer = (id: number) => {
    setPlayers(players.filter((p) => p.id !== id))
    // フィールドやベンチからも削除
    setStartingPlayers(startingPlayers.filter((p) => p.id !== id))
    setBenchPlayers(benchPlayers.filter((p) => p.id !== id))
  }

// スターティングメンバーに追加
  const addToStarting = (player: Player) => {
    // 既にフィールドまたはベンチにいる場合は追加しない
    if (startingPlayers.find(p => p.id === player.id) || benchPlayers.find(p => p.id === player.id)) {
      return
    }
    const fieldCount = startingPlayers.length
    const newFieldPlayer: FieldPlayer = {
      id: player.id,
      name: player.name,
      position: player.position,
      number: player.number,
      x: 20 + (fieldCount % 5) * 15,
      y: 55 + Math.floor(fieldCount / 5) * 10,
    }
    setStartingPlayers([...startingPlayers, newFieldPlayer])
  }

// ベンチメンバーに追加
  const addToBench = (player: Player) => {
    // 既にフィールドまたはベンチにいる場合は追加しない
    if (startingPlayers.find(p => p.id === player.id) || benchPlayers.find(p => p.id === player.id)) {
      return
    }
    const benchCount = benchPlayers.length
    const newBenchPlayer: FieldPlayer = {
      id: player.id,
      name: player.name,
      position: player.position,
      number: player.number,
      x: 120,
      y: 20 + benchCount * 10,
    }
    setBenchPlayers([...benchPlayers, newBenchPlayer])
  }

// フィールド/ベンチから削除
  const removeFromField = (playerId: number) => {
    setStartingPlayers(startingPlayers.filter(p => p.id !== playerId))
    setBenchPlayers(benchPlayers.filter(p => p.id !== playerId))
  }

// 選手がフィールドにいるか確認
  const isOnField = (playerId: number) => {
    return startingPlayers.some(p => p.id === playerId) || benchPlayers.some(p => p.id === playerId)
  }

// 選手の配置状態を取得
  const getPlayerFieldStatus = (playerId: number): 'starting' | 'bench' | 'none' => {
    if (startingPlayers.some(p => p.id === playerId)) return 'starting'
    if (benchPlayers.some(p => p.id === playerId)) return 'bench'
    return 'none'
  }

// 試合追加
  const handleAddMatch = () => {
    if (newMatch.opponent && newMatch.date && newMatch.time) {
      const match: Match = {
        id: Date.now(),
        opponent: newMatch.opponent,
        date: newMatch.date,
        time: newMatch.time,
        venue: newMatch.venue || "ホーム",
        result: newMatch.result || "未定",
      }
      setMatches([...matches, match])
      setNewMatch({
        opponent: "",
        date: "",
        time: "",
        venue: "ホーム",
        result: "未定",
      })
      setShowAddMatchDialog(false)
    }
  }

// 試合削除
  const handleDeleteMatch = (id: number) => {
    setMatches(matches.filter((m) => m.id !== id))
  }

// 試合結果更新
  const handleUpdateMatchResult = (id: number, result: string) => {
    setMatches(matches.map((m) => (m.id === id ? { ...m, result } : m)))
    
    // 統計を更新
    const wins = matches.filter((m) => m.result.includes("勝利")).length + (result.includes("勝利") ? 1 : 0)
    const draws = matches.filter((m) => m.result.includes("引き分け")).length + (result.includes("引き分け") ? 1 : 0)
    const losses = matches.filter((m) => m.result.includes("敗北")).length + (result.includes("敗北") ? 1 : 0)
    
    setTeamStats((prev) => ({
      ...prev,
      totalMatches: matches.filter((m) => m.result !== "未定").length + 1,
      wins,
      draws,
      losses,
    }))
  }

// 特定の日付に試合があるかチェック
  const getMatchesForDate = (date: Date) => {
    const dateString = date.toISOString().split("T")[0]
    return matches.filter((match) => match.date === dateString)
  }

// カレンダーの日付に試合がある場合のスタイリング
  const modifiers = {
    hasMatch: (date: Date) => getMatchesForDate(date).length > 0,
  }

const modifiersStyles = {
    hasMatch: {
      backgroundColor: "hsl(var(--primary))",
      color: "hsl(var(--primary-foreground))",
      fontWeight: "bold",
    },
  }

// 検索フィルター
  const filteredPlayers = players.filter(
    (player) =>
      player.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
      player.position.toLowerCase().includes(searchQuery.toLowerCase())
  )

// 統計計算
  const totalGoals = players.reduce((sum, p) => sum + p.goals, 0)
  const totalAssists = players.reduce((sum, p) => sum + p.assists, 0)
  const winRate = teamStats.totalMatches > 0 ? Math.round((teamStats.wins / teamStats.totalMatches) * 100) : 0

// ポジション別選手数
  const positionCounts = {
    GK: players.filter((p) => p.position === "GK").length,
    DF: players.filter((p) => p.position === "DF").length,
    MF: players.filter((p) => p.position === "MF").length,
    FW: players.filter((p) => p.position === "FW").length,
  }

return (
    <div className="min-h-screen bg-background">
      <header className="border-b">
        <div className="container mx-auto px-4 py-4">
          <div className="flex items-center justify-between">
            <div className="flex items-center space-x-4">
              <Trophy className="h-8 w-8 text-primary" />
              <h1 className="text-2xl font-bold">サッカーチーム管理</h1>
            </div>
            <Button variant="outline" size="icon" className="bg-transparent">
              <Settings className="h-4 w-4" />
            </Button>
          </div>
        </div>
      </header>

<div className="container mx-auto px-4 py-6">
        <Tabs value={activeTab} onValueChange={setActiveTab} className="space-y-6">
          <TabsList className="grid w-full grid-cols-5">
            <TabsTrigger value="dashboard" className="flex items-center space-x-2">
              <BarChart3 className="h-4 w-4" />
              <span>ダッシュボード</span>
            </TabsTrigger>
            <TabsTrigger value="players" className="flex items-center space-x-2">
              <Users className="h-4 w-4" />
              <span>選手管理</span>
            </TabsTrigger>
            <TabsTrigger value="matches" className="flex items-center space-x-2">
              <CalendarIcon className="h-4 w-4" />
              <span>試合管理</span>
            </TabsTrigger>
            <TabsTrigger value="field" className="flex items-center space-x-2">
              <svg className="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                <rect x="2" y="4" width="20" height="16" rx="2" />
                <circle cx="12" cy="12" r="3" />
                <path d="M2 10h4" />
                <path d="M18 10h4" />
                <path d="M2 14h4" />
                <path d="M18 14h4" />
              </svg>
              <span>フィールド</span>
            </TabsTrigger>
            <TabsTrigger value="stats" className="flex items-center space-x-2">
              <Trophy className="h-4 w-4" />
              <span>統計</span>
            </TabsTrigger>
          </TabsList>

{/* ダッシュボード */}
          <TabsContent value="dashboard" className="space-y-6">
            <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
              <Card>
                <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                  <CardTitle className="text-sm font-medium">総選手数</CardTitle>
                  <Users className="h-4 w-4 text-muted-foreground" />
                </CardHeader>
                <CardContent>
                  <div className="text-2xl font-bold">{players.length}</div>
                  <p className="text-xs text-muted-foreground">登録済み選手</p>
                </CardContent>
              </Card>
              <Card>
                <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                  <CardTitle className="text-sm font-medium">今シーズン勝利数</CardTitle>
                  <Trophy className="h-4 w-4 text-muted-foreground" />
                </CardHeader>
                <CardContent>
                  <div className="text-2xl font-bold">{teamStats.wins}</div>
                  <p className="text-xs text-muted-foreground">勝率 {winRate}%</p>
                </CardContent>
              </Card>
              <Card>
                <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                  <CardTitle className="text-sm font-medium">総得点</CardTitle>
                  <BarChart3 className="h-4 w-4 text-muted-foreground" />
                </CardHeader>
                <CardContent>
                  <div className="text-2xl font-bold">{totalGoals}</div>
                  <p className="text-xs text-muted-foreground">
                    平均 {teamStats.totalMatches > 0 ? (totalGoals / teamStats.totalMatches).toFixed(1) : 0}点/試合
                  </p>
                </CardContent>
              </Card>
              <Card>
                <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                  <CardTitle className="text-sm font-medium">予定試合</CardTitle>
                  <CalendarIcon className="h-4 w-4 text-muted-foreground" />
                </CardHeader>
                <CardContent>
                  <div className="text-2xl font-bold">{matches.filter((m) => m.result === "未定").length}</div>
                  <p className="text-xs text-muted-foreground">未消化試合</p>
                </CardContent>
              </Card>
            </div>

<div className="grid gap-6 md:grid-cols-2">
              <Card>
                <CardHeader>
                  <CardTitle>最近の試合結果</CardTitle>
                </CardHeader>
                <CardContent>
                  {matches.length === 0 ? (
                    <div className="text-center py-8 text-muted-foreground">
                      <CalendarIcon className="h-12 w-12 mx-auto mb-4 opacity-50" />
                      <p>まだ試合が登録されていません</p>
                      <Button
                        variant="outline"
                        className="mt-4 bg-transparent"
                        onClick={() => {
                          setActiveTab("matches")
                          setShowAddMatchDialog(true)
                        }}
                      >
                        試合を追加
                      </Button>
                    </div>
                  ) : (
                    <div className="space-y-4">
                      {matches.slice(0, 3).map((match) => (
                        <div key={match.id} className="flex items-center justify-between">
                          <div>
                            <p className="font-medium">{match.opponent}</p>
                            <p className="text-sm text-muted-foreground">{match.date}</p>
                          </div>
                          <Badge
                            variant={
                              match.result.includes("勝利")
                                ? "default"
                                : match.result.includes("引き分け")
                                  ? "secondary"
                                  : match.result === "未定"
                                    ? "outline"
                                    : "destructive"
                            }
                          >
                            {match.result}
                          </Badge>
                        </div>
                      ))}
                    </div>
                  )}
                </CardContent>
              </Card>

<Card>
                <CardHeader>
                  <CardTitle>トップスコアラー</CardTitle>
                </CardHeader>
                <CardContent>
                  {players.length === 0 ? (
                    <div className="text-center py-8 text-muted-foreground">
                      <Users className="h-12 w-12 mx-auto mb-4 opacity-50" />
                      <p>まだ選手が登録されていません</p>
                      <Button
                        variant="outline"
                        className="mt-4 bg-transparent"
                        onClick={() => {
                          setActiveTab("players")
                          setShowAddPlayerDialog(true)
                        }}
                      >
                        選手を追加
                      </Button>
                    </div>
                  ) : (
                    <div className="space-y-4">
                      {[...players]
                        .sort((a, b) => b.goals - a.goals)
                        .slice(0, 3)
                        .map((player, index) => (
                          <div key={player.id} className="flex items-center space-x-4">
                            <div className="flex items-center justify-center w-8 h-8 rounded-full bg-primary text-primary-foreground text-sm font-bold">
                              {index + 1}
                            </div>
                            <Avatar className="h-10 w-10">
                              <AvatarFallback>{player.name.charAt(0) || "?"}</AvatarFallback>
                            </Avatar>
                            <div className="flex-1">
                              <p className="font-medium">{player.name}</p>
                              <p className="text-sm text-muted-foreground">{player.position}</p>
                            </div>
                            <div className="text-right">
                              <p className="font-bold">{player.goals}得点</p>
                              <p className="text-sm text-muted-foreground">{player.assists}アシスト</p>
                            </div>
                          </div>
                        ))}
                    </div>
                  )}
                </CardContent>
              </Card>
            </div>
          </TabsContent>

{/* 選手管理 */}
          <TabsContent value="players" className="space-y-6">
            <div className="flex items-center justify-between">
              <h2 className="text-2xl font-bold">選手管理</h2>
              <Button onClick={() => setShowAddPlayerDialog(true)}>
                <Plus className="h-4 w-4 mr-2" />
                新しい選手を追加
              </Button>
            </div>

<div className="flex items-center space-x-2">
              <Search className="h-4 w-4 text-muted-foreground" />
              <Input
                placeholder="選手を検索..."
                className="max-w-sm"
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
              />
            </div>

{players.length === 0 ? (
              <Card>
                <CardContent className="py-16">
                  <div className="text-center text-muted-foreground">
                    <Users className="h-16 w-16 mx-auto mb-4 opacity-50" />
                    <h3 className="text-lg font-medium mb-2">まだ選手が登録されていません</h3>
                    <p className="mb-4">「新しい選手を追加」ボタンから選手を登録してください</p>
                    <Button onClick={() => setShowAddPlayerDialog(true)}>
                      <Plus className="h-4 w-4 mr-2" />
                      最初の選手を追加
                    </Button>
                  </div>
                </CardContent>
              </Card>
            ) : (
              <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
                {filteredPlayers.map((player) => (
                  <Card key={player.id} className="cursor-pointer hover:shadow-md transition-shadow">
                    <CardHeader>
                      <div className="flex items-center justify-between">
                        <div className="flex items-center space-x-4">
                          <Avatar className="h-12 w-12">
                            <AvatarFallback className="text-lg font-bold">{player.number}</AvatarFallback>
                          </Avatar>
                          <div>
                            <CardTitle className="text-lg">{player.name}</CardTitle>
                            <CardDescription>{player.position}</CardDescription>
                          </div>
                        </div>
                        <Button
                          variant="ghost"
                          size="icon"
                          className="text-destructive hover:text-destructive"
                          onClick={(e) => {
                            e.stopPropagation()
                            handleDeletePlayer(player.id)
                          }}
                        >
                          <Trash2 className="h-4 w-4" />
                        </Button>
                      </div>
                    </CardHeader>
                    <CardContent>
                      <div className="grid grid-cols-3 gap-4 text-center mb-4">
                        <div>
                          <p className="text-2xl font-bold text-primary">{player.goals}</p>
                          <p className="text-xs text-muted-foreground">得点</p>
                        </div>
                        <div>
                          <p className="text-2xl font-bold text-primary">{player.assists}</p>
                          <p className="text-xs text-muted-foreground">アシスト</p>
                        </div>
                        <div>
                          <p className="text-2xl font-bold text-primary">{player.matches}</p>
                          <p className="text-xs text-muted-foreground">出場</p>
                        </div>
                      </div>
                      {/* フィールド配置状態 */}
                      {getPlayerFieldStatus(player.id) !== 'none' && (
                        <div className="mb-3">
                          <Badge variant={getPlayerFieldStatus(player.id) === 'starting' ? 'default' : 'secondary'}>
                            {getPlayerFieldStatus(player.id) === 'starting' ? 'スターティング' : 'ベンチ'}
                          </Badge>
                        </div>
                      )}
                      
                      {/* フィールド追加ボタン */}
                      <div className="flex gap-2 mb-3">
                        {getPlayerFieldStatus(player.id) === 'none' ? (
                          <>
                            <Button
                              size="sm"
                              className="flex-1"
                              onClick={(e) => {
                                e.stopPropagation()
                                addToStarting(player)
                              }}
                              disabled={startingPlayers.length >= 11}
                            >
                              スターティング
                            </Button>
                            <Button
                              size="sm"
                              variant="secondary"
                              className="flex-1"
                              onClick={(e) => {
                                e.stopPropagation()
                                addToBench(player)
                              }}
                              disabled={benchPlayers.length >= 7}
                            >
                              ベンチ
                            </Button>
                          </>
                        ) : (
                          <Button
                            size="sm"
                            variant="outline"
                            className="w-full bg-transparent"
                            onClick={(e) => {
                              e.stopPropagation()
                              removeFromField(player.id)
                            }}
                          >
                            フィールドから外す
                          </Button>
                        )}
                      </div>

<Button
                        className="w-full bg-transparent"
                        variant="outline"
                        onClick={() => setSelectedPlayer(player)}
                      >
                        詳細を見る
                      </Button>
                    </CardContent>
                  </Card>
                ))}
              </div>
            )}
          </TabsContent>

{/* 試合管理 */}
          <TabsContent value="matches" className="space-y-6">
            <div className="flex items-center justify-between">
              <h2 className="text-2xl font-bold">試合管理</h2>
              <div className="flex items-center space-x-2">
                <div className="flex rounded-lg border">
                  <Button
                    variant={calendarView === "list" ? "default" : "ghost"}
                    size="sm"
                    onClick={() => setCalendarView("list")}
                  >
                    リスト
                  </Button>
                  <Button
                    variant={calendarView === "calendar" ? "default" : "ghost"}
                    size="sm"
                    onClick={() => setCalendarView("calendar")}
                  >
                    カレンダー
                  </Button>
                </div>
                <Button onClick={() => setShowAddMatchDialog(true)}>
                  <Plus className="h-4 w-4 mr-2" />
                  新しい試合を追加
                </Button>
              </div>
            </div>

{calendarView === "calendar" ? (
              <div className="grid gap-6 md:grid-cols-2">
                <Card>
                  <CardHeader>
                    <CardTitle>試合カレンダー</CardTitle>
                    <CardDescription>試合がある日は青色でハイライトされます</CardDescription>
                  </CardHeader>
                  <CardContent>
                    <Calendar
                      mode="single"
                      selected={selectedDate}
                      onSelect={setSelectedDate}
                      modifiers={modifiers}
                      modifiersStyles={modifiersStyles}
                      className="rounded-md border"
                    />
                  </CardContent>
                </Card>

<Card>
                  <CardHeader>
                    <CardTitle>
                      {selectedDate
                        ? `${selectedDate.getFullYear()}年${selectedDate.getMonth() + 1}月${selectedDate.getDate()}日の試合`
                        : "日付を選択してください"}
                    </CardTitle>
                  </CardHeader>
                  <CardContent>
                    {selectedDate ? (
                      <div className="space-y-4">
                        {getMatchesForDate(selectedDate).length > 0 ? (
                          getMatchesForDate(selectedDate).map((match) => (
                            <div key={match.id} className="p-4 border rounded-lg">
                              <div className="flex items-center justify-between">
                                <div>
                                  <p className="font-medium text-lg">vs {match.opponent}</p>
                                  <p className="text-sm text-muted-foreground">
                                    {match.time} - {match.venue}
                                  </p>
                                </div>
                                <Badge
                                  variant={
                                    match.result === "未定"
                                      ? "outline"
                                      : match.result.includes("勝利")
                                        ? "default"
                                        : match.result.includes("引き分け")
                                          ? "secondary"
                                          : "destructive"
                                  }
                                >
                                  {match.result}
                                </Badge>
                              </div>
                            </div>
                          ))
                        ) : (
                          <div className="text-center py-8 text-muted-foreground">
                            <CalendarIcon className="h-12 w-12 mx-auto mb-4 opacity-50" />
                            <p>この日に予定されている試合はありません</p>
                            <Button
                              variant="outline"
                              className="mt-4 bg-transparent"
                              onClick={() => setShowAddMatchDialog(true)}
                            >
                              試合を追加
                            </Button>
                          </div>
                        )}
                      </div>
                    ) : (
                      <div className="text-center py-8 text-muted-foreground">
                        <p>カレンダーから日付を選択してください</p>
                      </div>
                    )}
                  </CardContent>
                </Card>
              </div>
            ) : matches.length === 0 ? (
              <Card>
                <CardContent className="py-16">
                  <div className="text-center text-muted-foreground">
                    <CalendarIcon className="h-16 w-16 mx-auto mb-4 opacity-50" />
                    <h3 className="text-lg font-medium mb-2">まだ試合が登録されていません</h3>
                    <p className="mb-4">「新しい試合を追加」ボタンから試合を登録してください</p>
                    <Button onClick={() => setShowAddMatchDialog(true)}>
                      <Plus className="h-4 w-4 mr-2" />
                      最初の試合を追加
                    </Button>
                  </div>
                </CardContent>
              </Card>
            ) : (
              <Card>
                <CardHeader>
                  <CardTitle>試合スケジュール</CardTitle>
                  <CardDescription>今シーズンの全試合</CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="space-y-4">
                    {matches.map((match) => (
                      <div key={match.id} className="flex items-center justify-between p-4 border rounded-lg">
                        <div className="flex items-center space-x-4">
                          <div className="text-center">
                            <p className="font-bold">{match.date}</p>
                            <p className="text-sm text-muted-foreground">{match.time}</p>
                          </div>
                          <div>
                            <p className="font-medium text-lg">vs {match.opponent}</p>
                            <p className="text-sm text-muted-foreground">{match.venue}</p>
                          </div>
                        </div>
                        <div className="flex items-center space-x-2">
                          <Badge
                            variant={
                              match.result === "未定"
                                ? "outline"
                                : match.result.includes("勝利")
                                  ? "default"
                                  : match.result.includes("引き分け")
                                    ? "secondary"
                                    : "destructive"
                            }
                          >
                            {match.result}
                          </Badge>
                          <Button
                            variant="ghost"
                            size="icon"
                            className="text-destructive hover:text-destructive"
                            onClick={() => handleDeleteMatch(match.id)}
                          >
                            <Trash2 className="h-4 w-4" />
                          </Button>
                        </div>
                      </div>
                    ))}
                  </div>
                </CardContent>
              </Card>
            )}
          </TabsContent>

{/* フィールド */}
          <TabsContent value="field" className="space-y-6">
            <div className="flex items-center justify-between">
              <h2 className="text-2xl font-bold">フィールド・フォーメーション</h2>
              <div className="flex items-center space-x-2">
                <Button
                  variant={showOpponentTeam ? "default" : "outline"}
                  size="sm"
                  onClick={() => setShowOpponentTeam(!showOpponentTeam)}
                  className={!showOpponentTeam ? "bg-transparent" : ""}
                >
                  相手チーム表示
                </Button>
                <Button variant="outline" size="sm" className="bg-transparent">
                  4-4-2
                </Button>
                <Button variant="outline" size="sm" className="bg-transparent">
                  4-3-3
                </Button>
                <Button variant="outline" size="sm" className="bg-transparent">
                  3-5-2
                </Button>
                <Button>フォーメーション保存</Button>
              </div>
            </div>

<div className="grid gap-6 lg:grid-cols-3">
              <div className="lg:col-span-2">
                <Card>
                  <CardHeader>
                    <CardTitle>サッカーフィールド</CardTitle>
                    <CardDescription>選手をドラッグしてフォーメーションを調整できます</CardDescription>
                  </CardHeader>
                  <CardContent>
                    <SoccerField 
                    showOpponentTeam={showOpponentTeam} 
                    setShowOpponentTeam={setShowOpponentTeam}
                    availablePlayers={players}
                    startingPlayers={startingPlayers}
                    benchPlayers={benchPlayers}
                    onStartingPlayersChange={setStartingPlayers}
                    onBenchPlayersChange={setBenchPlayers}
                  />
                  </CardContent>
                </Card>
              </div>

<div className="space-y-4">
                <Card>
                  <CardHeader>
                    <CardTitle>スターティングメンバー</CardTitle>
                  </CardHeader>
                  <CardContent>
                    {players.length === 0 ? (
                      <div className="text-center py-4 text-muted-foreground">
                        <p className="text-sm">選手を登録してください</p>
                      </div>
                    ) : (
                      <div className="space-y-3">
                        {players.slice(0, 11).map((player, index) => (
                          <div key={player.id} className="flex items-center space-x-3 p-2 border rounded-lg">
                            <div className="flex items-center justify-center w-8 h-8 rounded-full bg-primary text-primary-foreground text-sm font-bold">
                              {player.number}
                            </div>
                            <div className="flex-1">
                              <p className="font-medium text-sm">{player.name}</p>
                              <p className="text-xs text-muted-foreground">{player.position}</p>
                            </div>
                          </div>
                        ))}
                      </div>
                    )}
                  </CardContent>
                </Card>

<Card>
                  <CardHeader>
                    <CardTitle>ベンチメンバー</CardTitle>
                  </CardHeader>
                  <CardContent>
                    {players.length <= 11 ? (
                      <div className="text-center py-4 text-muted-foreground">
                        <p className="text-sm">ベンチメンバーがいません</p>
                      </div>
                    ) : (
                      <div className="space-y-2">
                        {players.slice(11).map((player) => (
                          <div key={player.id} className="flex items-center space-x-3 p-2 border rounded-lg opacity-75">
                            <div className="flex items-center justify-center w-6 h-6 rounded-full bg-muted text-muted-foreground text-xs">
                              {player.number}
                            </div>
                            <div className="flex-1">
                              <p className="font-medium text-sm">{player.name}</p>
                              <p className="text-xs text-muted-foreground">{player.position}</p>
                            </div>
                          </div>
                        ))}
                      </div>
                    )}
                  </CardContent>
                </Card>
              </div>
            </div>
          </TabsContent>

{/* 統計 */}
          <TabsContent value="stats" className="space-y-6">
            <h2 className="text-2xl font-bold">統計情報</h2>

<div className="grid gap-6 md:grid-cols-2">
              <Card>
                <CardHeader>
                  <CardTitle>チーム成績</CardTitle>
                </CardHeader>
                <CardContent>
                  <div className="space-y-4">
                    <div className="flex justify-between">
                      <span>総試合数</span>
                      <span className="font-bold">{teamStats.totalMatches}</span>
                    </div>
                    <div className="flex justify-between">
                      <span>勝利</span>
                      <span className="font-bold text-green-600">{teamStats.wins}</span>
                    </div>
                    <div className="flex justify-between">
                      <span>引き分け</span>
                      <span className="font-bold text-yellow-600">{teamStats.draws}</span>
                    </div>
                    <div className="flex justify-between">
                      <span>敗北</span>
                      <span className="font-bold text-red-600">{teamStats.losses}</span>
                    </div>
                    <div className="flex justify-between border-t pt-2">
                      <span>勝率</span>
                      <span className="font-bold">{winRate}%</span>
                    </div>
                  </div>
                </CardContent>
              </Card>

<Card>
                <CardHeader>
                  <CardTitle>得点・失点統計</CardTitle>
                </CardHeader>
                <CardContent>
                  <div className="space-y-4">
                    <div className="flex justify-between">
                      <span>総得点</span>
                      <span className="font-bold text-green-600">{teamStats.goalsFor}</span>
                    </div>
                    <div className="flex justify-between">
                      <span>総失点</span>
                      <span className="font-bold text-red-600">{teamStats.goalsAgainst}</span>
                    </div>
                    <div className="flex justify-between">
                      <span>得失点差</span>
                      <span
                        className={`font-bold ${teamStats.goalsFor - teamStats.goalsAgainst >= 0 ? "text-green-600" : "text-red-600"}`}
                      >
                        {teamStats.goalsFor - teamStats.goalsAgainst >= 0 ? "+" : ""}
                        {teamStats.goalsFor - teamStats.goalsAgainst}
                      </span>
                    </div>
                    <div className="flex justify-between">
                      <span>平均得点</span>
                      <span className="font-bold">
                        {teamStats.totalMatches > 0 ? (teamStats.goalsFor / teamStats.totalMatches).toFixed(1) : 0}
                      </span>
                    </div>
                    <div className="flex justify-between">
                      <span>平均失点</span>
                      <span className="font-bold">
                        {teamStats.totalMatches > 0 ? (teamStats.goalsAgainst / teamStats.totalMatches).toFixed(1) : 0}
                      </span>
                    </div>
                  </div>
                </CardContent>
              </Card>
            </div>

<Card>
              <CardHeader>
                <CardTitle>ポジション別選手数</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="grid grid-cols-4 gap-4 text-center">
                  <div>
                    <p className="text-3xl font-bold text-primary">{positionCounts.GK}</p>
                    <p className="text-sm text-muted-foreground">GK</p>
                  </div>
                  <div>
                    <p className="text-3xl font-bold text-primary">{positionCounts.DF}</p>
                    <p className="text-sm text-muted-foreground">DF</p>
                  </div>
                  <div>
                    <p className="text-3xl font-bold text-primary">{positionCounts.MF}</p>
                    <p className="text-sm text-muted-foreground">MF</p>
                  </div>
                  <div>
                    <p className="text-3xl font-bold text-primary">{positionCounts.FW}</p>
                    <p className="text-sm text-muted-foreground">FW</p>
                  </div>
                </div>
              </CardContent>
            </Card>
          </TabsContent>
        </Tabs>
      </div>

{/* 選手追加ダイアログ */}
      {showAddPlayerDialog && (
        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
          <Card className="w-full max-w-md mx-4">
            <CardHeader>
              <div className="flex items-center justify-between">
                <CardTitle>新しい選手を追加</CardTitle>
                <Button variant="ghost" size="icon" onClick={() => setShowAddPlayerDialog(false)}>
                  <X className="h-4 w-4" />
                </Button>
              </div>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="space-y-2">
                <Label htmlFor="playerName">選手名</Label>
                <Input
                  id="playerName"
                  placeholder="選手名を入力"
                  value={newPlayer.name}
                  onChange={(e) => setNewPlayer({ ...newPlayer, name: e.target.value })}
                />
              </div>
              <div className="grid grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label htmlFor="playerPosition">ポジション</Label>
                  <Select
                    value={newPlayer.position}
                    onValueChange={(value) => setNewPlayer({ ...newPlayer, position: value })}
                  >
                    <SelectTrigger>
                      <SelectValue placeholder="ポジション" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="GK">GK</SelectItem>
                      <SelectItem value="DF">DF</SelectItem>
                      <SelectItem value="MF">MF</SelectItem>
                      <SelectItem value="FW">FW</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
                <div className="space-y-2">
                  <Label htmlFor="playerNumber">背番号</Label>
                  <Input
                    id="playerNumber"
                    type="number"
                    min="1"
                    max="99"
                    value={newPlayer.number}
                    onChange={(e) => setNewPlayer({ ...newPlayer, number: parseInt(e.target.value) || 1 })}
                  />
                </div>
              </div>
              <div className="grid grid-cols-3 gap-4">
                <div className="space-y-2">
                  <Label htmlFor="playerGoals">得点</Label>
                  <Input
                    id="playerGoals"
                    type="number"
                    min="0"
                    value={newPlayer.goals}
                    onChange={(e) => setNewPlayer({ ...newPlayer, goals: parseInt(e.target.value) || 0 })}
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="playerAssists">アシスト</Label>
                  <Input
                    id="playerAssists"
                    type="number"
                    min="0"
                    value={newPlayer.assists}
                    onChange={(e) => setNewPlayer({ ...newPlayer, assists: parseInt(e.target.value) || 0 })}
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="playerMatches">出場数</Label>
                  <Input
                    id="playerMatches"
                    type="number"
                    min="0"
                    value={newPlayer.matches}
                    onChange={(e) => setNewPlayer({ ...newPlayer, matches: parseInt(e.target.value) || 0 })}
                  />
                </div>
              </div>
              <Button className="w-full" onClick={handleAddPlayer}>
                選手を追加
              </Button>
            </CardContent>
          </Card>
        </div>
      )}

{/* 試合追加ダイアログ */}
      {showAddMatchDialog && (
        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
          <Card className="w-full max-w-md mx-4">
            <CardHeader>
              <div className="flex items-center justify-between">
                <CardTitle>新しい試合を追加</CardTitle>
                <Button variant="ghost" size="icon" onClick={() => setShowAddMatchDialog(false)}>
                  <X className="h-4 w-4" />
                </Button>
              </div>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="space-y-2">
                <Label htmlFor="matchOpponent">対戦相手</Label>
                <Input
                  id="matchOpponent"
                  placeholder="対戦相手のチーム名"
                  value={newMatch.opponent}
                  onChange={(e) => setNewMatch({ ...newMatch, opponent: e.target.value })}
                />
              </div>
              <div className="grid grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label htmlFor="matchDate">日付</Label>
                  <Input
                    id="matchDate"
                    type="date"
                    value={newMatch.date}
                    onChange={(e) => setNewMatch({ ...newMatch, date: e.target.value })}
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="matchTime">時間</Label>
                  <Input
                    id="matchTime"
                    type="time"
                    value={newMatch.time}
                    onChange={(e) => setNewMatch({ ...newMatch, time: e.target.value })}
                  />
                </div>
              </div>
              <div className="grid grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label htmlFor="matchVenue">場所</Label>
                  <Select value={newMatch.venue} onValueChange={(value) => setNewMatch({ ...newMatch, venue: value })}>
                    <SelectTrigger>
                      <SelectValue placeholder="場所" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="ホーム">ホーム</SelectItem>
                      <SelectItem value="アウェイ">アウェイ</SelectItem>
                      <SelectItem value="中立地">中立地</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
                <div className="space-y-2">
                  <Label htmlFor="matchResult">結果</Label>
                  <Select
                    value={newMatch.result}
                    onValueChange={(value) => setNewMatch({ ...newMatch, result: value })}
                  >
                    <SelectTrigger>
                      <SelectValue placeholder="結果" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="未定">未定</SelectItem>
                      <SelectItem value="勝利">勝利</SelectItem>
                      <SelectItem value="引き分け">引き分け</SelectItem>
                      <SelectItem value="敗北">敗北</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
              </div>
              <Button className="w-full" onClick={handleAddMatch}>
                試合を追加
              </Button>
            </CardContent>
          </Card>
        </div>
      )}

{/* 選手ドキュメントモーダル */}
      {selectedPlayer && <PlayerDocument player={selectedPlayer} onClose={() => setSelectedPlayer(null)} />}
    </div>
  )
}
[V0_FILE]json:file="package.json"
{
  "name": "my-v0-project",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@hookform/resolvers": "^3.9.1",
    "@radix-ui/react-accordion": "1.2.2",
    "@radix-ui/react-alert-dialog": "1.1.4",
    "@radix-ui/react-aspect-ratio": "1.1.1",
    "@radix-ui/react-avatar": "1.1.2",
    "@radix-ui/react-checkbox": "1.1.3",
    "@radix-ui/react-collapsible": "1.1.2",
    "@radix-ui/react-context-menu": "2.2.4",
    "@radix-ui/react-dialog": "1.1.4",
    "@radix-ui/react-dropdown-menu": "2.1.4",
    "@radix-ui/react-hover-card": "1.1.4",
    "@radix-ui/react-label": "2.1.1",
    "@radix-ui/react-menubar": "1.1.4",
    "@radix-ui/react-navigation-menu": "1.2.3",
    "@radix-ui/react-popover": "1.1.4",
    "@radix-ui/react-progress": "1.1.1",
    "@radix-ui/react-radio-group": "1.2.2",
    "@radix-ui/react-scroll-area": "1.2.2",
    "@radix-ui/react-select": "2.1.4",
    "@radix-ui/react-separator": "1.1.1",
    "@radix-ui/react-slider": "1.2.2",
    "@radix-ui/react-slot": "1.1.1",
    "@radix-ui/react-switch": "1.1.2",
    "@radix-ui/react-tabs": "1.1.2",
    "@radix-ui/react-toast": "1.2.4",
    "@radix-ui/react-toggle": "1.1.1",
    "@radix-ui/react-toggle-group": "1.1.1",
    "@radix-ui/react-tooltip": "1.1.6",
    "@vercel/analytics": "1.3.1",
    "autoprefixer": "^10.4.20",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "cmdk": "1.0.4",
    "date-fns": "4.1.0",
    "embla-carousel-react": "8.5.1",
    "geist": "^1.3.1",
    "input-otp": "1.4.1",
    "lucide-react": "^0.454.0",
    "next": "16.0.10",
    "next-themes": "^0.4.4",
    "react": "^19",
    "react-day-picker": "9.8.0",
    "react-dom": "^19",
    "react-hook-form": "^7.54.1",
    "react-resizable-panels": "^2.1.7",
    "recharts": "2.15.0",
    "sonner": "^1.7.1",
    "tailwind-merge": "^2.5.5",
    "tailwindcss-animate": "^1.0.7",
    "vaul": "^0.9.6",
    "zod": "^3.24.1"
  },
  "devDependencies": {
    "@types/node": "^22",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "postcss": "^8.5",
    "tailwindcss": "^3.4.17",
    "typescript": "5.7.3"
  }
}
[V0_FILE]typescriptreact:file="components/soccer-field.tsx"
"use client"

import type React from "react"
import { useState } from "react"

interface FieldPlayer {
  id: number
  name: string
  position: string
  number: number
  x: number
  y: number
}

interface RosterPlayer {
  id: number
  name: string
  position: string
  number: number
  goals: number
  assists: number
  matches: number
}

interface Player {
  id: number
  name: string
  position: string
  number: number
  x: number
  y: number
}

interface SoccerFieldProps {
  showOpponentTeam?: boolean
  setShowOpponentTeam?: (show: boolean) => void
  availablePlayers?: RosterPlayer[]
  startingPlayers?: FieldPlayer[]
  benchPlayers?: FieldPlayer[]
  onStartingPlayersChange?: (players: FieldPlayer[]) => void
  onBenchPlayersChange?: (players: FieldPlayer[]) => void
}

const initialBenchPlayers: FieldPlayer[] = [
  { id: 1, name: "Player 1", position: "MF", number: 1, x: 120, y: 20 },
  { id: 2, name: "Player 2", position: "MF", number: 2, x: 120, y: 30 },
  { id: 3, name: "Player 3", position: "MF", number: 3, x: 120, y: 40 },
  { id: 4, name: "Player 4", position: "MF", number: 4, x: 120, y: 50 },
  { id: 5, name: "Player 5", position: "MF", number: 5, x: 120, y: 60 },
  { id: 6, name: "Player 6", position: "MF", number: 6, x: 120, y: 70 },
  { id: 7, name: "Player 7", position: "MF", number: 7, x: 120, y: 80 },
]

export function SoccerField({ 
  showOpponentTeam = false, 
  setShowOpponentTeam,
  availablePlayers = [],
  startingPlayers: externalStartingPlayers,
  benchPlayers: externalBenchPlayers,
  onStartingPlayersChange,
  onBenchPlayersChange,
}: SoccerFieldProps) {
  // 外部propsがある場合はそれを使用、なければローカル状態
  const [localFieldPlayers, setLocalFieldPlayers] = useState<FieldPlayer[]>([])
  const [localBenchPlayers, setLocalBenchPlayers] = useState<FieldPlayer[]>([])
  
  const fieldPlayers = externalStartingPlayers || localFieldPlayers
  const benchPlayersState = externalBenchPlayers || localBenchPlayers
  
  const setFieldPlayers = (updater: FieldPlayer[] | ((prev: FieldPlayer[]) => FieldPlayer[])) => {
    const newPlayers = typeof updater === 'function' ? updater(fieldPlayers) : updater
    if (onStartingPlayersChange) {
      onStartingPlayersChange(newPlayers)
    } else {
      setLocalFieldPlayers(newPlayers)
    }
  }
  
  const setBenchPlayersState = (updater: FieldPlayer[] | ((prev: FieldPlayer[]) => FieldPlayer[])) => {
    const newPlayers = typeof updater === 'function' ? updater(benchPlayersState) : updater
    if (onBenchPlayersChange) {
      onBenchPlayersChange(newPlayers)
    } else {
      setLocalBenchPlayers(newPlayers)
    }
  }

const [opponentPlayers, setOpponentPlayers] = useState<FieldPlayer[]>([])

const [opponentBenchPlayers, setOpponentBenchPlayers] = useState<Player[]>([])

const [draggedPlayer, setDraggedPlayer] = useState<number | null>(null)
  const [substitutions, setSubstitutions] = useState<
    Array<{ from: number; to: number; time: string; action?: string }>
  >([])
  const [draggedFromBench, setDraggedFromBench] = useState<boolean>(false)
  const [selectedFieldPlayer, setSelectedFieldPlayer] = useState<number | null>(null)
  const [selectedBenchPlayer, setSelectedBenchPlayer] = useState<number | null>(null)
  const [substitutionCount, setSubstitutionCount] = useState(0)
  const [showSubstitutionDialog, setShowSubstitutionDialog] = useState(false)
  const maxSubstitutions = 5
  const [dragOffset, setDragOffset] = useState<{ x: number; y: number }>({ x: 0, y: 0 })

// 選手追加用の状態
  const [showAddPlayerDialog, setShowAddPlayerDialog] = useState(false)
  const [addPlayerTarget, setAddPlayerTarget] = useState<'field' | 'bench' | 'opponent' | 'opponentBench'>('field')
  const [newPlayerName, setNewPlayerName] = useState('')
  const [newPlayerNumber, setNewPlayerNumber] = useState('')
  const [newPlayerPosition, setNewPlayerPosition] = useState('MF')

const getNextPlayerId = (target: 'field' | 'bench' | 'opponent' | 'opponentBench') => {
    if (target === 'opponent' || target === 'opponentBench') {
      const allOpponentIds = [...opponentPlayers, ...opponentBenchPlayers].map(p => p.id)
      return allOpponentIds.length > 0 ? Math.max(...allOpponentIds) + 1 : 101
    }
    const allOwnIds = [...fieldPlayers, ...benchPlayersState].map(p => p.id)
    return allOwnIds.length > 0 ? Math.max(...allOwnIds) + 1 : 1
  }

const addPlayer = () => {
    if (!newPlayerName.trim() || !newPlayerNumber.trim()) return

const newPlayer: Player = {
      id: getNextPlayerId(addPlayerTarget),
      name: newPlayerName.trim(),
      position: newPlayerPosition,
      number: parseInt(newPlayerNumber, 10),
      x: 50,
      y: 70,
    }

if (addPlayerTarget === 'field') {
      // 自チームフィールド（下半分）
      const fieldCount = fieldPlayers.filter(p => p.id < 100).length
      newPlayer.x = 20 + (fieldCount % 5) * 15
      newPlayer.y = 55 + Math.floor(fieldCount / 5) * 10
      setFieldPlayers(prev => [...prev, newPlayer])
    } else if (addPlayerTarget === 'bench') {
      // 自チームベンチ
      const benchCount = benchPlayersState.length
      newPlayer.x = 120
      newPlayer.y = 20 + benchCount * 10
      setBenchPlayersState(prev => [...prev, newPlayer])
    } else if (addPlayerTarget === 'opponent') {
      // 相手チームフィールド（上半分）
      newPlayer.id = getNextPlayerId('opponent')
      const opponentCount = opponentPlayers.length
      newPlayer.x = 20 + (opponentCount % 5) * 15
      newPlayer.y = 15 + Math.floor(opponentCount / 5) * 10
      setOpponentPlayers(prev => [...prev, newPlayer])
    } else if (addPlayerTarget === 'opponentBench') {
      // 相手チームベンチ
      newPlayer.id = getNextPlayerId('opponentBench')
      const benchCount = opponentBenchPlayers.length
      newPlayer.x = 20
      newPlayer.y = 20 + benchCount * 10
      setOpponentBenchPlayers(prev => [...prev, newPlayer])
    }

setNewPlayerName('')
    setNewPlayerNumber('')
    setNewPlayerPosition('MF')
    setShowAddPlayerDialog(false)
  }

const handlePlayerSelection = (playerId: number, isOnField: boolean) => {
    if (isOnField) {
      setSelectedFieldPlayer(selectedFieldPlayer === playerId ? null : playerId)
      setSelectedBenchPlayer(null)
    } else {
      setSelectedBenchPlayer(selectedBenchPlayer === playerId ? null : playerId)
      setSelectedFieldPlayer(null)
    }
  }

const executeSubstitution = () => {
    if (selectedFieldPlayer && selectedBenchPlayer && substitutionCount < maxSubstitutions) {
      const fieldPlayerToReplace = fieldPlayers.find((p) => p.id === selectedFieldPlayer)
      const benchPlayerToEnter =
        benchPlayersState.find((p) => p.id === selectedBenchPlayer) ||
        opponentBenchPlayers.find((p) => p.id === selectedBenchPlayer)

if (fieldPlayerToReplace && benchPlayerToEnter) {
        // 1. Remove fieldPlayerToReplace from fieldPlayers and add to benchPlayersState
        setFieldPlayers((prev) => prev.filter((p) => p.id !== fieldPlayerToReplace.id))
        // Only add to benchPlayersState if it's our team's player
        if (fieldPlayerToReplace.id < 100) {
          const originalBenchPos = initialBenchPlayers.find((p) => p.id === fieldPlayerToReplace.id)
          setBenchPlayersState((prev) => [
            ...prev,
            { ...fieldPlayerToReplace, x: originalBenchPos?.x || 120, y: originalBenchPos?.y || 50 },
          ])
        }

// 2. Remove benchPlayerToEnter from benchPlayersState and add to fieldPlayers
        if (benchPlayerToEnter.id < 100) {
          setBenchPlayersState((prev) => prev.filter((p) => p.id !== benchPlayerToEnter.id))
        }
        setFieldPlayers((prev) => [
          ...prev,
          { ...benchPlayerToEnter, x: fieldPlayerToReplace.x, y: fieldPlayerToReplace.y },
        ])

// 交代記録を追加
        const now = new Date()
        setSubstitutions((prev) => [
          ...prev,
          {
            from: selectedFieldPlayer,
            to: selectedBenchPlayer,
            time: `${now.getHours()}:${now.getMinutes().toString().padStart(2, "0")}`,
            action: `交代: ${fieldPlayerToReplace.name} → ${benchPlayerToEnter.name}`,
          },
        ])

setSubstitutionCount((prev) => prev + 1)
        setSelectedFieldPlayer(null)
        setSelectedBenchPlayer(null)
        setShowSubstitutionDialog(false)
      }
    }
  }

const handleMouseDown = (playerId: number, fromBench = false, e?: React.MouseEvent) => {
    if (e) {
      const rect = e.currentTarget.getBoundingClientRect()
      // SVGのviewBox座標系に正確に変換
      const mouseX = ((e.clientX - rect.left) / rect.width) * 140
      const mouseY = ((e.clientY - rect.top) / rect.height) * 100

const player =
        fieldPlayers.find((p) => p.id === playerId) ||
        benchPlayersState.find((p) => p.id === playerId) ||
        opponentBenchPlayers.find((p) => p.id === playerId)

if (player) {
        setDragOffset({
          x: mouseX - player.x,
          y: mouseY - player.y,
        })
      }
    }

setDraggedPlayer(playerId)
    setDraggedFromBench(fromBench)
  }

const handleMouseMove = (e: React.MouseEvent<SVGElement>) => {
    if (draggedPlayer === null) return

const rect = e.currentTarget.getBoundingClientRect()
    // viewBox座標系に変換
    const mouseX = ((e.clientX - rect.left) / rect.width) * 140
    const mouseY = ((e.clientY - rect.top) / rect.height) * 100

// ドラッグオフセットを適用した実際の位置
    const targetX = mouseX - dragOffset.x
    const targetY = mouseY - dragOffset.y

// ベンチエリアの判定
    const isInOwnBench = mouseX >= 105 && mouseX <= 135 && mouseY >= 10 && mouseY <= 90
    const isInOpponentBench = mouseX >= 5 && mouseX <= 35 && mouseY >= 10 && mouseY <= 90

if (draggedFromBench) {
      // ベンチからフィールドへの投入
      // フィールド内（0-100の範囲）に制限
      const clampedX = Math.max(5, Math.min(95, targetX))
      let clampedY = targetY

if (draggedPlayer < 100) {
        // 自チーム：下半分（50-95）
        clampedY = Math.max(52, Math.min(95, targetY))
      } else {
        // 相手チーム：上半分（5-48）
        clampedY = Math.max(5, Math.min(48, targetY))
      }

const benchPlayer =
        benchPlayersState.find((p) => p.id === draggedPlayer) ||
        opponentBenchPlayers.find((p) => p.id === draggedPlayer)

if (benchPlayer) {
        if (!fieldPlayers.find((p) => p.id === draggedPlayer)) {
          setFieldPlayers((prev) => [...prev, { ...benchPlayer, x: clampedX, y: clampedY }])
          if (benchPlayer.id < 100) {
            // Only remove from our bench if it's our player
            setBenchPlayersState((prev) => prev.filter((p) => p.id !== draggedPlayer))
          }
        } else {
          setFieldPlayers((prev) =>
            prev.map((player) => (player.id === draggedPlayer ? { ...player, x: clampedX, y: clampedY } : player)),
          )
        }
      }
    } else {
      // フィールド選手の移動
      if ((isInOwnBench && draggedPlayer < 100) || (isInOpponentBench && draggedPlayer >= 100)) {
        return
      }

// フィールド内（0-100の範囲）に制限
      const clampedX = Math.max(5, Math.min(95, targetX))
      let clampedY = targetY

if (draggedPlayer < 100) {
        // 自チーム：下半分（50-95）
        clampedY = Math.max(50, Math.min(98, targetY))
      } else {
        // 相手チーム：上半分（5-48）
        clampedY = Math.max(5, Math.min(48, targetY))
      }

setFieldPlayers((prev) =>
        prev.map((player) => (player.id === draggedPlayer ? { ...player, x: clampedX, y: clampedY } : player)),
      )
    }
  }

const handleMouseUp = (e?: React.MouseEvent<SVGElement>) => {
    if (draggedPlayer === null) return

if (e) {
      const rect = e.currentTarget.getBoundingClientRect()
      const mouseX = ((e.clientX - rect.left) / rect.width) * 140
      const mouseY = ((e.clientY - rect.top) / rect.height) * 100

// ベンチエリアの判定
      const isInOwnBench = mouseX >= 105 && mouseX <= 135 && mouseY >= 10 && mouseY <= 90
      const isInOpponentBench = mouseX >= 5 && mouseX <= 35 && mouseY >= 10 && mouseY <= 90

// フィールド選手をベンチに戻す
      if (!draggedFromBench) {
        if ((isInOwnBench && draggedPlayer < 100) || (isInOpponentBench && draggedPlayer >= 100)) {
          const playerToMoveToBench = fieldPlayers.find((p) => p.id === draggedPlayer)
          if (playerToMoveToBench) {
            setFieldPlayers((prev) => prev.filter((p) => p.id !== draggedPlayer))

// Add to benchPlayersState, maintaining its original bench coordinates if possible, or default
            if (playerToMoveToBench.id < 100) {
              // Only add to our bench if it's our player
              const originalBenchPos = initialBenchPlayers.find((p) => p.id === draggedPlayer)
              setBenchPlayersState((prev) => [
                ...prev,
                { ...playerToMoveToBench, x: originalBenchPos?.x || 120, y: originalBenchPos?.y || 50 },
              ])
            }
          }

const now = new Date()
          const playerName = fieldPlayers.find((p) => p.id === draggedPlayer)?.name || "選手"
          setSubstitutions((prev) => [
            ...prev,
            {
              from: draggedPlayer,
              to: 0,
              time: `${now.getHours()}:${now.getMinutes().toString().padStart(2, "0")}`,
              action: `${playerName} ベンチに戻る`,
            },
          ])
        }
      }
    }

setDraggedPlayer(null)
    setDraggedFromBench(false)
    setDragOffset({ x: 0, y: 0 })
  }

const handleSubstitution = (benchPlayerId: number, fieldPlayerId: number) => {
    const benchPlayer =
      benchPlayersState.find((p) => p.id === benchPlayerId) || opponentBenchPlayers.find((p) => p.id === benchPlayerId)
    const fieldPlayer = fieldPlayers.find((p) => p.id === fieldPlayerId)

if (benchPlayer && fieldPlayer) {
      // This function is not currently used in the UI for direct substitution,
      // the logic is in executeSubstitution. Keeping it for completeness if it were to be used.
      // If used, it would need to update fieldPlayers and benchPlayersState.
    }
  }

return (
    <div className="w-full max-w-4xl mx-auto">
      <svg
        viewBox="0 0 140 100"
        className="w-full h-auto bg-green-500 border-2 border-white rounded-lg cursor-pointer"
        style={{ aspectRatio: "1.5/1" }}
        onMouseMove={handleMouseMove}
        onMouseUp={(e) => handleMouseUp(e)}
        onMouseLeave={handleMouseUp}
      >
        {/* フィールドの背景 */}
        <defs>
          <pattern id="grass" patternUnits="userSpaceOnUse" width="4" height="4">
            <rect width="4" height="4" fill="#22c55e" />
            <rect width="2" height="2" fill="#16a34a" />
            <rect x="2" y="2" width="2" height="2" fill="#16a34a" />
          </pattern>
        </defs>
        <rect width="100" height="100" fill="url(#grass)" />

{/* フィールドの境界線 */}
        <rect x="2" y="2" width="96" height="96" fill="none" stroke="white" strokeWidth="0.3" />

{/* ハーフライン強調 */}
        <line x1="2" y1="50" x2="98" y2="50" stroke="white" strokeWidth="0.5" strokeDasharray="2,1" />
        <text
          x="50"
          y="48"
          textAnchor="middle"
          fontSize="2"
          fill="white"
          fontWeight="bold"
          className="pointer-events-none select-none"
        >
          自チーム
        </text>
        <text
          x="50"
          y="52"
          textAnchor="middle"
          fontSize="2"
          fill="white"
          fontWeight="bold"
          className="pointer-events-none select-none"
        >
          相手チーム
        </text>

{/* センターサークル */}
        <circle cx="50" cy="50" r="8" fill="none" stroke="white" strokeWidth="0.3" />
        <circle cx="50" cy="50" r="0.5" fill="white" />

{/* ペナルティエリア（上） */}
        <rect x="25" y="2" width="50" height="15" fill="none" stroke="white" strokeWidth="0.3" />
        {/* ゴールエリア（上） */}
        <rect x="37.5" y="2" width="25" height="6" fill="none" stroke="white" strokeWidth="0.3" />
        {/* ペナルティスポット（上） */}
        <circle cx="50" cy="10" r="0.5" fill="white" />
        {/* ペナルティアーク（上） */}
        <path d="M 35 17 A 8 8 0 0 1 65 17" fill="none" stroke="white" strokeWidth="0.3" />

{/* ペナルティエリア（下） */}
        <rect x="25" y="83" width="50" height="15" fill="none" stroke="white" strokeWidth="0.3" />
        {/* ゴールエリア（下） */}
        <rect x="37.5" y="92" width="25" height="6" fill="none" stroke="white" strokeWidth="0.3" />
        {/* ペナルティスポット（下） */}
        <circle cx="50" cy="90" r="0.5" fill="white" />
        {/* ペナルティアーク（下） */}
        <path d="M 35 83 A 8 8 0 0 0 65 83" fill="none" stroke="white" strokeWidth="0.3" />

{/* ゴール（上） */}
        <rect x="45" y="0" width="10" height="2" fill="none" stroke="white" strokeWidth="0.3" />
        {/* ゴール（下） */}
        <rect x="45" y="98" width="10" height="2" fill="none" stroke="white" strokeWidth="0.3" />

{/* コーナーアーク */}
        <path d="M 2 5 A 3 3 0 0 1 5 2" fill="none" stroke="white" strokeWidth="0.3" />
        <path d="M 95 2 A 3 3 0 0 1 98 5" fill="none" stroke="white" strokeWidth="0.3" />
        <path d="M 98 95 A 3 3 0 0 1 95 98" fill="none" stroke="white" strokeWidth="0.3" />
        <path d="M 5 98 A 3 3 0 0 1 2 95" fill="none" stroke="white" strokeWidth="0.3" />

{/* 選手 */}
        {fieldPlayers.map((player) => (
          <g key={player.id}>
            {/* 選手の影 */}
            <circle cx={player.x + 0.5} cy={player.y + 0.5} r="2.5" fill="rgba(0,0,0,0.3)" />
            {/* 選手 */}
            <circle
              cx={player.x}
              cy={player.y}
              r="2.5"
              fill={player.position === "GK" ? "#f59e0b" : "#3b82f6"}
              stroke={selectedFieldPlayer === player.id ? "#fbbf24" : "white"}
              strokeWidth={selectedFieldPlayer === player.id ? "0.8" : "0.3"}
              className="cursor-move hover:stroke-2 transition-all"
              onMouseDown={(e) => handleMouseDown(player.id, false, e)}
              onClick={(e) => {
                e.stopPropagation()
                handlePlayerSelection(player.id, true)
              }}
            />
            {/* 背番号 */}
            <text
              x={player.x}
              y={player.y + 0.5}
              textAnchor="middle"
              fontSize="2"
              fill="white"
              fontWeight="bold"
              className="pointer-events-none select-none"
            >
              {player.number}
            </text>
            {/* 選手名 */}
            <text
              x={player.x}
              y={player.y - 4}
              textAnchor="middle"
              fontSize="1.5"
              fill="white"
              fontWeight="bold"
              className="pointer-events-none select-none"
              style={{ textShadow: "1px 1px 2px rgba(0,0,0,0.8)" }}
            >
              {player.name}
            </text>
          </g>
        ))}
        {/* 相手チーム選手 */}
        {showOpponentTeam &&
          opponentPlayers.map((player) => (
            <g key={player.id}>
              {/* 選手の影 */}
              <circle cx={player.x + 0.5} cy={player.y + 0.5} r="2.5" fill="rgba(0,0,0,0.3)" />
              {/* 選手 */}
              <circle
                cx={player.x}
                cy={player.y}
                r="2.5"
                fill={player.position === "GK" ? "#dc2626" : "#ef4444"}
                stroke="white"
                strokeWidth="0.3"
                className="cursor-move hover:stroke-2 transition-all"
                onMouseDown={(e) => handleMouseDown(player.id, false, e)}
              />
              {/* 背番号 */}
              <text
                x={player.x}
                y={player.y + 0.5}
                textAnchor="middle"
                fontSize="2"
                fill="white"
                fontWeight="bold"
                className="pointer-events-none select-none"
              >
                {player.number}
              </text>
              {/* 選手名 */}
              <text
                x={player.x}
                y={player.y - 4}
                textAnchor="middle"
                fontSize="1.5"
                fill="white"
                fontWeight="bold"
                className="pointer-events-none select-none"
                style={{ textShadow: "1px 1px 2px rgba(0,0,0,0.8)" }}
              >
                {player.name}
              </text>
            </g>
          ))}

{/* ベンチエリア */}
        <rect
          x="105"
          y="10"
          width="30"
          height="80"
          fill="rgba(139, 69, 19, 0.3)"
          stroke="white"
          strokeWidth="0.3"
          rx="2"
        />
        <text x="120" y="8" textAnchor="middle" fontSize="2" fill="white" fontWeight="bold">
          ベンチ
        </text>

{/* ベンチの座席 */}
        {Array.from({ length: 7 }, (_, i) => (
          <rect
            key={i}
            x="107"
            y={15 + i * 10}
            width="26"
            height="8"
            fill="rgba(139, 69, 19, 0.5)"
            stroke="white"
            strokeWidth="0.2"
            rx="1"
          />
        ))}

{/* ベンチメンバー */}
        {benchPlayersState // Changed from benchPlayers
          .filter((player) => !fieldPlayers.find((p) => p.id === player.id)) // Ensure player is not on field
          .map((player) => (
            <g key={player.id}>
              <circle cx={player.x + 0.3} cy={player.y + 0.3} r="2" fill="rgba(0,0,0,0.3)" />
              <circle
                cx={player.x}
                cy={player.y}
                r="2"
                fill={player.position === "GK" ? "#f59e0b" : "#6b7280"}
                stroke={selectedBenchPlayer === player.id ? "#fbbf24" : "white"}
                strokeWidth={selectedBenchPlayer === player.id ? "0.6" : "0.2"}
                className="cursor-pointer hover:stroke-2 transition-all"
                onMouseDown={(e) => handleMouseDown(player.id, true, e)}
                onClick={(e) => {
                  e.stopPropagation()
                  handlePlayerSelection(player.id, false)
                }}
              />
              <text
                x={player.x}
                y={player.y + 0.3}
                textAnchor="middle"
                fontSize="1.5"
                fill="white"
                fontWeight="bold"
                className="pointer-events-none select-none"
              >
                {player.number}
              </text>
              <text
                x={player.x}
                y={player.y - 3}
                textAnchor="middle"
                fontSize="1.2"
                fill="white"
                fontWeight="bold"
                className="pointer-events-none select-none"
                style={{ textShadow: "1px 1px 2px rgba(0,0,0,0.8)" }}
              >
                {player.name}
              </text>
            </g>
          ))}

{showOpponentTeam && (
          <>
            {/* 相手チームベンチエリア */}
            <rect
              x="5"
              y="10"
              width="30"
              height="80"
              fill="rgba(220, 38, 38, 0.3)"
              stroke="white"
              strokeWidth="0.3"
              rx="2"
            />
            <text x="20" y="8" textAnchor="middle" fontSize="2" fill="white" fontWeight="bold">
              相手ベンチ
            </text>

{/* 相手チームベンチの座席 */}
            {Array.from({ length: 7 }, (_, i) => (
              <rect
                key={i}
                x="7"
                y={15 + i * 10}
                width="26"
                height="8"
                fill="rgba(220, 38, 38, 0.5)"
                stroke="white"
                strokeWidth="0.2"
                rx="1"
              />
            ))}

{/* 相手チームベンチメンバー */}
            {opponentBenchPlayers
              .filter((player) => !fieldPlayers.find((p) => p.id === player.id)) // Ensure player is not on field
              .map((player) => (
                <g key={player.id}>
                  <circle cx={player.x + 0.3} cy={player.y + 0.3} r="2" fill="rgba(0,0,0,0.3)" />
                  <circle
                    cx={player.x}
                    cy={player.y}
                    r="2"
                    fill={player.position === "GK" ? "#dc2626" : "#ef4444"}
                    stroke="white"
                    strokeWidth="0.2"
                    className="cursor-pointer hover:stroke-2 transition-all"
                    onMouseDown={(e) => handleMouseDown(player.id, true, e)}
                  />
                  <text
                    x={player.x}
                    y={player.y + 0.3}
                    textAnchor="middle"
                    fontSize="1.5"
                    fill="white"
                    fontWeight="bold"
                    className="pointer-events-none select-none"
                  >
                    {player.number}
                  </text>
                  <text
                    x={player.x}
                    y={player.y - 3}
                    textAnchor="middle"
                    fontSize="1.2"
                    fill="white"
                    fontWeight="bold"
                    className="pointer-events-none select-none"
                    style={{ textShadow: "1px 1px 2px rgba(0,0,0,0.8)" }}
                  >
                    {player.name}
                  </text>
                </g>
              ))}
          </>
        )}
        {/* ベンチドロップゾーン表示 */}
        {draggedPlayer !== null && !draggedFromBench && draggedPlayer < 100 && (
          <rect
            x="105"
            y="10"
            width="30"
            height="80"
            fill="rgba(59, 130, 246, 0.3)"
            stroke="#3b82f6"
            strokeWidth="0.5"
            strokeDasharray="2,2"
            rx="2"
          />
        )}

{draggedPlayer !== null && !draggedFromBench && draggedPlayer >= 100 && showOpponentTeam && (
          <rect
            x="5"
            y="10"
            width="30"
            height="80"
            fill="rgba(239, 68, 68, 0.3)"
            stroke="#ef4444"
            strokeWidth="0.5"
            strokeDasharray="2,2"
            rx="2"
          />
        )}
      </svg>

{/* 選手追加ボタン */}
      <div className="mt-4 flex flex-wrap gap-2">
        <button
          onClick={() => { setAddPlayerTarget('field'); setShowAddPlayerDialog(true) }}
          className="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors text-sm"
        >
          + 自チーム選手追加
        </button>
        <button
          onClick={() => { setAddPlayerTarget('bench'); setShowAddPlayerDialog(true) }}
          className="px-4 py-2 bg-gray-500 text-white rounded-lg hover:bg-gray-600 transition-colors text-sm"
        >
          + ベンチ選手追加
        </button>
        {showOpponentTeam && (
          <>
            <button
              onClick={() => { setAddPlayerTarget('opponent'); setShowAddPlayerDialog(true) }}
              className="px-4 py-2 bg-red-500 text-white rounded-lg hover:bg-red-600 transition-colors text-sm"
            >
              + 相手チーム選手追加
            </button>
            <button
              onClick={() => { setAddPlayerTarget('opponentBench'); setShowAddPlayerDialog(true) }}
              className="px-4 py-2 bg-red-400 text-white rounded-lg hover:bg-red-500 transition-colors text-sm"
            >
              + 相手ベンチ追加
            </button>
          </>
        )}
      </div>

{/* 交代コントロール */}
      <div className="mt-4 flex items-center justify-between">
        <div className="flex items-center gap-4">
          <div className="text-sm">
            <span className="font-semibold">交代回数: </span>
            <span className={substitutionCount >= maxSubstitutions ? "text-red-500" : "text-green-600"}>
              {substitutionCount}/{maxSubstitutions}
            </span>
          </div>
          {selectedFieldPlayer && selectedBenchPlayer && (
            <button
              onClick={() => setShowSubstitutionDialog(true)}
              disabled={substitutionCount >= maxSubstitutions}
              className="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 disabled:bg-gray-400 disabled:cursor-not-allowed transition-colors"
            >
              交代実行
            </button>
          )}
        </div>

<div className="text-xs text-muted-foreground">
          {selectedFieldPlayer ? "フィールド選手選択済み" : "フィールド選手をクリック"} •
          {selectedBenchPlayer ? "ベンチ選手選択済み" : "ベンチ選手をクリック"}
        </div>
      </div>

{/* 交代確認ダイアログ */}
      {showSubstitutionDialog && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
          <div className="bg-white p-6 rounded-lg shadow-lg max-w-md w-full mx-4">
            <h3 className="text-lg font-semibold mb-4">交代確認</h3>
            <div className="space-y-3 mb-6">
              <div className="flex items-center justify-between">
                <span>退場:</span>
                <span className="font-medium">
                  {fieldPlayers.find((p) => p.id === selectedFieldPlayer)?.name} (#
                  {fieldPlayers.find((p) => p.id === selectedFieldPlayer)?.number})
                </span>
              </div>
              <div className="flex items-center justify-between">
                <span>投入:</span>
                <span className="font-medium">
                  {
                    (
                      benchPlayersState.find((p) => p.id === selectedBenchPlayer) ||
                      opponentBenchPlayers.find((p) => p.id === selectedBenchPlayer)
                    )?.name
                  }
                  (#
                  {
                    (
                      benchPlayersState.find((p) => p.id === selectedBenchPlayer) ||
                      opponentBenchPlayers.find((p) => p.id === selectedBenchPlayer)
                    )?.number
                  }
                  )
                </span>
              </div>
              <div className="text-sm text-muted-foreground">
                残り交代回数: {maxSubstitutions - substitutionCount - 1}回
              </div>
            </div>
            <div className="flex space-x-3">
              <button
                onClick={() => setShowSubstitutionDialog(false)}
                className="flex-1 px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors"
              >
                キャンセル
              </button>
              <button
                onClick={executeSubstitution}
                className="flex-1 px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors"
              >
                交代実行
              </button>
            </div>
          </div>
        </div>
      )}

<div className="mt-4 text-center text-sm text-muted-foreground">
        <p>選手をドラッグしてフォーメーションを調整できます</p>
        <div className="flex items-center justify-center space-x-4 mt-2">
          <div className="flex items-center space-x-2">
            <div className="w-4 h-4 rounded-full bg-blue-500 border border-white"></div>
            <span>自チーム</span>
          </div>
          <div className="flex items-center space-x-2">
            <div className="w-4 h-4 rounded-full bg-amber-500 border border-white"></div>
            <span>自チーム GK</span>
          </div>
          {showOpponentTeam && (
            <>
              <div className="flex items-center space-x-2">
                <div className="w-4 h-4 rounded-full bg-red-500 border border-white"></div>
                <span>相手チーム</span>
              </div>
              <div className="flex items-center space-x-2">
                <div className="w-4 h-4 rounded-full bg-red-600 border border-white"></div>
                <span>相手チーム GK</span>
              </div>
            </>
          )}
        </div>
      </div>
      {substitutions.length > 0 && (
        <div className="mt-4 p-3 bg-muted rounded-lg">
          <h4 className="font-semibold mb-2">交代履歴</h4>
          {substitutions.map((sub, index) => (
            <div key={index} className="text-sm text-muted-foreground">
              {sub.time}: {sub.action || `#${sub.from} → #${sub.to}`}
            </div>
          ))}
        </div>
      )}

{/* 選手追加ダイアログ */}
      {showAddPlayerDialog && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
          <div className="bg-white p-6 rounded-lg shadow-lg max-w-md w-full mx-4">
            <h3 className="text-lg font-semibold mb-4">
              {addPlayerTarget === 'field' && '自チーム選手を追加'}
              {addPlayerTarget === 'bench' && 'ベンチ選手を追加'}
              {addPlayerTarget === 'opponent' && '相手チーム選手を追加'}
              {addPlayerTarget === 'opponentBench' && '相手ベンチ選手を追加'}
            </h3>
            <div className="space-y-4">
              <div>
                <label className="block text-sm font-medium mb-1">名前</label>
                <input
                  type="text"
                  value={newPlayerName}
                  onChange={(e) => setNewPlayerName(e.target.value)}
                  placeholder="選手名を入力"
                  className="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
                />
              </div>
              <div>
                <label className="block text-sm font-medium mb-1">背番号</label>
                <input
                  type="number"
                  value={newPlayerNumber}
                  onChange={(e) => setNewPlayerNumber(e.target.value)}
                  placeholder="背番号"
                  className="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
                />
              </div>
              <div>
                <label className="block text-sm font-medium mb-1">ポジション</label>
                <select
                  value={newPlayerPosition}
                  onChange={(e) => setNewPlayerPosition(e.target.value)}
                  className="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
                >
                  <option value="GK">GK</option>
                  <option value="DF">DF</option>
                  <option value="MF">MF</option>
                  <option value="FW">FW</option>
                </select>
              </div>
            </div>
            <div className="flex gap-3 mt-6">
              <button
                onClick={() => setShowAddPlayerDialog(false)}
                className="flex-1 px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors"
              >
                キャンセル
              </button>
              <button
                onClick={addPlayer}
                disabled={!newPlayerName.trim() || !newPlayerNumber.trim()}
                className="flex-1 px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 disabled:bg-gray-400 disabled:cursor-not-allowed transition-colors"
              >
                追加
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  )
}</article></body></html>