\n \n Data Type:\n onDataTypeChange(e.target.value as DataType)}\n style={selectStyle}\n disabled={loading}\n aria-label=\"Select data type\"\n >\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n \n Season:\n onSeasonChange(e.target.value)}\n style={selectStyle}\n disabled={loading}\n aria-label=\"Select season\"\n >\n {seasons.map(s => (\n \n ))}\n \n \n\n \n Phase:\n onPhaseChange(e.target.value)}\n style={selectStyle}\n disabled={loading}\n aria-label=\"Select phase\"\n >\n \n \n \n \n \n \n\n \n Team:\n onTeamChange(e.target.value)}\n style={selectStyle}\n disabled={loading}\n aria-label=\"Select team\"\n >\n \n {teams.map((team, idx) => (\n \n ))}\n \n \n\n {(dataType.startsWith('standings-') || dataType.startsWith('coaches')) && (\n \n Round:\n onRoundNumberChange(e.target.value)}\n style={selectStyle}\n disabled={loading}\n min=\"1\"\n max=\"50\"\n aria-label=\"Round number\"\n />\n \n )}\n

\n );\n}\n\n// StatsTable Component\ninterface StatsTableProps {\n data: T[];\n columns: Array<{ key: string; label: string; format?: (value: unknown, row: T, index?: number) => string | React.ReactNode }>;\n sortable?: boolean;\n pageSize?: number;\n}\n\nfunction StatsTable>({\n data,\n columns,\n sortable = true,\n pageSize = 25\n}: StatsTableProps) {\n const [sortColumn, setSortColumn] = useState(null);\n const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>('asc');\n const [currentPage, setCurrentPage] = useState(1);\n\n const sortedData = useMemo(() => {\n if (!data || !Array.isArray(data)) return [];\n if (!sortable || !sortColumn) return data;\n \n try {\n return [...data].sort((a, b) => {\n if (!a || !b) return 0;\n const aVal = a[sortColumn];\n const bVal = b[sortColumn];\n \n if (aVal === null || aVal === undefined) return 1;\n if (bVal === null || bVal === undefined) return -1;\n \n const comparison = \n typeof aVal === 'number' && typeof bVal === 'number'\n ? aVal - bVal\n : String(aVal).localeCompare(String(bVal));\n \n return sortDirection === 'asc' ? comparison : -comparison;\n });\n } catch (error) {\n console.error('Error sorting data:', error);\n return data;\n }\n }, [data, sortColumn, sortDirection, sortable]);\n\n const paginatedData = useMemo(() => {\n if (!sortedData || !Array.isArray(sortedData)) return [];\n const start = (currentPage - 1) * pageSize;\n return sortedData.slice(start, start + pageSize);\n }, [sortedData, currentPage, pageSize]);\n\n const totalPages = Math.ceil(sortedData.length / pageSize);\n\n const handleSort = (column: string) => {\n if (!sortable) return;\n if (sortColumn === column) {\n setSortDirection(sortDirection === 'asc' ? 'desc' : 'asc');\n } else {\n setSortColumn(column);\n setSortDirection('asc');\n }\n };\n\n if (!data || data.length === 0) {\n return

No data available

;\n }\n\n // Safety check for sortedData and paginatedData\n if (!sortedData || sortedData.length === 0) {\n return

No data available

;\n }\n\n return (\n

\n Showing {paginatedData.length} of {sortedData.length} results\n

\n \n \n \n {columns.map(col => (\n sortable && handleSort(col.key)}\n style={{\n ...thStyle,\n ...(sortable ? { cursor: 'pointer', userSelect: 'none' } : {}),\n ...(sortColumn === col.key ? { backgroundColor: '#e3f2fd' } : {})\n }}\n title={sortable ? `Click to sort by ${col.label}` : undefined}\n aria-sort={sortColumn === col.key ? (sortDirection === 'asc' ? 'ascending' : 'descending') : 'none'}\n >\n {col.label}\n {sortColumn === col.key && (\n \n {sortDirection === 'asc' ? ' ↑' : ' ↓'}\n \n )}\n \n ))}\n \n \n \n {paginatedData.map((row, idx) => (\n \n {columns.map((col, colIdx) => {\n try {\n const value = row[col.key];\n const formatted = col.format\n ? col.format(value, row, idx)\n : String(value ?? '-');\n return (\n \n );\n } catch (error) {\n console.error(`Error rendering column ${col.key}:`, error);\n return (\n \n );\n }\n })}\n \n ))}\n \n

\n {formatted}\n	\n -\n

\n {totalPages > 1 && (\n

\n setCurrentPage(p => Math.max(1, p - 1))}\n disabled={currentPage === 1}\n style={buttonStyle}\n aria-label=\"Previous page\"\n >\n Previous\n \n \n Page {currentPage} of {totalPages}\n \n setCurrentPage(p => Math.min(totalPages, p + 1))}\n disabled={currentPage === totalPages}\n style={buttonStyle}\n aria-label=\"Next page\"\n >\n Next\n \n

\n )}\n

\n );\n}\n\n// Charts Component\ninterface ChartsProps {\n data: PlayerStats[];\n selectedPlayers: number[];\n onPlayerSelect: (playerId: number) => void;\n}\n\ntype ChartType = 'bar' | 'line' | 'radar';\n\n// Simple SVG-based fallback chart that always works\nfunction FallbackChart({ data, chartType }: { data: any; chartType: ChartType }) {\n // Use viewport width minus padding for responsive sizing\n const [containerWidth, setContainerWidth] = useState(1200);\n const height = 450; // Increased height to prevent vertical overflow\n const padding = { top: 50, right: 50, bottom: 100, left: 80 }; // Increased bottom padding for labels\n const chartWidth = containerWidth - padding.left - padding.right;\n const chartHeight = height - padding.top - padding.bottom;\n\n // Update width on mount and resize\n useEffect(() => {\n const updateWidth = () => {\n const viewportWidth = window.innerWidth;\n const maxWidth = Math.min(viewportWidth - 80, 1400); // Almost full width with small margins\n setContainerWidth(maxWidth);\n };\n \n updateWidth();\n window.addEventListener('resize', updateWidth);\n return () => window.removeEventListener('resize', updateWidth);\n }, []);\n\n const labels = data.labels || [];\n const datasets = data.datasets || [];\n \n if (labels.length === 0 || datasets.length === 0) {\n return (\n

