@extends('app')

@section('title', 'Mes suggestions - (RE)Sources Relationnelles')

@section('content')
    <section class="container mx-auto px-4 py-12">
        <div class="max-w-3xl mx-auto">
            <!-- En-tête -->
            <div class="flex items-start justify-between mb-8">
                <div>
                    <h1 class="text-4xl font-bold text-gray-900 mb-2">💬 Mes suggestions</h1>
                    <p class="text-gray-600">
                        Suivez ici la prise en compte de vos suggestions par l'équipe : état du ticket,
                        réponses reçues, et poursuivez la discussion.
                    </p>
                </div>
                <a href="{{ route('suggestions.create') }}" class="shrink-0 inline-flex items-center px-4 py-2.5 text-sm font-bold text-niagara border-2 border-niagara rounded-lg hover:bg-niagara hover:text-white transition-smooth duration-200">
                    💡 Nouvelle suggestion
                </a>
            </div>

            <!-- Message de succès -->
            @if (session('success'))
                <div class="mb-6 p-4 bg-green-50 border border-green-200 rounded-lg">
                    <p class="text-green-700 font-semibold">✅ {{ session('success') }}</p>
                </div>
            @endif

            @forelse ($suggestions as $suggestion)
                @php($etat = $etats[$suggestion->ID_Suggestion] ?? null)
                @php($nouvelles = $etat ? max(0, $etat['comments'] - $suggestion->CommentairesVus) : 0)
                <a href="{{ route('suggestions.show', $suggestion) }}"
                   class="block bg-white rounded-xl border border-gray-200 p-6 mb-4 hover:border-niagara hover:shadow-md transition-smooth duration-200">
                    <div class="flex items-center justify-between gap-4">
                        <div class="min-w-0">
                            <div class="flex items-center gap-2 mb-1 flex-wrap">
                                <span class="px-2 py-0.5 text-xs font-bold rounded-full bg-gray-100 text-gray-700">{{ $suggestion->Type }}</span>
                                @if ($etat === null)
                                    <span class="px-2 py-0.5 text-xs font-bold rounded-full bg-gray-100 text-gray-500">⚪ État indisponible</span>
                                @elseif ($etat['state'] === 'closed')
                                    <span class="px-2 py-0.5 text-xs font-bold rounded-full bg-purple-100 text-purple-700">✔️ Traitée</span>
                                @else
                                    <span class="px-2 py-0.5 text-xs font-bold rounded-full bg-green-100 text-green-700">🟢 En cours</span>
                                @endif
                                @if ($nouvelles > 0)
                                    <span class="px-2 py-0.5 text-xs font-bold rounded-full bg-candlelight text-gray-900">
                                        🔔 {{ $nouvelles }} {{ $nouvelles > 1 ? 'nouvelles réponses' : 'nouvelle réponse' }}
                                    </span>
                                @endif
                            </div>
                            <p class="font-bold text-gray-900 truncate">{{ $suggestion->Titre }}</p>
                            <p class="text-sm text-gray-500">
                                Envoyée le {{ $suggestion->DateCreation->format('d/m/Y à H\hi') }}
                                @if ($suggestion->GiteaIssueNumber)
                                    · ticket n°{{ $suggestion->GiteaIssueNumber }}
                                @endif
                                @if ($etat)
                                    · {{ $etat['comments'] }} {{ $etat['comments'] > 1 ? 'réponses' : 'réponse' }}
                                @endif
                            </p>
                        </div>
                        <span class="text-gray-400 text-xl shrink-0">→</span>
                    </div>
                </a>
            @empty
                <div class="bg-white rounded-xl border border-gray-200 p-10 text-center">
                    <p class="text-gray-600 mb-4">Vous n'avez pas encore envoyé de suggestion.</p>
                    <a href="{{ route('suggestions.create') }}" class="inline-flex items-center px-6 py-3 font-bold bg-candlelight text-gray-900 rounded-lg shadow-md hover:shadow-lg transition-smooth duration-200">
                        💡 Proposer une amélioration
                    </a>
                </div>
            @endforelse
        </div>
    </section>
@endsection