@extends('dashboard')

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

@section('content')
<div class="page-container ai-agent-details-page">
    <div class="page-header">
        <div class="header-actions">
            <h1>{{ $agent->name }}</h1>
            <div class="buttons-container">
                <a href="{{ route('ai-agents.index') }}" class="btn btn-outline-primary">
                    <i class="fas fa-arrow-left"></i> Back to Agents
                </a>
                @if($agent->status === 'active')
                    <a href="{{ $agent->deployment_url }}" target="_blank" class="btn btn-success">
                        <i class="fas fa-external-link-alt"></i> Visit Agent
                    </a>
                @endif
            </div>
        </div>
        <div class="agent-status {{ $agent->status }}">
            <span class="status-indicator"></span>
            {{ ucfirst($agent->status) }}
        </div>
    </div>
    
    @if(session('success'))
        <div class="alert alert-success">
            {{ session('success') }}
        </div>
    @endif
    
    @if(session('error'))
        <div class="alert alert-danger">
            {{ session('error') }}
        </div>
    @endif
    
    <div class="agent-details-grid">
        <div class="details-card">
            <div class="card-header">
                <h2>Agent Overview</h2>
            </div>
            <div class="card-body">
                <div class="detail-item">
                    <div class="detail-label">Description</div>
                    <div class="detail-value">{{ $agent->description }}</div>
                </div>
                <div class="detail-item">
                    <div class="detail-label">Model</div>
                    <div class="detail-value">{{ $agent->model_type }}</div>
                </div>
                <div class="detail-item">
                    <div class="detail-label">URL</div>
                    <div class="detail-value">
                        <a href="{{ $agent->deployment_url }}" target="_blank">
                            {{ $agent->deployment_url }}
                        </a>
                    </div>
                </div>
                <div class="detail-item">
                    <div class="detail-label">Created</div>
                    <div class="detail-value">{{ $agent->created_at->format('M j, Y g:i A') }}</div>
                </div>
                <div class="detail-item">
                    <div class="detail-label">Last Updated</div>
                    <div class="detail-value">{{ $agent->updated_at->format('M j, Y g:i A') }}</div>
                </div>
            </div>
        </div>
        
        <div class="details-card">
            <div class="card-header">
                <h2>Usage Overview</h2>
            </div>
            <div class="card-body">
                <div class="usage-metrics">
                    <div class="metric">
                        <div class="metric-value">{{ number_format(rand(100, 10000)) }}</div>
                        <div class="metric-label">Total Requests</div>
                    </div>
                    <div class="metric">
                        <div class="metric-value">{{ number_format(rand(10, 1000)) }}</div>
                        <div class="metric-label">Today</div>
                    </div>
                    <div class="metric">
                        <div class="metric-value">{{ rand(10, 1000) }}ms</div>
                        <div class="metric-label">Avg. Response Time</div>
                    </div>
                </div>
                <div class="usage-chart">
                    <canvas id="usageChart" height="200"></canvas>
                </div>
                <div class="text-center mt-3">
                    <a href="{{ route('ai-agents.analytics', $agent->id) }}" class="btn btn-sm btn-outline-primary">
                        View Detailed Analytics
                    </a>
                </div>
            </div>
        </div>
        
        <div class="details-card">
            <div class="card-header">
                <h2>API Integration</h2>
            </div>
            <div class="card-body">
                <div class="api-info">
                    <div class="detail-item">
                        <div class="detail-label">API Key</div>
                        <div class="detail-value api-key">
                            <div class="api-key-value">•••••••••••••••••••••••••••••</div>
                            <button class="btn btn-sm btn-outline-secondary show-api-key" data-bs-toggle="tooltip" title="Show API Key">
                                <i class="fas fa-eye"></i>
                            </button>
                            <button class="btn btn-sm btn-outline-secondary" data-bs-toggle="tooltip" title="Copy API Key">
                                <i class="fas fa-copy"></i>
                            </button>
                            <form class="d-inline" action="{{ route('ai-agents.regenerate-key', $agent->id) }}" method="POST">
                                @csrf
                                <button type="submit" class="btn btn-sm btn-outline-secondary" data-bs-toggle="tooltip" title="Regenerate API Key">
                                    <i class="fas fa-sync"></i>
                                </button>
                            </form>
                        </div>
                    </div>
                    <div class="detail-item">
                        <div class="detail-label">Endpoint</div>
                        <div class="detail-value">
                            <code>{{ $agent->deployment_url }}/api/v1/chat</code>
                            <button class="btn btn-sm btn-outline-secondary ms-2" data-bs-toggle="tooltip" title="Copy Endpoint">
                                <i class="fas fa-copy"></i>
                            </button>
                        </div>
                    </div>
                </div>
                
                <div class="api-example">
                    <div class="example-header">
                        <span>Example Request</span>
                        <button class="btn btn-sm btn-outline-secondary" data-bs-toggle="tooltip" title="Copy Code">
                            <i class="fas fa-copy"></i>
                        </button>
                    </div>
                    <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": "Hello, assistant!"}'</code></pre>
                </div>
                
                <div class="text-center mt-3">
                    <a href="{{ route('ai-agents.api-docs', $agent->id) }}" class="btn btn-sm btn-outline-primary">
                        View API Documentation
                    </a>
                </div>
            </div>
        </div>
        
        <div class="details-card">
            <div class="card-header">
                <h2>Configuration</h2>
                <button class="btn btn-sm btn-outline-primary" data-bs-toggle="modal" data-bs-target="#editConfigModal">
                    <i class="fas fa-edit"></i> Edit
                </button>
            </div>
            <div class="card-body">
                <div class="config-section">
                    <h3>System Prompt</h3>
                    <pre class="system-prompt">{{ $agent->configuration['system_prompt'] ?? 'No system prompt defined.' }}</pre>
                </div>
                
                <div class="config-section">
                    <h3>Model Settings</h3>
                    <div class="detail-item">
                        <div class="detail-label">Temperature</div>
                        <div class="detail-value">{{ $agent->configuration['temperature'] ?? '0.7' }}</div>
                    </div>
                    <div class="detail-item">
                        <div class="detail-label">Max Response Length</div>
                        <div class="detail-value">{{ $agent->configuration['max_tokens'] ?? '1024' }} tokens</div>
                    </div>
                </div>
                
                <div class="config-section">
                    <h3>Capabilities</h3>
                    <div class="capabilities-list">
                        @if(isset($agent->configuration['capabilities']) && is_array($agent->configuration['capabilities']))
                            @foreach($agent->configuration['capabilities'] as $capability => $enabled)
                                @if($enabled)
                                    <span class="badge bg-success me-2">{{ ucwords(str_replace('_', ' ', $capability)) }}</span>
                                @endif
                            @endforeach
                        @else
                            <p>No special capabilities enabled.</p>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Edit Configuration Modal -->
