/*
 * For any questions, contact us at: raman@worktif.com
 */

import * as React from 'react';
import { Link } from 'react-router';

/**
 * Users microservice example page
 */
const UsersPage: React.FC = () => {
  return (
    <div style={{ padding: '2rem', fontFamily: 'system-ui, sans-serif' }}>
      <style>{`.pageTitle {font-size:2.5rem;margin-block-start:0} @media (max-width: 768px) { .pageTitle { text-align: center; }}`}</style>
      <h1 className={'pageTitle'} style={{ lineHeight: '3rem' }}>Users Microservice</h1>
      <p>
        Example microservice demonstrating type-safe Lambda handlers with dependency injection.
      </p>

      <div style={{ marginTop: '2rem' }}>
        <h2>Available Endpoints</h2>
        <ul style={{ paddingInlineStart: '30px', lineHeight: '1.5rem'}}>
          <li><strong>POST /api/users</strong> – Create a new user</li>
          <li><strong>GET /api/users/{'{id}'}</strong> – Get user by ID</li>
          <li><strong>PUT /api/users/{'{id}'}</strong> – Update user</li>
          <li><strong>DELETE /api/users/{'{id}'}</strong> – Delete user</li>
        </ul>
      </div>

      <div style={{ marginTop: '2rem' }}>
        <h2>Handler Example</h2>
        <pre style={{ background: '#f5f5f5', padding: '1rem', borderRadius: '4px', overflow: 'auto', lineHeight: '1.1rem' }}>
          {`type UserHandlerTies = { userService: UsersService };

export const getUserHandler: LambdaDefinition<UserHandlerTies> = {
  id: 'get',
  ties: { userService: UsersService },
  handler: async (event) => {
    const user = await event.ties.userService.getUser(event.pathParameters.id);
    return {
      statusCode: 200,
      body: JSON.stringify(user)
    };
  },
  http: {
    method: 'GET',
    path: '/api/users/{id}',
    auth: 'jwt'
  }
};`}
        </pre>
      </div>

      <div style={{ marginTop: '2rem' }}>
        <h2>Microservice Registration</h2>
        <pre style={{ background: '#f5f5f5', padding: '1rem', borderRadius: '4px', overflow: 'auto', lineHeight: '1.2rem' }}>
          {`runtime({
  // ...
  register: {
    users: {
      ties: [UsersTies],
      lambdas: [
        createUserHandler, 
        getUserHandler, 
        updateUserHandler, 
        deleteUserHandler,
      ]
    }
  }
});`}
        </pre>
      </div>

      <div style={{ marginTop: '2rem' }}>
        <Link to="/" style={{ color: '#0066cc', textDecoration: 'none' }}>
          ← Back to Home
        </Link>
      </div>
    </div>
  );
};

export default UsersPage;