\n No data available for chart\n

\n );\n }\n\n // Calculate max value across all datasets\n const maxValue = Math.max(\n ...datasets.flatMap(d => d.data || []),\n 1\n );\n\n // Colors for datasets\n const colors = [\n { fill: 'rgba(54, 162, 235, 0.6)', stroke: 'rgba(54, 162, 235, 1)' },\n { fill: 'rgba(255, 99, 132, 0.6)', stroke: 'rgba(255, 99, 132, 1)' },\n { fill: 'rgba(75, 192, 192, 0.6)', stroke: 'rgba(75, 192, 192, 1)' },\n { fill: 'rgba(255, 206, 86, 0.6)', stroke: 'rgba(255, 206, 86, 1)' },\n ];\n\n const barWidth = chartWidth / (labels.length * datasets.length + labels.length);\n const stepX = chartWidth / labels.length;\n\n return (\n

\n \n

\n );\n}\n\nfunction Charts({ data, selectedPlayers, onPlayerSelect }: ChartsProps) {\n const [showChart, setShowChart] = useState(false);\n const [chartError, setChartError] = useState(null);\n const [chartType, setChartType] = useState('bar');\n const [useChartJS, setUseChartJS] = useState(true);\n const [chartJSAvailable, setChartJSAvailable] = useState(false);\n\n // Check if Chart.js is available on mount\n useEffect(() => {\n try {\n if (typeof Chart !== 'undefined') {\n setChartJSAvailable(true);\n }\n } catch (error) {\n console.warn('Chart.js not available, will use fallback:', error);\n setChartJSAvailable(false);\n setUseChartJS(false);\n }\n }, []);\n\n if (data.length === 0) {\n return (\n

\n Select players from the table below to compare their stats\n

\n );\n }\n\n // Show top 10 players by default if none selected, or selected players\n const displayData = selectedPlayers.length > 0\n ? selectedPlayers.map(idx => data[idx]).filter(Boolean).slice(0, 10)\n : data.slice(0, 10);\n\n if (displayData.length === 0) {\n return null;\n }\n\n const chartData = {\n labels: displayData.map(p => p.name || 'Unknown'),\n datasets: [\n {\n label: 'Points',\n data: displayData.map(p => p.score || 0),\n backgroundColor: 'rgba(54, 162, 235, 0.6)',\n borderColor: 'rgba(54, 162, 235, 1)',\n borderWidth: 2,\n },\n {\n label: 'Rebounds',\n data: displayData.map(p => p.totalRebounds || 0),\n backgroundColor: 'rgba(255, 99, 132, 0.6)',\n borderColor: 'rgba(255, 99, 132, 1)',\n borderWidth: 2,\n },\n {\n label: 'Assists',\n data: displayData.map(p => p.assistances || 0),\n backgroundColor: 'rgba(75, 192, 192, 0.6)',\n borderColor: 'rgba(75, 192, 192, 1)',\n borderWidth: 2,\n },\n {\n label: 'PIR',\n data: displayData.map(p => p.valuation || 0),\n backgroundColor: 'rgba(255, 206, 86, 0.6)',\n borderColor: 'rgba(255, 206, 86, 1)',\n borderWidth: 2,\n },\n ],\n };\n\n // Always show table view, with optional chart button\n return (\n

\n {selectedPlayers.length > 0 ? 'Selected Players Comparison' : 'Top 10 Players Comparison'}\n

\n {showChart && (\n setChartType(e.target.value as ChartType)}\n style={{\n padding: '6px 12px',\n borderRadius: '4px',\n border: '1px solid #ddd',\n fontSize: '14px',\n backgroundColor: 'white',\n }}\n >\n \n \n \n )}\n {chartJSAvailable && (\n \n {\n setUseChartJS(e.target.checked);\n setChartError(null);\n }}\n style={{ cursor: 'pointer' }}\n />\n Use Chart.js\n \n )}\n {\n setShowChart(!showChart);\n setChartError(null);\n }}\n style={{\n padding: '8px 16px',\n fontSize: '14px',\n backgroundColor: showChart ? '#dc3545' : '#1976d2',\n color: 'white',\n border: 'none',\n borderRadius: '4px',\n cursor: 'pointer',\n fontWeight: '500',\n }}\n >\n {showChart ? 'Hide Chart' : 'Show Chart'}\n \n

\n Click on players in the table below to add them to the comparison\n

\n \n {/* Table view - always shown */}\n

\n \n \n \n \n \n \n \n \n \n \n \n {displayData.map((p, idx) => (\n \n \n \n \n \n \n \n ))}\n \n

Player	PTS	REB	AST	PIR
{p.name \|\| 'Unknown'}	{p.score \|\| 0}	{p.totalRebounds \|\| 0}	{p.assistances \|\| 0}	{p.valuation \|\| 0}

\n\n {/* Chart view - only shown when button is clicked, wrapped in error boundary */}\n {showChart && (\n

\n {useChartJS && chartJSAvailable ? (\n {\n setChartError(error);\n setUseChartJS(false); // Auto-fallback to SVG\n }}\n >\n {chartError ? (\n

Chart.js Error: {chartError}

\n Falling back to simple SVG chart. The table view above shows all the same data.\n

\n ) : null}\n \n \n ) : (\n

\n Using simple SVG chart (Chart.js unavailable or disabled)\n

\n \n

\n )}\n

\n );\n}\n\n// Separate component for chart rendering to isolate errors\nfunction ChartRenderer({ data, chartType }: { data: any; chartType: ChartType }) {\n const [mounted, setMounted] = useState(false);\n \n // Chart.js with /auto import handles all registration automatically\n useEffect(() => {\n try {\n if (typeof Chart === 'undefined') {\n throw new Error('Chart.js is not loaded');\n }\n // With /auto import, everything is already registered\n setMounted(true);\n } catch (error) {\n console.error('Error checking Chart.js availability:', error);\n throw error; // Let error boundary catch it\n }\n }, []);\n\n if (!mounted) {\n return (\n

