@extends('layouts.mobile')

@section('title', 'Conversor de unidades')
@section('back', route('tools'))
@section('app-eyebrow', 'Laboratorio')
@section('app-title', 'Conversor de unidades')

{{-- Espejo móvil de laboratorio/conversor: mismas densidades aparentes y
     factores. El conversor da el número Y dice cuándo no fiarse — una
     cucharada de sal no pesa lo mismo según el grano. --}}
@section('content')
<div class="fm-pad fm-stack" x-data="unitConv()">

    <p class="fm-muted" style="font-size:13.5px;line-height:1.5;margin:0;">Para cuando la receta viene en cups, onzas o Fahrenheit y tú fermentas en gramos, litros y grados Celsius.</p>

    <div class="fm-seg">
        <button :class="tab === 'cocina' && 'on'" @click="tab = 'cocina'">Cocina</button>
        <button :class="tab === 'peso' && 'on'" @click="tab = 'peso'">Peso</button>
        <button :class="tab === 'volumen' && 'on'" @click="tab = 'volumen'">Volumen</button>
        <button :class="tab === 'temp' && 'on'" @click="tab = 'temp'">Temp.</button>
    </div>

    {{-- 1 · Medida de cocina de un ingrediente concreto → gramos --}}
    <template x-if="tab === 'cocina'">
        <div class="fm-stack">
            <div style="display:flex;gap:10px;">
                <div style="flex:1;"><label class="fm-label">Cuánto</label><input class="fm-input fm-data" type="number" step="any" min="0" inputmode="decimal" x-model="cocCant"></div>
                <div style="flex:2;">
                    <label class="fm-label">Medida</label>
                    <select class="fm-input" x-model="cocMedida">
                        <option value="tsp">cucharadita (tsp) — 5 ml</option>
                        <option value="tbsp">cucharada (tbsp) — 15 ml</option>
                        <option value="cup_us">cup EE. UU. — 240 ml</option>
                        <option value="cup_eu">taza métrica — 250 ml</option>
                        <option value="floz">onza líquida (fl oz) — 29,6 ml</option>
                        <option value="ml">mililitro</option>
                    </select>
                </div>
            </div>
            <div>
                <label class="fm-label">De qué</label>
                <select class="fm-input" x-model="cocIng">
                    <template x-for="i in ING" :key="i.slug">
                        <option :value="i.slug" x-text="i.nombre" :selected="i.slug === cocIng"></option>
                    </template>
                </select>
            </div>

            <div class="fm-card" style="background:var(--green-050);border:none;text-align:center;" aria-live="polite">
                <div class="fm-data" style="font-size:40px;font-weight:800;color:var(--green-700);" x-text="cocOut"></div>
                <div style="font-size:12.5px;color:var(--green-700);opacity:.85;margin-top:6px;" x-text="cocHelp"></div>
            </div>

            <p class="fm-muted" style="font-size:12px;line-height:1.5;margin:0;" x-text="cocAviso"></p>

            <div class="fm-card">
                <div class="fm-title" style="font-size:15px;">Lo que conviene saber antes de fiarte</div>
                <p class="fm-muted" style="font-size:12.5px;line-height:1.5;margin:8px 0 10px;">
                    Una cucharada de sal puede pesar de 6 a 18 gramos según el grano: la sal fina se compacta y la escamosa deja aire.
                    En un fermento, esa diferencia es la que separa un chucrut crujiente de uno blando — <strong>la sal se pesa siempre</strong>.
                    Estas conversiones sirven para leer una receta ajena, no para sustituir la báscula.
                </p>
                <table style="width:100%;border-collapse:collapse;font:400 12.5px var(--font-sans);">
                    <thead><tr>
                        <th style="text-align:left;padding:6px 8px;border-bottom:1px solid var(--border-subtle);color:var(--green-700);">Sal</th>
                        <th style="text-align:left;padding:6px 8px;border-bottom:1px solid var(--border-subtle);color:var(--green-700);">1 cucharadita</th>
                        <th style="text-align:left;padding:6px 8px;border-bottom:1px solid var(--border-subtle);color:var(--green-700);">1 cucharada</th>
                    </tr></thead>
                    <tbody>
                        <tr><td style="padding:6px 8px;border-bottom:1px solid var(--border-subtle);">Fina (de mesa)</td><td style="padding:6px 8px;border-bottom:1px solid var(--border-subtle);">≈ 6 g</td><td style="padding:6px 8px;border-bottom:1px solid var(--border-subtle);">≈ 18 g</td></tr>
                        <tr><td style="padding:6px 8px;border-bottom:1px solid var(--border-subtle);">Marina gruesa</td><td style="padding:6px 8px;border-bottom:1px solid var(--border-subtle);">≈ 5 g</td><td style="padding:6px 8px;border-bottom:1px solid var(--border-subtle);">≈ 15 g</td></tr>
                        <tr><td style="padding:6px 8px;">En escamas</td><td style="padding:6px 8px;">≈ 3 g</td><td style="padding:6px 8px;">≈ 9 g</td></tr>
                    </tbody>
                </table>
            </div>
        </div>
    </template>

    {{-- 2 · Peso --}}
    <template x-if="tab === 'peso'">
        <div class="fm-stack">
            <div style="display:flex;gap:10px;">
                <div style="flex:1;"><label class="fm-label">Cantidad</label><input class="fm-input fm-data" type="number" step="any" min="0" inputmode="decimal" x-model="pesoCant"></div>
                <div style="flex:2;">
                    <label class="fm-label">Unidad de origen</label>
                    <select class="fm-input" x-model="pesoUnidad">
                        <option value="oz">onza (oz)</option>
                        <option value="lb">libra (lb / pound)</option>
                        <option value="g">gramo</option>
                        <option value="kg">kilogramo</option>
                    </select>
                </div>
            </div>
            <div class="fm-card" style="background:var(--green-050);border:none;text-align:center;" aria-live="polite">
                <div class="fm-data" style="font-size:40px;font-weight:800;color:var(--green-700);" x-text="pesoOut"></div>
                <div style="font-size:12.5px;color:var(--green-700);opacity:.85;margin-top:6px;" x-text="pesoHelp"></div>
            </div>
        </div>
    </template>

    {{-- 3 · Volumen --}}
    <template x-if="tab === 'volumen'">
        <div class="fm-stack">
            <div style="display:flex;gap:10px;">
                <div style="flex:1;"><label class="fm-label">Cantidad</label><input class="fm-input fm-data" type="number" step="any" min="0" inputmode="decimal" x-model="volCant"></div>
                <div style="flex:2;">
                    <label class="fm-label">Unidad de origen</label>
                    <select class="fm-input" x-model="volUnidad">
                        <option value="tsp">cucharadita (tsp)</option>
                        <option value="tbsp">cucharada (tbsp)</option>
                        <option value="floz">onza líquida (fl oz)</option>
                        <option value="cup_us">cup estadounidense</option>
                        <option value="pint">pinta EE. UU. (pint)</option>
                        <option value="quart">cuarto EE. UU. (quart)</option>
                        <option value="gallon">galón EE. UU. (gallon)</option>
                        <option value="ml">mililitro</option>
                        <option value="l">litro</option>
                    </select>
                </div>
            </div>
            <div class="fm-card" style="background:var(--green-050);border:none;text-align:center;" aria-live="polite">
                <div class="fm-data" style="font-size:40px;font-weight:800;color:var(--green-700);" x-text="volOut"></div>
                <div style="font-size:12.5px;color:var(--green-700);opacity:.85;margin-top:6px;" x-text="volHelp"></div>
            </div>
            <p class="fm-muted" style="font-size:12px;line-height:1.5;margin:0;">Las pintas y los galones británicos no son los de EE. UU. (una pinta imperial son 568 ml). Si la receta es de Reino Unido, comprueba el origen antes de dar el volumen por bueno.</p>
        </div>
    </template>

    {{-- 4 · Temperatura --}}
    <template x-if="tab === 'temp'">
        <div class="fm-stack">
            <div style="display:flex;gap:10px;">
                <div style="flex:1;"><label class="fm-label">Temperatura</label><input class="fm-input fm-data" type="number" step="any" inputmode="decimal" x-model="tempCant"></div>
                <div style="flex:2;">
                    <label class="fm-label">Escala de origen</label>
                    <select class="fm-input" x-model="tempUnidad">
                        <option value="F">Fahrenheit (°F)</option>
                        <option value="C">Celsius (°C)</option>
                    </select>
                </div>
            </div>
            <div class="fm-card" style="background:var(--green-050);border:none;text-align:center;" aria-live="polite">
                <div class="fm-data" style="font-size:40px;font-weight:800;color:var(--green-700);" x-text="tempOut"></div>
                <div style="font-size:12.5px;color:var(--green-700);opacity:.85;margin-top:6px;" x-text="tempHelp"></div>
            </div>
            <p class="fm-muted" style="font-size:12px;line-height:1.5;margin:0;">Las recetas anglosajonas suelen decir «room temperature» para 68-72 °F, que son 20-22 °C. Si tu cocina está más caliente, tu fermento va más rápido que la receta.</p>
        </div>
    </template>
