@extends('layouts.mobile')

@section('title', 'Comunidad')
@section('app-eyebrow', 'Tips, preguntas y recetas')
@section('app-title', 'Comunidad')
@section('app-action')
    <button onclick="if(window.fmRequireAuth(location.pathname)) window.dispatchEvent(new CustomEvent('fm-newpost'))"
            aria-label="Publicar" style="width:38px;height:38px;border-radius:var(--radius-md);background:none;border:none;cursor:pointer;color:var(--green-700);">
        <i class="fa-solid fa-pen-to-square" style="font-size:18px;"></i>
    </button>
@endsection

@section('content')
<div class="fm-pad fm-stack" x-data="communityScreen()" x-init="load()" x-on:fm-newpost.window="openComposer()">

    {{-- Filtros por tipo (pills, como la web) --}}
    {{-- scrollbar-width:none: los chips desbordan a propósito (scroll táctil),
         pero en escritorio la barra horizontal quedaba a la vista. --}}
    <div style="display:flex;gap:8px;overflow-x:auto;margin:0 -16px;padding:2px 16px 4px;-webkit-overflow-scrolling:touch;scrollbar-width:none;">
        <template x-for="f in filters" :key="f.key">
            <button @click="setTipo(f.key)"
                    class="fm-badge"
                    :style="tipo === f.key
                        ? 'flex:0 0 auto;background:var(--green-700);color:#fff;border:1px solid var(--green-700);padding:9px 14px;font-size:13px;cursor:pointer;'
                        : 'flex:0 0 auto;background:var(--paper-1);color:var(--text-secondary);border:1px solid var(--border-subtle);padding:9px 14px;font-size:13px;cursor:pointer;'">
                <span x-text="f.label"></span>
                <span x-show="counts[f.key] !== undefined" style="opacity:.7;font-weight:500;font-size:11px;" x-text="'(' + (counts[f.key] ?? 0) + ')'"></span>
            </button>
        </template>
    </div>

    <template x-if="loading"><div class="fm-skel" style="height:120px;"></div></template>

    {{-- Composer --}}
    <template x-if="newPost.open">
        <div id="fm-composer" class="fm-card fm-stack" style="gap:10px;">
            <div class="fm-sectitle" style="margin:0;"><span>Nueva publicación</span></div>
            <div style="display:flex;gap:6px;flex-wrap:wrap;">
                <template x-for="t in postTypes" :key="t.key">
                    <button @click="newPost.type = t.key"
                            class="fm-badge"
                            :style="newPost.type === t.key
                                ? 'background:var(--green-700);color:#fff;border:1px solid var(--green-700);padding:7px 12px;font-size:12px;cursor:pointer;'
                                : 'background:var(--paper-1);color:var(--text-secondary);border:1px solid var(--border-subtle);padding:7px 12px;font-size:12px;cursor:pointer;'"
                            x-text="t.label"></button>
                </template>
            </div>
            <input class="fm-input" x-model="newPost.title" placeholder="Título">
            <textarea class="fm-input" rows="3" x-model="newPost.content" placeholder="Comparte tu fermento, una duda o un consejo…"></textarea>
            <div style="display:flex;gap:8px;">
                <button class="fm-btn fm-btn--soft" style="flex:0 0 auto;" @click="newPost.open=false">Cancelar</button>
                <button class="fm-btn fm-btn--gold" style="flex:1;" @click="publish()" :disabled="newPost.busy || !newPost.title || !newPost.content">Publicar</button>
            </div>
        </div>
    </template>

    <div class="fm-stack" style="gap:12px;">
        <template x-for="p in posts" :key="p.id">
            <div class="fm-card fm-stack fm-card--tap" style="gap:10px;cursor:pointer;" @click="goToPost(p)">
                <div class="fm-row">
                    <a :href="p.author.id ? '/comunidad/usuario/' + p.author.id : '#'" @click.stop 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="min-width:0;">
                            <div style="font:600 14px var(--font-sans);color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;" x-text="p.author.name || 'Fermentista'"></div>
                            <div class="fm-muted" style="font-size:11.5px;" x-text="timeAgo(p.created_at)"></div>
                        </div>
                    </a>
                    <span class="fm-badge fm-badge--neutral" x-text="postType(p.post_type)"></span>
                </div>
                <div class="fm-title" style="font-size:16px;" x-text="p.title"></div>
                <div class="fm-muted"
                     :style="'font-size:14px;line-height:1.5;color:var(--text-secondary);white-space:pre-line;' + (p.expanded || p.content.length <= 220 ? '' : 'display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;')"
                     x-text="p.content"></div>
                <button x-show="p.content.length > 220" @click.stop="p.expanded = !p.expanded"
                        style="align-self:flex-start;background:none;border:none;cursor:pointer;color:var(--green-700);font:600 13px var(--font-sans);padding:0;">
                    <span x-text="p.expanded ? 'Mostrar menos' : 'Mostrar más'"></span>
                </button>
                <div class="fm-row" style="gap:18px;color:var(--text-muted);font:600 13px var(--font-sans);">
                    <button @click.stop="like(p)" :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 style="color:inherit;"><i class="fa-regular fa-comment"></i> <span x-text="p.comments_count"></span></span>
                </div>
            </div>
        </template>
        <template x-if="!loading && posts.length === 0"><div class="fm-empty">Sin publicaciones en este filtro. ¡Sé el primero!</div></template>
    </div>

    {{-- Nuevo post — misma acción que el icono ✎ de la cabecera --}}
    <button x-show="!newPost.open" @click="openComposer()" class="fm-btn fm-btn--gold fm-btn--block">
        <i class="fa-solid fa-pen-to-square"></i> Nuevo post
    </button>

    {{-- CTA al blog público (artículos relacionados) --}}
    <a href="https://fermenty.es/blog" target="_blank" rel="noopener"
       class="fm-card fm-card--tap fm-row" style="text-decoration:none;background:var(--green-050);border:none;padding:13px 16px;">
        <span class="fm-glyph" style="width:38px;height:38px;border-radius:12px;background:rgba(255,255,255,.7);color:var(--green-700);"><i class="fa-solid fa-newspaper"></i></span>
        <div style="flex:1;min-width:0;">
            <div style="font:700 14px var(--font-sans);color:var(--green-900);">Blog de Fermenty</div>
            <div style="font:400 12.5px var(--font-sans);color:var(--green-700);">Artículos, guías y novedades del mundo fermentista.</div>
        </div>
        <i class="fa-solid fa-arrow-up-right-from-square" style="color:var(--green-700);font-size:13px;"></i>
    </a>