<div class="modal fade" id="editConfigModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Edit Agent Configuration</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form action="{{ route('ai-agents.update-config', $agent->id) }}" method="POST" id="configForm">
                    @csrf
                    @method('PUT')
                    
                    <div class="mb-3">
                        <label for="systemPrompt" class="form-label">System Prompt</label>
                        <textarea class="form-control" id="systemPrompt" name="configuration[system_prompt]" rows="5">{{ $agent->configuration['system_prompt'] ?? '' }}</textarea>
                        <small class="form-text text-muted">This sets the behavior and capabilities of your agent.</small>
                    </div>
                    
                    <div class="mb-3">
                        <label for="temperature" class="form-label">Temperature ({{ $agent->configuration['temperature'] ?? '0.7' }})</label>
                        <input type="range" class="form-range" id="temperature" name="configuration[temperature]" min="0" max="1" step="0.1" value="{{ $agent->configuration['temperature'] ?? '0.7' }}">
                        <div class="range-labels d-flex justify-content-between">
                            <small>More deterministic (0)</small>
                            <small>More creative (1)</small>
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <label for="maxTokens" class="form-label">Max Response Length</label>
                        <select class="form-select" id="maxTokens" name="configuration[max_tokens]">
                            <option value="256" {{ ($agent->configuration['max_tokens'] ?? 1024) == 256 ? 'selected' : '' }}>Short (256 tokens)</option>
                            <option value="512" {{ ($agent->configuration['max_tokens'] ?? 1024) == 512 ? 'selected' : '' }}>Medium (512 tokens)</option>
                            <option value="1024" {{ ($agent->configuration['max_tokens'] ?? 1024) == 1024 ? 'selected' : '' }}>Long (1024 tokens)</option>
                            <option value="2048" {{ ($agent->configuration['max_tokens'] ?? 1024) == 2048 ? 'selected' : '' }}>Very long (2048 tokens)</option>
                        </select>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label">Capabilities</label>
                        <div class="capabilities-checkboxes">
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" id="capabilityKnowledgeBase" name="configuration[capabilities][knowledge_base]" {{ isset($agent->configuration['capabilities']['knowledge_base']) && $agent->configuration['capabilities']['knowledge_base'] ? 'checked' : '' }}>
                                <label class="form-check-label" for="capabilityKnowledgeBase">
                                    Knowledge Base
                                </label>
                            </div>
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" id="capabilityWebhooks" name="configuration[capabilities][webhooks]" {{ isset($agent->configuration['capabilities']['webhooks']) && $agent->configuration['capabilities']['webhooks'] ? 'checked' : '' }}>
                                <label class="form-check-label" for="capabilityWebhooks">
                                    Webhooks
                                </label>
                            </div>
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" id="capabilityFileHandling" name="configuration[capabilities][file_handling]" {{ isset($agent->configuration['capabilities']['file_handling']) && $agent->configuration['capabilities']['file_handling'] ? 'checked' : '' }}>
                                <label class="form-check-label" for="capabilityFileHandling">
                                    File Handling
                                </label>
                            </div>
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" id="capabilityMemory" name="configuration[capabilities][memory]" {{ isset($agent->configuration['capabilities']['memory']) && $agent->configuration['capabilities']['memory'] ? 'checked' : '' }}>
                                <label class="form-check-label" for="capabilityMemory">
                                    Conversation Memory
                                </label>
                            </div>
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" id="capabilityAnalytics" name="configuration[capabilities][analytics]" {{ isset($agent->configuration['capabilities']['analytics']) && $agent->configuration['capabilities']['analytics'] ? 'checked' : '' }}>
                                <label class="form-check-label" for="capabilityAnalytics">
                                    Advanced Analytics
                                </label>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="submit" form="configForm" class="btn btn-primary">Save Changes</button>
            </div>
        </div>
    </div>
