@extends('layouts.mobile')

@section('title', 'Calculadora de salmuera')
@section('back', route('tools'))
@section('app-eyebrow', 'Laboratorio')
@section('app-title', 'Calculadora de salmuera')

{{-- Espejo móvil de laboratorio/salmuera: mismos datos y fórmula que
     BrineCalculator (base por fermento × factor temperatura × factor gusto). --}}
@section('content')
<div class="fm-pad fm-stack" x-data="brineCalc()">

    <p class="fm-muted" style="font-size:13.5px;line-height:1.5;margin:0;">La sal se ajusta sola a lo que fermentas, a la temperatura y al punto de textura que prefieres.</p>

    {{-- 1 · Fermento --}}
    <div>
        <div class="fm-sectitle" style="margin-bottom:8px;"><span>1 · ¿Qué vas a fermentar?</span></div>
        <div style="display:flex;flex-wrap:wrap;gap:8px;">
            <template x-for="f in ferments" :key="f.slug">
                <button @click="ferment = f.slug; pctEdited = false"
                        class="fm-badge"
                        :style="ferment === f.slug
                            ? 'background:var(--green-700);color:#fff;padding:8px 13px;font-size:13px;border:1px solid var(--green-700);cursor:pointer;'
                            : 'background:var(--paper-1);color:var(--text-primary);padding:8px 13px;font-size:13px;border:1px solid var(--border-subtle);cursor:pointer;'">
                    <span x-text="f.name"></span>&nbsp;<span style="opacity:.7;font-weight:500;" x-text="f.pct.toLocaleString('es-ES') + '%'"></span>
                </button>
            </template>
        </div>
    </div>

    {{-- 2 · Cantidad y entorno --}}
    <div>
        <div class="fm-sectitle" style="margin-bottom:8px;"><span>2 · Cantidad y entorno</span></div>
        <div style="display:flex;gap:10px;">
            <div style="flex:1;"><label class="fm-label" x-text="waterLabel"></label><input class="fm-input fm-data" type="number" step="any" inputmode="decimal" x-model="water" placeholder="p. ej. 1000"></div>
            <div style="flex:1;"><label class="fm-label">Temp. °C <span style="font-weight:500;color:var(--text-muted);">(opc.)</span></label><input class="fm-input fm-data" type="number" step="any" inputmode="decimal" x-model="temp" @input="pctEdited = false" placeholder="ej. 20"></div>
        </div>
    </div>

    {{-- 3 · Textura --}}
    <div>
        <div class="fm-sectitle" style="margin-bottom:8px;"><span>3 · Textura que prefieres</span></div>
        <div class="fm-seg">
            <button style="line-height:1.3;" :class="gusto === 'crujiente' && 'on'" @click="gusto = 'crujiente'; pctEdited = false">Crujiente<br><small style="font-weight:500;opacity:.7;">+ sal</small></button>
            <button style="line-height:1.3;" :class="gusto === 'normal' && 'on'" @click="gusto = 'normal'; pctEdited = false">Normal<br><small style="font-weight:500;opacity:.7;">base</small></button>
            <button style="line-height:1.3;" :class="gusto === 'suave' && 'on'" @click="gusto = 'suave'; pctEdited = false">Suave<br><small style="font-weight:500;opacity:.7;">− sal</small></button>
        </div>
    </div>

    {{-- Concentración --}}
    <div>
        <div class="fm-sectitle" style="margin-bottom:8px;"><span>Concentración sugerida (%)</span></div>
        <input class="fm-input fm-data" type="number" step="0.1" inputmode="decimal" :value="pctShown" @input="pctEdited = true; pctManual = $event.target.value">
        <p class="fm-muted" style="font-size:12px;margin:6px 0 0;">Se calcula sola con tus elecciones. Puedes afinarla a mano si lo necesitas.</p>
    </div>

    {{-- Resultado --}}
    <div class="fm-card" style="background:var(--green-050);border:none;text-align:center;">
        <div class="fm-eyebrow" style="color:var(--green-700);margin-bottom:0;">Sal necesaria</div>
        <div class="fm-data" style="font-size:40px;font-weight:800;color:var(--green-700);margin-top:8px;"><span x-text="saltShown"></span> <span style="font-size:16px;font-weight:700;opacity:.7;">g</span></div>
        <div style="font-size:12.5px;color:var(--green-700);opacity:.85;margin-top:6px;">al <span x-text="pctLabel"></span>% de salinidad</div>
        <div style="font-size:13.5px;color:var(--green-700);font-weight:700;margin-top:10px;" x-show="saltSpoons" x-text="saltSpoons"></div>
    </div>

    <p class="fm-muted" style="font-size:11.5px;line-height:1.5;margin:0;">
        Salinidad orientativa: chucrut, kimchi y verduras variadas ~2–2,5 % · encurtidos 3–5 % · aceitunas 5–8 %.
        <span x-text="methodHint"></span>
        Con más calor conviene algo más de sal; en frío, algo menos.
        Las cucharadas son orientativas, calculadas con sal fina de mesa (18 g ≈ 1 cucharada) — la sal gruesa pesa menos por cucharada.
    </p>
