@extends('layouts.landing')
@section('title', 'Feed')

@section('content')
<div class="container" style="max-width:680px">

    {{-- Crear publicación --}}
    <div class="card shadow-sm mb-4">
        <div class="card-body">
            <form action="{{ route('posts.store') }}" method="POST" enctype="multipart/form-data">
                @csrf
                <div class="d-flex align-items-start">
                    <img src="{{ auth()->user()->profile_photo_url }}"
                         class="rounded-circle mr-3 flex-shrink-0" width="42" height="42" style="object-fit:cover">
                    <textarea name="body" class="form-control border-0 bg-light px-3 py-2 flex-grow-1"
                              rows="3" placeholder="¿Qué estás pensando, {{ auth()->user()->name }}?"
                              style="resize:none; border-radius:12px"></textarea>
                </div>

                <div class="d-flex align-items-center justify-content-between mt-3 pt-2 border-top">
                    <label class="btn btn-light btn-sm mb-0 px-3">
                        <i class="fas fa-image text-success mr-1"></i> Agregar foto
                        <input type="file" name="image" accept="image/*" hidden id="post-image-input">
                    </label>
                    <span id="post-image-name" class="text-muted small flex-grow-1 mx-2 text-truncate"></span>
                    <button type="submit" class="btn btn-primary px-4">
                        <i class="fas fa-paper-plane mr-2"></i> Publicar
                    </button>
                </div>
            </form>
        </div>
    </div>

    {{-- Feed --}}
    @forelse($posts as $post)
        @include('feed._post', ['post' => $post])
    @empty
        <div class="text-center text-muted py-5">
            <i class="fas fa-users fa-3x mb-3 d-block"></i>
            <p>Aún no hay publicaciones. Agrega amigos para ver su contenido.</p>
            <a href="{{ route('users.search') }}" class="btn btn-primary">Buscar personas</a>
        </div>
    @endforelse

    <div class="d-flex justify-content-center mt-3">
        {{ $posts->links() }}
    </div>
</div>
@endsection

@section('scripts')
<script>
document.getElementById('post-image-input')?.addEventListener('change', function () {
    document.getElementById('post-image-name').textContent = this.files[0]?.name ?? '';
});

// Like toggle
document.querySelectorAll('.like-btn').forEach(btn => {
    btn.addEventListener('click', function () {
        const postId = this.dataset.postId;
        axios.post(`/posts/${postId}/like`).then(res => {
            this.querySelector('.like-count').textContent = res.data.count;
            this.classList.toggle('text-danger', res.data.liked);
            this.classList.toggle('text-muted', !res.data.liked);
            this.querySelector('i').classList.toggle('fas', res.data.liked);
            this.classList.toggle('far', !res.data.liked);
        });
    });
});

// Comentarios: toggle visibilidad
document.querySelectorAll('.toggle-comments').forEach(btn => {
    btn.addEventListener('click', function () {
        const box = document.getElementById('comments-' + this.dataset.postId);
        box.classList.toggle('d-none');
    });
});

// Enviar comentario
document.querySelectorAll('.comment-form').forEach(form => {
    form.addEventListener('submit', function (e) {
        e.preventDefault();
        const postId = this.dataset.postId;
        const input  = this.querySelector('input[name="body"]');
        if (!input.value.trim()) return;

        axios.post(`/posts/${postId}/comments`, { body: input.value })
            .then(res => {
                const list = document.getElementById('comment-list-' + postId);
                const item = document.createElement('div');
                item.className = 'd-flex align-items-start mb-2';
                item.innerHTML = `
                    <img src="${res.data.avatar}" class="rounded-circle mr-2" width="28" height="28" style="object-fit:cover">
                    <div class="bg-light rounded px-2 py-1 flex-grow-1">
                        <strong class="small">${res.data.author}</strong>
                        <div class="small">${res.data.body}</div>
                    </div>`;
                list.appendChild(item);
                input.value = '';
            });
    });
});
</script>
@endsection