Phase 1: Upload Initiation
Frontend → POST /logos/presigned-url → GenericLogoService
         ← {presignedUrl, uploadId, fileId}

Phase 2: S3 Upload & Confirmation
Frontend → PUT {presignedUrl} (binary) → S3
Frontend → POST /logos/{uploadId}/confirm → GenericLogoService

Phase 3: Entity Association (during event create/update)
Frontend → POST /events {title, ..., themeImageUploadId} → EventService
EventService → associateLogoWithEntity() → GenericLogoService
             → Copy S3: logos/temp/{uploadId}/ → logos/{year}/events/{eventCode}/
             → Update Logo status: CONFIRMED → ASSOCIATED

ALTER TABLE events
ADD COLUMN theme_image_url VARCHAR(1000),
ADD COLUMN theme_image_upload_id VARCHAR(100);

CREATE INDEX idx_events_theme_image ON events(theme_image_upload_id);

-- No changes needed - reuses existing logos table
-- New records will have:
--   associated_entity_type = 'EVENT'
--   associated_entity_id = eventCode (e.g., 'BATbern57')

-- Add theme image columns to events table
ALTER TABLE events
ADD COLUMN theme_image_url VARCHAR(1000),
ADD COLUMN theme_image_upload_id VARCHAR(100);

-- Index for cleanup queries
CREATE INDEX idx_events_theme_image ON events(theme_image_upload_id);

-- Comment
COMMENT ON COLUMN events.theme_image_url IS 'CloudFront URL for event theme image (from GenericLogoService)';
COMMENT ON COLUMN events.theme_image_upload_id IS 'Upload ID from three-phase upload pattern (ADR-002)';

@Entity
@Table(name = "events")
public class Event {
    // ... existing fields

    @Column(name = "theme_image_url", length = 1000)
    private String themeImageUrl;

    @Column(name = "theme_image_upload_id", length = 100)
    private String themeImageUploadId;

    // Getters and setters
    public String getThemeImageUrl() {
        return themeImageUrl;
    }

    public void setThemeImageUrl(String themeImageUrl) {
        this.themeImageUrl = themeImageUrl;
    }

    public String getThemeImageUploadId() {
        return themeImageUploadId;
    }

    public void setThemeImageUploadId(String themeImageUploadId) {
        this.themeImageUploadId = themeImageUploadId;
    }
}

// CreateEventRequest.java
public class CreateEventRequest {
    // ... existing fields

    @Schema(description = "Upload ID from /logos/presigned-url for event theme image",
            example = "abc123-def456")
    private String themeImageUploadId;

    // Getter and setter
}

// UpdateEventRequest.java
public class UpdateEventRequest {
    // ... existing fields

    @Schema(description = "Upload ID from /logos/presigned-url for event theme image")
    private String themeImageUploadId;

    // Getter and setter
}

// PatchEventRequest.java
public class PatchEventRequest {
    // ... existing fields

    @Schema(description = "Upload ID from /logos/presigned-url for event theme image")
    private String themeImageUploadId;

    // Getter and setter
}

// EventResponse.java
public class EventResponse {
    // ... existing fields

    @Schema(description = "CloudFront URL for event theme image",
            example = "https://d123456.cloudfront.net/logos/2025/events/BATbern57/theme-abc123.png")
    private String themeImageUrl;

    // Getter and setter
}

@Service
@Transactional
public class EventService {

    private final EventRepository eventRepository;
    private final GenericLogoService genericLogoService; // NEW

    public EventService(
            EventRepository eventRepository,
            GenericLogoService genericLogoService) { // NEW
        this.eventRepository = eventRepository;
        this.genericLogoService = genericLogoService;
    }

    // ... existing methods
}

