# Synor Explorer Web - Multi-stage Docker build
# Builds the React frontend and serves with nginx

# ==============================================================================
# Stage 1: Build the React application
# ==============================================================================
FROM node:20-alpine AS builder

WORKDIR /app

# Install dependencies first (for better layer caching)
COPY package.json package-lock.json* pnpm-lock.yaml* ./

# Detect package manager and install dependencies
RUN if [ -f pnpm-lock.yaml ]; then \
        npm install -g pnpm && pnpm install --frozen-lockfile; \
    elif [ -f package-lock.json ]; then \
        npm ci; \
    else \
        npm install; \
    fi

# Copy source code
COPY . .

# Build the application
# VITE_USE_MOCK is explicitly set to false for production builds
ENV VITE_USE_MOCK=false
ENV NODE_ENV=production

RUN npm run build

# ==============================================================================
# Stage 2: Serve with nginx
# ==============================================================================
FROM nginx:alpine AS production

# Remove default nginx config
RUN rm /etc/nginx/conf.d/default.conf

# Copy custom nginx configuration
COPY nginx.conf /etc/nginx/conf.d/default.conf

# Copy built assets from builder stage
COPY --from=builder /app/dist /usr/share/nginx/html

# Add healthcheck
HEALTHCHECK --interval=30s --timeout=10s --start-period=5s --retries=3 \
    CMD wget --no-verbose --tries=1 --spider http://localhost:80/health || exit 1

# Expose port 80
EXPOSE 80

# Start nginx
CMD ["nginx", "-g", "daemon off;"]