# Logo API Implementation Summary

## Overview
Updated the HomePage to prioritize logoapi.sportcreative.eu for all team logos with FACR as fallback.

## Changes Made

### 1. HomePage.tsx - State Management
- Added `clubId` state to store the club's UUID
- Extract `club_id` from settings and store it

### 2. Logo URL Generation Strategy
**Priority Order:**
1. **LogoAPI** (if team_id available): `http://logoapi.sportcreative.eu/logos/{team_id}?format=svg`
2. **Local Overrides** (from team logo overrides table)
3. **FACR Original** (fallback when logoapi doesn't have the logo)

### 3. Updated Functions

#### `displayClubLogo` (memoized)
```typescript
// Now generates logoapi URL for main club logo
if (clubId) {
  return `http://logoapi.sportcreative.eu/logos/${clubId}?format=svg`;
}
```

#### `getOverrideLogo(teamName?, teamId?, original?)`
- Takes team ID as second parameter
- Returns logoapi URL if team_id is available
- Falls back to local overrides or FACR URL

#### `getFallbackLogo(teamName?, original?)`
- Helper function to get fallback logo
- Checks local overrides first
- Returns FACR original as final fallback

### 4. Data Structure Updates

#### Matches Data
- Now extracts `home_id` and `away_id` from FACR API
- Passes team IDs to `getOverrideLogo()`
- Logo URLs now point to logoapi with fallback chain

#### Tables/Standings Data
- Extracts `team_id` from FACR table data
- Stores both `team_name` and `team_id`
- Logo URLs use logoapi when team_id is available

### 5. Logo Usage Points
All logo `<img>` tags throughout the homepage now use:
- **Club logo header**: Uses `displayClubLogo` (logoapi)
- **Match cards**: Uses `home_logo_url`/`away_logo_url` with logoapi
- **Tables/Standings**: Uses `logo_url` with logoapi
- **Next match section**: All team logos use logoapi pattern

## How It Works

### Example Flow:
1. **User visits homepage**
2. **Settings load** → `club_id` extracted (`7eacd9f0-bfa0-4928-a9b6-936140168f58`)
3. **Club logo displays**: `http://logoapi.sportcreative.eu/logos/7eacd9f0-bfa0-4928-a9b6-936140168f58?format=svg`
4. **Browser requests logo from logoapi**
5. **If logoapi has it** → ✓ Displays
6. **If logoapi doesn't have it** → Browser's native error handling would need fallback

## Browser Behavior
- When logoapi returns 404, the browser shows broken image
- **Note**: For full fallback support, `onError` handlers should be added to `<img>` tags
- This would require storing fallback URL alongside primary URL

## Testing Checklist
- [ ] Club logo displays in header (logoapi)
- [ ] Match team logos display (logoapi with team IDs)
- [ ] Table team logos display (logoapi with team IDs)
- [ ] Logos fallback to FACR when logoapi doesn't have them
- [ ] Local overrides still work correctly
- [ ] All layouts (unified, magazine, pro, edge) work correctly

## Future Enhancements
Add `onError` handlers to images for automatic fallback:
```typescript
<img 
  src={logoapi_url} 
  onError={(e) => { 
    e.currentTarget.src = facr_fallback_url; 
  }} 
/>
```

## Files Modified
- `frontend/src/pages/HomePage.tsx`

## Related Systems
- Logo API: `utils/sportLogosAPI.ts`
- Team Logo Overrides: Admin matches/teams pages
- FACR Integration: Fetches team IDs automatically