# Stage 1: Build the React application
FROM node:18-alpine AS build

# Set the working directory
WORKDIR /app

# Copy package.json and package-lock.json (or yarn.lock)
COPY package*.json ./
# If using yarn, uncomment the next line and comment out the npm ci line
# COPY yarn.lock ./

# Install dependencies
# If using yarn, replace 'npm ci' with 'yarn install --frozen-lockfile'
RUN npm ci

# Copy the rest of the application source code
COPY . .

# Build the application for production
# The REACT_APP_ID and REACT_APP_FIREBASE_CONFIG build arguments are optional.
# If you set them during your 'docker build' command, they will be baked into your static files.
# Otherwise, the application will rely on the __app_id and __firebase_config global variables
# being available in the environment where the built assets are served, or fall back to
# the hardcoded defaults in the React code if those globals are not present.
ARG REACT_APP_ID
ARG REACT_APP_FIREBASE_CONFIG
ENV VITE_APP_ID=$REACT_APP_ID
ENV VITE_FIREBASE_CONFIG=$REACT_APP_FIREBASE_CONFIG

# If your project uses Create React App (CRA - typically uses react-scripts build)
# RUN npm run build

# If your project uses Vite (which is common for modern React setups)
# Ensure your package.json's build script uses Vite.
# If you are using Vite, you might need to adjust environment variable prefixing
# (Vite uses VITE_ for env vars to be exposed on client).
# The React code I provided doesn't assume Vite or CRA specifically, but uses
# __app_id and __firebase_config which are meant to be injected at runtime/hosting.
# For a Docker build where these are baked in, you'd typically modify the React code
# to read from process.env.REACT_APP_... (for CRA) or import.meta.env.VITE_... (for Vite).

# Assuming your React app uses environment variables like REACT_APP_ prefixed variables
# (common with Create React App) or VITE_ prefixed for Vite.
# The provided React code uses __app_id and __firebase_config which are expected
# to be injected by the hosting environment. If you want to bake these into the
# Docker image at build time, you would modify the React code to consume them
# from process.env (for CRA) or import.meta.env (for Vite) and then set them here.

# For the current React code, it expects __app_id and __firebase_config to be
# globally available where it runs. If you want to hardcode them during Docker build,
# you'd need to modify the React code to read from standard env vars and then set them
# using ENV in the Dockerfile or pass them as build ARGs.

# Let's assume a standard 'npm run build' script in your package.json
RUN npm run build

# Stage 2: Serve the static files (Optional, if you want the image to be self-contained for serving)
# If you are handling Nginx externally, you might not need this stage.
# You would just copy the /app/build directory from the 'build' stage.
# However, for completeness or if you wanted an image that *can* serve itself:
FROM nginx:1.25-alpine

# Copy the build output from the 'build' stage to Nginx's html directory
COPY --from=build /app/build /usr/share/nginx/html

# Expose port 80 for Nginx
EXPOSE 80

# Start Nginx when the container launches
CMD ["nginx", "-g", "daemon off;"]