@extends('dashboard')

@section('page-title', 'AI Agents')

@section('content')
<div class="page-container ai-agents-page">
    <div class="page-header">
        <div class="header-actions">
            <h1>AI Agents</h1>
            <div class="buttons-container">
                <a href="{{ route('ai-agents.create') }}" class="btn btn-primary">
                    <i class="fas fa-plus"></i> Create New Agent
                </a>
            </div>
        </div>
        <div class="header-info">
            <p>Manage your AI agents, monitor their performance, and deploy them to your websites.</p>
        </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="agents-grid">
        @forelse($agents as $agent)
            <div class="agent-card">
                <div class="agent-status">
                    <span class="status-indicator {{ $agent->status }}"></span>
                    {{ ucfirst($agent->status) }}
                </div>
                
                <h3 class="agent-name">{{ $agent->name }}</h3>
                <p class="agent-description">{{ Str::limit($agent->description, 120) }}</p>
                
                <div class="agent-model">
                    <span class="model-badge">{{ $agent->model_type }}</span>
                </div>
                
                <div class="agent-metrics">
                    <div class="metric">
                        <span class="value">{{ number_format(rand(100, 10000)) }}</span>
                        <span class="label">Requests</span>
                    </div>
                    <div class="metric">
                        <span class="value">${{ number_format($agent->estimateMonthlyCost(), 2) }}</span>
                        <span class="label">Est. Monthly</span>
                    </div>
                </div>
                
                <div class="agent-url">
                    <i class="fas fa-link"></i>
                    <a href="{{ $agent->deployment_url }}" target="_blank">{{ $agent->deployment_url }}</a>
                </div>
                
                <div class="agent-actions">
                    <a href="{{ route('ai-agents.show', $agent->id) }}" class="btn btn-primary">Manage</a>
                    
                    <div class="dropdown">
                        <button class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown">
                            More
                        </button>
                        <div class="dropdown-menu dropdown-menu-end">
                            <a href="{{ route('ai-agents.analytics', $agent->id) }}" class="dropdown-item">
                                <i class="fas fa-chart-line"></i> Analytics
                            </a>
                            <a href="{{ route('ai-agents.logs', $agent->id) }}" class="dropdown-item">
                                <i class="fas fa-list"></i> Logs
                            </a>
                            <a href="{{ route('ai-agents.api-docs', $agent->id) }}" class="dropdown-item">
                                <i class="fas fa-code"></i> API Documentation
                            </a>
                            <div class="dropdown-divider"></div>
                            <a href="#" class="dropdown-item text-danger" 
                               onclick="event.preventDefault(); document.getElementById('delete-agent-{{ $agent->id }}').submit();">
                                <i class="fas fa-trash"></i> Delete
                            </a>
                            <form id="delete-agent-{{ $agent->id }}" action="{{ route('ai-agents.destroy', $agent->id) }}" method="POST" class="d-none">
                                @csrf
                                @method('DELETE')
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        @empty
            <div class="empty-state">
                <div class="icon">
                    <i class="fas fa-robot"></i>
                </div>
                <h3>No AI Agents Yet</h3>
                <p>You haven't created any AI agents yet. Get started by creating your first agent.</p>
                <a href="{{ route('ai-agents.create') }}" class="btn btn-primary">Create Your First Agent</a>
            </div>
        @endforelse
    </div>
</div>
@endsection

@push('styles')
<style>
    .agents-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
        gap: 1.5rem;
    }

    .agent-card {
        background-color: white;
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
        padding: 1.5rem;
        position: relative;
        transition: all 0.2s;
    }

    .agent-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    }

    .agent-status {
        position: absolute;
        top: 1.5rem;
        right: 1.5rem;
        font-size: 0.8rem;
        display: flex;
        align-items: center;
    }

    .status-indicator {
        display: inline-block;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        margin-right: 0.5rem;
    }

    .status-indicator.active {
        background-color: #28a745;
    }

    .status-indicator.initializing {
        background-color: #ffc107;
    }

    .status-indicator.error {
        background-color: #dc3545;
    }

    .agent-name {
        margin: 0 0 0.75rem 0;
        padding-right: 80px;
    }

    .agent-description {
        color: #6c757d;
        margin-bottom: 1rem;
        min-height: 3em;
    }

    .agent-model {
        margin-bottom: 1rem;
    }

    .model-badge {
        background-color: #f8f9fa;
        border-radius