\n Loading chart...\n

\n );\n }\n\n try {\n const commonOptions = {\n responsive: true,\n maintainAspectRatio: false, // Allow chart to use full width/height\n aspectRatio: 2.5, // Wider aspect ratio for better use of space\n layout: {\n padding: {\n bottom: 40, // Extra padding at bottom for labels\n top: 10,\n left: 10,\n right: 10,\n },\n },\n plugins: {\n legend: { position: 'top' as const },\n title: { display: false },\n tooltip: {\n mode: 'index' as const,\n intersect: false,\n },\n },\n scales: {\n y: {\n type: 'linear' as const,\n beginAtZero: true,\n },\n x: {\n type: 'category' as const,\n ticks: {\n maxRotation: 45,\n minRotation: 45,\n },\n },\n },\n };\n\n // Wrap chart in container for full width\n if (chartType === 'bar') {\n return (\n

\n \n

\n );\n } else if (chartType === 'line') {\n return (\n

\n \n

\n );\n } else {\n return (\n

\n \n

\n );\n }\n } catch (error) {\n console.error('Error rendering chart:', error);\n throw error; // Let error boundary catch it\n }\n}\n\n// Error boundary specifically for chart rendering - prevents crashes\nclass ChartErrorBoundary extends React.Component<\n { children: React.ReactNode; onError: (error: string) => void },\n { hasError: boolean; error: Error | null }\n> {\n constructor(props: { children: React.ReactNode; onError: (error: string) => void }) {\n super(props);\n this.state = { hasError: false, error: null };\n }\n\n static getDerivedStateFromError(error: Error) {\n // Return state update to show error UI\n return { hasError: true, error };\n }\n\n override componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {\n // Log error but don't crash the app\n console.error('Chart rendering error (caught by boundary):', error, errorInfo);\n try {\n this.props.onError(error?.message || 'Chart rendering failed');\n } catch (callbackError) {\n // Even the error callback could fail, so wrap it\n console.error('Error in onError callback:', callbackError);\n }\n }\n\n override render() {\n if (this.state.hasError) {\n // Return a safe fallback UI instead of crashing\n return (\n

Chart Error: {this.state.error?.message || 'Unknown error'}

\n The table view above shows all the same data. Chart rendering may have compatibility issues in this environment.\n

\n );\n }\n\n // Wrap children in try-catch for extra safety\n try {\n return this.props.children;\n } catch (error) {\n console.error('Error in ChartErrorBoundary render:', error);\n return (\n

Chart Error: Failed to render chart

\n );\n }\n }\n}\n\n// DownloadButton Component\ninterface DownloadButtonProps {\n data: T[];\n columns: Array<{ key: string; label: string }>;\n filename: string;\n disabled?: boolean;\n}\n\nfunction DownloadButton>({\n data,\n columns,\n filename,\n disabled = false\n}: DownloadButtonProps) {\n const handleDownload = useCallback(() => {\n if (data.length === 0) {\n alert('No data to export');\n return;\n }\n exportToCSV(data, columns.map(c => c.key), filename);\n }, [data, columns, filename]);\n\n return (\n \n 📥 Download CSV\n \n );\n}\n\n// Error Boundary Component\nclass ErrorBoundary extends React.Component<\n { children: React.ReactNode },\n { hasError: boolean; error: Error | null }\n> {\n constructor(props: { children: React.ReactNode }) {\n super(props);\n this.state = { hasError: false, error: null };\n }\n\n static getDerivedStateFromError(error: Error) {\n return { hasError: true, error };\n }\n\n override componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {\n console.error('Error caught by boundary:', error, errorInfo);\n }\n\n override render() {\n if (this.state.hasError) {\n return (\n

⚠️ Something went wrong

{this.state.error?.message || 'An error occurred while rendering'}

\n {\n this.setState({ hasError: false, error: null });\n window.location.reload();\n }}\n style={{\n padding: '10px 20px',\n fontSize: '16px',\n backgroundColor: '#1976d2',\n color: 'white',\n border: 'none',\n borderRadius: '4px',\n cursor: 'pointer',\n marginTop: '10px',\n }}\n >\n Reload Page\n \n

