<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GraphQL Playground</title>

    <!-- GraphiQL CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/graphiql@3/graphiql.min.css" />

    <style>
        body {
            margin: 0;
            padding: 0;
            height: 100vh;
            overflow: hidden;
        }

        #graphiql {
            height: 100vh;
        }

        .graphiql-container {
            height: 100%;
        }
    </style>
</head>
<body>
    <div id="graphiql">Loading GraphQL Playground...</div>

    <!-- React, GraphiQL and dependencies -->
    <script crossorigin src="https://cdn.jsdelivr.net/npm/react@18/umd/react.production.min.js"></script>
    <script crossorigin src="https://cdn.jsdelivr.net/npm/react-dom@18/umd/react-dom.production.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/graphiql@3/graphiql.min.js"></script>

    <script>
        // GraphQL endpoints from server
        const GRAPHQL_ENDPOINT = '{graphql_endpoint}';
        const GRAPHQL_WS_ENDPOINT = '{graphql_ws_endpoint}';
        const SCHEMA_ENDPOINT = '{graphql_schema_endpoint}';

        // GraphQL fetcher for queries and mutations
        const fetcher = GraphiQL.createFetcher({
            url: GRAPHQL_ENDPOINT,
            subscriptionUrl: GRAPHQL_WS_ENDPOINT,
        });

        // Default query example
        const defaultQuery = `# Welcome to GraphQL Playground!
#
# Type queries here and they will be executed against the GraphQL API.
#
# Example query:
query GetUsers {
  users {
    id
    name
    email
  }
}

# Example mutation:
# mutation CreateUser($input: CreateUserInput!) {
#   createUser(input: $input) {
#     id
#     name
#     email
#   }
# }

# Example subscription (requires WebSocket):
# subscription OnUserCreated {
#   userCreated {
#     id
#     name
#     email
#     createdAt
#   }
# }
`;

        // Initialize GraphiQL
        const root = ReactDOM.createRoot(document.getElementById('graphiql'));
        root.render(
            React.createElement(GraphiQL, {
                fetcher: fetcher,
                defaultQuery: defaultQuery,
                defaultTabs: [
                    {
                        query: defaultQuery,
                        variables: '{}',
                    }
                ],
                headerEditorEnabled: true,
                shouldPersistHeaders: true,
            })
        );

        // Add custom styling and features
        document.addEventListener('DOMContentLoaded', function() {
            // Auto-fetch schema on load
            fetch(SCHEMA_ENDPOINT)
                .then(response => response.json())
                .then(data => {
                    console.log('GraphQL Schema loaded:', data);
                })
                .catch(error => {
                    console.error('Failed to load schema:', error);
                });
        });
    </script>
</body>
</html>
