server.js

const express = require("express");
const webpack = require("webpack");
const webpackDevMiddleware = require("webpack-dev-middleware");
const webpackHotMiddleware = require("webpack-hot-middleware");
const path = require("path");
const config = require("./webpack.config.js");

const app = express();
const compiler = webpack(config);

// ============================================
// BASIC MIDDLEWARE
// ============================================
app.use(express.json());
app.use(express.urlencoded({ extended: true }));

// ============================================
// API ROUTES - MUST BE FIRST
// ============================================
const apiRouter = express.Router();

// Debug middleware to log all API requests
apiRouter.use((req, res, next) => {
  console.log(`API Request: ${req.method} ${req.path} | Original URL: ${req.originalUrl}`);
  next();
});

apiRouter.get("/test", (req, res) => {
  res.json({ message: "API router is working!", path: req.path });
});

// Catch-all for unmatched API routes (for debugging)
apiRouter.use((req, res, next) => {
  console.error(`API route not matched: ${req.method} ${req.path} | Original: ${req.originalUrl}`);
  res.status(404).json({ error: "API route not found", method: req.method, path: req.path });
});

// Mount API router - CRITICAL: Must be before webpack middleware
app.use("/api", apiRouter);

// ============================================
// WEBPACK MIDDLEWARE - Only for webpack assets
// ============================================
const webpackMiddleware = webpackDevMiddleware(compiler, {
  publicPath: config.output.publicPath,
  index: false,
  writeToDisk: false,
});

// Only apply webpack middleware to webpack assets (bundle.js, etc.)
app.use((req, res, next) => {
  // Skip API routes
  if (req.path.startsWith("/api")) {
    return next();
  }
  // Only handle webpack assets
  if (req.path === "/bundle.js" || req.path.startsWith("/bundle.js") || req.path.includes("webpack")) {
    return webpackMiddleware(req, res, next);
  }
  next();
});

const hotMiddleware = webpackHotMiddleware(compiler);
app.use((req, res, next) => {
  if (req.path.startsWith("/api")) {
    return next();
  }
  if (req.path.includes("__webpack") || req.path.includes("webpack")) {
    return hotMiddleware(req, res, next);
  }
  next();
});

// ============================================
// STATIC FILES - Only for non-API routes
// ============================================
app.use((req, res, next) => {
  if (req.path.startsWith("/api")) {
    return next();
  }
  express.static(path.join(__dirname, "public"))(req, res, next);
});

// ============================================
// CATCH-ALL: React SPA routing
// ============================================
app.use((req, res) => {
  // This should NEVER be hit for API routes
  if (req.path.startsWith("/api")) {
    console.error("ERROR: API route reached catch-all! Path:", req.path);
    return res.status(404).json({ error: "API route not found" });
  }
  res.sendFile(path.join(__dirname, "public", "index.html"));
});

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
  console.log(`Server running on http://localhost:${PORT}`);
  console.log(`API routes available at http://localhost:${PORT}/api/*`);
});