public EventResponse createEvent(CreateEventRequest request) {
    // Create event entity
    Event event = Event.builder()
        .eventNumber(request.getEventNumber())
        .title(request.getTitle())
        .description(request.getDescription())
        .date(request.getDate())
        // ... other fields
        .themeImageUploadId(request.getThemeImageUploadId()) // Store uploadId
        .build();

    // Generate eventCode
    String eventCode = generateEventCode(event.getEventNumber());
    event.setEventCode(eventCode);

    // Save event (needed for eventCode)
    Event savedEvent = eventRepository.save(event);

    // Associate theme image if provided
    if (request.getThemeImageUploadId() != null) {
        associateThemeImage(savedEvent, request.getThemeImageUploadId());
    }

    return mapToResponse(savedEvent);
}

private void associateThemeImage(Event event, String uploadId) {
    try {
        // Generate final S3 key
        int year = LocalDate.now().getYear();
        String finalS3Key = String.format(
            "logos/%d/events/%s/theme-%s.png",
            year,
            event.getEventCode(),
            uploadId
        );

        // Call GenericLogoService to associate
        String cloudFrontUrl = genericLogoService.associateLogoWithEntity(
            uploadId,
            "EVENT",
            event.getEventCode(),
            finalS3Key
        );

        // Update event with CloudFront URL
        event.setThemeImageUrl(cloudFrontUrl);
        eventRepository.save(event);

        log.info("Theme image associated for event {}: {}",
                event.getEventCode(), cloudFrontUrl);

    } catch (Exception e) {
        log.error("Failed to associate theme image for event {}: {}",
                event.getEventCode(), e.getMessage());
        // Don't fail event creation - theme image is optional
    }
}

public EventResponse updateEvent(String eventCode, UpdateEventRequest request) {
    Event event = findEventByCode(eventCode);

    // Update fields
    event.setTitle(request.getTitle());
    event.setDescription(request.getDescription());
    // ... other fields

    // Update theme image if new uploadId provided
    if (request.getThemeImageUploadId() != null &&
        !request.getThemeImageUploadId().equals(event.getThemeImageUploadId())) {
        associateThemeImage(event, request.getThemeImageUploadId());
    }

    Event updatedEvent = eventRepository.save(event);
    return mapToResponse(updatedEvent);
}

public EventResponse patchEvent(String eventCode, PatchEventRequest request) {
    Event event = findEventByCode(eventCode);

    // Apply patches (only non-null fields)
    if (request.getTitle() != null) {
        event.setTitle(request.getTitle());
    }
    // ... other fields

    // Update theme image if provided
    if (request.getThemeImageUploadId() != null) {
        associateThemeImage(event, request.getThemeImageUploadId());
    }

    Event patchedEvent = eventRepository.save(event);
    return mapToResponse(patchedEvent);
}

components:
  schemas:
    Event:
      type: object
      required:
        - eventCode
        - title
        - eventNumber
        - date
        - registrationDeadline
        - venueName
        - venueAddress
        - venueCapacity
        - status
        - organizerUsername
        - currentAttendeeCount
      properties:
        eventCode:
          type: string
          description: "Human-readable event identifier in format \"BATbern{number}\".\n    Story 1.16.2: Public API uses meaningful IDs, not UUIDs."
          example: BATbern142
        title:
          type: string
          example: Spring Conference 2025
        # ... existing fields ...
        themeImageUrl:
          type: string
          nullable: true
          description: CloudFront URL for event theme image
          example: "https://d123456.cloudfront.net/logos/2025/events/BATbern57/theme-abc123.png"
        themeImageUploadId:
          type: string
          nullable: true
          description: "Upload ID from three-phase upload (internal reference)"
          example: "abc123-def456"

    CreateEventRequest:
      type: object
      required:
        - title
        - eventNumber
        - date
        - registrationDeadline
        - venueName
        - venueAddress
        - venueCapacity
        - status
        - organizerUsername
        - currentAttendeeCount
      properties:
        # ... existing fields ...
        themeImageUploadId:
          type: string
          nullable: true
          description: "Upload ID from /logos/presigned-url for event theme image"
          example: "abc123-def456"

    UpdateEventRequest:
      type: object
      required:
        - title
        - eventNumber
        - date
        - registrationDeadline
        - venueName
        - venueAddress
        - venueCapacity
        - status
        - organizerUsername
      properties:
        # ... existing fields ...
        themeImageUploadId:
          type: string
          nullable: true
          description: "Upload ID from /logos/presigned-url for event theme image"

    PatchEventRequest:
      type: object
      properties:
        # ... existing fields ...
        themeImageUploadId:
          type: string
          nullable: true
          description: "Upload ID from /logos/presigned-url for event theme image"

