@extends('layouts.dashboard')

@section('content')
@php
    $states = [
        'pending' => 'Nouveau',
        'archived' => 'Archivé',
        'trash' => 'Corbeille'
    ];
    $colors = [
        'pending' => 'bg-yellow-100 text-yellow-800',
        'archived' => 'bg-gray-200 text-gray-700',
        'trash' => 'bg-gray-200 text-gray-600'
    ];
@endphp
@push('head')
    <style>[x-cloak] { display: none !important; }</style>
@endpush
<div x-data="contactMessages()">
    <div class="flex items-center justify-between mb-8">
        <h1 class="text-2xl font-bold">
            <i class="bi bi-chat-square-text mr-2"></i>
            Contact
        </h1>
    </div>
    <div class="flex gap-2 px-8" x-cloak>
        @foreach($states as $state => $label)
            <button type="button"
                class="px-6 py-3 rounded-t-lg font-semibold text-sm focus:outline-none transition border-b-2 flex items-center gap-2"
                :class="tab==='{{ $state }}'
                    ? 'border-brand bg-white text-brand shadow'
                    : 'border-transparent bg-gray-100 text-gray-500 hover:bg-gray-200'"
                @click="tab='{{ $state }}'; filter='';">
                @if($state === 'trash')
                    <i class="bi bi-trash3"></i>
                    {{ $label }}
                @else
                    {{ $label }}
                    @if(count($messages[$state] ?? []) > 0)
                        <span class="ml-2 px-2 py-1 rounded-full text-xs font-bold {{ $colors[$state] }}">
                            {{ count($messages[$state] ?? []) }}
                        </span>
                    @endif
                @endif
            </button>
        @endforeach
    </div>
    <div class="bg-white rounded-lg border border-gray-200 p-8" x-cloak>
        @foreach($states as $state => $label)
            <div x-show="tab==='{{ $state }}'" x-cloak x-transition.opacity>
                @if(count($messages[$state] ?? []) > 0)
                <div class="mb-4">
                    <input type="text"
                        class="px-3 py-2 w-full rounded-md border border-gray-300 focus:border-gray-900 outline-0"
                        placeholder="Filtrer par nom, prénom, email/téléphone"
                        x-model="filter"
                    >
                </div>
                @endif
                <div class="grid md:grid-cols-2 gap-5">
                @forelse(($messages[$state] ?? []) as $msg)
                    <template x-if="
                        filter === '' ||
                        (
                            {{ json_encode(strtolower($msg->firstname)) }}.includes(filter.toLowerCase()) ||
                            {{ json_encode(strtolower($msg->lastname)) }}.includes(filter.toLowerCase()) ||
                            {{ json_encode(strtolower($msg->email_or_phone)) }}.includes(filter.toLowerCase())
                        )
                    ">
                    <button type="button"
                        class="rounded-lg border border-gray-200 hover:bg-gray-200/30 p-6 flex justify-between gap-4 transition w-full text-left"
                        @click="openDetail({{ $msg->id }})">
                        <div class="flex items-center gap-5">
                            <div class="flex-shrink-0 w-12 h-12 rounded-full bg-brand/10 flex items-center justify-center text-black font-bold text-lg">
                                {{ strtoupper(substr($msg->firstname,0,1)) }}{{ strtoupper(substr($msg->lastname,0,1)) }}
                            </div>
                            <div>
                                <div class="font-semibold text-lg">{{ $msg->firstname }} {{ $msg->lastname }}</div>
                                <span class="text-xs text-gray-500">{{ $msg->email_or_phone }}</span>
                            </div>
                        </div>
                        <div class="flex flex-col gap-2">
                            <span class="text-xs text-gray-400">
                                {{ $msg->created_at->diffForHumans() }}
                            </span>
                        </div>
                    </button>
                    </template>
                @empty
                    <div class="col-span-full text-gray-400 py-16 text-center text-lg">Aucun message dans cet état.</div>
                @endforelse
                </div>
            </div>
        @endforeach
    </div>
    <!-- Modale détail message -->
    <div x-show="showDetail" x-cloak class="fixed inset-0 z-50 flex items-center justify-center bg-black/40" @click.self="closeDetail()" @keydown.escape.window="closeDetail()" tabindex="0">
        <div class="bg-white rounded-2xl shadow-2xl border border-gray-200 p-0 max-w-xl w-full relative max-h-[95vh] flex flex-col overflow-y-scroll">
            <button type="button" class="absolute top-4 right-4 text-gray-500 hover:text-black" @click="closeDetail()">
                <i class="bi bi-x-lg text-2xl"></i>
            </button>
            <template x-if="detail">
                <div>
                    <div class="flex flex-col items-center bg-gradient-to-br from-amber-50 via-white to-gray-100 px-8 pt-10 pb-6">
                        <div class="w-20 h-20 rounded-full bg-brand/10 flex items-center justify-center text-black font-bold text-3xl mb-3 shadow">
                            <span x-text="detail.initials"></span>
                        </div>
                        <div class="text-xl font-bold mb-1" x-text="detail.firstname + ' ' + detail.lastname"></div>
                        <div class="text-sm text-gray-500 mb-2" x-text="detail.email_or_phone"></div>
                        <div class="text-xs text-gray-400 mb-4" x-text="detail.created_at"></div>
                        <div x-data="{ open: false }" class="relative mt-2 max-w-xs">
                            <!-- Bouton principal -->
                            <button 
                                type="button"
                                @click="open = !open"
                                class="w-full flex items-center gap-3 justify-between px-4 py-2 rounded-full border text-sm font-semibold shadow-sm transition
                                bg-white hover:bg-gray-50"
                                :class="detail.state === 'pending' 
                                    ? 'text-yellow-800 border-yellow-300' 
                                    : detail.state === 'archived'
                                        ? 'text-gray-700 border-gray-300'
                                        : 'text-gray-600 border-gray-300'"
                            >
                                <span x-text="detail.state_label"></span>
                                <i class="bi" :class="open ? 'bi-chevron-up' : 'bi-chevron-down'"></i>
                            </button>

                            <!-- Dropdown -->
                            <div 
                                x-show="open" 
                                x-transition 
                                @click.away="open = false"
                                class="absolute left-0 top-full mt-1 w-full z-10 rounded-xl border border-gray-200 shadow-lg bg-white overflow-hidden"
                            >
                                <template x-for="(lbl, targetState) in detail.states" :key="targetState">
                                    <template x-if="detail.state !== targetState">
                                        <button 
                                            type="button"
                                            @click="changeState(targetState); open = false;"
                                            class="w-full text-left px-4 py-2 text-sm font-medium transition hover:bg-gray-100"
                                            :class="targetState === 'archived' 
                                                ? 'text-gray-600' 
                                                : targetState === 'trash'
                                                    ? 'text-gray-600'
                                                    : 'text-yellow-700'"
                                        >
                                            <span x-text="lbl"></span>
                                        </button>
                                    </template>
                                </template>
                            </div>
                        </div>
                    </div>
                    <div class="px-8 pb-8 pt-4">
                        <div class="mb-4">
                            <div class="font-semibold mb-2 ">Message</div>
                            <div class="text-gray-700 bg-amber-100/60 px-5 py-4 rounded-xl border border-amber-200 shadow-sm">
                                <span x-text="detail.message"></span>
                            </div>
                        </div>
                        <div class="flex justify-end mt-4">
                            <template x-if="detail && detail.state !== 'trash'">
                                <button type="button"
                                    class="flex items-center gap-2 px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition"
                                    @click="moveToTrash(detail.id)">
                                    <i class="bi bi-trash3"></i>
                                    Supprimer
                                </button>
                            </template>
                            <template x-if="detail && detail.state === 'trash'">
                                <button type="button"
                                    class="flex items-center gap-2 px-4 py-2 bg-yellow-600 text-white rounded-lg hover:bg-yellow-700 transition"
                                    @click="changeState('pending')">
                                    <i class="bi bi-arrow-counterclockwise"></i>
                                    Récupérer
                                </button>
                                <button type="button"
                                    class="flex items-center gap-2 px-4 py-2 bg-gray-700 text-white rounded-lg hover:bg-gray-800 transition"
                                    @click="deleteMessage(detail.id)">
                                    <i class="bi bi-trash"></i>
                                    Supprimer définitivement
                                </button>
                            </template>
                        </div>
                    </div>
                </div>
            </template>
        </div>
    </div>