</div>
@endsection

@push('scripts')
<script>
function unitConv() {
    return {
        tab: 'cocina',
        /* Volúmenes en ml. Las «cups» no son universales: la de EE. UU. son
           240 ml y la métrica europea 250 — se ofrecen las dos porque la
           receta no siempre dice de dónde viene. */
        VOL: { tsp: 4.93, tbsp: 14.79, floz: 29.57, cup_us: 240, cup_eu: 250,
               pint: 473.18, quart: 946.35, gallon: 3785.41, ml: 1, l: 1000 },
        PESO: { oz: 28.35, lb: 453.59, g: 1, kg: 1000 },
        /* Densidades aparentes (g/ml): incluyen el aire entre granos, que es
           justo lo que hace que una cucharada de sal no pese siempre lo mismo. */
        ING: [
            { slug: 'agua',        nombre: 'Agua o té',                d: 1.00 },
            { slug: 'sal_fina',    nombre: 'Sal fina de mesa',         d: 1.20, aviso: 'La sal fina se compacta: pesa casi el doble que la escamosa a igual volumen. Pésala.' },
            { slug: 'sal_marina',  nombre: 'Sal marina gruesa',        d: 1.00, aviso: 'El grano grueso deja huecos, así que el volumen engaña. Pésala.' },
            { slug: 'sal_escamas', nombre: 'Sal en escamas',           d: 0.60, aviso: 'Las escamas son casi aire: una cucharada puede pesar un tercio que la de sal fina. Pésala.' },
            { slug: 'azucar',      nombre: 'Azúcar blanco',            d: 0.85 },
            { slug: 'azucar_mor',  nombre: 'Azúcar moreno (prensado)', d: 0.93 },
            { slug: 'panela',      nombre: 'Panela rallada',           d: 0.80 },
            { slug: 'miel',        nombre: 'Miel',                     d: 1.42, aviso: 'La miel se mide mejor en peso: lo que queda pegado en la taza no es poco.' },
            { slug: 'harina',      nombre: 'Harina de trigo',          d: 0.55, aviso: 'Según se llene la taza, la harina varía hasta un 20 %. Es el clásico de la masa madre.' },
            { slug: 'te_hojas',    nombre: 'Té en hoja',               d: 0.25, aviso: 'El té en hoja es muy ligero y su densidad depende del corte: el peso es el único dato fiable.' },
            { slug: 'copos',       nombre: 'Copos de chile (gochugaru)', d: 0.42 },
        ],
        cocCant: 1, cocMedida: 'cup_us', cocIng: 'sal_fina',
        pesoCant: 1, pesoUnidad: 'lb',
        volCant: 1, volUnidad: 'cup_us',
        tempCant: 72, tempUnidad: 'F',
        n(v, dec) { return v.toLocaleString('es-ES', { maximumFractionDigits: dec === undefined ? 1 : dec }); },

        get ing() { return this.ING.find(i => i.slug === this.cocIng) || this.ING[0]; },
        get cocMl() { return (parseFloat(this.cocCant) || 0) * this.VOL[this.cocMedida]; },
        get cocOut() { return this.n(this.cocMl * this.ing.d) + ' g'; },
        get cocHelp() { return this.n(this.cocMl) + ' ml de ' + this.ing.nombre.toLowerCase() + ' · densidad aparente ' + this.n(this.ing.d, 2) + ' g/ml'; },
        get cocAviso() { return this.ing.aviso || 'Conversión aproximada: el volumen de un sólido depende de cómo se llene la medida.'; },

        get pesoG() { return (parseFloat(this.pesoCant) || 0) * this.PESO[this.pesoUnidad]; },
        get pesoOut() { return this.pesoG >= 1000 ? this.n(this.pesoG / 1000, 3) + ' kg' : this.n(this.pesoG) + ' g'; },
        get pesoHelp() { return this.n(this.pesoG) + ' g · ' + this.n(this.pesoG / 28.35) + ' oz · ' + this.n(this.pesoG / 453.59, 2) + ' lb'; },

        get volMl() { return (parseFloat(this.volCant) || 0) * this.VOL[this.volUnidad]; },
        get volOut() { return this.volMl >= 1000 ? this.n(this.volMl / 1000, 2) + ' L' : this.n(this.volMl) + ' ml'; },
        get volHelp() { return this.n(this.volMl) + ' ml · ' + this.n(this.volMl / 240, 2) + ' cups EE. UU. · ' + this.n(this.volMl / 14.79) + ' cucharadas'; },

        get tempOut() {
            const v = parseFloat(this.tempCant);
            if (isNaN(v)) return '—';
            return this.tempUnidad === 'F' ? this.n((v - 32) * 5 / 9) + ' °C' : this.n(v * 9 / 5 + 32) + ' °F';
        },
        get tempHelp() {
            const v = parseFloat(this.tempCant);
            if (isNaN(v)) return '';
            return this.tempUnidad === 'F'
                ? this.n(v) + ' °F equivalen a ' + this.n((v - 32) * 5 / 9) + ' °C'
                : this.n(v) + ' °C equivalen a ' + this.n(v * 9 / 5 + 32) + ' °F';
        },
    };
}
</script>
@endpush