export const EventCard: React.FC<EventCardProps> = ({ event, onEdit, onCardClick }) => {
  const { t } = useTranslation('events');
  // ... existing code ...

  return (
    <Card
      data-testid={`event-card-${event.eventCode}`}
      sx={{
        height: '100%',
        display: 'flex',
        flexDirection: 'column',
        cursor: 'pointer',
        '&:hover': {
          boxShadow: 6,
          transform: 'translateY(-4px)',
        },
      }}
      onClick={handleCardClick}
    >
      {/* Theme Image */}
      {event.themeImageUrl ? (
        <Box
          component="img"
          src={event.themeImageUrl}
          alt={`Theme image for ${event.title}`}
          loading="lazy"
          sx={{
            width: '100%',
            height: 200,
            objectFit: 'cover',
            backgroundColor: 'grey.200',
          }}
          onError={(e) => {
            // Fallback to gradient on error
            e.currentTarget.style.display = 'none';
          }}
        />
      ) : (
        <Box
          sx={{
            width: '100%',
            height: 200,
            background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
          }}
        />
      )}

      <CardContent data-testid="event-card-content" sx={{ flexGrow: 1 }}>
        {/* ... existing content ... */}
      </CardContent>

      <CardActions sx={{ justifyContent: 'flex-end', px: 2, pb: 2 }}>
        {/* ... existing actions ... */}
      </CardActions>
    </Card>
  );
};

export const EventDetailPage: React.FC = () => {
  const { eventCode } = useParams<{ eventCode: string }>();
  const { data: event, isLoading } = useEvent(eventCode);

  if (isLoading) return <CircularProgress />;
  if (!event) return <Alert severity="error">Event not found</Alert>;

  return (
    <Box>
      {/* Page Title */}
      <Typography variant="h4" component="h1" gutterBottom>
        {event.title}
      </Typography>

      {/* Theme Image - Full Width */}
      {event.themeImageUrl ? (
        <Box
          component="img"
          src={event.themeImageUrl}
          alt={`Theme image for ${event.title}`}
          sx={{
            width: '100%',
            height: { xs: 200, md: 400 },
            objectFit: 'cover',
            borderRadius: 2,
            mb: 3,
            backgroundColor: 'grey.200',
          }}
        />
      ) : (
        <Box
          sx={{
            width: '100%',
            height: { xs: 200, md: 400 },
            borderRadius: 2,
            mb: 3,
            background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
          }}
        />
      )}

      {/* Event Information Card */}
      <Paper sx={{ p: 3, mb: 3 }}>
        {/* ... existing event details ... */}
      </Paper>

      {/* ... rest of page ... */}
    </Box>
  );
};

import { FileUpload } from '@/components/shared/FileUpload/FileUpload';

