@extends('layouts.app')

@section('title', 'Calculadora de salmuera')

@section('content')

<style>
    .brn-wrap { max-width:560px; }
    .brn-step-k { font:700 11px/1 var(--font-sans); letter-spacing:.06em; text-transform:uppercase; color:var(--text-muted,#8a7a66); margin:18px 0 9px; }
    .brn-step-k:first-child { margin-top:0; }

    .brn-ferments { display:flex; flex-wrap:wrap; gap:8px; }
    .brn-ferment { cursor:pointer; padding:7px 13px; border:1px solid var(--border-subtle,#ece2d4); border-radius:999px;
        background:var(--paper-1,#faf6ef); font:600 .82rem var(--font-sans); color:var(--text-primary,#1b1b1b); }
    .brn-ferment:hover { border-color:var(--green-600,#3a7a22); }
    .brn-ferment.is-active { background:var(--green-700,#2f6d1c); border-color:var(--green-700,#2f6d1c); color:#fff; }
    .brn-ferment small { color:var(--text-muted,#8a7a66); font-weight:500; }
    .brn-ferment.is-active small { color:rgba(255,255,255,.8); }

    .brn-fields { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
    .brn-label-opt { color:var(--text-muted,#8a7a66); font-weight:500; }

    .brn-seg { display:inline-flex; gap:4px; padding:4px; background:var(--paper-2,#f1ece3); border-radius:12px; }
    .brn-seg button { cursor:pointer; border:none; background:transparent; padding:8px 16px; border-radius:9px;
        font:600 .85rem var(--font-sans); color:var(--text-muted,#8a7a66); display:flex; flex-direction:column; align-items:center; line-height:1.15; }
    .brn-seg button small { font-weight:500; font-size:.66rem; opacity:.75; margin-top:2px; }
    .brn-seg button.is-active { background:#fff; color:var(--text-primary,#1b1b1b); box-shadow:var(--shadow-xs,0 1px 2px rgba(0,0,0,.06)); }

    .brn-out { margin-top:20px; text-align:center; background:var(--green-050,#eaf6e4); border:none; }
    .brn-out__k { font:600 11px/1 var(--font-sans); letter-spacing:.08em; text-transform:uppercase; color:var(--green-700,#2f6d1c); }
    .brn-out__v { font:800 2.8rem/1 var(--font-data,var(--font-sans)); color:var(--green-700,#2f6d1c); margin-top:8px; }
    .brn-out__v small { font-size:1.1rem; font-weight:700; opacity:.7; }
    .brn-out__pct { font-size:.78rem; color:var(--green-700,#2f6d1c); opacity:.85; margin-top:8px; }
    .brn-hint { font-size:.78rem; color:var(--text-muted,#8a7a66); margin-top:12px; }

    @media (max-width:480px) {
        .brn-fields { grid-template-columns:1fr; gap:12px; }
        .brn-seg { display:flex; width:100%; }
        .brn-seg button { flex:1; }
        .brn-out__v { font-size:2.3rem; }
    }
</style>

@php
    use App\Services\Calculators\BrineCalculator;

    $ferments   = BrineCalculator::ferments();
    $selFerment = old('ferment', $input['ferment'] ?? 'chucrut');
    $gusto      = old('gusto',   $input['gusto']   ?? 'normal');
    $temp       = old('temp',    $input['temp']    ?? '');
    $water      = old('water',   $input['water']   ?? 1000);

    $basePct   = BrineCalculator::basePctFor($selFerment) ?? 2.5;
    $method    = BrineCalculator::methodFor($selFerment);
    $isDry     = $method === 'dry';
    $tempVal   = ($temp === '' || $temp === null) ? null : (float) $temp;
    $suggested = BrineCalculator::suggestSalinity($basePct, $tempVal, $gusto);

    $pct  = old('pct', $input['pct'] ?? $suggested);
    $salt = $result?->saltGrams ?? round(((float) $water) * ((float) $pct) / 100, 1);

    // Equivalencia orientativa en cucharas de cocina (sal fina): 1 cucharada ≈ 18 g, 1 cucharadita ≈ 6 g.
    // Devuelve [label, valor] — el plural se decide sobre el valor ya redondeado, no el crudo.
    $formatFraction = function (float $n): array {
        $whole = floor($n);
        $frac  = round(($n - $whole) * 4) / 4;
        if ($frac >= 1) { $whole++; $frac = 0; }
        $glyph = ['0' => '', '0.25' => '¼', '0.5' => '½', '0.75' => '¾'][(string) $frac] ?? '';
        return [$whole > 0 ? $whole . $glyph : ($glyph ?: '0'), $whole + $frac];
    };
    $spoonsText = function (float $g) use ($formatFraction): string {
        if ($g <= 0) { return ''; }
        $tbsp = $g / 18;
        if ($tbsp >= 0.4) { [$label, $value] = $formatFraction($tbsp); return '≈ ' . $label . ($value === 1.0 ? ' cucharada' : ' cucharadas') . ' de sal'; }
        [$label, $value] = $formatFraction($g / 6);
        return '≈ ' . $label . ($value === 1.0 ? ' cucharadita' : ' cucharaditas') . ' de sal';
    };
@endphp

<div class="mb-2">
    <a href="{{ route('laboratorio.index') }}" class="btn-back" onclick="event.preventDefault(); history.back();">← Volver</a>
</div>

<div class="brn-wrap">
    <div class="page-title">Calculadora de salmuera</div>
    <p class="page-subtitle">La sal se ajusta sola a lo que fermentas, a la temperatura y al punto de textura que prefieres.</p>

    <form method="POST" action="{{ route('tools.salmuera.calculate') }}" class="fermenty-card" id="brnForm">
        @csrf
        <input type="hidden" name="ferment" id="ferment" value="{{ $selFerment }}">
        <input type="hidden" name="gusto"   id="gusto"   value="{{ $gusto }}">

        <div class="brn-step-k">1 · ¿Qué vas a fermentar?</div>
        <div class="brn-ferments" role="group" aria-label="Fermento">
            @foreach($ferments as $f)
                <button type="button"
                        class="brn-ferment {{ $selFerment === $f['slug'] ? 'is-active' : '' }}"
                        data-ferment="{{ $f['slug'] }}" data-base="{{ $f['pct'] }}">
                    {{ $f['name'] }} <small>{{ rtrim(rtrim(number_format($f['pct'], 1, ',', ''), '0'), ',') }}%</small>
                </button>
            @endforeach
        </div>

        <div class="brn-step-k">2 · Cantidad y entorno</div>
        <div class="brn-fields">
            <div>
                <label class="form-label" for="water" id="water-label">{{ $isDry ? 'Peso de la verdura (g)' : 'Agua (ml o g)' }}</label>
                <input type="number" step="any" inputmode="decimal" name="water" id="water"
                       class="form-control @error('water') is-invalid @enderror"
                       value="{{ $water }}" required>
            </div>
            <div>
                <label class="form-label" for="temp">Temperatura °C <span class="brn-label-opt">(opcional)</span></label>
                <input type="number" step="any" inputmode="decimal" name="temp" id="temp"
                       class="form-control @error('temp') is-invalid @enderror"
                       value="{{ $temp }}" placeholder="ej. 20">
            </div>
        </div>

        <div class="brn-step-k">3 · Textura que prefieres</div>
        <div class="brn-seg" role="group" aria-label="Gusto">
            <button type="button" data-gusto="crujiente" class="{{ $gusto === 'crujiente' ? 'is-active' : '' }}">
                Crujiente <small>+ sal</small>
            </button>
            <button type="button" data-gusto="normal" class="{{ $gusto === 'normal' ? 'is-active' : '' }}">
                Normal <small>base</small>
            </button>
            <button type="button" data-gusto="suave" class="{{ $gusto === 'suave' ? 'is-active' : '' }}">
                Suave <small>− sal</small>
            </button>
        </div>

        <div class="brn-step-k">Concentración sugerida (%)</div>
        <input type="number" step="0.1" inputmode="decimal" name="pct" id="pct"
               class="form-control @error('pct') is-invalid @enderror"
               value="{{ $pct }}" required>
        <p class="brn-hint" style="margin-top:6px;">Se calcula sola con tus elecciones. Puedes afinarla a mano si lo necesitas.</p>

        @if($errors->any())
            <div class="text-danger mt-2" style="font-size:.82rem;">{{ $errors->first() }}</div>
        @endif

        <div class="fermenty-card brn-out">
            <div class="brn-out__k">Sal necesaria</div>
            <div class="brn-out__v"><span id="brn-salt">{{ number_format($salt, 1) }}</span> <small>g</small></div>
            <div class="brn-out__pct">al <span id="brn-pct">{{ rtrim(rtrim(number_format((float) $pct, 1, ',', ''), '0'), ',') }}</span>% de salinidad</div>
            <div class="brn-out__pct" id="brn-spoons" style="font-weight:700;margin-top:6px;">{{ $spoonsText($salt) }}</div>
        </div>

        <noscript>
            <button type="submit" class="btn btn-fermenty-primary mt-3">Calcular</button>
        </noscript>

        <p class="brn-hint">
            Salinidad orientativa: chucrut, kimchi y verduras variadas ~2–2,5 % · encurtidos 3–5 % · aceitunas 5–8 %.
            <span id="brn-method-text">{{ $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).' }}</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>
    </form>
</div>

@push('scripts')
<script>
(function () {
    var ferments  = @json($ferments);
    var GUSTO     = @json(BrineCalculator::GUSTO_FACTORS);
    var REF_TEMP  = {{ BrineCalculator::REFERENCE_TEMP_C }};
    var SLOPE     = {{ BrineCalculator::TEMP_SLOPE }};
    var TEMP_MIN  = {{ BrineCalculator::TEMP_MIN_C }};
    var TEMP_MAX  = {{ BrineCalculator::TEMP_MAX_C }};

    var water   = document.getElementById('water');
    var waterLb = document.getElementById('water-label');
    var hintTxt = document.getElementById('brn-method-text');
    var temp    = document.getElementById('temp');
    var pct     = document.getElementById('pct');
    var fIn     = document.getElementById('ferment');
    var gIn     = document.getElementById('gusto');
    var outG    = document.getElementById('brn-salt');
    var outP    = document.getElementById('brn-pct');
    var outSp   = document.getElementById('brn-spoons');
    var pctEdited = false;

    var DRY_HINT   = '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.';
    var BRINE_HINT = 'Este fermento va en salmuera: el % se calcula sobre el peso del agua (1 ml ≈ 1 g).';

    function baseFor(slug) {
        for (var i = 0; i < ferments.length; i++) if (ferments[i].slug === slug) return ferments[i].pct;
        return 2.5;
    }

    function methodFor(slug) {
        for (var i = 0; i < ferments.length; i++) if (ferments[i].slug === slug) return ferments[i].method;
        return 'brine';
    }

    function refreshMethod() {
        var isDry = methodFor(fIn.value) === 'dry';
        waterLb.textContent = isDry ? 'Peso de la verdura (g)' : 'Agua (ml o g)';
        hintTxt.textContent = isDry ? DRY_HINT : BRINE_HINT;
    }

    function fmt(n) { return n.toLocaleString('es-ES', { minimumFractionDigits: 1, maximumFractionDigits: 1 }); }

    // Mirror of the PHP $formatFraction/$spoonsText closures above.
    // Returns { label, value } — the plural is decided on the rounded value, not the raw one.
    function formatFraction(n) {
        var whole = Math.floor(n);
        var frac = Math.round((n - whole) * 4) / 4;
        if (frac === 1) { whole += 1; frac = 0; }
        var glyph = { 0: '', 0.25: '¼', 0.5: '½', 0.75: '¾' }[frac];
        return { label: whole > 0 ? whole + glyph : (glyph || '0'), value: whole + frac };
    }
    function spoonsText(g) {
        if (g <= 0) return '';
        var tbsp = g / 18;
        if (tbsp >= 0.4) { var f = formatFraction(tbsp); return '≈ ' + f.label + (f.value === 1 ? ' cucharada' : ' cucharadas') + ' de sal'; }
        var f2 = formatFraction(g / 6);
        return '≈ ' + f2.label + (f2.value === 1 ? ' cucharadita' : ' cucharaditas') + ' de sal';
    }

    // Mirror of BrineCalculator::suggestSalinity().
    function suggest() {
        var base = baseFor(fIn.value);
        var tf = 1, t = parseFloat(temp.value);
        if (!isNaN(t)) {
            var c = Math.max(TEMP_MIN, Math.min(TEMP_MAX, t));
            tf = 1 + (c - REF_TEMP) * SLOPE;
        }
        var gf = GUSTO[gIn.value] || 1;
        return Math.round(base * tf * gf * 10) / 10;
    }

    function refreshPct() { if (!pctEdited) pct.value = suggest(); }

    function recompute() {
        var w = parseFloat(water.value), p = parseFloat(pct.value);
        if (isNaN(p) || p < 0) { outP.textContent = '—'; } else { outP.textContent = fmt(p); }
        if (isNaN(w) || isNaN(p) || w < 0 || p < 0) { outG.textContent = '—'; outSp.textContent = ''; return; }
        var salt = Math.round(w * p / 100 * 10) / 10;
        outG.textContent = fmt(salt);
        outSp.textContent = spoonsText(salt);
    }

    function refreshAll() { refreshPct(); recompute(); }

    function setActive(sel, el) {
        document.querySelectorAll(sel).forEach(function (n) { n.classList.remove('is-active'); });
        el.classList.add('is-active');
    }

    water.addEventListener('input', recompute);
    temp.addEventListener('input', function () { pctEdited = false; refreshAll(); });
    pct.addEventListener('input', function () { pctEdited = true; recompute(); });

    document.querySelectorAll('[data-ferment]').forEach(function (b) {
        b.addEventListener('click', function () {
            fIn.value = this.dataset.ferment;
            setActive('.brn-ferment', this);
            pctEdited = false; refreshMethod(); refreshAll();
        });
    });

    document.querySelectorAll('[data-gusto]').forEach(function (b) {
        b.addEventListener('click', function () {
            gIn.value = this.dataset.gusto;
            setActive('.brn-seg button', this);
            pctEdited = false; refreshAll();
        });
    });

    recompute();
})();
</script>
@endpush

@endsection