\n );\n }\n\n return this.props.children;\n }\n}\n\n// Main App Component\nfunction App() {\n const [dataType, setDataType] = useState('players-traditional');\n // Default to current season (e.g., if it's 2025, use 2024-25 season)\n const currentYear = new Date().getFullYear();\n const defaultSeason = `${currentYear - 1}-${String(currentYear).slice(-2)}`;\n const [season, setSeason] = useState(defaultSeason);\n const [phase, setPhase] = useState('');\n const [teamId, setTeamId] = useState('');\n const [teams, setTeams] = useState([]);\n const [players, setPlayers] = useState([]);\n const [games, setGames] = useState([]);\n const [standings, setStandings] = useState([]);\n const [data, setData] = useState([]); // Generic data storage for all endpoints\n const [loading, setLoading] = useState(false);\n const [error, setError] = useState(null);\n const [selectedPlayers, setSelectedPlayers] = useState([]);\n const [roundNumber, setRoundNumber] = useState('1'); // For standings endpoints\n\n // Load teams on mount\n useEffect(() => {\n const loadTeams = async () => {\n try {\n const clubs = await fetchAPI<{ data?: Team[]; total?: number }>('/clubs', {});\n setTeams(clubs.data || []);\n } catch (err) {\n console.error('Failed to load teams:', err);\n setError('Failed to load teams');\n }\n };\n loadTeams();\n }, []);\n\n // Helper function to flatten nested objects for table display\n const flattenObject = (obj: any, prefix = '', result: Record = {}): Record => {\n for (const key in obj) {\n if (obj.hasOwnProperty(key)) {\n const newKey = prefix ? `${prefix}.${key}` : key;\n if (obj[key] !== null && typeof obj[key] === 'object' && !Array.isArray(obj[key]) && !(obj[key] instanceof Date)) {\n flattenObject(obj[key], newKey, result);\n } else {\n result[newKey] = obj[key];\n }\n }\n }\n return result;\n };\n\n // Helper function to generate columns from data\n const generateColumns = (data: any[]): Array<{ key: string; label: string; format?: (value: unknown) => string | React.ReactNode }> => {\n if (!data || data.length === 0) return [];\n \n // Flatten first item to get all keys\n const flattened = flattenObject(data[0]);\n const keys = Object.keys(flattened).sort();\n \n // Create columns with readable labels\n return keys.map(key => ({\n key,\n label: key.split('.').map(k => k.charAt(0).toUpperCase() + k.slice(1)).join(' '),\n format: (v: unknown) => {\n if (v === null || v === undefined) return '-';\n if (typeof v === 'boolean') return v ? 'Yes' : 'No';\n if (Array.isArray(v)) return v.join(', ');\n if (typeof v === 'object') return JSON.stringify(v);\n if (typeof v === 'number') {\n // Format numbers with decimals if needed\n return Number.isInteger(v) ? String(v) : v.toFixed(2);\n }\n return String(v);\n }\n }));\n };\n\n // Load data when filters change\n useEffect(() => {\n const loadData = async () => {\n setLoading(true);\n setError(null);\n \n const seasonCode = convertSeasonToCode(season);\n const competitionCode = DEFAULT_COMPETITION_CODE;\n const currentRound = roundNumber || '1';\n\n try {\n // Clear all data first\n setPlayers([]);\n setGames([]);\n setStandings([]);\n setData([]);\n \n const params: FilterParams = {\n competitionCode,\n SeasonCode: seasonCode,\n SeasonMode: 'Single',\n limit: 200,\n };\n if (teamId) params.teamCode = teamId;\n if (phase) params.phaseTypeCode = phase;\n \n // Players Statistics\n if (dataType === 'players-traditional') {\n const stats = await fetchAPI(\n `/competitions/${competitionCode}/statistics/players/traditional`,\n params\n );\n \n // Map to PlayerStats format for charts compatibility\n const allPlayers: PlayerStats[] = (stats.players || []).map((player: any) => {\n try {\n return {\n name: player?.player?.name || 'Unknown',\n clubCode: player?.player?.team?.code,\n clubName: player?.player?.team?.name,\n position: undefined,\n dorsal: undefined,\n score: player?.pointsScored ?? 0,\n totalRebounds: player?.totalRebounds ?? 0,\n offensiveRebounds: player?.offensiveRebounds ?? 0,\n defensiveRebounds: player?.defensiveRebounds ?? 0,\n assistances: player?.assists ?? 0,\n steals: player?.steals ?? 0,\n turnovers: player?.turnovers ?? 0,\n blocksFavour: player?.blocks ?? 0,\n blocksAgainst: player?.blocksAgainst ?? 0,\n valuation: player?.pir ?? 0,\n timePlayed: player?.minutesPlayed?.toString() || '0',\n gamesPlayed: player?.gamesPlayed ?? 0,\n };\n } catch (error) {\n console.error('Error mapping player:', error, player);\n return {\n name: 'Unknown',\n score: 0,\n totalRebounds: 0,\n assistances: 0,\n valuation: 0,\n gamesPlayed: 0,\n };\n }\n }).filter(p => p.name !== 'Unknown' || p.gamesPlayed > 0);\n \n setPlayers(allPlayers);\n const playersData = allPlayers.map((p: any) => flattenObject(p));\n setData(playersData);\n \n } else if (dataType === 'players-advanced') {\n const stats = await fetchAPI(\n `/competitions/${competitionCode}/statistics/players/advanced`,\n params\n );\n const playersData = (stats.players || []).map((p: any) => flattenObject(p));\n setData(playersData);\n \n } else if (dataType === 'players-scoring') {\n const stats = await fetchAPI(\n `/competitions/${competitionCode}/statistics/players/scoring`,\n params\n );\n const playersData = (stats.players || []).map((p: any) => flattenObject(p));\n setData(playersData);\n \n } else if (dataType === 'players-misc') {\n const stats = await fetchAPI(\n `/competitions/${competitionCode}/statistics/players/misc`,\n params\n );\n const playersData = (stats.players || []).map((p: any) => flattenObject(p));\n setData(playersData);\n \n } else if (dataType === 'players-leaders') {\n const stats = await fetchAPI(\n `/competitions/${competitionCode}/statistics/players/leaders`,\n params\n );\n const leadersData = (stats.leaders || []).map((l: any) => flattenObject(l));\n setData(leadersData);\n \n // Teams Statistics\n } else if (dataType === 'teams-traditional') {\n const stats = await fetchAPI(\n `/competitions/${competitionCode}/statistics/teams/traditional`,\n params\n );\n const teamsData = (stats.teams || []).map((t: any) => flattenObject(t));\n setData(teamsData);\n \n } else if (dataType === 'teams-advanced') {\n const stats = await fetchAPI(\n `/competitions/${competitionCode}/statistics/teams/advanced`,\n params\n );\n const teamsData = (stats.teams || []).map((t: any) => flattenObject(t));\n setData(teamsData);\n \n } else if (dataType === 'teams-opponents-traditional') {\n const stats = await fetchAPI(\n `/competitions/${competitionCode}/statistics/teams/opponentsTraditional`,\n params\n );\n const teamsData = (stats.teams || []).map((t: any) => flattenObject(t));\n setData(teamsData);\n \n } else if (dataType === 'teams-opponents-advanced') {\n const stats = await fetchAPI(\n `/competitions/${competitionCode}/statistics/teams/opponentsAdvanced`,\n params\n );\n const teamsData = (stats.teams || []).map((t: any) => flattenObject(t));\n setData(teamsData);\n \n } else if (dataType === 'teams-leaders') {\n const stats = await fetchAPI(\n `/competitions/${competitionCode}/statistics/teams/leaders`,\n params\n );\n const leadersData = (stats.leaders || []).map((l: any) => flattenObject(l));\n setData(leadersData);\n \n // Standings\n } else if (dataType === 'standings-basic') {\n const standingsResponse = await fetchAPI(\n `/competitions/${competitionCode}/seasons/${seasonCode}/rounds/${currentRound}/basicstandings`\n );\n const standingsData = (standingsResponse.teams || []).map((t: any) => flattenObject(t));\n setData(standingsData);\n \n } else if (dataType === 'standings-calendar') {\n const standingsResponse = await fetchAPI(\n `/competitions/${competitionCode}/seasons/${seasonCode}/rounds/${currentRound}/calendarstandings`\n );\n const standingsData = (standingsResponse.teams || []).map((t: any) => flattenObject(t));\n setData(standingsData);\n \n } else if (dataType === 'standings-streaks') {\n const standingsResponse = await fetchAPI(\n `/competitions/${competitionCode}/seasons/${seasonCode}/rounds/${currentRound}/streaks`\n );\n const standingsData = (standingsResponse.teams || []).map((t: any) => flattenObject(t));\n setData(standingsData);\n \n } else if (dataType === 'standings-ahead-behind') {\n const standingsResponse = await fetchAPI(\n `/competitions/${competitionCode}/seasons/${seasonCode}/rounds/${currentRound}/aheadbehind`\n );\n const standingsData = (standingsResponse.teams || []).map((t: any) => flattenObject(t));\n setData(standingsData);\n \n } else if (dataType === 'standings-margins') {\n const standingsResponse = await fetchAPI(\n `/competitions/${competitionCode}/seasons/${seasonCode}/rounds/${currentRound}/margins`\n );\n const standingsData = (standingsResponse.teams || []).map((t: any) => flattenObject(t));\n setData(standingsData);\n \n // Games\n } else if (dataType === 'games' || dataType === 'results') {\n // Fetch games/results by trying to get game reports for sequential game codes\n // Game codes are typically sequential: 1, 2, 3, etc.\n const gamesList: Game[] = [];\n const maxAttempts = 100; // Limit API calls\n let consecutiveFailures = 0;\n const maxConsecutiveFailures = 10; // Stop after 10 consecutive failures\n \n // Try sequential game codes\n for (let gameCode = 1; gameCode <= maxAttempts; gameCode++) {\n try {\n const gameReport = await fetchAPI(\n `/competitions/${competitionCode}/seasons/${seasonCode}/games/${gameCode}/report`,\n {}\n );\n \n if (gameReport && gameReport.gameCode) {\n consecutiveFailures = 0; // Reset failure counter on success\n \n const game: Game = {\n gameCode: String(gameReport.gameCode),\n gameNumber: gameReport.round || gameCode,\n date: gameReport.date || gameReport.localDate,\n time: gameReport.localDate ? new Date(gameReport.localDate).toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' }) : undefined,\n homeTeam: gameReport.local?.club?.name || gameReport.local?.club?.abbreviatedName,\n homeCode: gameReport.local?.club?.code,\n homeScore: gameReport.local?.score,\n awayTeam: gameReport.road?.club?.name || gameReport.road?.club?.abbreviatedName,\n awayCode: gameReport.road?.club?.code,\n awayScore: gameReport.road?.score,\n played: gameReport.played || false,\n round: String(gameReport.round || ''),\n group: gameReport.group?.name,\n gameDay: gameReport.round,\n };\n \n // For results, only include played games; for games, include all\n if (dataType === 'results' && !game.played) {\n continue;\n }\n \n // Filter by team if specified\n if (teamId && game.homeCode !== teamId && game.awayCode !== teamId) {\n continue;\n }\n \n gamesList.push(game);\n } else {\n consecutiveFailures++;\n }\n } catch (err) {\n consecutiveFailures++;\n // If we've had too many consecutive failures, likely no more games exist\n if (consecutiveFailures >= maxConsecutiveFailures) {\n break;\n }\n }\n }\n \n const gamesData = gamesList.map(g => flattenObject(g));\n setData(gamesData);\n \n } else if (dataType === 'schedules') {\n // Schedules are similar to games but only show future/unplayed games\n const schedulesList: Game[] = [];\n const maxAttempts = 100;\n let consecutiveFailures = 0;\n const maxConsecutiveFailures = 10;\n \n for (let gameCode = 1; gameCode <= maxAttempts; gameCode++) {\n try {\n const gameReport = await fetchAPI(\n `/competitions/${competitionCode}/seasons/${seasonCode}/games/${gameCode}/report`,\n {}\n );\n \n if (gameReport && gameReport.gameCode && !gameReport.played) {\n consecutiveFailures = 0;\n const game: Game = {\n gameCode: String(gameReport.gameCode),\n gameNumber: gameReport.round || gameCode,\n date: gameReport.date || gameReport.localDate,\n time: gameReport.localDate ? new Date(gameReport.localDate).toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' }) : undefined,\n homeTeam: gameReport.local?.club?.name || gameReport.local?.club?.abbreviatedName,\n homeCode: gameReport.local?.club?.code,\n homeScore: gameReport.local?.score,\n awayTeam: gameReport.road?.club?.name || gameReport.road?.club?.abbreviatedName,\n awayCode: gameReport.road?.club?.code,\n awayScore: gameReport.road?.score,\n played: gameReport.played || false,\n round: String(gameReport.round || ''),\n group: gameReport.group?.name,\n gameDay: gameReport.round,\n };\n \n if (teamId && game.homeCode !== teamId && game.awayCode !== teamId) {\n continue;\n }\n \n schedulesList.push(game);\n } else if (gameReport && gameReport.gameCode) {\n consecutiveFailures = 0;\n } else {\n consecutiveFailures++;\n }\n } catch (err) {\n consecutiveFailures++;\n if (consecutiveFailures >= maxConsecutiveFailures) {\n break;\n }\n }\n }\n \n const schedulesData = schedulesList.map(g => flattenObject(g));\n setData(schedulesData);\n \n // Clubs\n } else if (dataType === 'clubs') {\n const clubsResponse = await fetchAPI('/clubs', { limit: 200 });\n const clubsData = (clubsResponse.data || []).map((c: any) => flattenObject(c));\n setData(clubsData);\n \n // Coaches (requires coachCode, so we'll need to handle this differently)\n } else if (dataType === 'coaches') {\n // Note: Coaches endpoint requires a coachCode, which we don't have\n // For now, we'll show a message or try to get coach data if we have team info\n setData([]);\n setError('Coaches endpoint requires a specific coach code. Please use team stats or club info endpoints instead.');\n }\n } catch (err) {\n let errorMessage = 'Failed to load data';\n if (err instanceof Error) {\n errorMessage = err.message;\n // Check for specific API errors\n if (err.message.includes('404') || err.message.includes('Not found')) {\n errorMessage = `Season ${seasonCode} (${season}) not found. Please try a different season like 2024-25 or 2023-24.`;\n } else if (err.message.includes('401') || err.message.includes('403')) {\n errorMessage = 'Authentication error. Please check API access.';\n } else if (err.message.includes('400')) {\n errorMessage = `Invalid request. Season: ${season} (${seasonCode}). Please check your filters.`;\n }\n }\n setError(errorMessage);\n console.error('Error loading data:', err);\n // Clear data on error\n setPlayers([]);\n setGames([]);\n setStandings([]);\n setData([]);\n } finally {\n setLoading(false);\n }\n };\n\n // Debounce API calls\n const timeoutId = setTimeout(loadData, 300);\n return () => clearTimeout(timeoutId);\n }, [dataType, season, phase, teamId, roundNumber]);\n\n const handlePlayerClick = useCallback((playerName: string) => {\n setSelectedPlayers(prev => {\n try {\n const index = prev.findIndex(id => {\n const player = players[id];\n return player && player.name === playerName;\n });\n if (index >= 0) {\n return prev.filter((_, i) => i !== index);\n } else {\n const newIndex = players.findIndex(p => p && p.name === playerName);\n if (newIndex >= 0) {\n return [...prev, newIndex].slice(0, 10); // Limit to 10 players\n }\n return prev;\n }\n } catch (error) {\n console.error('Error in handlePlayerClick:', error);\n return prev;\n }\n });\n }, [players]);\n\n const playerColumns = useMemo(() => [\n { \n key: 'name', \n label: 'Player', \n format: (v: unknown, row: PlayerStats, index?: number) => {\n try {\n const name = String(v || row?.name || '-');\n const isSelected = index !== undefined && selectedPlayers.includes(index);\n return (\n handlePlayerClick(name)}\n style={{\n cursor: 'pointer',\n fontWeight: isSelected ? 'bold' : 'normal',\n color: isSelected ? '#1976d2' : 'inherit',\n textDecoration: isSelected ? 'underline' : 'none',\n }}\n title=\"Click to add/remove from chart comparison\"\n >\n {name} {isSelected ? '✓' : ''}\n \n );\n } catch (error) {\n console.error('Error formatting player name:', error);\n return String(v || row?.name || '-');\n }\n }\n },\n { key: 'clubName', label: 'Team', format: (v: unknown) => {\n return String(v || '-');\n }},\n { key: 'position', label: 'Pos' },\n { key: 'dorsal', label: '#' },\n { key: 'score', label: 'PTS', format: (v: unknown) => formatNumber(typeof v === 'number' ? v : null) },\n { key: 'totalRebounds', label: 'REB', format: (v: unknown) => formatNumber(typeof v === 'number' ? v : null) },\n { key: 'assistances', label: 'AST', format: (v: unknown) => formatNumber(typeof v === 'number' ? v : null) },\n { key: 'steals', label: 'STL', format: (v: unknown) => formatNumber(typeof v === 'number' ? v : null) },\n { key: 'blocksFavour', label: 'BLK', format: (v: unknown) => formatNumber(typeof v === 'number' ? v : null) },\n { key: 'valuation', label: 'PIR', format: (v: unknown) => formatNumber(typeof v === 'number' ? v : null) },\n ], [selectedPlayers, handlePlayerClick, players]);\n\n const gameColumns = useMemo(() => [\n { key: 'date', label: 'Date', format: (v: unknown) => formatDate(typeof v === 'string' ? v : null) },\n { key: 'time', label: 'Time' },\n { key: 'homeTeam', label: 'Home Team' },\n { key: 'awayTeam', label: 'Away Team' },\n { key: 'homeScore', label: 'Home Score', format: (v: unknown) => formatNumber(typeof v === 'number' ? v : null) },\n { key: 'awayScore', label: 'Away Score', format: (v: unknown) => formatNumber(typeof v === 'number' ? v : null) },\n { key: 'played', label: 'Status', format: (v: unknown) => {\n return v === true ? 'Played' : 'Scheduled';\n }},\n ], []);\n\n const standingsColumns = useMemo(() => [\n { key: 'position', label: 'Pos', format: (v: unknown) => formatNumber(typeof v === 'number' ? v : null) },\n { key: 'clubName', label: 'Team' },\n { key: 'gamesPlayed', label: 'GP', format: (v: unknown) => formatNumber(typeof v === 'number' ? v : null) },\n { key: 'gamesWon', label: 'W', format: (v: unknown) => formatNumber(typeof v === 'number' ? v : null) },\n { key: 'gamesLost', label: 'L', format: (v: unknown) => formatNumber(typeof v === 'number' ? v : null) },\n { key: 'winPercentage', label: 'Win %' },\n { key: 'pointsFor', label: 'PF', format: (v: unknown) => formatNumber(typeof v === 'number' ? v : null) },\n { key: 'pointsAgainst', label: 'PA', format: (v: unknown) => formatNumber(typeof v === 'number' ? v : null) },\n { key: 'pointsDifference', label: 'Diff' },\n { key: 'homeRecord', label: 'Home' },\n { key: 'awayRecord', label: 'Away' },\n { key: 'lastTenRecord', label: 'Last 10' },\n { key: 'last5Form', label: 'Last 5', format: (v: unknown) => {\n if (Array.isArray(v)) {\n return v.join('');\n }\n return String(v || '-');\n }},\n ], []);\n\n const currentData = useMemo(() => {\n // Use the generic data array for all new endpoints\n // Keep legacy support for old data types\n if (dataType === 'players-traditional' && players.length > 0) {\n return players;\n } else if (dataType.startsWith('standings-') && standings.length > 0) {\n return standings;\n } else if ((dataType === 'games' || dataType === 'results' || dataType === 'schedules') && games.length > 0) {\n return games;\n }\n // For all other endpoints, use the generic data array\n return data;\n }, [dataType, players, standings, games, data]);\n \n const currentColumns = useMemo(() => {\n // For legacy endpoints, use predefined columns\n if (dataType === 'players-traditional' && players.length > 0) {\n return playerColumns;\n } else if (dataType.startsWith('standings-') && standings.length > 0) {\n return standingsColumns;\n } else if ((dataType === 'games' || dataType === 'results' || dataType === 'schedules') && games.length > 0) {\n return gameColumns;\n }\n // For all other endpoints, generate columns dynamically\n return generateColumns(data);\n }, [dataType, playerColumns, standingsColumns, gameColumns, data, players, standings, games]);\n\n const filename = useMemo(() => {\n const parts = [dataType, season];\n if (phase) parts.push(phase.replace(/\\s+/g, '_'));\n return `${parts.join('_')}.csv`;\n }, [dataType, season, phase]);\n\n return (\n