export const EventForm: React.FC<EventFormProps> = ({ open, mode, event, onClose, onSuccess }) => {
  const { t } = useTranslation('events');
  const [themeImageUploadId, setThemeImageUploadId] = useState<string | undefined>(
    event?.themeImageUploadId
  );

  const handleThemeImageUploadSuccess = (data: { uploadId: string }) => {
    setThemeImageUploadId(data.uploadId);
  };

  const handleThemeImageUploadError = (error: { type: string; message: string }) => {
    setApiError(t(`errors.${error.type}`, { defaultValue: error.message }));
  };

  const handleCreate = async (data: EventFormData, isDraft = false) => {
    // ... existing code ...

    const createData = {
      title: data.title,
      eventNumber: data.eventNumber,
      date: new Date(data.date).toISOString(),
      // ... other fields ...
      themeImageUploadId, // Include theme image upload ID
    } as CreateEventRequest;

    await eventApiClient.createEvent(createData);
    // ... rest of create logic ...
  };

  const handleUpdate = async (data: EventFormData) => {
    // ... existing code ...

    const changedFields = getChangedFields(data);

    // Add themeImageUploadId if changed
    if (themeImageUploadId && themeImageUploadId !== event?.themeImageUploadId) {
      (changedFields as any).themeImageUploadId = themeImageUploadId;
    }

    await eventApiClient.patchEvent(event.eventCode, changedFields as PatchEventRequest);
    // ... rest of update logic ...
  };

  return (
    <Dialog open={open} onClose={handleCloseClick} maxWidth="md" fullWidth>
      <DialogTitle>{mode === 'create' ? t('form.createEvent') : t('form.editEvent')}</DialogTitle>
      <DialogContent>
        <Box sx={{ pt: 2 }}>
          {/* ... existing form fields ... */}

          {/* Theme Image Upload - At Bottom */}
          <Box sx={{ mt: 3, pt: 3, borderTop: 1, borderColor: 'divider' }}>
            <Typography variant="subtitle2" gutterBottom>
              {t('form.themeImage')}
            </Typography>
            <Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
              {t('form.themeImageHelp')}
            </Typography>
            <FileUpload
              currentFileUrl={event?.themeImageUrl}
              onUploadSuccess={handleThemeImageUploadSuccess}
              onUploadError={handleThemeImageUploadError}
              maxFileSize={5 * 1024 * 1024} // 5MB
              allowedTypes={['image/png', 'image/jpeg', 'image/svg+xml']}
            />
          </Box>
        </Box>
      </DialogContent>
      <DialogActions>
        {/* ... existing actions ... */}
      </DialogActions>
    </Dialog>
  );
};

{
  "form": {
    // ... existing keys ...
    "themeImage": "Event Theme Image",
    "themeImageHelp": "Upload a theme image for this event (PNG, JPEG, or SVG, max 5MB). Recommended size: 1920x400px."
  },
  "errors": {
    // ... existing keys ...
    "imageUploadFailed": "Failed to upload theme image",
    "imageTooBig": "Image file is too large (max 5MB)",
    "imageInvalidType": "Invalid image type (use PNG, JPEG, or SVG)"
  }
}

{
  "form": {
    // ... existing keys ...
    "themeImage": "Veranstaltungs-Themenbild",
    "themeImageHelp": "Laden Sie ein Themenbild für diese Veranstaltung hoch (PNG, JPEG oder SVG, max. 5MB). Empfohlene Größe: 1920x400px."
  },
  "errors": {
    // ... existing keys ...
    "imageUploadFailed": "Fehler beim Hochladen des Themenbilds",
    "imageTooBig": "Bilddatei ist zu groß (max. 5MB)",
    "imageInvalidType": "Ungültiger Bildtyp (verwenden Sie PNG, JPEG oder SVG)"
  }
}

@Test
void createEvent_WithThemeImageUploadId_AssociatesImage() {
    // Given
    CreateEventRequest request = createRequestWithThemeImage("upload-123");
    when(genericLogoService.associateLogoWithEntity(any(), any(), any(), any()))
        .thenReturn("https://cdn.example.com/theme.png");

    // When
    EventResponse response = eventService.createEvent(request);

    // Then
    assertThat(response.getThemeImageUrl()).isEqualTo("https://cdn.example.com/theme.png");
    verify(genericLogoService).associateLogoWithEntity(
        eq("upload-123"),
        eq("EVENT"),
        eq("BATbern1"),
        contains("logos/2025/events/BATbern1/theme-upload-123.png")
    );
}

@Test
void createEvent_WithoutThemeImageUploadId_CreatesEventSuccessfully() {
    // Given
    CreateEventRequest request = createRequestWithoutThemeImage();

    // When
    EventResponse response = eventService.createEvent(request);

    // Then
    assertThat(response.getThemeImageUrl()).isNull();
    verify(genericLogoService, never()).associateLogoWithEntity(any(), any(), any(), any());
}

