@extends('layouts.app')

@section('title', $aspirasi->judul)

@section('content')
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-10">
    {{-- Breadcrumb --}}
    <nav class="flex items-center gap-2 text-sm text-slate-400 mb-6">
        <a href="{{ url('/') }}" class="hover:text-red-600 transition-colors">Beranda</a>
        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
        <a href="{{ route('aspirasi.index') }}" class="hover:text-red-600 transition-colors">Aspirasi Publik</a>
        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
        <span class="text-slate-600 truncate max-w-xs">{{ $aspirasi->judul }}</span>
    </nav>

    {{-- Main Card --}}
    <div class="bg-white rounded-2xl shadow-sm border border-slate-100 overflow-hidden">
        <div class="p-8">
            {{-- Meta --}}
            <div class="flex flex-wrap items-center gap-3 mb-4">
                <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold bg-slate-100 text-slate-700">
                    {{ $aspirasi->kategori->nama ?? 'Umum' }}
                </span>
                <span class="px-3 py-1 rounded-full text-xs font-medium
                    @if($aspirasi->status == 'aktif') bg-emerald-50 text-emerald-700
                    @elseif($aspirasi->status == 'diterima') bg-blue-50 text-blue-700
                    @elseif($aspirasi->status == 'menunggu') bg-amber-50 text-amber-700
                    @elseif($aspirasi->status == 'ditolak') bg-red-50 text-red-700
                    @else bg-slate-50 text-slate-600
                    @endif">
                    {{ ucfirst($aspirasi->status) }}
                </span>
                @if($aspirasi->target_tercapai)
                    <span class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-bold bg-red-600 text-white animate-pulse">
                        <svg class="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/></svg>
                        Rekomendasi RDP — Ambang Batas Audiensi Terpenuhi
                    </span>
                @endif
            </div>

            {{-- Title --}}
            <h1 class="text-2xl sm:text-3xl font-bold text-slate-800 mb-4">{{ $aspirasi->judul }}</h1>

            {{-- Author & Date --}}
            <div class="flex items-center gap-4 mb-6 pb-6 border-b border-slate-100">
                <div class="w-10 h-10 rounded-full flex items-center justify-center text-white text-sm font-bold bg-red-600">
                    @if($aspirasi->anonim)
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/></svg>
                    @else
                        {{ strtoupper(substr($aspirasi->user->nama ?? 'A', 0, 1)) }}
                    @endif
                </div>
                <div>
                    <p class="text-sm font-semibold text-slate-700 flex items-center gap-1.5">
                        {{ $aspirasi->anonim ? ($aspirasi->nama_samaran ?? 'Anonim') : ($aspirasi->user->nama ?? 'Pengguna') }}
                        @if(!$aspirasi->anonim && ($aspirasi->user->status_kyc ?? null) === 'verified')
                            <span class="inline-flex items-center gap-1 px-1.5 py-0.5 rounded-full text-[10px] font-bold bg-emerald-50 text-emerald-700 border border-emerald-200" title="Identitas terverifikasi e-KTP">
                                <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M6.267 3.455a3.066 3.066 0 001.745-.723 3.066 3.066 0 013.976 0 3.066 3.066 0 001.745.723 3.066 3.066 0 012.812 2.812c.051.643.304 1.254.723 1.745a3.066 3.066 0 010 3.976 3.066 3.066 0 00-.723 1.745 3.066 3.066 0 01-2.812 2.812 3.066 3.066 0 00-1.745.723 3.066 3.066 0 01-3.976 0 3.066 3.066 0 00-1.745-.723 3.066 3.066 0 01-2.812-2.812 3.066 3.066 0 00-.723-1.745 3.066 3.066 0 010-3.976 3.066 3.066 0 00.723-1.745 3.066 3.066 0 012.812-2.812zm7.44 5.252a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/></svg>
                                Terverifikasi
                            </span>
                        @endif
                    </p>
                    <p class="text-xs text-slate-400">{{ $aspirasi->created_at->translatedFormat('d F Y, H:i') }} &middot; {{ $aspirasi->created_at->diffForHumans() }}</p>
                </div>
            </div>

            {{-- Content --}}
            <div class="prose prose-slate max-w-none mb-6 leading-relaxed text-slate-600">
                {!! nl2br(e($aspirasi->isi)) !!}
            </div>

            {{-- Attachment --}}
            @if($aspirasi->lampiran)
                <div class="mb-6 p-4 rounded-xl bg-slate-50 border border-slate-100">
                    <p class="text-sm font-semibold text-slate-600 mb-2 flex items-center gap-2">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13"/></svg>
                        Lampiran
                    </p>
                    <a href="{{ Storage::url($aspirasi->lampiran) }}" target="_blank" class="text-sm text-red-600 hover:text-red-800 hover:underline">
                        Lihat/Unduh Lampiran &rarr;
                    </a>
                </div>
            @endif

            {{-- Progress Dukungan menuju Ambang Batas Audiensi --}}
            <div class="mb-6 p-5 rounded-xl border {{ $aspirasi->target_tercapai ? 'bg-red-50 border-red-200' : 'bg-slate-50 border-slate-100' }}">
                <div class="flex flex-wrap justify-between items-center gap-2 mb-2">
                    <p class="text-sm font-semibold {{ $aspirasi->target_tercapai ? 'text-red-700' : 'text-slate-700' }}">
                        {{ $aspirasi->target_tercapai ? 'Ambang batas audiensi terpenuhi!' : 'Dukungan menuju ambang batas audiensi' }}
                    </p>
                    <p id="progress-persen" class="text-sm font-bold {{ $aspirasi->target_tercapai ? 'text-red-600' : 'text-slate-700' }}">{{ $aspirasi->progress_persen }}%</p>
                </div>
                <div class="w-full h-3 bg-white rounded-full overflow-hidden border {{ $aspirasi->target_tercapai ? 'border-red-100' : 'border-slate-200' }}">
                    <div id="progress-bar" class="h-full rounded-full transition-all duration-700 ease-out {{ $aspirasi->target_tercapai ? 'bg-red-500' : 'bg-red-400' }}"
                         style="width: {{ $aspirasi->progress_persen }}%;"></div>
                </div>
                <p class="text-xs text-slate-500 mt-2">
                    <strong id="progress-count">{{ number_format($aspirasi->dukungan_count) }}</strong> dari target <strong>{{ number_format($aspirasi->target_dukungan) }}</strong> dukungan
                    @if($aspirasi->target_tercapai)
                        — aspirasi ini direkomendasikan untuk dibahas dalam Rapat Dengar Pendapat (RDP).
                    @endif
                </p>
            </div>

            {{-- Actions --}}
            <div class="flex items-center gap-4 pt-6 border-t border-slate-100">
                @auth
                    <button type="button" id="btn-dukung"
                            data-url="{{ url('/dukungan/' . $aspirasi->id) }}"
                            class="inline-flex items-center gap-2 px-5 py-2.5 rounded-xl text-sm font-semibold transition-all duration-200 disabled:opacity-60 disabled:cursor-wait {{ $sudahDukung ? 'bg-emerald-50 text-emerald-700 border border-emerald-200 hover:bg-emerald-100' : 'bg-slate-50 text-slate-600 border border-slate-200 hover:bg-red-50 hover:text-red-600 hover:border-red-200' }}">
                        <svg id="dukung-icon" class="w-5 h-5" fill="{{ $sudahDukung ? 'currentColor' : 'none' }}" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 10h4.764a2 2 0 011.789 2.894l-3.5 7A2 2 0 0115.263 21h-4.017c-.163 0-.326-.02-.485-.06L7 20m7-10V5a2 2 0 00-2-2h-.095c-.5 0-.905.405-.905.905 0 .714-.211 1.412-.608 2.006L7 11v9m7-10h-2M7 20H5a2 2 0 01-2-2v-6a2 2 0 012-2h2.5"/></svg>
                        <span id="dukung-label">{{ $sudahDukung ? 'Didukung' : 'Dukung' }}</span>
                        (<span id="dukung-count">{{ number_format($aspirasi->dukungan_count) }}</span>)
                    </button>
                @else
                    <a href="{{ url('/login') }}" class="inline-flex items-center gap-2 px-5 py-2.5 rounded-xl text-sm font-semibold bg-slate-50 text-slate-600 border border-slate-200 hover:bg-red-50 hover:text-red-600 hover:border-red-200 transition-all">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 10h4.764a2 2 0 011.789 2.894l-3.5 7A2 2 0 0115.263 21h-4.017c-.163 0-.326-.02-.485-.06L7 20m7-10V5a2 2 0 00-2-2h-.095c-.5 0-.905.405-.905.905 0 .714-.211 1.412-.608 2.006L7 11v9m7-10h-2M7 20H5a2 2 0 01-2-2v-6a2 2 0 012-2h2.5"/></svg>
                        Dukung ({{ $aspirasi->dukungan_count }})
                    </a>
                @endauth

                <span class="flex items-center gap-2 text-sm text-slate-400">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"/></svg>
                    {{ $aspirasi->komentar_count }} Komentar
                </span>

                {{-- Tombol Bagikan --}}
                @php
                    $urlBagikan = url('/aspirasi-publik/' . $aspirasi->id);
                    $teksBagikan = 'Dukung aspirasi "' . $aspirasi->judul . '" di WadahAspirasi: ';
                @endphp
                <div class="flex items-center gap-2 ml-auto">
                    <a href="https://wa.me/?text={{ urlencode($teksBagikan . $urlBagikan) }}" target="_blank" rel="noopener" title="Bagikan ke WhatsApp"
                       class="w-9 h-9 rounded-lg border border-slate-200 text-slate-400 hover:text-emerald-600 hover:border-emerald-200 hover:bg-emerald-50 flex items-center justify-center transition-all">
                        <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.297-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z"/></svg>
                    </a>
                    <a href="https://twitter.com/intent/tweet?text={{ urlencode($teksBagikan) }}&url={{ urlencode($urlBagikan) }}" target="_blank" rel="noopener" title="Bagikan ke X"
                       class="w-9 h-9 rounded-lg border border-slate-200 text-slate-400 hover:text-slate-900 hover:border-slate-300 hover:bg-slate-50 flex items-center justify-center transition-all">
                        <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
                    </a>
                    <button type="button" data-url="{{ $urlBagikan }}" title="Salin tautan"
                            onclick="navigator.clipboard.writeText(this.dataset.url).then(() => showToast('Tautan disalin ke clipboard.', 'success'))"
                            class="w-9 h-9 rounded-lg border border-slate-200 text-slate-400 hover:text-red-600 hover:border-red-200 hover:bg-red-50 flex items-center justify-center transition-all cursor-pointer">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"/></svg>
                    </button>
                </div>
            </div>
        </div>
    </div>

    {{-- Comments Section --}}
    <div class="mt-8" id="komentar">
        <h2 class="text-xl font-bold text-slate-800 mb-6">Komentar ({{ $aspirasi->komentar_count }})</h2>

        {{-- Comment Form --}}
        @auth
            <div class="bg-white rounded-2xl shadow-sm border border-slate-100 p-6 mb-6">
                <form action="{{ url('/komentar/' . $aspirasi->id) }}" method="POST">
                    @csrf
                    @if(Auth::user()->isLegislatif())
                        <div class="mb-4 flex items-center gap-2 px-4 py-2.5 rounded-xl bg-red-50 border border-red-100 text-xs font-medium text-red-700">
                            <svg class="w-4 h-4 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg>
                            Anda masuk sebagai akun Legislatif — komentar Anda akan dipublikasikan sebagai <strong>Tanggapan Resmi DPRD</strong>.
                        </div>
                    @endif
                    <div class="flex gap-4">
                        <div class="w-10 h-10 rounded-full flex items-center justify-center text-white text-sm font-bold shrink-0 bg-red-600">
                            {{ strtoupper(substr(Auth::user()->nama, 0, 1)) }}
                        </div>
                        <div class="flex-1">
                            <textarea name="isi" rows="3" placeholder="Tulis komentar Anda..." required
                                      class="block w-full rounded-xl border border-slate-200 shadow-sm px-4 py-3 focus:border-red-400 focus:ring-2 focus:ring-red-100 text-sm transition-all resize-y @error('isi') border-red-300 @enderror">{{ old('isi') }}</textarea>
                            @error('isi')
                                <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                            @enderror
                            <div class="flex justify-end mt-3">
                                <button type="submit" class="px-5 py-2.5 rounded-xl text-sm font-semibold text-white shadow-sm hover:opacity-90 transition-all bg-red-600 hover:bg-red-700">
                                    Kirim Komentar
                                </button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        @else
            <div class="bg-slate-50 rounded-2xl border border-slate-100 p-6 mb-6 text-center">
                <p class="text-sm text-slate-500">
                    <a href="{{ url('/login') }}" class="text-red-600 hover:underline font-semibold">Masuk</a> atau
                    <a href="{{ url('/register') }}" class="text-red-600 hover:underline font-semibold">daftar</a> untuk menambahkan komentar.
                </p>
            </div>
        @endauth

        {{-- Comments List (Tanggapan Resmi disematkan di atas) --}}
        <div class="space-y-4">
            @forelse($aspirasi->komentar->sortByDesc('created_at')->sortByDesc('is_official_response') as $komentar)
                <div class="bg-white rounded-2xl shadow-sm border p-6 {{ $komentar->is_official_response ? 'border-red-200 ring-1 ring-red-100' : 'border-slate-100' }}">
                    <div class="flex gap-4">
                        @if($komentar->is_official_response)
                            <div class="w-10 h-10 rounded-full flex items-center justify-center text-white shrink-0 bg-red-600 shadow-md shadow-red-500/20">
                                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg>
                            </div>
                        @else
                            <div class="w-10 h-10 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0 bg-slate-500">
                                {{ strtoupper(substr($komentar->user->nama ?? 'U', 0, 1)) }}
                            </div>
                        @endif
                        <div class="flex-1">
                            <div class="flex flex-wrap items-center gap-2 mb-2">
                                <span class="text-sm font-semibold text-slate-700">{{ $komentar->user->nama ?? 'Pengguna' }}</span>
                                @if($komentar->is_official_response)
                                    <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[10px] font-bold uppercase tracking-wide bg-red-600 text-white">
                                        <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M6.267 3.455a3.066 3.066 0 001.745-.723 3.066 3.066 0 013.976 0 3.066 3.066 0 001.745.723 3.066 3.066 0 012.812 2.812c.051.643.304 1.254.723 1.745a3.066 3.066 0 010 3.976 3.066 3.066 0 00-.723 1.745 3.066 3.066 0 01-2.812 2.812 3.066 3.066 0 00-1.745.723 3.066 3.066 0 01-3.976 0 3.066 3.066 0 00-1.745-.723 3.066 3.066 0 01-2.812-2.812 3.066 3.066 0 00-.723-1.745 3.066 3.066 0 010-3.976 3.066 3.066 0 00.723-1.745 3.066 3.066 0 012.812-2.812zm7.44 5.252a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/></svg>
                                        Tanggapan Resmi DPRD
                                    </span>
                                @endif
                                <span class="text-xs text-slate-400">{{ $komentar->created_at->diffForHumans() }}</span>
                            </div>
                            <p class="text-sm text-slate-600 leading-relaxed">{{ $komentar->isi }}</p>
                        </div>
                    </div>
                </div>
            @empty
                <div class="text-center py-8">
                    <p class="text-slate-400 text-sm">Belum ada komentar. Jadilah yang pertama berkomentar!</p>
                </div>
            @endforelse
        </div>
    </div>
