// since we are building a movie catalog app, let us plan to have two UI pages.
  // 1. list page - to list the catalog of movies
  // 2. detail page - to show the detailed description of a movie

  // lets start building the react-router route file (public/routes.jsx)
  // keeping in mind the above requirements
  const Layout = require('./views/layout.jsx');
  const ListPage = require('./views/list.jsx');
  const DetailPage = require('./views/detail.jsx');

  const routes = module.exports = (
    <Router>
      <Route path='/' component={Layout}>
        <IndexRoute component={ListPage} />
        <Route path='/movie/:id' component={DetailPage} />
        <Redirect from='/gohome' to='/' />
      </Route>
    </Router>
  );

  // public/views/layout.jsx file contains the main parts of the app
  // such as html, body and script tags.
  module.exports = (props) => {
    return (
      <html>
        <head>
          <meta charSet='utf-8' />
          <title>React Engine Example App</title>
          <link rel='stylesheet' href='/styles.css'></link>
        </head>
        <body>
          <div>
            {/* Router now automatically populates props.children of your components based on the active route. https://github.com/rackt/react-router/blob/latest/CHANGES.md#routehandler */}
            {props.children}
          </div>
          <script src='/bundle.js'></script>
        </body>
      </html>
    );
  };

  // public/views/list.jsx file contains the catalog view elements of our app.
  // we iterate through the array of movies and display them on this page.
  module.exports = (props) => {
    return (
      <div id='list'>
        <h1>Movies</h1>
        <h6>Click on a movie to see the details</h6>
        <ul>
          {props.movies.map((movie) => {
            return (
              <li key={movie.id}>
                <Router.Link to={`/movie/${movie.id}`}>
                  <img src={movie.image} alt={movie.title} />
                </Router.Link>
              </li>
            );
          })}
        </ul>
      </div>
    );
  };

  // public/views/detail.jsx file contains the markup to
  // display the detail information of a movie
  module.exports = (props) => {
    const movieId = props.params.id;
    const movie = props.movies.find((_movie) => _movie.id === movieId);

    return (
      <div id='detail'>
        <h1>{movie.title}</h1>
        <img src={movie.image} alt={movie.title} />
        <a href={movie.url} target='_blank'>more info</a>
      </div>
    );
  };

  // start by configuring Babel at the top
  // this takes care of parsing JSX files and also ES6 code
  require('babel-register')({
    presets: ['react']
  });

  // next, lets create the express app
  const express = require('express');
  const renderer = require('react-engine');
  const app = express();

  // then create the view engine for our express app
  const reactRoutesFilePath = path.join(__dirname + '/public/routes.jsx');
  const engine = renderer.server.create({
    routes: require(reactRoutesFilePath),
    routesFilePath: reactRoutesFilePath
  });

  // then configure our express app with the view engine that we created
  // set the engine
  app.engine('.jsx', engine);
  // set the view directory
  app.set('views', path.join(__dirname, '/public/views'));
  // set jsx as the view engine
  app.set('view engine', 'jsx');
  // finally, set the custom view
  app.set('view', renderer.expressView);

  // next, lets configure the routes for the express app
  // expose public folder as static assets (JS/CSS)
  app.use(express.static(path.join(__dirname, '/public')));
  // add the our app routes
  // we open a free pass to all GET requests to our app and use react-engine to render them
  app.get('*', (req, res) => {
    res.render(req.url, {
      movies: require('./movies.json')
    });
  });

  // add the error handler middleware
  app.use((err, req, res, next) => {
    console.error(err);

    // http://expressjs.com/en/guide/error-handling.html
    if (res.headersSent) {
      return next(err);
    }

    if (err._type && err._type === ReactEngine.reactRouterServerErrors.MATCH_REDIRECT) {
      return res.redirect(302, err.redirectLocation);
    }
    else if (err._type && err._type === ReactEngine.reactRouterServerErrors.MATCH_NOT_FOUND) {
      return res.status(404).send('Route Not Found!');
    }
    else {
      // for ReactEngine.reactRouterServerErrors.MATCH_INTERNAL_ERROR or
      // any other error we just send the error message back
      return res.status(500).send(err.message);
    }
  });

  // the last step in the server side is to configure the express app to listen on port 3000
  app.listen(3000, () => {
    console.log('Example app listening at http://localhost:%s', PORT);
  });

  // the consolidated full code for this file can be
  // found here: http://bit.ly/1MdzR5c