@extends('layouts.mobile')

{{-- Una palabra por concepto: la pestaña dice «Plan», la pantalla también. --}}
@section('title', 'Plan')
@section('app-eyebrow', 'Agenda y avisos')
@section('app-title', 'Plan')

{{-- Espejo del /planificador web: avisos + cronología agrupada por día
     (marcador de fecha, Hoy/Mañana, tipo de actividad) + mis lotes. --}}
@section('content')
<div class="fm-pad fm-stack" x-data="planScreen()" x-init="load()">

    {{-- Guest teaser --}}
    <template x-if="!authed">
        <div class="fm-card fm-stack" style="gap:12px;">
            <span class="fm-glyph" style="width:46px;height:46px;border-radius:14px;"><i class="fa-solid fa-calendar-day"></i></span>
            <div class="fm-h2">Tu cronología de fermentos</div>
            <div class="fm-muted" style="font-size:14px;line-height:1.5;">Aquí verás avisos y las fechas con actividad o revisión pendiente en tus fermentos activos. Crea una cuenta para empezar.</div>
            <button class="fm-btn fm-btn--gold fm-btn--block" onclick="fmRequireAuth('{{ route('plan') }}', 'register')">Crear cuenta</button>
        </div>
    </template>

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

            {{-- Avisos --}}
            <template x-if="!loading && alerts.length">
                <div class="fm-stack" style="gap:10px;">
                    <template x-for="n in alerts" :key="n.id">
                        <div class="fm-card fm-row" style="background:var(--gold-100);border:none;border-left:3px solid var(--gold-500);">
                            {{-- El aviso enlaza a su fermento (si lo tiene): tocar el cuerpo abre
                                 el lote; el botón "Hecho" queda aparte para marcar como leído. --}}
                            <a :href="n.batch_id ? ('/lotes/' + n.batch_id) : null"
                               :class="n.batch_id ? 'fm-row fm-card--tap' : 'fm-row'"
                               style="flex:1;min-width:0;gap:12px;text-decoration:none;">
                                <span class="fm-glyph" style="width:38px;height:38px;border-radius:12px;background:rgba(255,255,255,.6);color:var(--gold-700);flex-shrink:0;"><i class="fa-solid fa-bell"></i></span>
                                <span style="flex:1;min-width:0;">
                                    <span style="display:block;font:700 14px var(--font-sans);color:var(--green-900);" x-text="n.title"></span>
                                    {{-- El nombre del lote identifica el aviso: con dos kefires a la
                                         vez, «listo para colar» a secas no dice a cuál se refiere. --}}
                                    <span x-show="n.batch && n.batch.name" style="display:block;font:600 12px var(--font-sans);color:var(--green-700);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;" x-text="n.batch && n.batch.name"></span>
                                    <span style="display:block;font:400 12.5px var(--font-sans);color:var(--gold-700);margin-top:2px;" x-text="n.message"></span>
                                </span>
                                <i x-show="n.batch_id" class="fa-solid fa-chevron-right" style="font-size:12px;color:var(--gold-700);flex-shrink:0;"></i>
                            </a>
                            <button class="fm-btn fm-btn--gold" style="padding:8px 14px;font-size:13px;flex-shrink:0;" @click="markRead(n)">Hecho</button>
                        </div>
                    </template>
                </div>
            </template>

            {{-- Cronología agrupada por día (como el planificador web) --}}
            <template x-if="!loading && days.length">
                <div>
                    <div class="fm-sectitle"><span>Cronología</span></div>
                    <template x-for="d in days" :key="d.date">
                        <div style="display:flex;gap:12px;">
                            {{-- Marcador de fecha --}}
                            <div style="width:44px;flex-shrink:0;text-align:center;">
                                <div class="fm-data" style="font-weight:700;font-size:20px;line-height:1;" :style="{ color: d.today ? 'var(--gold-700)' : (d.overdue ? 'var(--rust-500)' : 'var(--text-primary)') }" x-text="d.dayNum"></div>
                                <div class="fm-muted" style="font-size:10px;text-transform:uppercase;letter-spacing:.05em;" x-text="d.month"></div>
                                <div style="width:2px;min-height:14px;height:calc(100% - 40px);background:var(--paper-3);margin:4px auto 0;"></div>
                            </div>

                            {{-- Items del día --}}
                            <div style="flex:1;min-width:0;padding-bottom:14px;">
                                <div style="font:700 12.5px var(--font-sans);margin-bottom:6px;display:flex;align-items:center;gap:8px;"
                                     :style="{ color: d.today ? 'var(--gold-700)' : (d.overdue ? 'var(--rust-500)' : 'var(--text-muted)') }">
                                    <span x-text="d.label"></span>
                                    <span x-show="d.overdue" class="fm-pill fm-pill--failed" style="font-size:10px;padding:3px 8px;">atrasado</span>
                                </div>
                                <template x-for="(a, i) in d.items" :key="i">
                                    <a :href="'/lotes/' + a.batch.id" class="fm-listrow fm-card--tap" style="margin-bottom:7px;text-decoration:none;">
                                        <span class="fm-glyph" style="width:32px;height:32px;border-radius:10px;font-size:13px;" :style="kindStyle(a.kind)"><i class="fa-solid" :class="kindIcon(a.kind)"></i></span>
                                        <span style="flex:1;min-width:0;">
                                            <span style="display:block;font:600 13.5px var(--font-sans);color:var(--text-primary);" x-text="a.label"></span>
                                            <span class="fm-muted" style="display:block;font-size:12px;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;" x-text="a.batch.name"></span>
                                        </span>
                                        <span class="fm-badge fm-badge--neutral" style="flex-shrink:0;font-size:10px;" x-text="kindLabel(a.kind)"></span>
                                    </a>
                                </template>
                            </div>
                        </div>
                    </template>
                </div>
            </template>

            <template x-if="!loading && !days.length && batches.length">
                <div class="fm-card" style="text-align:center;">
                    <div class="fm-h2" style="margin-bottom:6px;">Todo al día</div>
                    <div class="fm-muted" style="font-size:13.5px;">No hay actividades programadas en los próximos días.</div>
                </div>
            </template>

            {{-- Mis lotes --}}
            <div>
                <div class="fm-sectitle"><span>Mis lotes</span><span class="fm-badge fm-badge--green" x-text="batches.length"></span></div>
                <div class="fm-stack" style="gap:10px;">
                    <template x-for="b in batches" :key="b.id">
                        <a :href="'/lotes/' + b.id" class="fm-card fm-row fm-card--tap" style="text-decoration:none;">
                            <span class="fm-ring" :style="ringStyle(b)"><span x-text="b.current_day + 'd'"></span></span>
                            <div style="flex:1;min-width:0;">
                                <div class="fm-title" style="font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;" x-text="b.name"></div>
                                <div class="fm-muted" style="font-size:12.5px;margin-top:3px;" x-text="'Día ' + b.current_day + ' · ' + (b.ferment_type ? b.ferment_type.name : '')"></div>
                            </div>
                            <span class="fm-pill" :class="'fm-pill--' + b.status" x-text="statusLabel(b.status)"></span>
                        </a>
                    </template>
                    <template x-if="!loading && batches.length === 0"><div class="fm-empty">Sin fermentos activos.</div></template>
                </div>
            </div>

            <a href="{{ route('batch.create') }}" class="fm-btn fm-btn--soft fm-btn--block"><i class="fa-solid fa-plus"></i> Nuevo lote</a>
        </div>
    </template>