</div>
@endsection

@push('scripts')
<script>
function brineCalc() {
    return {
        // Datos de BrineCalculator::ferments() y GUSTO_FACTORS.
        ferments: [
            { slug: 'chucrut',    name: 'Chucrut',           pct: 2.0, method: 'dry' },
            { slug: 'kimchi',     name: 'Kimchi',            pct: 2.5, method: 'dry' },
            { slug: 'verduras',   name: 'Verduras variadas', pct: 2.5, method: 'dry' },
            { slug: 'encurtidos', name: 'Encurtidos',        pct: 3.5, method: 'brine' },
            { slug: 'aceitunas',  name: 'Aceitunas',         pct: 6.0, method: 'brine' },
        ],
        GUSTO: { crujiente: 1.10, normal: 1.00, suave: 0.90 },
        REF_TEMP: 20, SLOPE: 0.01, TEMP_MIN: 4, TEMP_MAX: 35,
        // water vacío a propósito: sin cantidad se enseña «—», no un gramaje
        // inventado sobre un 1000 que nadie ha escrito.
        ferment: 'chucrut', gusto: 'normal', water: '', temp: '',
        pctEdited: false, pctManual: '',
        // Mirror de BrineCalculator::suggestSalinity().
        get suggested() {
            const base = (this.ferments.find(f => f.slug === this.ferment) || {}).pct ?? 2.5;
            let tf = 1;
            const t = parseFloat(this.temp);
            if (!isNaN(t)) {
                const c = Math.max(this.TEMP_MIN, Math.min(this.TEMP_MAX, t));
                tf = 1 + (c - this.REF_TEMP) * this.SLOPE;
            }
            return Math.round(base * tf * (this.GUSTO[this.gusto] || 1) * 10) / 10;
        },
        get pct() {
            if (this.pctEdited) { const p = parseFloat(this.pctManual); return isNaN(p) ? null : p; }
            return this.suggested;
        },
        get isDry() { return (this.ferments.find(f => f.slug === this.ferment) || {}).method === 'dry'; },
        get waterLabel() { return this.isDry ? 'Peso de la verdura (g)' : 'Agua (ml o g)'; },
        get methodHint() {
            return this.isDry
                ? 'Chucrut, kimchi y verduras variadas se salan en seco: masajeas la verdura con sal y ella suelta su propio jugo — el % se calcula sobre el peso de la verdura, sin añadir agua.'
                : 'Este fermento va en salmuera: el % se calcula sobre el peso del agua (1 ml ≈ 1 g).';
        },
        get pctShown() { return this.pctEdited ? this.pctManual : this.suggested; },
        get pctLabel() { return this.pct === null ? '—' : this.pct.toLocaleString('es-ES', { maximumFractionDigits: 1 }); },
        get saltGramsNum() {
            const w = parseFloat(this.water), p = this.pct;
            if (isNaN(w) || p === null || w < 0 || p < 0) return null;
            return Math.round(w * p / 100 * 10) / 10;
        },
        get saltShown() {
            return this.saltGramsNum === null ? '—' : this.saltGramsNum.toLocaleString('es-ES', { minimumFractionDigits: 1, maximumFractionDigits: 1 });
        },
        // Equivalencia orientativa en cucharas de cocina (sal fina): 1 cucharada ≈ 18 g, 1 cucharadita ≈ 6 g.
        // Devuelve { label, value } — el plural se decide sobre el valor ya redondeado, no el crudo.
        formatFraction(n) {
            let whole = Math.floor(n);
            let frac = Math.round((n - whole) * 4) / 4;
            if (frac === 1) { whole += 1; frac = 0; }
            const glyph = { 0: '', 0.25: '¼', 0.5: '½', 0.75: '¾' }[frac];
            return { label: whole > 0 ? whole + glyph : (glyph || '0'), value: whole + frac };
        },
        get saltSpoons() {
            const g = this.saltGramsNum;
            if (g === null || g <= 0) return null;
            const tbsp = g / 18;
            if (tbsp >= 0.4) { const f = this.formatFraction(tbsp); return '≈ ' + f.label + (f.value === 1 ? ' cucharada' : ' cucharadas') + ' de sal'; }
            const f = this.formatFraction(g / 6);
            return '≈ ' + f.label + (f.value === 1 ? ' cucharadita' : ' cucharaditas') + ' de sal';
        },
    };
}
</script>
@endpush