@extends('layouts.dashboard')

@section('title', 'Détails de la Réclamation')

@push('styles')
<style>
    .page-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 2rem;
    }
    
    .back-button {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.625rem 1.25rem;
        background: white;
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        color: #1f2937;
        text-decoration: none;
        font-weight: 500;
        transition: all 0.2s ease;
    }
    
    .back-button:hover {
        background: #f8fafc;
        border-color: #6fb87d;
        color: #6fb87d;
    }
    
    .main-card {
        background: white;
        border: 1px solid #e5e7eb;
        border-radius: 12px;
        padding: 2rem;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    }
    
    .section-title {
        font-size: 1.5rem;
        font-weight: 600;
        color: #1f2937;
        margin-bottom: 1.5rem;
        padding-bottom: 0.75rem;
        border-bottom: 2px solid #e5e7eb;
    }
    
    .info-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 1.25rem;
        margin-bottom: 2rem;
    }
    
    .info-item {
        background: #f8fafc;
        padding: 1rem;
        border-radius: 8px;
        border: 1px solid #e5e7eb;
        transition: all 0.2s ease;
    }
    
    .info-item:hover {
        background: #f1f5f9;
        border-color: #6fb87d;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(111, 184, 125, 0.1);
    }
    
    .info-label {
        font-size: 0.75rem;
        font-weight: 600;
        color: #6b7280;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        margin-bottom: 0.5rem;
        display: block;
    }
    
    .info-value {
        font-size: 0.9375rem;
        color: #1f2937;
        font-weight: 500;
        line-height: 1.5;
        word-break: break-word;
    }
    
    .badge {
        display: inline-block;
        padding: 0.375rem 0.75rem;
        border-radius: 6px;
        font-size: 0.75rem;
        font-weight: 600;
        text-transform: capitalize;
    }
    
    .badge-status.nouvelle {
        background: #fbbf24;
        color: white;
    }
    
    .badge-status.en_cours {
        background: #3b82f6;
        color: white;
    }
    
    .badge-status.resolue {
        background: #6fb87d;
        color: white;
    }
    
    .badge-status.fermee {
        background: #6b7280;
        color: white;
    }
    
    .form-group {
        margin-bottom: 1.5rem;
    }
    
    .form-label {
        display: block;
        font-size: 0.9375rem;
        font-weight: 600;
        color: #1f2937;
        margin-bottom: 0.5rem;
    }
    
    .form-control {
        width: 100%;
        padding: 0.75rem;
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        font-size: 0.9375rem;
        transition: all 0.2s ease;
    }
    
    .form-control:focus {
        outline: none;
        border-color: #6fb87d;
        box-shadow: 0 0 0 3px rgba(111, 184, 125, 0.1);
    }
    
    .btn {
        padding: 0.75rem 1.5rem;
        border: none;
        border-radius: 6px;
        font-size: 0.9375rem;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s ease;
    }
    
    .btn-primary {
        background: #6fb87d;
        color: white;
    }
    
    .btn-primary:hover {
        background: #5ea66d;
    }
    
    .btn-secondary {
        background: #6b7280;
        color: white;
    }
    
    .btn-secondary:hover {
        background: #4b5563;
    }
    
    .details-section {
        background: #f8fafc;
        padding: 1.5rem;
        border-radius: 8px;
        border: 1px solid #e5e7eb;
        margin-top: 1.5rem;
    }
    
    .details-text {
        font-size: 0.9375rem;
        color: #1f2937;
        line-height: 1.8;
        white-space: pre-wrap;
    }
</style>
@endpush

