@extends('layouts.mobile')

@section('title', 'Publicación')
@section('back', route('community'))
@section('app-eyebrow', 'Comunidad')
@section('app-title', 'Publicación')

@section('content')
<div class="fm-pad fm-stack" x-data="postScreen('{{ $postId }}')" x-init="load()">

    <template x-if="loading"><div class="fm-skel" style="height:140px;"></div></template>
    <template x-if="!loading && !p"><div class="fm-empty">No encontramos la publicación.</div></template>

    <template x-if="p">
        <div class="fm-stack">
            <div class="fm-card fm-stack" style="gap:10px;">
                <div class="fm-row">
                    <a :href="p.author.id ? '/comunidad/usuario/' + p.author.id : '#'" style="display:flex;align-items:center;gap:10px;flex:1;text-decoration:none;min-width:0;">
                        <span class="fm-glyph" style="width:36px;height:36px;border-radius:50%;font-size:14px;padding:0;overflow:hidden;display:flex;align-items:center;justify-content:center;flex-shrink:0;">
                            <template x-if="p.author.avatar_url"><img :src="p.author.avatar_url" :alt="p.author.name" style="width:100%;height:100%;object-fit:cover;border-radius:50%;"></template>
                            <template x-if="!p.author.avatar_url"><span x-text="(p.author.name||'?')[0].toUpperCase()"></span></template>
                        </span>
                        <div style="font:600 14px var(--font-sans);color:var(--text-primary);" x-text="p.author.name || 'Fermentista'"></div>
                    </a>
                </div>
                <div class="fm-title" style="font-size:18px;" x-text="p.title"></div>
                <div style="font:400 15px/1.6 var(--font-sans);color:var(--text-secondary);white-space:pre-line;" x-text="p.content"></div>
                <div class="fm-row" style="gap:18px;color:var(--text-muted);font:600 13px var(--font-sans);">
                    <button @click="like()" :style="'background:none;border:none;cursor:pointer;font:inherit;' + (p.liked_by_me ? 'color:#D64545;' : 'color:inherit;')">
                        <i :class="p.liked_by_me ? 'fa-solid fa-heart' : 'fa-regular fa-heart'"></i> <span x-text="p.likes_count"></span>
                    </button>
                    <span><i class="fa-regular fa-comment"></i> <span x-text="p.comments_count"></span></span>
                </div>
            </div>

            <div class="fm-stack" style="gap:10px;">
                <div class="fm-sectitle" style="margin:0;"><span>Comentarios</span> <span class="fm-badge fm-badge--neutral" x-text="comments.length"></span></div>

                <template x-if="!comments.length">
                    <div class="fm-empty" style="padding:16px 4px;">Sin comentarios todavía — ¡sé el primero!</div>
                </template>

                <template x-for="c in comments" :key="c.id">
                    <div class="fm-card fm-row" style="align-items:flex-start;gap:10px;">
                        <span class="fm-glyph" style="width:32px;height:32px;border-radius:50%;font-size:13px;padding:0;overflow:hidden;display:flex;align-items:center;justify-content:center;flex-shrink:0;">
                            <template x-if="c.author.avatar_url"><img :src="c.author.avatar_url" :alt="c.author.name" style="width:100%;height:100%;object-fit:cover;border-radius:50%;"></template>
                            <template x-if="!c.author.avatar_url"><span x-text="(c.author.name||'?')[0].toUpperCase()"></span></template>
                        </span>
                        <div style="flex:1;min-width:0;">
                            <div class="fm-row" style="gap:8px;">
                                <span style="font:600 13px var(--font-sans);color:var(--text-primary);" x-text="c.author.name || 'Fermentista'"></span>
                                <span class="fm-muted" style="font-size:11.5px;" x-text="timeAgo(c.created_at)"></span>
                            </div>
                            <div style="font:400 14px/1.5 var(--font-sans);color:var(--text-secondary);white-space:pre-line;margin-top:2px;" x-text="c.content"></div>
                        </div>
                    </div>
                </template>
            </div>

            <template x-if="window.fmAuthed()">
                <div class="fm-card fm-stack" style="gap:10px;">
                    <div class="fm-sectitle" style="margin:0;"><span>Añadir comentario</span></div>
                    <textarea class="fm-input" rows="2" maxlength="250" x-model="comment" placeholder="Escribe un comentario…"></textarea>
                    <div class="fm-muted" style="font-size:11.5px;">Máximo 250 caracteres. No podrás editarlo después de publicarlo.</div>
                    <button class="fm-btn fm-btn--gold fm-btn--block" @click="send()" :disabled="busy || !comment">Enviar</button>
                    <p x-show="sent" x-cloak class="fm-badge fm-badge--green" style="align-self:flex-start;">Comentario enviado</p>
                    <p x-show="error" x-cloak class="fm-badge" style="align-self:flex-start;background:#FDECEA;color:#C22;" x-text="error"></p>
                </div>
            </template>
            <template x-if="!window.fmAuthed()">
                <div class="fm-card fm-stack" style="gap:10px;">
                    <div class="fm-muted" style="font-size:14px;">Inicia sesión para responder en esta conversación.</div>
                    <button class="fm-btn fm-btn--gold fm-btn--block" onclick="fmRequireAuth(location.pathname)">Crear cuenta o entrar</button>
                </div>
            </template>
        </div>
    </template>
</div>
@endsection

@push('scripts')
<script>
function postScreen(id) {
    return {
        id, loading: true, p: null, comments: [], comment: '', busy: false, sent: false, error: '',
        async load() {
            try {
                const d = await window.FermentyAPI.postShow(this.id);
                this.p = d.post || null;
                this.comments = d.comments || [];
            } catch (e) {}
            this.loading = false;
        },
        async like() {
            if (!window.fmRequireAuth(location.pathname)) return;
            if (this.p.liked_by_me) return;
            try {
                const r = await window.FermentyAPI.like(this.id);
                this.p.likes_count = r.likes_count;
                this.p.liked_by_me = true;
            } catch (e) {}
        },
        async send() {
            if (!window.fmRequireAuth(location.pathname)) return;
            this.busy = true;
            this.error = '';
            try {
                const r = await window.FermentyAPI.comment(this.id, this.comment);
                this.p.comments_count = r.comments_count;
                this.comments.push({ id: r.comment.id, content: r.comment.content, author: { name: r.comment.author }, created_at: r.comment.created_at });
                this.comment = ''; this.sent = true;
                setTimeout(() => this.sent = false, 1500);
            } catch (e) {
                this.error = (e.data && (e.data.message || e.data.errors?.content?.[0])) || 'No se pudo enviar el comentario.';
                setTimeout(() => this.error = '', 4000);
            }
            this.busy = false;
        },
        timeAgo(iso) {
            if (!iso) return '';
            const s = (Date.now() - new Date(iso)) / 1000;
            if (s < 3600) return 'hace ' + Math.max(1, Math.floor(s / 60)) + ' min';
            if (s < 86400) return 'hace ' + Math.floor(s / 3600) + ' h';
            return 'hace ' + Math.floor(s / 86400) + ' d';
        },
    };
}
</script>
@endpush