🏀 Euroleague Fantasy Basketball Stats

View, filter, and export basketball statistics for fantasy leagues

\n\n \n\n {error && (\n

\n ⚠️ Error: {error}\n {\n setError(null);\n // Force reload by triggering useEffect\n const currentSeason = season;\n setSeason('');\n setTimeout(() => setSeason(currentSeason), 10);\n }}\n style={{\n marginLeft: '10px',\n padding: '4px 8px',\n fontSize: '12px',\n backgroundColor: '#1976d2',\n color: 'white',\n border: 'none',\n borderRadius: '3px',\n cursor: 'pointer',\n }}\n aria-label=\"Retry loading data\"\n >\n Retry\n \n

\n )}\n\n {loading && (\n

\n Loading data...\n

\n )}\n\n {!loading && !error && (\n <>\n

\n \n

\n\n {dataType === 'players-traditional' && players.length > 0 && (\n {\n const player = players[playerId];\n if (player && player.name) {\n handlePlayerClick(player.name);\n }\n }}\n />\n )}\n\n \n \n )}\n

\n );\n}\n\n// Styles\nconst appStyle: React.CSSProperties = {\n maxWidth: '1400px',\n margin: '0 auto',\n padding: '20px',\n fontFamily: '-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif',\n backgroundColor: '#f5f5f5',\n minHeight: '100vh',\n boxSizing: 'border-box',\n};\n\nconst headerStyle: React.CSSProperties = {\n textAlign: 'center',\n marginBottom: '30px',\n padding: '20px',\n backgroundColor: 'white',\n borderRadius: '8px',\n boxShadow: '0 2px 4px rgba(0,0,0,0.1)',\n};\n\nconst titleStyle: React.CSSProperties = {\n margin: '0 0 10px 0',\n color: '#1976d2',\n fontSize: '2.5em',\n};\n\nconst subtitleStyle: React.CSSProperties = {\n margin: 0,\n color: '#666',\n fontSize: '1.1em',\n};\n\nconst filterContainerStyle: React.CSSProperties = {\n backgroundColor: 'white',\n padding: '20px',\n borderRadius: '8px',\n marginBottom: '20px',\n boxShadow: '0 2px 4px rgba(0,0,0,0.1)',\n};\n\nconst filterRowStyle: React.CSSProperties = {\n display: 'grid',\n gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))',\n gap: '15px',\n};\n\nconst labelStyle: React.CSSProperties = {\n display: 'flex',\n flexDirection: 'column',\n gap: '5px',\n fontWeight: '500',\n color: '#333',\n};\n\nconst selectStyle: React.CSSProperties = {\n padding: '8px 12px',\n borderRadius: '4px',\n border: '1px solid #ddd',\n fontSize: '14px',\n backgroundColor: 'white',\n};\n\nconst tableContainerStyle: React.CSSProperties = {\n backgroundColor: 'white',\n padding: '20px',\n borderRadius: '8px',\n boxShadow: '0 2px 4px rgba(0,0,0,0.1)',\n marginTop: '20px',\n};\n\nconst tableInfoStyle: React.CSSProperties = {\n marginBottom: '10px',\n color: '#666',\n fontSize: '14px',\n};\n\nconst tableWrapperStyle: React.CSSProperties = {\n overflowX: 'auto',\n width: '100%',\n};\n\nconst tableStyle: React.CSSProperties = {\n width: '100%',\n borderCollapse: 'collapse',\n fontSize: '14px',\n};\n\nconst thStyle: React.CSSProperties = {\n padding: '12px',\n textAlign: 'left',\n backgroundColor: '#f0f0f0',\n borderBottom: '2px solid #ddd',\n fontWeight: '600',\n color: '#333',\n};\n\nconst sortIndicatorStyle: React.CSSProperties = {\n marginLeft: '5px',\n color: '#1976d2',\n};\n\nconst trStyle: React.CSSProperties = {\n borderBottom: '1px solid #eee',\n};\n\nconst tdStyle: React.CSSProperties = {\n padding: '10px 12px',\n color: '#555',\n};\n\nconst paginationStyle: React.CSSProperties = {\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n gap: '15px',\n marginTop: '20px',\n};\n\nconst buttonStyle: React.CSSProperties = {\n padding: '8px 16px',\n borderRadius: '4px',\n border: '1px solid #ddd',\n backgroundColor: 'white',\n cursor: 'pointer',\n fontSize: '14px',\n};\n\nconst pageInfoStyle: React.CSSProperties = {\n color: '#666',\n fontSize: '14px',\n};\n\nconst emptyStateStyle: React.CSSProperties = {\n textAlign: 'center',\n padding: '40px',\n color: '#999',\n fontSize: '16px',\n};\n\nconst chartsContainerStyle: React.CSSProperties = {\n backgroundColor: 'white',\n padding: '20px',\n borderRadius: '8px',\n marginBottom: '40px', // Increased bottom margin\n boxShadow: '0 2px 4px rgba(0,0,0,0.1)',\n width: '100%',\n maxWidth: '100%',\n boxSizing: 'border-box',\n};\n\nconst sectionTitleStyle: React.CSSProperties = {\n marginTop: 0,\n marginBottom: '15px',\n color: '#333',\n};\n\nconst chartWrapperStyle: React.CSSProperties = {\n width: '100%',\n maxWidth: '100%',\n minHeight: '400px',\n height: 'auto',\n position: 'relative',\n marginBottom: '30px', // Added bottom margin to prevent overflow\n overflow: 'visible',\n boxSizing: 'border-box',\n};\n\nconst downloadButtonStyle: React.CSSProperties = {\n padding: '12px 24px',\n backgroundColor: '#1976d2',\n color: 'white',\n border: 'none',\n borderRadius: '4px',\n fontSize: '16px',\n fontWeight: '500',\n cursor: 'pointer',\n boxShadow: '0 2px 4px rgba(0,0,0,0.2)',\n};\n\nconst controlsRowStyle: React.CSSProperties = {\n display: 'flex',\n justifyContent: 'flex-end',\n marginBottom: '20px',\n};\n\nconst errorStyle: React.CSSProperties = {\n backgroundColor: '#ffebee',\n color: '#c62828',\n padding: '15px',\n borderRadius: '4px',\n marginBottom: '20px',\n border: '1px solid #ef5350',\n};\n\nconst loadingStyle: React.CSSProperties = {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n gap: '10px',\n padding: '40px',\n color: '#666',\n fontSize: '16px',\n};\n\nconst spinnerStyle: React.CSSProperties = {\n width: '20px',\n height: '20px',\n border: '3px solid #f3f3f3',\n borderTop: '3px solid #1976d2',\n borderRadius: '50%',\n animation: 'spin 1s linear infinite',\n};\n\n// Client entry point\nfunction client() {\n const rootEl = document.getElementById('root');\n if (rootEl) {\n // Add spinner animation and responsive styles\n const style = document.createElement('style');\n style.textContent = `\n @keyframes spin {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n }\n @media (max-width: 768px) {\n .filter-row {\n grid-template-columns: 1fr !important;\n }\n .table-wrapper {\n overflow-x: auto;\n -webkit-overflow-scrolling: touch;\n }\n .chart-wrapper {\n height: 300px !important;\n }\n table {\n font-size: 12px !important;\n }\n th, td {\n padding: 8px !important;\n }\n }\n `;\n document.head.appendChild(style);\n \n createRoot(rootEl).render(\n \n \n \n );\n }\n}\n\n// Server function for Val Town\nexport default async function server(request: Request): Promise {\n const url = new URL(request.url);\n \n // Handle API routes\n if (url.pathname.startsWith('/api/')) {\n const endpoint = url.pathname.replace('/api', '');\n const params: FilterParams = {};\n const competitionCode = DEFAULT_COMPETITION_CODE;\n \n url.searchParams.forEach((value, key) => {\n if (key === 'seasonCode') params.seasonCode = value;\n else if (key === 'playerCode') params.playerCode = value;\n else if (key === 'gameCode') params.gameCode = parseInt(value, 10);\n else if (key === 'gameNumber') params.gameNumber = parseInt(value, 10);\n else if (key === 'teamCode') params.teamCode = value;\n else if (key === 'clubCode') params.clubCode = value;\n else if (key === 'roundNumber') params.roundNumber = value;\n else if (key === 'phaseTypeCode') params.phaseTypeCode = value;\n });\n\n try {\n let data;\n if (endpoint === '/players') {\n const seasonCode = params.seasonCode || convertSeasonToCode('2024-25');\n const stats = await fetchAPI<{ total?: number; players?: any[] }>(\n `/competitions/${competitionCode}/statistics/players/traditional`,\n { ...params, competitionCode, SeasonCode: seasonCode, SeasonMode: 'Single', limit: 200 }\n );\n data = stats.players || [];\n } else if (endpoint === '/games') {\n // Games endpoint - would need game code\n data = [];\n } else if (endpoint === '/results') {\n // Results endpoint\n data = [];\n } else if (endpoint === '/teams' || endpoint === '/clubs') {\n const clubs = await fetchAPI<{ data?: Team[]; total?: number }>('/clubs', params);\n data = clubs.data || [];\n } else if (endpoint === '/standings') {\n const seasonCode = params.seasonCode || convertSeasonToCode('2024-25');\n const roundNumber = params.roundNumber || '1';\n const standings = await fetchAPI<{ teams?: any[] }>(\n `/competitions/${competitionCode}/seasons/${seasonCode}/rounds/${roundNumber}/basicstandings`\n );\n data = standings.teams || [];\n } else if (endpoint === '/schedules') {\n // Schedules endpoint\n data = [];\n } else {\n return new Response(JSON.stringify({ error: 'Unknown endpoint' }), {\n status: 404,\n headers: { 'Content-Type': 'application/json' },\n });\n }\n\n return new Response(JSON.stringify(data), {\n headers: {\n 'Content-Type': 'application/json',\n 'Access-Control-Allow-Origin': '*',\n },\n });\n } catch (error) {\n return new Response(\n JSON.stringify({ error: error instanceof Error ? error.message : 'Unknown error' }),\n {\n status: 500,\n headers: { 'Content-Type': 'application/json' },\n }\n );\n }\n }\n\n // Serve HTML page\n return new Response(\n `\n\n\n \n \n Euroleague Fantasy Basketball Stats\n \n\n\n

\n \n\n`,\n {\n headers: { 'Content-Type': 'text/html' },\n }\n );\n}\n\n// Auto-initialize client if in browser\nif (typeof document !== 'undefined') {\n client();\n}\n","deleted","label",[99],"permalink","https://www.val.town/x/geordie/euroleague-stats/code/main.tsx","extension","actionData","errors"]