@section('content')
<div class="container-fluid px-4 py-4" style="padding-left: 1.5rem; padding-right: 1.5rem; padding-top: 1.5rem; padding-bottom: 1.5rem;">
    <!-- En-tête avec bouton retour -->
    <div class="page-header">
        <div>
            <h1 class="mb-2" style="color: #6fb87d; font-size: 2rem; font-weight: 600;">Réclamation #{{ $reclamation->id }}</h1>
            <p class="text-muted" style="font-size: 1.1rem;">Détails et modification de la réclamation</p>
        </div>
        <a href="{{ route('portefeuille.show', $reclamation->prospect_id) }}" class="back-button">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <polyline points="15 18 9 12 15 6"/>
            </svg>
            Retour au prospect
        </a>
    </div>

    <div class="row">
        <div class="col-12">
            <div class="main-card">
                <!-- Formulaire de modification -->
                <h2 class="section-title">Modifier la réclamation</h2>
                <form id="reclamationEditForm" method="POST" action="{{ url('/portefeuille/' . $reclamation->prospect_id . '/reclamations/' . $reclamation->id) }}">
                    @csrf
                    @method('PUT')
                    
                    <div class="form-group">
                        <label for="sujet" class="form-label">Sujet *</label>
                        <input type="text" id="sujet" name="sujet" class="form-control" value="{{ $reclamation->sujet ?? '' }}" required style="max-width: 600px;">
                    </div>
                    
                    <div class="form-group">
                        <label for="details" class="form-label">Détails de la réclamation *</label>
                        <textarea id="details" name="details" class="form-control" rows="8" required>{{ $reclamation->details ?? '' }}</textarea>
                        <div style="display: flex; gap: 0.5rem; margin-top: 0.5rem;">
                            <button type="button" id="micButton" style="padding: 0.5rem 1rem; background: #6fb87d; color: white; border: none; border-radius: 6px; cursor: pointer; font-size: 0.875rem; font-weight: 500; display: flex; align-items: center; gap: 0.5rem;">
                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                    <path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"></path>
                                    <path d="M19 10v2a7 7 0 0 1-14 0v-2"></path>
                                    <line x1="12" y1="19" x2="12" y2="23"></line>
                                    <line x1="8" y1="23" x2="16" y2="23"></line>
                                </svg>
                                <span id="micButtonText">Activer le microphone</span>
                            </button>
                            <button type="button" id="aiButton" style="padding: 0.5rem 1rem; background: #6366f1; color: white; border: none; border-radius: 6px; cursor: pointer; font-size: 0.875rem; font-weight: 500; display: flex; align-items: center; gap: 0.5rem;">
                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                    <path d="M12 2L2 7l10 5 10-5-10-5z"></path>
                                    <path d="M2 17l10 5 10-5"></path>
                                    <path d="M2 12l10 5 10-5"></path>
                                </svg>
                                <span>Reformuler avec IA</span>
                            </button>
                        </div>
                    </div>
                    
                    <div style="display: flex; justify-content: flex-end; gap: 1rem; margin-top: 1.5rem;">
                        <button type="submit" class="btn btn-primary">
                            Enregistrer les modifications
                        </button>
                    </div>
                </form>
                
                <!-- Informations générales -->
                <h2 class="section-title" style="margin-top: 3rem;">Informations Générales</h2>
                <div class="info-grid">
                    <div class="info-item">
                        <span class="info-label">Numéro de réclamation</span>
                        <span class="info-value">Réclamation #{{ $reclamation->id }}</span>
                    </div>
                    <div class="info-item">
                        <span class="info-label">Date de création</span>
                        <span class="info-value">
                            {{ $reclamation->created_at->tz(config('app.timezone'))->format('d/m/Y à H:i') }}
                        </span>
                    </div>
                    <div class="info-item">
                        <span class="info-label">Dernière modification</span>
                        <span class="info-value">
                            {{ $reclamation->updated_at->tz(config('app.timezone'))->format('d/m/Y à H:i') }}
                        </span>
                    </div>
                    <div class="info-item">
                        <span class="info-label">Prospect</span>
                        <span class="info-value">
                            <a href="{{ route('portefeuille.show', $reclamation->prospect_id) }}" style="color: #6fb87d; text-decoration: none;">
                                {{ $reclamation->prospect->full_name }} ({{ $reclamation->prospect->email }})
                            </a>
                        </span>
                    </div>
                </div>
                
                <!-- Détails de la réclamation -->
                <div class="details-section">
                    <h3 style="font-size: 1.125rem; font-weight: 600; color: #1f2937; margin-bottom: 1rem;">Détails</h3>
                    <div class="details-text">{{ $reclamation->details ?? 'Aucun détail' }}</div>
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
// Gestion de la transcription vocale (identique à prospect-details)
let recognition = null;
let isRecording = false;

if ('webkitSpeechRecognition' in window || 'SpeechRecognition' in window) {
    const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
    recognition = new SpeechRecognition();
    recognition.lang = 'fr-FR';
    recognition.continuous = true;
    recognition.interimResults = true;
    
    recognition.onresult = function(event) {
        let finalTranscript = '';
        for (let i = event.resultIndex; i < event.results.length; i++) {
            if (event.results[i].isFinal) {
                finalTranscript += event.results[i][0].transcript + ' ';
            }
        }
        const detailsTextarea = document.getElementById('details');
        if (detailsTextarea) {
            detailsTextarea.value = detailsTextarea.value + finalTranscript;
        }
    };
    
    recognition.onerror = function(event) {
        console.error('Erreur de reconnaissance vocale:', event.error);
        stopRecording();
    };
    
    recognition.onend = function() {
        if (isRecording) {
            try {
                recognition.start();
            } catch (e) {
                stopRecording();
            }
        }
    };
}

function toggleRecording() {
    if (!recognition) {
        alert('La reconnaissance vocale n\'est pas supportée par votre navigateur.');
        return;
    }
    
    if (isRecording) {
        stopRecording();
    } else {
        startRecording();
    }
}

