@extends('layouts.app')

@section('page-title', 'Agent AI')
@section('page-subtitle', 'Assistant intelligent pour la gestion des clients')

@section('content')
<style>
    .ai-dashboard {
        display: grid;
        gap: 2rem;
    }

    .stats-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 1.5rem;
        margin-bottom: 2rem;
    }

    .stat-card {
        background: white;
        padding: 1.5rem;
        border-radius: 1rem;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
        transition: all 0.3s ease;
    }

    .stat-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    }

    .stat-icon {
        width: 60px;
        height: 60px;
        border-radius: 1rem;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.8rem;
        margin-bottom: 1rem;
    }

    .stat-purple { background: linear-gradient(135deg, #8b5cf6, #7c3aed); color: white; }
    .stat-blue { background: linear-gradient(135deg, #3b82f6, #2563eb); color: white; }
    .stat-green { background: linear-gradient(135deg, #10b981, #059669); color: white; }
    .stat-orange { background: linear-gradient(135deg, #f59e0b, #d97706); color: white; }

    .stat-value {
        font-size: 2rem;
        font-weight: 700;
        color: #1f2937;
        margin-bottom: 0.5rem;
    }

    .stat-label {
        color: #6b7280;
        font-size: 0.9rem;
    }

    .config-card {
        background: white;
        border-radius: 1rem;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
        overflow: hidden;
    }

    .config-header {
        background: linear-gradient(135deg, #8b5cf6, #7c3aed);
        color: white;
        padding: 1.5rem;
        display: flex;
        align-items: center;
        gap: 1rem;
    }

    .config-header h3 {
        margin: 0;
        font-size: 1.3rem;
    }

    .config-body {
        padding: 2rem;
    }

    .form-group {
        margin-bottom: 1.5rem;
    }

    .form-label {
        display: block;
        font-weight: 600;
        color: #374151;
        margin-bottom: 0.5rem;
        font-size: 0.95rem;
    }

    .form-control {
        width: 100%;
        padding: 0.875rem 1rem;
        border: 2px solid #e5e7eb;
        border-radius: 0.5rem;
        font-size: 0.95rem;
        transition: all 0.2s ease;
    }

    .form-control:focus {
        outline: none;
        border-color: #8b5cf6;
        box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
    }

    textarea.form-control {
        min-height: 150px;
        font-family: 'Courier New', monospace;
        font-size: 0.85rem;
    }

    .btn {
        padding: 0.875rem 2rem;
        border: none;
        border-radius: 0.5rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s ease;
        display: inline-flex;
        align-items: center;
        gap: 0.75rem;
    }

    .btn-primary {
        background: linear-gradient(135deg, #8b5cf6, #7c3aed);
        color: white;
    }

    .btn-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(139, 92, 246, 0.4);
    }

    .btn-success {
        background: linear-gradient(135deg, #10b981, #059669);
        color: white;
    }

    .btn-success:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(16, 185, 129, 0.4);
    }

    .status-badge {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.5rem 1rem;
        border-radius: 9999px;
        font-size: 0.85rem;
        font-weight: 600;
    }

    .status-active {
        background: #d1fae5;
        color: #065f46;
    }

    .status-inactive {
        background: #fee2e2;
        color: #991b1b;
    }

    .conversations-list {
        background: white;
        border-radius: 1rem;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
        overflow: hidden;
    }

    .conversations-header {
        background: #f9fafb;
        padding: 1.5rem;
        border-bottom: 2px solid #e5e7eb;
    }

    .conversations-header h3 {
        margin: 0;
        font-size: 1.2rem;
        color: #1f2937;
    }

    .conversation-item {
        padding: 1.5rem;
        border-bottom: 1px solid #e5e7eb;
        cursor: pointer;
        transition: background 0.2s ease;
    }

    .conversation-item:hover {
        background: #f9fafb;
    }

    .conversation-info {
        display: flex;
        justify-content: space-between;
        align-items: start;
    }

    .customer-info {
        flex: 1;
    }

    .customer-phone {
        font-weight: 700;
        color: #1f2937;
        font-size: 1.1rem;
        margin-bottom: 0.5rem;
    }

    .last-message {
        color: #6b7280;
        font-size: 0.9rem;
        margin-top: 0.5rem;
    }

    .message-count {
        background: #8b5cf6;
        color: white;
        padding: 0.25rem 0.75rem;
        border-radius: 9999px;
        font-size: 0.8rem;
        font-weight: 700;
    }

    .empty-state {
        text-align: center;
        padding: 3rem;
        color: #9ca3af;
    }

    .empty-state i {
        font-size: 4rem;
        margin-bottom: 1rem;
    }

    .action-buttons {
        display: flex;
        gap: 1rem;
        margin-top: 1.5rem;
    }

    .loading-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.7);
        display: none;
        align-items: center;
        justify-content: center;
        z-index: 9999;
    }

    .loading-overlay.active {
        display: flex;
    }

    .loading-content {
        background: white;
        padding: 2rem 3rem;
        border-radius: 1rem;
        text-align: center;
    }

    .loading-spinner {
        border: 4px solid #e5e7eb;
        border-top-color: #8b5cf6;
        border-radius: 50%;
        width: 50px;
        height: 50px;
        animation: spin 0.8s linear infinite;
        margin: 0 auto 1rem;
    }

    @keyframes spin {
        to { transform: rotate(360deg); }
    }

    .alert {
        padding: 1rem 1.5rem;
        border-radius: 0.75rem;
        margin-bottom: 1.5rem;
        display: flex;
        align-items: center;
        gap: 1rem;
    }

    .alert-success {
        background: #d1fae5;
        color: #065f46;
        border-left: 4px solid #10b981;
    }

    .alert-error {
        background: #fee2e2;
        color: #991b1b;
        border-left: 4px solid #ef4444;
    }
</style>

<div class="ai-dashboard">
    
    <!-- Stats Grid -->
    <div class="stats-grid">
        <div class="stat-card">
            <div class="stat-icon stat-purple">
                <i class="fas fa-comments"></i>
            </div>
            <div class="stat-value">{{ $stats['total_conversations'] }}</div>
            <div class="stat-label">Conversations Totales</div>
        </div>

        <div class="stat-card">
            <div class="stat-icon stat-blue">
                <i class="fas fa-comment-dots"></i>
            </div>
            <div class="stat-value">{{ $stats['active_conversations'] }}</div>
            <div class="stat-label">Conversations Actives</div>
        </div>

        <div class="stat-card">
            <div class="stat-icon stat-green">
                <i class="fas fa-envelope"></i>
            </div>
            <div class="stat-value">{{ $stats['total_messages'] }}</div>
            <div class="stat-label">Messages Échangés</div>
        </div>

        <div class="stat-card">
            <div class="stat-icon stat-orange">
                <i class="fas fa-shopping-cart"></i>
            </div>
            <div class="stat-value">{{ $stats['generated_orders'] }}</div>
            <div class="stat-label">Commandes Générées</div>
        </div>
    </div>

    <!-- Configuration -->
    <div class="config-card">
        <div class="config-header">
            <i class="fas fa-cog fa-2x"></i>
            <div>
                <h3>Configuration Agent AI</h3>
                <p style="margin: 0; opacity: 0.9; font-size: 0.9rem;">Configurez votre assistant intelligent</p>
            </div>
        </div>

        <div class="config-body">
            
            @if($config)
                <div style="margin-bottom: 1.5rem;">
                    <span class="status-badge {{ $config->is_active ? 'status-active' : 'status-inactive' }}">
                        <i class="fas {{ $config->is_active ? 'fa-check-circle' : 'fa-times-circle' }}"></i>
                        {{ $config->is_active ? 'Actif' : 'Inactif' }}
                    </span>
                </div>
            @endif

            <form id="configForm">
                @csrf
                
                <div class="form-group">
                    <label class="form-label">
                        <i class="fas fa-phone"></i>
                        Numéro de Téléphone (WhatsApp Business)
                    </label>
                    <input 
                        type="text" 
                        name="phone_number" 
                        class="form-control" 
                        value="{{ $config->phone_number ?? '' }}"
                        placeholder="+212600000000"
                        required
                    >
                    <small style="color: #6b7280; margin-top: 0.5rem; display: block;">
                        Le numéro où les clients enverront leurs messages
                    </small>
                </div>

                <div class="form-group">
                    <label class="form-label">
                        <i class="fas fa-key"></i>
                        Claude API Key
                    </label>
                    <input 
                        type="password" 
                        name="claude_api_key" 
                        class="form-control" 
                        value="{{ $config->claude_api_key ?? '' }}"
                        placeholder="sk-ant-api03-..."
                        required
                        style="font-family: 'Courier New', monospace;"
                    >
                    <small style="color: #6b7280; margin-top: 0.5rem; display: block;">
                        Votre clé API Claude AI (récupérée depuis console.anthropic.com)
                    </small>
                </div>

                <div class="form-group">
                    <label class="form-label">
                        <i class="fas fa-file-alt"></i>
                        Prompt Système (Optionnel)
                    </label>
                    <textarea 
                        name="system_prompt" 
                        class="form-control"
                        placeholder="Instructions pour l'assistant AI..."
                    >{{ $config->system_prompt ?? '' }}</textarea>
                    <small style="color: #6b7280; margin-top: 0.5rem; display: block;">
                        Laissez vide pour utiliser le prompt par défaut
                    </small>
                </div>

                <div class="form-group">
                    <label style="display: flex; align-items: center; gap: 0.75rem; cursor: pointer;">
                        <input 
                            type="checkbox" 
                            name="is_active" 
                            value="1"
                            {{ ($config && $config->is_active) ? 'checked' : '' }}
                            style="width: 20px; height: 20px; cursor: pointer;"
                        >
                        <span class="form-label" style="margin: 0;">Agent AI Actif</span>
                    </label>
                </div>

                <div class="action-buttons">
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-save"></i>
                        Enregistrer
                    </button>
                    <button type="button" class="btn btn-success" onclick="testConnection()">
                        <i class="fas fa-plug"></i>
                        Tester la Connexion
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- Recent Conversations -->
    <div class="conversations-list">
        <div class="conversations-header">
            <h3>
                <i class="fas fa-history"></i>
                Conversations Récentes
            </h3>
        </div>

        @if($recentConversations->count() > 0)
            @foreach($recentConversations as $conversation)
                <div class="conversation-item" onclick="viewConversation({{ $conversation->id }})">
                    <div class="conversation-info">
                        <div class="customer-info">
                            <div class="customer-phone">
                                <i class="fas fa-user"></i>
                                {{ $conversation->customer_phone }}
                                @if($conversation->customer_name)
                                    - {{ $conversation->customer_name }}
                                @endif
                            </div>
                            <div style="color: #6b7280; font-size: 0.85rem;">
                                <i class="fas fa-clock"></i>
                                {{ $conversation->last_message_at ? $conversation->last_message_at->diffForHumans() : 'N/A' }}
                            </div>
                            @if($conversation->last_message)
                                <div class="last-message">
                                    {{ Str::limit($conversation->last_message, 100) }}
                                </div>
                            @endif
                        </div>
                        <div style="text-align: right;">
                            <span class="message-count">
                                {{ $conversation->message_count }} messages
                            </span>
                            @if($conversation->status === 'active')
                                <div style="margin-top: 0.5rem;">
                                    <span class="status-badge status-active">Actif</span>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>
            @endforeach
        @else
            <div class="empty-state">
                <i class="fas fa-inbox"></i>
                <p>Aucune conversation pour le moment</p>
                <small>Les conversations apparaîtront ici lorsque les clients vous contacteront</small>
            </div>
        @endif
    </div>

</div>

<!-- Loading Overlay -->
<div id="loadingOverlay" class="loading-overlay">
    <div class="loading-content">
        <div class="loading-spinner"></div>
        <div>Traitement en cours...</div>
    </div>
</div>

@endsection

@push('scripts')
<script>
    // Save Configuration
    document.getElementById('configForm').addEventListener('submit', function(e) {
        e.preventDefault();
        
        const loadingOverlay = document.getElementById('loadingOverlay');
        loadingOverlay.classList.add('active');
        
        const formData = new FormData(this);
        
        fetch('{{ route("ai-agent.save-config") }}', {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Accept': 'application/json'
            },
            body: formData
        })
        .then(response => response.json())
        .then(data => {
            loadingOverlay.classList.remove('active');
            
            if (data.success) {
                showAlert('success', data.message);
                setTimeout(() => location.reload(), 1500);
            } else {
                showAlert('error', data.message);
            }
        })
        .catch(error => {
            loadingOverlay.classList.remove('active');
            showAlert('error', 'Erreur: ' + error.message);
        });
    });

    // Test Connection
    function testConnection() {
        const apiKey = document.querySelector('input[name="claude_api_key"]').value;
        
        if (!apiKey) {
            alert('Veuillez entrer votre Claude API Key');
            return;
        }
        
        const loadingOverlay = document.getElementById('loadingOverlay');
        loadingOverlay.classList.add('active');
        
        fetch('{{ route("ai-agent.test-connection") }}', {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Content-Type': 'application/json',
                'Accept': 'application/json'
            },
            body: JSON.stringify({ claude_api_key: apiKey })
        })
        .then(response => response.json())
        .then(data => {
            loadingOverlay.classList.remove('active');
            showAlert(data.success ? 'success' : 'error', data.message);
        })
        .catch(error => {
            loadingOverlay.classList.remove('active');
            showAlert('error', 'Erreur: ' + error.message);
        });
    }

    // View Conversation
    function viewConversation(id) {
        window.location.href = `/ai-agent/conversation/${id}`;
    }

    // Show Alert
    function showAlert(type, message) {
        const alertClass = type === 'success' ? 'alert-success' : 'alert-error';
        const iconClass = type === 'success' ? 'fa-check-circle' : 'fa-exclamation-circle';
        
        const alert = document.createElement('div');
        alert.className = `alert ${alertClass}`;
        alert.innerHTML = `
            <i class="fas ${iconClass}"></i>
            <span>${message}</span>
        `;
        
        const dashboard = document.querySelector('.ai-dashboard');
        dashboard.insertBefore(alert, dashboard.firstChild);
        
        setTimeout(() => {
            alert.style.opacity = '0';
            setTimeout(() => alert.remove(), 300);
        }, 5000);
    }
</script>
@endpush