@extends('dashboard')

@section('page-title', $agent->name . ' - API Documentation')

@section('content')
<div class="page-container api-docs-page">
    <div class="page-header">
        <div class="header-actions">
            <h1>{{ $agent->name }} API Documentation</h1>
            <div class="buttons-container">
                <a href="{{ route('ai-agents.show', $agent->id) }}" class="btn btn-outline-primary">
                    <i class="fas fa-arrow-left"></i> Back to Agent
                </a>
            </div>
        </div>
        <div class="header-info">
            <p>Complete API documentation for integrating with your AI agent.</p>
        </div>
    </div>
    
    <div class="api-docs-container">
        <!-- Authentication -->
        <div class="docs-section">
            <h2 id="authentication">Authentication</h2>
            <p>All API requests require authentication using your agent's API key. Include the API key in the header of each request.</p>
            
            <div class="auth-example">
                <h3>API Key Header</h3>
                <div class="code-block">
                    <pre><code>X-API-Key: YOUR_API_KEY</code></pre>
                    <button class="btn btn-sm btn-outline-secondary copy-code" data-bs-toggle="tooltip" title="Copy">
                        <i class="fas fa-copy"></i>
                    </button>
                </div>
            </div>
            
            <div class="alert alert-info">
                <i class="fas fa-info-circle"></i>
                <div>
                    <strong>Keep your API key secure!</strong>
                    <p>Never share your API key publicly or commit it to version control. You can regenerate your API key at any time from the agent settings page.</p>
                </div>
            </div>
        </div>
        
        <!-- Base URL -->
        <div class="docs-section">
            <h2 id="base-url">Base URL</h2>
            <p>All API requests should be made to the following base URL:</p>
            
            <div class="code-block">
                <pre><code>{{ $agent->deployment_url }}</code></pre>
                <button class="btn btn-sm btn-outline-secondary copy-code" data-bs-toggle="tooltip" title="Copy">
                    <i class="fas fa-copy"></i>
                </button>
            </div>
        </div>
        
        <!-- Endpoints -->
        <div class="docs-section">
            <h2 id="endpoints">Endpoints</h2>
            
            <!-- Chat Endpoint -->
            <div class="endpoint">
                <h3 id="chat-endpoint">Send a Message</h3>
                <div class="endpoint-header">
                    <span class="method post">POST</span>
                    <span class="path">/api/v1/chat</span>
                </div>
                
                <p>Send a message to the AI agent and receive a response.</p>
                
                <h4>Request Parameters</h4>
                <div class="table-responsive">
                    <table class="table">
                        <thead>
                            <tr>
                                <th>Parameter</th>
                                <th>Type</th>
                                <th>Required</th>
                                <th>Description</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>message</td>
                                <td>string</td>
                                <td>Yes</td>
                                <td>The message to send to the agent.</td>
                            </tr>
                            <tr>
                                <td>conversation_id</td>
                                <td>string</td>
                                <td>No</td>
                                <td>ID of an existing conversation. Include this to continue a previous conversation.</td>
                            </tr>
                            <tr>
                                <td>context</td>
                                <td>object</td>
                                <td>No</td>
                                <td>Additional context information to help the agent generate better responses.</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                
                <h4>Example Request</h4>
                <div class="code-block">
                    <pre><code>curl -X POST "{{ $agent->deployment_url }}/api/v1/chat" \
     -H "Content-Type: application/json" \
     -H "X-API-Key: YOUR_API_KEY" \
     -d '{
       "message": "What services do you offer?",
       "context": {
         "user_type": "prospect",
         "referrer": "pricing_page"
       }
     }'</code></pre>
                    <button class="btn btn-sm btn-outline-secondary copy-code" data-bs-toggle="tooltip" title="Copy">
                        <i class="fas fa-copy"></i>
                    </button>
                </div>
                
                <h4>Response</h4>
                <div class="code-block">
                    <pre><code>{
  "response": "We offer a wide range of services including web hosting, domain registration, email hosting, and AI-powered solutions. Our hosting plans start at $5.99/month and include 24/7 support. Would you like me to provide more details about any specific service?",
  "conversation_id": "conv_3f8a9d2e7c1b",
  "created_at": "2023-08-15T14:32:07Z"
}</code></pre>
                    <button class="btn btn-sm btn-outline-secondary copy-code" data-bs-toggle="tooltip" title="Copy">
                        <i class="fas fa-copy"></i>
                    </button>
                </div>
            </div>
            
            <!-- Status Endpoint -->
            <div class="endpoint">
                <h3 id="status-endpoint">Check Agent Status</h3>
                <div class="endpoint-header">
                    <span class="method get">GET</span>
                    <span class="path">/api/v1/status</span>
                </div>
                
                <p>Check if the agent is available and get its current status.</p>
                
                <h4>Example Request</h4>
                <div class="code-block">
                    <pre><code>curl -X GET "{{ $agent->deployment_url }}/api/v1/status" \
     -H "X-API-Key: YOUR_API_KEY"</code></pre>
                    <button class="btn btn-sm btn-outline-secondary copy-code" data-bs-toggle="tooltip" title="Copy">
                        <i class="fas fa-copy"></i>
                    </button>
                </div>
                
                <h4>Response</h4>
                <div class="code-block">
                    <pre><code>{
  "status": "available",
  "version": "1.0.0",
  "model": "{{ $agent->model_type }}"
}</code></pre>
                    <button class="btn btn-sm btn-outline-secondary copy-code" data-bs-toggle="tooltip" title="Copy">
                        <i class="fas fa-copy"></i>
                    </button>
                </div>
            </div>
        </div>
        
        <!-- Response Codes -->
        <div class="docs-section">
            <h2 id="response-codes">Response Codes</h2>
            
            <div class="table-responsive">
                <table class="table">
                    <thead>
                        <tr>
                            <th>Code</th>
                            <th>Description</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>200</td>
                            <td>Success. The request was processed successfully.</td>
                        </tr>
                        <tr>
                            <td>400</td>
                            <td>Bad Request. The request was malformed or missing required parameters.</td>
                        </tr>
                        <tr>
                            <td>401</td>
                            <td>Unauthorized. Invalid or missing API key.</td>
                        </tr>
                        <tr>
                            <td>429</td>
                            <td>Too Many Requests. You've exceeded the rate limit for your plan.</td>
                        </tr>
                        <tr>
                            <td>500</td>
                            <td>Server Error. Something went wrong on our end.</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        
        <!-- Rate Limits -->
        <div class="docs-section">
            <h2 id="rate-limits">Rate Limits</h2>
            <p>API requests are subject to rate limiting to ensure fair usage across all users.</p>
            <p>Current rate limits for your plan:</p>
            
            <div class="table-responsive">
                <table class="table">
                    <thead>
                        <tr>
                            <th>Endpoint</th>
                            <th>Limit</th>
                            <th>Window</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>/api/v1/chat</td>
                            <td>60 requests</td>
                            <td>per minute</td>
                        </tr>
                        <tr>
                            <td>/api/v1/status</td>
                            <td>300 requests</td>
                            <td>per minute</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            
            <p>When a rate limit is exceeded, the API will return a 429 response code with a Retry-After header indicating when you can try again.</p>
        </div>
        
        <!-- SDKs & Libraries -->
        <div class="docs-section">
            <h2 id="sdks">SDKs & Libraries</h2>
            <p>We provide official client libraries to help you integrate with the API more easily:</p>
            
            <div class="sdk-cards">
                <div class="sdk-card">
                    <div class="sdk-icon">
                        <i class="fab fa-js"></i>
                    </div>
                    <div class="sdk-info">
                        <h3>JavaScript</h3>
                        <p>Easily integrate the agent into your web applications.</p>
                        <a href="#" class="btn btn-sm btn-outline-primary">View on NPM</a>
                    </div>
                </div>
                
                <div class="sdk-card">
                    <div class="sdk-icon">
                        <i class="fab fa-python"></i>
                    </div>
                    <div class="sdk-info">
                        <h3>Python</h3>
                        <p>Perfect for backend applications and data analysis.</p>
                        <a href="#" class="btn btn-sm btn-outline-primary">View on PyPI</a>
                    </div>
                </div>
                
                <div class="sdk-card">
                    <div class="sdk-icon">
                        <i class="fab fa-php"></i>
                    </div>
                    <div class="sdk-info">
                        <h3>PHP</h3>
                        <p>Integrate with your PHP applications.</p>
                        <a href="#" class="btn btn-sm btn-outline-primary">View on Packagist</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('styles')