@Test
void createEvent_WhenImageAssociationFails_CreatesEventWithoutImage() {
    // Given
    CreateEventRequest request = createRequestWithThemeImage("upload-123");
    when(genericLogoService.associateLogoWithEntity(any(), any(), any(), any()))
        .thenThrow(new RuntimeException("S3 error"));

    // When
    EventResponse response = eventService.createEvent(request);

    // Then - Event created successfully despite image failure
    assertThat(response.getEventCode()).isNotNull();
    assertThat(response.getThemeImageUrl()).isNull();
}

@Test
void updateEvent_WithNewThemeImageUploadId_UpdatesImage() {
    // Given
    Event existingEvent = createEventWithoutImage();
    UpdateEventRequest request = updateRequestWithThemeImage("upload-456");
    when(genericLogoService.associateLogoWithEntity(any(), any(), any(), any()))
        .thenReturn("https://cdn.example.com/new-theme.png");

    // When
    EventResponse response = eventService.updateEvent("BATbern1", request);

    // Then
    assertThat(response.getThemeImageUrl()).isEqualTo("https://cdn.example.com/new-theme.png");
}

@Test
void patchEvent_WithThemeImageUploadId_UpdatesImageOnly() {
    // Given
    Event existingEvent = createEventWithImage("old-url");
    PatchEventRequest request = new PatchEventRequest();
    request.setThemeImageUploadId("upload-789");
    when(genericLogoService.associateLogoWithEntity(any(), any(), any(), any()))
        .thenReturn("https://cdn.example.com/patched-theme.png");

    // When
    EventResponse response = eventService.patchEvent("BATbern1", request);

    // Then
    assertThat(response.getTitle()).isEqualTo(existingEvent.getTitle()); // Unchanged
    assertThat(response.getThemeImageUrl()).isEqualTo("https://cdn.example.com/patched-theme.png");
}

describe('EventCard - Theme Image', () => {
  it('displays theme image when themeImageUrl is provided', () => {
    const event = mockEvent({ themeImageUrl: 'https://cdn.example.com/theme.png' });
    render(<EventCard event={event} />);

    const image = screen.getByAltText(`Theme image for ${event.title}`);
    expect(image).toBeInTheDocument();
    expect(image).toHaveAttribute('src', 'https://cdn.example.com/theme.png');
    expect(image).toHaveStyle({ height: '200px' });
  });

  it('displays gradient fallback when no themeImageUrl', () => {
    const event = mockEvent({ themeImageUrl: null });
    render(<EventCard event={event} />);

    const fallback = screen.getByTestId('theme-gradient-fallback');
    expect(fallback).toBeInTheDocument();
    expect(fallback).toHaveStyle({ height: '200px' });
  });

  it('hides image on load error and shows fallback', () => {
    const event = mockEvent({ themeImageUrl: 'https://cdn.example.com/broken.png' });
    render(<EventCard event={event} />);

    const image = screen.getByAltText(`Theme image for ${event.title}`);
    fireEvent.error(image);

    expect(image).toHaveStyle({ display: 'none' });
  });

  it('uses lazy loading for theme image', () => {
    const event = mockEvent({ themeImageUrl: 'https://cdn.example.com/theme.png' });
    render(<EventCard event={event} />);

    const image = screen.getByAltText(`Theme image for ${event.title}`);
    expect(image).toHaveAttribute('loading', 'lazy');
  });
});

