@extends('layouts.app')

@section('title', 'Suivi du ticket')

@section('content')
<div class="max-w-3xl mx-auto space-y-6">

    <a href="{{ route('tickets.index') }}" class="text-sm font-bold text-[--fr-blue] hover:underline">← Mes tickets</a>

    @if (session('success'))
        <div class="p-4 bg-green-50 border border-green-200 rounded-lg">
            <p class="text-green-700 font-semibold">✅ {{ session('success') }}</p>
        </div>
    @endif
    @if ($errors->any())
        <div class="p-4 bg-red-50 border border-red-200 rounded-lg space-y-1">
            @foreach ($errors->all() as $error)<p class="text-red-700 text-sm">{{ $error }}</p>@endforeach
        </div>
    @endif

    @php($state = $issue['state'] ?? null)

    <div class="bg-white p-6 border border-slate-200 shadow-sm space-y-4">
        <div class="flex items-start justify-between gap-4">
            <h1 class="text-2xl font-bold text-[#161616]">{{ $ticket->title }}</h1>
            <span class="shrink-0 text-xs font-bold px-3 py-1 rounded-full
                {{ $state === 'closed' ? 'bg-green-100 text-green-700' : ($state === 'open' ? 'bg-blue-100 text-blue-700' : 'bg-slate-100 text-slate-500') }}">
                {{ $state === 'closed' ? 'Résolu' : ($state === 'open' ? 'En cours' : 'Inconnu') }}
            </span>
        </div>

        <div class="flex flex-wrap items-center gap-2 text-xs">
            <span class="text-slate-500">#{{ $ticket->gitea_number }} · {{ $ticket->type }}</span>
            @if (!empty($issue['milestone']['title']))
                <span class="font-bold px-2 py-0.5 rounded bg-purple-100 text-purple-700">🎯 {{ $issue['milestone']['title'] }}</span>
            @endif
            @foreach ($issue['labels'] ?? [] as $label)
                <span class="font-bold px-2 py-0.5 rounded bg-slate-100 text-slate-700">{{ $label['name'] }}</span>
            @endforeach
        </div>

        @if (!empty($issue['body']))
            <div class="text-sm text-slate-700 whitespace-pre-line bg-slate-50 border border-slate-100 rounded p-4">{{ $issue['body'] }}</div>
        @endif

        @unless ($issue)
            <p class="text-sm text-amber-700 bg-amber-50 border border-amber-200 rounded p-3">
                Impossible de récupérer l'état du ticket pour le moment. Réessayez plus tard.
            </p>
        @endunless
    </div>

    <!-- Fil de discussion -->
    <div class="space-y-3">
        <h2 class="text-lg font-bold text-slate-800">Échanges</h2>

        @forelse ($comments as $comment)
            <div class="bg-white p-4 border border-slate-200 shadow-sm">
                <div class="flex items-center justify-between mb-2">
                    <span class="text-sm font-bold text-slate-800">{{ $comment['user']['login'] ?? 'Équipe' }}</span>
                    <span class="text-xs text-slate-400">
                        {{ \Illuminate\Support\Carbon::parse($comment['created_at'])->format('d/m/Y H:i') }}
                    </span>
                </div>
                <div class="text-sm text-slate-700 whitespace-pre-line">{{ $comment['body'] }}</div>
            </div>
        @empty
            <p class="text-sm text-slate-500">Aucune réponse pour le moment.</p>
        @endforelse
    </div>

    <!-- Répondre -->
    @if ($state !== 'closed')
        <form action="{{ route('tickets.reply', $ticket->gitea_number) }}" method="POST"
              class="bg-white p-4 border border-slate-200 shadow-sm space-y-3">
            @csrf
            <label for="message" class="block text-sm font-bold text-slate-700">Répondre</label>
            <textarea id="message" name="message" required minlength="2" maxlength="5000" rows="4"
                placeholder="Ajouter une précision, une réponse…"
                class="w-full border-slate-200 rounded-lg focus:ring-[--fr-blue] focus:border-[--fr-blue]">{{ old('message') }}</textarea>
            <button type="submit"
                class="px-6 py-2.5 bg-[#000091] text-white font-bold rounded-sm hover:bg-blue-800 shadow-md transition-all text-sm uppercase tracking-widest">
                Envoyer
            </button>
        </form>
    @else
        <p class="text-sm text-slate-500 italic">Ce ticket est clôturé — il n'est plus possible d'y répondre.</p>
    @endif
</div>
@endsection