</div>
@endsection

@push('scripts')
<script>
function communityScreen() {
    return {
        loading: true, posts: [], counts: {}, tipo: 'all',
        filters: [
            { key: 'all',      label: 'Todo' },
            { key: 'tip',      label: '💡 Tips' },
            { key: 'question', label: '❓ Preguntas' },
            { key: 'recipe',   label: '📋 Recetas' },
            { key: 'review',   label: '⭐ Valoraciones' },
        ],
        postTypes: [
            { key: 'tip',      label: 'Consejo' },
            { key: 'question', label: 'Pregunta' },
            { key: 'recipe',   label: 'Receta' },
            { key: 'review',   label: 'Valoración' },
        ],
        newPost: { open: false, busy: false, title: '', content: '', type: 'tip' },
        async load() {
            this.loading = true;
            try {
                const d = await window.FermentyAPI.community(null, this.tipo === 'all' ? null : this.tipo);
                this.posts = (d.posts || []).map(p => ({ ...p, expanded: false }));
                this.counts = d.counts || {};
            } catch (e) {}
            this.loading = false;
        },
        setTipo(t) { if (this.tipo !== t) { this.tipo = t; this.load(); } },
        goToPost(p) { location.href = '/comunidad/' + p.id; },
        openComposer() {
            if (!window.fmRequireAuth(location.pathname)) return;
            this.newPost.open = true;
            this.$nextTick(() => document.getElementById('fm-composer')?.scrollIntoView({ behavior: 'smooth', block: 'center' }));
        },
        postType(t) { return ({ tip: 'Consejo', question: 'Pregunta', recipe: 'Receta', review: 'Valoración' })[t] || t; },
        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';
        },
        async like(p) {
            if (!window.fmRequireAuth(location.pathname)) return;
            if (p.liked_by_me) return;
            try {
                const r = await window.FermentyAPI.like(p.id);
                p.likes_count = r.likes_count;
                p.liked_by_me = true;
            } catch (e) {}
        },
        async publish() {
            this.newPost.busy = true;
            try {
                const r = await window.FermentyAPI.post({ title: this.newPost.title, content: this.newPost.content, post_type: this.newPost.type });
                this.posts.unshift({ ...r.post, expanded: false });
                if (this.counts.all !== undefined) this.counts.all++;
                if (this.counts[this.newPost.type] !== undefined) this.counts[this.newPost.type]++;
                this.newPost = { open: false, busy: false, title: '', content: '', type: 'tip' };
            } catch (e) { this.newPost.busy = false; }
        },
    };
}
</script>
@endpush