</div>
@endsection

@push('styles')
<style>
    .agent-details-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
        gap: 1.5rem;
    }
    
    .details-card {
        background-color: white;
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        overflow: hidden;
    }
    
    .card-header {
        padding: 1.25rem 1.5rem;
        border-bottom: 1px solid #e9ecef;
        background-color: #f8f9fa;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    .card-header h2 {
        margin: 0;
        font-size: 1.25rem;
        font-weight: 500;
    }
    
    .card-body {
        padding: 1.5rem;
    }
    
    .detail-item {
        margin-bottom: 1rem;
    }
    
    .detail-item:last-child {
        margin-bottom: 0;
    }
    
    .detail-label {
        font-weight: 500;
        font-size: 0.9rem;
        color: #6c757d;
        margin-bottom: 0.25rem;
    }
    
    .usage-metrics {
        display: flex;
        justify-content: space-between;
        margin-bottom: 1.5rem;
    }
    
    .metric {
        text-align: center;
        flex: 1;
    }
    
    .metric-value {
        font-size: 1.75rem;
        font-weight: 500;
        color: #007bff;
        margin-bottom: 0.25rem;
    }
    
    .metric-label {
        font-size: 0.85rem;
        color: #6c757d;
    }
    
    .usage-chart {
        height: 200px;
    }
    
    .api-key {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }
    
    .api-key-value {
        font-family: monospace;
        letter-spacing: 1px;
        flex: 1;
    }
    
    .api-example {
        background-color: #f8f9fa;
        border-radius: 0.5rem;
        margin-top: 1rem;
        overflow: hidden;
    }
    
    .example-header {
        padding: 0.5rem 1rem;
        background-color: #e9ecef;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 0.9rem;
        font-weight: 500;
    }
    
    .api-example pre {
        margin: 0;
        padding: 1rem;
        overflow-x: auto;
        font-size: 0.85rem;
    }
    
    .system-prompt {
        background-color: #f8f9fa;
        border-radius: 0.5rem;
        padding: 1rem;
        font-size: 0.9rem;
        white-space: pre-wrap;
    }
    
    .config-section {
        margin-bottom: 1.5rem;
    }
    
    .config-section:last-child {
        margin-bottom: 0;
    }
    
    .config-section h3 {
        font-size: 1rem;
        font-weight: 500;
        margin-bottom: 0.75rem;
        color: #495057;
    }
    
    .agent-status {
        display: flex;
        align-items: center;
        font-size: 0.9rem;
        padding: 0.5rem 1rem;
        border-radius: 2rem;
        font-weight: 500;
    }
    
    .agent-status.active {
        background-color: rgba(40, 167, 69, 0.1);
        color: #28a745;
    }
    
    .agent-status.initializing {
        background-color: rgba(255, 193, 7, 0.1);
        color: #ffc107;
    }
    
    .agent-status.error {
        background-color: rgba(220, 53, 69, 0.1);
        color: #dc3545;
    }
    
    .status-indicator {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        margin-right: 0.5rem;
    }
    
    .agent-status.active .status-indicator {
        background-color: #28a745;
    }
    
    .agent-status.initializing .status-indicator {
        background-color: #ffc107;
    }
    
    .agent-status.error .status-indicator {
        background-color: #dc3545;
    }