</div>
@endsection

@push('scripts')
<script>
function planScreen() {
    return {
        authed: window.fmAuthed(), loading: true,
        alerts: [], agenda: [], batches: [],
        async load() {
            if (!this.authed) return;
            try {
                const d = await window.FermentyAPI.tracker();
                this.batches = d.active_batches?.data || d.active_batches || [];
                this.agenda = d.agenda || [];
                this.alerts = (d.notifications || []).filter(n => !n.read);
            } catch (e) {}
            this.loading = false;
        },
        async markRead(n) {
            try {
                await window.FermentyAPI.markRead(n.id);
                this.alerts = this.alerts.filter(x => x.id !== n.id);
                sessionStorage.removeItem('fm_unread'); // refresca el badge de la campana
            } catch (e) {}
        },
        // Agrupa la agenda por fecha, como el planificador web (Hoy/Mañana/día de la semana).
        get days() {
            const byDate = {};
            for (const a of this.agenda) (byDate[a.date] = byDate[a.date] || []).push(a);
            const todayStr = new Date().toISOString().slice(0, 10);
            return Object.keys(byDate).sort().map(date => {
                const d = new Date(date + 'T12:00:00');
                const diff = Math.round((d - new Date(todayStr + 'T12:00:00')) / 86400000);
                const label = diff === 0 ? 'Hoy' : diff === 1 ? 'Mañana'
                    : d.toLocaleDateString('es-ES', { weekday: 'long', day: 'numeric', month: 'long' }).replace(/^./, c => c.toUpperCase());
                return {
                    date, items: byDate[date],
                    dayNum: d.getDate(),
                    month: d.toLocaleDateString('es-ES', { month: 'short' }).replace('.', ''),
                    today: diff === 0,
                    overdue: diff < 0,
                    label,
                };
            });
        },
        kindLabel(k) { return ({ deadline: 'Límite', window: 'Nuevo paso', finish: 'Fin estimado', reminder: 'Recordatorio' })[k] || k; },
        kindIcon(k)  { return ({ deadline: 'fa-clock', window: 'fa-forward-step', finish: 'fa-flag-checkered', reminder: 'fa-bell' })[k] || 'fa-circle-dot'; },
        // Devuelve OBJETO: la forma string de :style reemplazaría el style estático del glyph.
        kindStyle(k) {
            return ({
                deadline: { background: 'var(--rust-100)',  color: 'var(--rust-500)' },
                window:   { background: 'var(--green-050)', color: 'var(--green-700)' },
                finish:   { background: 'var(--teal-100)',  color: 'var(--teal-500)' },
                reminder: { background: 'var(--gold-100)',  color: 'var(--gold-700)' },
            })[k] || {};
        },
        ringStyle(b) {
            const color = b.ferment_type?.category?.color || 'var(--gold-500)';
            return `--sz:52px;--thick:5px;--pct:${b.progress || 0};--tone:${color};`;
        },
        statusLabel(s) { return ({ draft: 'Borrador', active: 'Activo', ready: 'Listo', paused: 'Pausa', completed: 'Hecho', discarded: 'Descartado' })[s] || s; },
    };
}
</script>
@endpush