</div>

@push('scripts')
<script>
    (function () {
        var btn = document.getElementById('btn-dukung');
        if (!btn) return;

        var aktifCls = ['bg-emerald-50', 'text-emerald-700', 'border-emerald-200', 'hover:bg-emerald-100'];
        var netralCls = ['bg-slate-50', 'text-slate-600', 'border-slate-200', 'hover:bg-red-50', 'hover:text-red-600', 'hover:border-red-200'];
        var fmt = function (n) { return new Intl.NumberFormat('id-ID').format(n); };

        btn.addEventListener('click', function () {
            btn.disabled = true;

            fetch(btn.dataset.url, {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                    'Accept': 'application/json',
                },
            })
                .then(function (res) {
                    if (!res.ok) throw new Error('Gagal memproses dukungan. Coba lagi.');
                    return res.json();
                })
                .then(function (data) {
                    document.getElementById('dukung-count').textContent = fmt(data.jumlah_dukungan);
                    document.getElementById('dukung-label').textContent = data.didukung ? 'Didukung' : 'Dukung';
                    document.getElementById('dukung-icon').setAttribute('fill', data.didukung ? 'currentColor' : 'none');
                    btn.classList.remove.apply(btn.classList, data.didukung ? netralCls : aktifCls);
                    btn.classList.add.apply(btn.classList, data.didukung ? aktifCls : netralCls);

                    var bar = document.getElementById('progress-bar');
                    if (bar) bar.style.width = Math.min(100, data.progress_persen) + '%';
                    var pct = document.getElementById('progress-persen');
                    if (pct) pct.textContent = data.progress_persen + '%';
                    var pc = document.getElementById('progress-count');
                    if (pc) pc.textContent = fmt(data.jumlah_dukungan);

                    showToast(data.message, 'success');
                })
                .catch(function (err) {
                    showToast(err.message || 'Terjadi kesalahan.', 'error');
                })
                .finally(function () {
                    btn.disabled = false;
                });
        });
    })();
</script>
@endpush
@endsection