function startRecording() {
    try {
        recognition.start();
        isRecording = true;
        const micButton = document.getElementById('micButton');
        const micButtonText = document.getElementById('micButtonText');
        if (micButton) {
            micButton.style.background = '#ef4444';
            micButtonText.textContent = 'Arrêter l\'enregistrement';
        }
    } catch (e) {
        console.error('Erreur:', e);
        alert('Impossible de démarrer l\'enregistrement.');
    }
}

function stopRecording() {
    if (recognition && isRecording) {
        recognition.stop();
        isRecording = false;
        const micButton = document.getElementById('micButton');
        const micButtonText = document.getElementById('micButtonText');
        if (micButton) {
            micButton.style.background = '#6fb87d';
            micButtonText.textContent = 'Activer le microphone';
        }
    }
}

document.getElementById('micButton')?.addEventListener('click', function(e) {
    e.preventDefault();
    toggleRecording();
});

// Bouton IA pour reformuler
document.getElementById('aiButton')?.addEventListener('click', function(e) {
    e.preventDefault();
    const detailsTextarea = document.getElementById('details');
    if (!detailsTextarea || !detailsTextarea.value.trim()) {
        alert('Veuillez d\'abord saisir du texte à reformuler.');
        return;
    }
    
    const originalText = detailsTextarea.value;
    const aiButton = this;
    const originalButtonText = aiButton.innerHTML;
    
    aiButton.disabled = true;
    aiButton.innerHTML = '<span>Reformulation en cours...</span>';
    
    fetch('/api/mistral/reformulate', {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '',
            'Content-Type': 'application/json',
            'Accept': 'application/json'
        },
        body: JSON.stringify({
            text: originalText
        })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success && data.reformulated_text) {
            detailsTextarea.value = data.reformulated_text;
        } else {
            alert('Erreur lors de la reformulation: ' + (data.message || 'Erreur inconnue'));
        }
    })
    .catch(error => {
        console.error('Erreur:', error);
        alert('Erreur lors de la reformulation avec l\'IA.');
    })
    .finally(() => {
        aiButton.disabled = false;
        aiButton.innerHTML = originalButtonText;
    });
});

// Soumission du formulaire
document.getElementById('reclamationEditForm')?.addEventListener('submit', function(e) {
    e.preventDefault();
    
    if (isRecording) {
        stopRecording();
    }
    
    const formData = new FormData(this);
    const submitButton = this.querySelector('button[type="submit"]');
    const originalText = submitButton.textContent;
    
    // Vérifier que les champs sont remplis
    const sujet = formData.get('sujet');
    const details = formData.get('details');
    
    if (!sujet || !sujet.trim()) {
        alert('Erreur: Le champ "Sujet" est obligatoire.');
        return;
    }
    
    if (!details || !details.trim()) {
        alert('Erreur: Le champ "Détails" est obligatoire.');
        return;
    }
    
    console.log('Envoi des données:', {
        sujet: sujet,
        details: details.substring(0, 50) + '...',
        action: this.action
    });
    
    submitButton.disabled = true;
    submitButton.textContent = 'Enregistrement...';
    
    // Laravel nécessite _method pour PUT avec FormData
    formData.append('_method', 'PUT');
    
    fetch(this.action, {
        method: 'POST',
        body: formData,
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '',
            'Accept': 'application/json'
        }
    })
    .then(response => {
        console.log('Réponse status:', response.status);
        return response.json().then(data => {
            console.log('Réponse data:', data);
            if (!response.ok) {
                throw { status: response.status, data: data };
            }
            return data;
        });
    })
    .then(data => {
        if (data.success) {
            alert('Réclamation mise à jour avec succès');
            location.reload();
        } else {
            let errorMessage = data.message || 'Une erreur est survenue';
            if (data.errors) {
                const errorList = Object.values(data.errors).flat().join('\n');
                errorMessage = errorMessage + '\n\n' + errorList;
            }
            alert('Erreur: ' + errorMessage);
            submitButton.disabled = false;
            submitButton.textContent = originalText;
        }
    })
    .catch(error => {
        console.error('Erreur complète:', error);
        console.error('Erreur data:', error.data);
        console.error('Erreur errors:', error.data?.errors);
        
        let errorMessage = 'Une erreur est survenue lors de l\'enregistrement.';
        if (error.data) {
            errorMessage = error.data.message || errorMessage;
            if (error.data.errors) {
                const errorList = Object.entries(error.data.errors).map(([field, messages]) => {
                    const msgArray = Array.isArray(messages) ? messages : [messages];
                    return `${field}: ${msgArray.join(', ')}`;
                }).join('\n');
                errorMessage = errorMessage + '\n\nDétails des erreurs:\n' + errorList;
                console.error('Erreurs de validation:', errorList);
            }
        }
        alert('Erreur: ' + errorMessage);
        submitButton.disabled = false;
        submitButton.textContent = originalText;
    });
});
</script>
@endpush
@endsection