@extends('layouts.mobile')

@section('title', 'Evaluación')
@section('back', route('batch.summary', $batchId))
@section('app-eyebrow', 'Lote completado')
@section('app-title', '¿Qué tal salió?')

{{-- Se abre automáticamente al completar el último paso de un lote (ver
     asistente.blade.php); también accesible desde el resumen si se saltó. --}}
@section('content')
<div class="fm-pad fm-stack" x-data="loteEvaluar('{{ $batchId }}')" x-init="load()">

    <template x-if="loading"><div class="fm-skel" style="height:160px;"></div></template>
    <template x-if="error"><div class="fm-empty">No pudimos cargar el lote. <a href="{{ route('catalogue') }}#lotes" class="fm-btn--ghost">Volver</a></div></template>

    <template x-if="b">
        <div class="fm-stack">
            <div style="text-align:center;">
                <div class="fm-title" style="font-size:20px;" x-text="b.name"></div>
                <div class="fm-muted" style="font-size:13px;margin-top:4px;" x-text="b.ferment_type ? b.ferment_type.name : ''"></div>
            </div>

            {{-- Valoración --}}
            <div class="fm-card" style="text-align:center;">
                <div class="fm-eyebrow" style="margin-bottom:10px;">¿Cómo puntúas el resultado?</div>
                <div style="font-size:32px;display:flex;gap:6px;justify-content:center;">
                    <template x-for="n in 5" :key="n">
                        <button type="button" @click="rating = n" style="background:none;border:none;cursor:pointer;padding:2px;color:var(--gold-600);" :style="n > rating ? { opacity: .3 } : {}">
                            <i class="fa-solid fa-star"></i>
                        </button>
                    </template>
                </div>
            </div>

            {{-- Comentario --}}
            <div>
                <label class="fm-label">Notas (opcional)</label>
                <textarea class="fm-input" rows="3" placeholder="¿Cómo quedó? ¿Qué cambiarías la próxima vez?" x-model="comment" maxlength="1000"></textarea>
            </div>

            {{-- Perfil de sabor --}}
            <div class="fm-card">
                <div class="fm-sectitle" style="margin-bottom:10px;"><span>Perfil de sabor (opcional)</span></div>
                <div class="fm-stack" style="gap:10px;">
                    <template x-for="row in flavorRows" :key="row.key">
                        <div class="fm-row" style="justify-content:space-between;">
                            <span class="fm-muted" style="font-size:13.5px;" x-text="row.label"></span>
                            <div style="display:flex;gap:2px;">
                                <template x-for="n in 5" :key="n">
                                    <button type="button" @click="flavor[row.key] = (flavor[row.key] === n ? 0 : n)" aria-label="Nivel" style="background:none;border:none;cursor:pointer;padding:8px;display:flex;align-items:center;justify-content:center;">
                                        <span style="display:block;width:15px;height:15px;border-radius:50%;" :style="{ background: n <= flavor[row.key] ? 'var(--green-600)' : 'var(--paper-3)' }"></span>
                                    </button>
                                </template>
                            </div>
                        </div>
                    </template>
                </div>
            </div>

            {{-- Foto (Premium) --}}
            <div class="fm-card fm-card--tap" @click="pickPhoto()">
                <input type="file" x-ref="photoInput" accept="image/jpeg,image/png,image/webp" style="display:none;" @change="onPhoto($event)">
                <template x-if="!photoPreview">
                    <div class="fm-row" style="gap:12px;">
                        <span class="fm-glyph" style="width:44px;height:44px;border-radius:14px;background:var(--gold-100);color:var(--gold-700);"><i class="fa-solid fa-camera"></i></span>
                        <div style="flex:1;min-width:0;">
                            <div class="fm-title" style="font-size:15px;">Añadir una foto</div>
                            <div class="fm-muted" style="font-size:12.5px;margin-top:2px;" x-text="user?.is_premium ? 'Del resultado final.' : 'Función Pro — toca para más info.'"></div>
                        </div>
                    </div>
                </template>
                <template x-if="photoPreview">
                    <div style="width:100%;aspect-ratio:4/3;border-radius:var(--radius-md);background-size:cover;background-position:center;" :style="{ backgroundImage: 'url(' + JSON.stringify(photoPreview) + ')' }"></div>
                </template>
            </div>

            <p x-show="saveError" x-cloak style="margin:0;color:var(--rust-500);font:500 13px/1.4 var(--font-sans);" x-text="saveError"></p>

            <button class="fm-btn fm-btn--gold fm-btn--block" @click="save()" :disabled="busy">
                <span x-text="busy ? 'Guardando…' : 'Guardar evaluación'"></span>
            </button>
            <a :href="'/lotes/' + id + '/resumen'" class="fm-btn--ghost" style="text-align:center;display:block;">Ahora no</a>
        </div>
    </template>
</div>
@endsection

@push('scripts')
<script>
function loteEvaluar(id) {
    return {
        id, loading: true, error: false, busy: false, saveError: '',
        b: null, user: window.fmUser(),
        rating: 0, comment: '',
        flavor: { sourness: 0, sweetness: 0, aroma: 0, texture: 0, bitterness: 0, fizziness: 0 },
        flavorRows: [
            { key: 'sourness', label: 'Acidez' }, { key: 'sweetness', label: 'Dulzor' },
            { key: 'aroma', label: 'Aroma' }, { key: 'texture', label: 'Textura' },
            { key: 'bitterness', label: 'Amargor' }, { key: 'fizziness', label: 'Efervescencia' },
        ],
        photoFile: null, photoPreview: null,
        async load() {
            if (!window.fmRequireAuth(location.pathname)) { this.loading = false; return; }
            try {
                this.b = (await window.FermentyAPI.batch(this.id)).data;
                // Una tanda solo se evalúa una vez (la API lo impide). Si ya tiene
                // evaluación, no mostramos un formulario que acabaría en 422: al
                // resumen, donde se ve la evaluación existente.
                if (this.b && this.b.flavor_result) { window.location = '/lotes/' + this.id + '/resumen'; return; }
            }
            catch (e) { this.error = true; }
            this.loading = false;
        },
        pickPhoto() {
            if (!this.user?.is_premium) {
                window.dispatchEvent(new CustomEvent('fm-premium', { detail: { message: 'Añadir una foto a tu evaluación es una función Pro.' } }));
                return;
            }
            this.$refs.photoInput.click();
        },
        onPhoto(e) {
            const f = e.target.files[0];
            if (!f) return;
            this.photoFile = f;
            this.photoPreview = URL.createObjectURL(f);
        },
        async save() {
            this.busy = true; this.saveError = '';
            const fd = new FormData();
            if (this.rating) fd.append('rating', this.rating);
            if (this.comment.trim()) fd.append('overall_comment', this.comment.trim());
            Object.entries(this.flavor).forEach(([k, v]) => { if (v) fd.append(k, v); });
            if (this.photoFile) fd.append('photo', this.photoFile);
            try {
                await window.FermentyAPI.reviewBatch(this.id, fd);
                window.location = '/lotes/' + this.id + '/resumen';
            } catch (e) {
                this.saveError = (e.data && e.data.message) || 'No se pudo guardar la evaluación.';
            }
            this.busy = false;
        },
    };
}
</script>
@endpush