describe('EventForm - Theme Image Upload', () => {
  it('renders FileUpload component in form', () => {
    render(<EventForm open={true} mode="create" onClose={jest.fn()} />);

    expect(screen.getByText(/event theme image/i)).toBeInTheDocument();
    expect(screen.getByTestId('file-upload')).toBeInTheDocument();
  });

  it('displays current theme image in edit mode', () => {
    const event = mockEvent({ themeImageUrl: 'https://cdn.example.com/theme.png' });
    render(<EventForm open={true} mode="edit" event={event} onClose={jest.fn()} />);

    const image = screen.getByAltText(/current theme image/i);
    expect(image).toHaveAttribute('src', 'https://cdn.example.com/theme.png');
  });

  it('includes themeImageUploadId in create request', async () => {
    const mockCreate = jest.fn();
    render(
      <EventForm
        open={true}
        mode="create"
        onClose={jest.fn()}
        onSuccess={mockCreate}
      />
    );

    // Simulate upload success
    const fileUpload = screen.getByTestId('file-upload');
    fireEvent.uploadSuccess(fileUpload, { uploadId: 'upload-123' });

    // Fill form and submit
    fillEventForm();
    fireEvent.click(screen.getByText(/save & create/i));

    await waitFor(() => {
      expect(mockCreate).toHaveBeenCalledWith(
        expect.objectContaining({ themeImageUploadId: 'upload-123' })
      );
    });
  });

  it('includes themeImageUploadId in update request when changed', async () => {
    const event = mockEvent({ themeImageUrl: 'old-url', themeImageUploadId: 'old-id' });
    const mockUpdate = jest.fn();
    render(
      <EventForm
        open={true}
        mode="edit"
        event={event}
        onClose={jest.fn()}
        onSuccess={mockUpdate}
      />
    );

    // Simulate new upload
    const fileUpload = screen.getByTestId('file-upload');
    fireEvent.uploadSuccess(fileUpload, { uploadId: 'new-upload-123' });

    // Submit form
    fireEvent.click(screen.getByText(/save/i));

    await waitFor(() => {
      expect(mockUpdate).toHaveBeenCalledWith(
        expect.objectContaining({ themeImageUploadId: 'new-upload-123' })
      );
    });
  });

  it('displays error message when upload fails', async () => {
    render(<EventForm open={true} mode="create" onClose={jest.fn()} />);

    const fileUpload = screen.getByTestId('file-upload');
    fireEvent.uploadError(fileUpload, {
      type: 'imageTooBig',
      message: 'File too large'
    });

    expect(await screen.findByText(/image file is too large/i)).toBeInTheDocument();
  });
});

@Test
@Transactional
void should_createEventWithThemeImage_when_uploadIdProvided() throws Exception {
    // Given - Setup logo upload
    String uploadId = "test-upload-123";
    Logo logo = createConfirmedLogo(uploadId);
    logoRepository.save(logo);

    CreateEventRequest request = CreateEventRequest.builder()
        .title("Cloud Conference 2025")
        .eventNumber(99)
        .date(LocalDateTime.now().plusMonths(2).toString())
        .registrationDeadline(LocalDateTime.now().plusMonths(1).toString())
        .venueName("Tech Hub Bern")
        .venueAddress("Bahnhofplatz 1, 3011 Bern")
        .venueCapacity(500)
        .status("published")
        .organizerUsername("john.doe")
        .currentAttendeeCount(0)
        .themeImageUploadId(uploadId)
        .build();

    // When - Create event
    mockMvc.perform(post("/api/v1/events")
            .contentType(MediaType.APPLICATION_JSON)
            .content(objectMapper.writeValueAsString(request)))
        .andExpect(status().isCreated())
        .andExpect(jsonPath("$.themeImageUrl").isNotEmpty())
        .andExpect(jsonPath("$.themeImageUrl").value(containsString("cloudfront.net")))
        .andExpect(jsonPath("$.themeImageUrl").value(containsString("BATbern99")));

    // Then - Verify logo associated
    Logo associatedLogo = logoRepository.findByUploadId(uploadId).orElseThrow();
    assertThat(associatedLogo.getStatus()).isEqualTo(LogoStatus.ASSOCIATED);
    assertThat(associatedLogo.getAssociatedEntityType()).isEqualTo("EVENT");
    assertThat(associatedLogo.getAssociatedEntityId()).isEqualTo("BATbern99");
    assertThat(associatedLogo.getS3Key()).contains("logos/2025/events/BATbern99/");
}