</style>
@endpush

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<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)
        });
        
        // Usage chart
        const ctx = document.getElementById('usageChart').getContext('2d');
        const chart = new Chart(ctx, {
            type: 'line',
            data: {
                labels: Array.from({length: 7}, (_, i) => {
                    const d = new Date();
                    d.setDate(d.getDate() - 6 + i);
                    return d.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
                }),
                datasets: [{
                    label: 'Requests',
                    data: [
                        Math.floor(Math.random() * 500),
                        Math.floor(Math.random() * 500),
                        Math.floor(Math.random() * 500),
                        Math.floor(Math.random() * 500),
                        Math.floor(Math.random() * 500),
                        Math.floor(Math.random() * 500),
                        Math.floor(Math.random() * 500)
                    ],
                    borderColor: '#007bff',
                    backgroundColor: 'rgba(0, 123, 255, 0.1)',
                    tension: 0.4,
                    fill: true
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    y: {
                        beginAtZero: true,
                        ticks: {
                            precision: 0
                        }
                    }
                },
                plugins: {
                    legend: {
                        display: false
                    }
                }
            }
        });
        
        // Show/hide API key
        document.querySelector('.show-api-key').addEventListener('click', function() {
            const keyElement = document.querySelector('.api-key-value');
            
            if (keyElement.textContent.includes('•')) {
                // Fetch API key
                fetch("{{ route('ai-agents.get-key', $agent->id) }}")
                    .then(response => response.json())
                    .then(data => {
                        keyElement.textContent = data.api_key;
                        this.innerHTML = '<i class="fas fa-eye-slash"></i>';
                        this.setAttribute('data-bs-original-title', 'Hide API Key');
                        this.setAttribute('title', 'Hide API Key');
                    });
            } else {
                keyElement.textContent = '•••••••••••••••••••••••••••••';
                this.innerHTML = '<i class="fas fa-eye"></i>';
                this.setAttribute('data-bs-original-title', 'Show API Key');
                this.setAttribute('title', 'Show API Key');
            }
        });
        
        // Copy functionality
        document.querySelectorAll('.fa-copy').forEach(button => {
            button.parentElement.addEventListener('click', function() {
                let text;
                const container = this.parentElement;
                
                if (container.classList.contains('api-key')) {
                    // For API Key
                    if (document.querySelector('.api-key-value').textContent.includes('•')) {
                        // Need to fetch the key first
                        fetch("{{ route('ai-agents.get-key', $agent->id) }}")
                            .then(response => response.json())
                            .then(data => {
                                navigator.clipboard.writeText(data.api_key);
                                showCopyTooltip(this);
                            });
                        return;
                    } else {
                        text = document.querySelector('.api-key-value').textContent;
                    }
                } else if (container.classList.contains('detail-value')) {
                    // For endpoint
                    text = container.querySelector('code').textContent;
                } else if (container.classList.contains('example-header')) {
                    // For code example
                    text = container.parentElement.querySelector('pre code').textContent;
                }
                
                navigator.clipboard.writeText(text);
                showCopyTooltip(this);
            });
        });
        
        function showCopyTooltip(button) {
            const originalTitle = button.getAttribute('data-bs-original-title');
            const tooltip = bootstrap.Tooltip.getInstance(button);
            
            tooltip.setContent({ '.tooltip-inner': 'Copied!' });
            
            setTimeout(() => {
                tooltip.setContent({ '.tooltip-inner': originalTitle });
            }, 1500);
        }
    });
</script>
@endpush