@extends('layouts.mobile')

@section('title', 'Inicio')
@section('app-eyebrow', 'Tu fermentera')
@section('app-title', 'Inicio')

@php
    // Consejo del día: el mismo que el dashboard web, estable por día natural
    // (tabla hints, level general). «Del día» significa del día, no de la recarga.
    $tip = \App\Models\Hint::consejoDelDia()?->content;
@endphp

@section('content')
<div class="fm-pad fm-stack" x-data="inicioScreen()" x-init="load()">

    @include('mobile.partials.install-banner')

    {{-- Consejo del día --}}
    @if($tip)
    <div class="fm-card fm-card--dark fm-row">
        <span class="fm-glyph" style="width:42px;height:42px;border-radius:14px;background:rgba(255,255,255,.12);color:var(--lime-400);">
            <i class="fa-solid fa-wand-magic-sparkles"></i>
        </span>
        <div style="flex:1;">
            <div style="font:600 10px/1 var(--font-sans);letter-spacing:.1em;text-transform:uppercase;color:var(--lime-400);margin-bottom:6px;">Consejo del día</div>
            <div style="font:400 15px/1.45 var(--font-sans);">{{ $tip }}</div>
        </div>
    </div>
    @endif

    {{-- En marcha (sólo con cuenta) — 2 tarjetas por fila --}}
    <template x-if="authed">
        <div>
            <div class="fm-sectitle"><span>En marcha</span>
                <a href="{{ route('plan') }}" class="fm-btn--ghost" style="text-decoration:none;font:600 13px var(--font-sans);">Ver plan ›</a>
            </div>

            <template x-if="loadingBatches">
                <div style="display:grid;grid-template-columns:1fr 1fr;gap:10px;">
                    <div class="fm-skel" style="height:150px;"></div>
                    <div class="fm-skel" style="height:150px;"></div>
                </div>
            </template>

            <template x-if="!loadingBatches">
                <div style="display:grid;grid-template-columns:1fr 1fr;gap:10px;">
                    <template x-for="b in batches" :key="b.id">
                        <a :href="'/lotes/' + b.id" class="fm-card fm-card--tap" style="display:flex;flex-direction:column;align-items:center;gap:9px;text-decoration:none;text-align:center;padding:14px 10px;">
                            <span class="fm-ring" :style="ringStyle(b)"><span style="font-size:12px;" x-text="(b.progress || 0) + '%'"></span></span>
                            <div style="min-width:0;width:100%;">
                                <div class="fm-title" style="font-size:14px;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;" x-text="title(b)"></div>
                                <div class="fm-muted fm-data" style="font-size:11.5px;margin-top:5px;" x-text="'Día ' + b.current_day + (b.total_days ? '/' + b.total_days : '') + ' · ' + (b.progress || 0) + '%'"></div>
                            </div>
                        </a>
                    </template>

                    <a href="{{ route('batch.create') }}" style="min-height:130px;border-radius:var(--radius-lg);border:1.5px dashed var(--border-default);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--green-700);text-decoration:none;padding:14px 10px;">
                        <i class="fa-solid fa-plus" style="font-size:22px;"></i><span style="font:600 13px var(--font-sans);">Nuevo</span>
                    </a>
                </div>
            </template>

            <template x-if="!loadingBatches && batches.length === 0">
                <div class="fm-muted" style="font-size:13px;margin-top:8px;">Aún no tienes lotes en marcha.</div>
            </template>
        </div>
    </template>

    {{-- Invitación (sin cuenta) --}}
    <template x-if="!authed">
        <div class="fm-card fm-stack" style="gap:12px;">
            <div class="fm-h2">Empieza a fermentar</div>
            <div class="fm-muted" style="font-size:14px;line-height:1.5;">Explora recetas, sigue tus lotes paso a paso y recibe avisos cuando toque. Crea una cuenta gratis para empezar tu primer lote.</div>
            <button class="fm-btn fm-btn--gold fm-btn--block" onclick="fmRequireAuth('{{ route('batch.create') }}', 'register')">Crear cuenta y empezar</button>
        </div>
    </template>

    {{-- Recetas para empezar — mismas tarjetas que /fermentos --}}
    <div>
        <div class="fm-sectitle"><span>Recetas para empezar</span>
            <a href="{{ route('catalogue') }}" class="fm-btn--ghost" style="text-decoration:none;font:600 13px var(--font-sans);">Ver todas ›</a>
        </div>

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

        <div class="fm-cards">
            <template x-for="f in featured" :key="f.slug">
                @include('mobile.partials._ferment-card')
            </template>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
function inicioScreen() {
    return {
        authed: window.fmAuthed(),
        loadingBatches: true, loadingFerments: true,
        batches: [], featured: [],
        async load() {
            this.personalizeTitle();
            this.loadFerments();
            if (this.authed) this.loadBatches();
        },
        // Título personalizado: "Hola, {nombre}" en vez de "Inicio". Usamos sólo el
        // primer nombre y, si es demasiado largo para el header, caemos a "Hola" a
        // secas para no romper la línea (el h1 ya recorta con ellipsis por si acaso).
        personalizeTitle() {
            const h1 = document.getElementById('fm-app-title');
            if (!h1 || !this.authed) return;
            const name = ((window.fmUser() || {}).name || '').trim();
            const first = name.split(/\s+/)[0] || '';
            h1.textContent = (first && first.length <= 12) ? ('Hola, ' + first) : 'Hola';
        },
        async loadBatches() {
            try {
                const d = await window.FermentyAPI.dashboard();
                this.batches = d.active_batches?.data || d.active_batches || [];
            } catch (e) { this.batches = []; }
            this.loadingBatches = false;
        },
        async loadFerments() {
            try {
                const d = await window.FermentyAPI.catalogue();
                this.featured = (d.ferments || []).filter(f => f.plan_required !== 'premium' && f.recipe).slice(0, 3);
            } catch (e) { this.featured = []; }
            this.loadingFerments = false;
        },
        title(b) { return (b.name || '').length > 63 ? b.name.slice(0, 62) + '…' : b.name; },
        difficulty(d) { return ({ easy: 'Fácil', medium: 'Medio', hard: 'Avanzado' })[d] || d || 'Fácil'; },
        ringStyle(b) {
            const color = b.ferment_type?.category?.color || 'var(--gold-500)';
            return `--sz:56px;--thick:6px;--pct:${b.progress || 0};--tone:${color};`;
        },
    };
}
</script>
@endpush