<style>
    .api-docs-container {
        background-color: white;
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
        padding: 2rem;
        margin-bottom: 2rem;
    }
    
    .docs-section {
        margin-bottom: 3rem;
    }
    
    .docs-section h2 {
        margin-bottom: 1rem;
        padding-bottom: 0.5rem;
        border-bottom: 1px solid #dee2e6;
    }
    
    .auth-example h3 {
        font-size: 1.1rem;
        margin-bottom: 0.5rem;
    }
    
    .code-block {
        background-color: #f8f9fa;
        border-radius: 4px;
        margin-bottom: 1.5rem;
        position: relative;
        overflow: hidden;
    }
    
    .code-block pre {
        margin: 0;
        padding: 1rem;
        overflow-x: auto;
    }
    
    .code-block code {
        font-size: 0.9rem;
        white-space: pre;
    }
    
    .copy-code {
        position: absolute;
        top: 0.5rem;
        right: 0.5rem;
    }
    
    .endpoint {
        margin-bottom: 2.5rem;
    }
    
    .endpoint h3 {
        margin-bottom: 0.5rem;
    }
    
    .endpoint-header {
        display: flex;
        align-items: center;
        margin-bottom: 1rem;
    }
    
    .endpoint-header .method {
        padding: 0.25rem 0.5rem;
        border-radius: 4px;
        font-weight: 500;
        color: white;
        font-size: 0.85rem;
        margin-right: 0.75rem;
    }
    
    .endpoint-header .method.post {
        background-color: #28a745;
    }
    
    .endpoint-header .method.get {
        background-color: #007bff;
    }
    
    .endpoint-header .method.put {
        background-color: #ffc107;
        color: #212529;
    }
    
    .endpoint-header .method.delete {
        background-color: #dc3545;
    }
    
    .endpoint-header .path {
        font-family: monospace;
        font-size: 1rem;
    }
    
    .endpoint h4 {
        font-size: 1rem;
        margin: 1.5rem 0 0.75rem;
    }
    
    .alert {
        display: flex;
        align-items: flex-start;
    }
    
    .alert i {
        margin-right: 1rem;
        font-size: 1.25rem;
    }
    
    .sdk-cards {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: 1.5rem;
        margin-top: 1.5rem;
    }
    
    .sdk-card {
        border: 1px solid #dee2e6;
        border-radius: 8px;
        padding: 1.5rem;
        display: flex;
        align-items: flex-start;
    }
    
    .sdk-icon {
        font-size: 2rem;
        color: #007bff;
        margin-right: 1rem;
    }
    
    .sdk-info h3 {
        font-size: 1.1rem;
        margin-bottom: 0.5rem;
    }
    
    .sdk-info p {
        color: #6c757d;
        margin-bottom: 1rem;
        font-size: 0.9rem;
    }
</style>
@endpush

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Initialize tooltips
        var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
        tooltipTriggerList.map(function (tooltipTriggerEl) {
            return new bootstrap.Tooltip(tooltipTriggerEl)
        });
        
        // Copy code functionality
        document.querySelectorAll('.copy-code').forEach(button => {
            button.addEventListener('click', function() {
                const codeBlock = this.parentElement.querySelector('code');
                navigator.clipboard.writeText(codeBlock.textContent);
                
                // Update tooltip
                const tooltip = bootstrap.Tooltip.getInstance(this);
                const originalTitle = tooltip.getTitleElement().textContent;
                
                tooltip.setContent({ '.tooltip-inner': 'Copied!' });
                
                setTimeout(() => {
                    tooltip.setContent({ '.tooltip-inner': originalTitle });
                }, 1500);
            });
        });
    });
</script>
@endpush