</div>

<script>
function contactMessages() {
    return {
        tab: 'pending',
        filter: '',
        showDetail: false,
        detail: null,
        openDetail(id) {
            fetch(`/dashboard/contact-messages/${id}/ajax`)
                .then(r => r.json())
                .then(data => {
                    this.detail = {
                        ...data,
                        initials: (data.firstname[0] ?? '').toUpperCase() + (data.lastname[0] ?? '').toUpperCase(),
                        state_label: data.state === 'pending' ? 'Nouveau'
                            : data.state === 'archived' ? 'Archivé'
                            : data.state === 'trash' ? 'Corbeille'
                            : '',
                        state_color: data.state === 'pending' ? 'bg-yellow-100 text-yellow-800'
                            : data.state === 'archived' ? 'bg-gray-200 text-gray-700'
                            : 'bg-gray-200 text-gray-600',
                        states: { pending: 'Nouveau', archived: 'Archivé', trash: 'Corbeille' }
                    };
                    this.showDetail = true;
                });
        },
        closeDetail() {
            this.showDetail = false;
            this.detail = null;
        },
        changeState(newState) {
            if (!this.detail) return;
            fetch(`/dashboard/contact-messages/${this.detail.id}/state`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    'Accept': 'application/json'
                },
                body: JSON.stringify({ state: newState })
            })
            .then(r => r.json())
            .then(data => {
                if (data.success) {
                    window.location.reload();
                }
            });
        },
        moveToTrash(id) {
            fetch(`/dashboard/contact-messages/${id}/state`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    'Accept': 'application/json'
                },
                body: JSON.stringify({ state: 'trash' })
            })
            .then(r => r.json())
            .then(data => {
                if (data.success) {
                    window.location.reload();
                }
            });
        },
        deleteMessage(id) {
            fetch(`/dashboard/contact-messages/${id}`, {
                method: 'DELETE',
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    'Accept': 'application/json'
                }
            })
            .then(r => r.json())
            .then(data => {
                if (data.success) {
                    window.location.reload();
                }
            });
        }
    }
}
</script>
@endsection