@extends('layouts.app')

@section('title', 'Cost Per Unit Calculator')
@section('meta_description',
    'Compare supermarket bulk deals instantly. Find the true cost per ounce, gram, or unit to
    reveal the best value.')

@section('content')
    <div class="max-w-4xl mx-auto space-y-12" x-data="bulkDeal()">

        <!-- Header -->
        <div class="text-center space-y-4">
            <h1 class="text-4xl md:text-5xl font-bold text-white tracking-tight">Cost Per Unit Calculator</h1>
            <p class="text-slate-400 text-lg">
                Supermarkets confuse you with mismatched sizes. <span class="text-emerald-400 font-medium">We expose the
                    truth.</span>
            </p>
        </div>

        <div class="grid md:grid-cols-2 gap-8 items-start">

            <!-- Item A Input -->
            <div class="bg-indigo-900/20 border-2 rounded-3xl p-6 transition-all"
                :class="winner === 'A' ? 'border-emerald-500 shadow-[0_0_30px_rgba(16,185,129,0.2)]' :
                    'border-white/5 bg-slate-900/50'">

                <div class="flex items-center justify-between mb-6">
                    <h3 class="text-xl font-bold text-white">Item A</h3>
                    <div x-show="winner === 'A'"
                        class="bg-emerald-500 text-white text-xs font-bold px-3 py-1 rounded-full animate-bounce">
                        BEST VALUE
                    </div>
                </div>

                <div class="space-y-4">
                    <div>
                        <label class="text-xs text-slate-400 font-medium uppercase tracking-wider">Price</label>
                        <div class="relative mt-1">
                            <span class="absolute left-4 top-3 text-slate-500">$</span>
                            <input type="number" x-model.number="itemA.price" @input="calculate" placeholder="0.00"
                                class="w-full bg-black/20 border border-white/10 rounded-xl px-4 py-3 pl-8 text-white focus:outline-none focus:border-indigo-500 transition-colors">
                        </div>
                    </div>

                    <div class="grid grid-cols-2 gap-4">
                        <div>
                            <label class="text-xs text-slate-400 font-medium uppercase tracking-wider">Count</label>
                            <input type="number" x-model.number="itemA.count" @input="calculate" placeholder="1"
                                class="w-full bg-black/20 border border-white/10 rounded-xl px-4 py-3 text-white focus:outline-none focus:border-indigo-500 mt-1">
                        </div>
                        <div>
                            <label class="text-xs text-slate-400 font-medium uppercase tracking-wider">Size (each)</label>
                            <input type="number" x-model.number="itemA.size" @input="calculate" placeholder="16"
                                class="w-full bg-black/20 border border-white/10 rounded-xl px-4 py-3 text-white focus:outline-none focus:border-indigo-500 mt-1">
                        </div>
                    </div>

                    <div>
                        <label class="text-xs text-slate-400 font-medium uppercase tracking-wider">Unit</label>
                        <select x-model="itemA.unit" @change="calculate"
                            class="w-full bg-black/20 border border-white/10 rounded-xl px-4 py-3 text-white focus:outline-none focus:border-indigo-500 mt-1 appearance-none">
                            <optgroup label="Mass">
                                <option value="gram">Grams (g)</option>
                                <option value="kg">Kilograms (kg)</option>
                                <option value="oz">Ounces (oz)</option>
                                <option value="lb">Pounds (lb)</option>
                            </optgroup>
                            <optgroup label="Volume">
                                <option value="ml">Milliliters (ml)</option>
                                <option value="l">Liters (L)</option>
                                <option value="fl_oz">Fluid Ounces (fl oz)</option>
                                <option value="gal">Gallons (gal)</option>
                            </optgroup>
                            <optgroup label="Other">
                                <option value="count">Item Count (ea)</option>
                            </optgroup>
                        </select>
                    </div>
                </div>

                <div class="mt-8 pt-6 border-t border-white/5 text-center">
                    <div class="text-sm text-slate-400">Unit Price</div>
                    <div class="text-2xl font-mono font-bold text-white mt-1">
                        <span x-text="formatCurrency(itemA.unitPrice)"></span>
                        <span class="text-sm font-normal text-slate-500"> / <span
                                x-text="itemA.unit.replace('_', ' ')"></span></span>
                    </div>
                </div>
            </div>

            <!-- Item B Input -->
            <div class="bg-indigo-900/20 border-2 rounded-3xl p-6 transition-all"
                :class="winner === 'B' ? 'border-emerald-500 shadow-[0_0_30px_rgba(16,185,129,0.2)]' :
                    'border-white/5 bg-slate-900/50'">

                <div class="flex items-center justify-between mb-6">
                    <h3 class="text-xl font-bold text-white">Item B</h3>
                    <div x-show="winner === 'B'"
                        class="bg-emerald-500 text-white text-xs font-bold px-3 py-1 rounded-full animate-bounce">
                        BEST VALUE
                    </div>
                </div>

                <div class="space-y-4">
                    <div>
                        <label class="text-xs text-slate-400 font-medium uppercase tracking-wider">Price</label>
                        <div class="relative mt-1">
                            <span class="absolute left-4 top-3 text-slate-500">$</span>
                            <input type="number" x-model.number="itemB.price" @input="calculate" placeholder="0.00"
                                class="w-full bg-black/20 border border-white/10 rounded-xl px-4 py-3 pl-8 text-white focus:outline-none focus:border-indigo-500 transition-colors">
                        </div>
                    </div>

                    <div class="grid grid-cols-2 gap-4">
                        <div>
                            <label class="text-xs text-slate-400 font-medium uppercase tracking-wider">Count</label>
                            <input type="number" x-model.number="itemB.count" @input="calculate" placeholder="1"
                                class="w-full bg-black/20 border border-white/10 rounded-xl px-4 py-3 text-white focus:outline-none focus:border-indigo-500 mt-1">
                        </div>
                        <div>
                            <label class="text-xs text-slate-400 font-medium uppercase tracking-wider">Size (each)</label>
                            <input type="number" x-model.number="itemB.size" @input="calculate" placeholder="16"
                                class="w-full bg-black/20 border border-white/10 rounded-xl px-4 py-3 text-white focus:outline-none focus:border-indigo-500 mt-1">
                        </div>
                    </div>

                    <div>
                        <label class="text-xs text-slate-400 font-medium uppercase tracking-wider">Unit</label>
                        <select x-model="itemB.unit" @change="calculate"
                            class="w-full bg-black/20 border border-white/10 rounded-xl px-4 py-3 text-white focus:outline-none focus:border-indigo-500 mt-1 appearance-none">
                            <optgroup label="Mass">
                                <option value="gram">Grams (g)</option>
                                <option value="kg">Kilograms (kg)</option>
                                <option value="oz">Ounces (oz)</option>
                                <option value="lb">Pounds (lb)</option>
                            </optgroup>
                            <optgroup label="Volume">
                                <option value="ml">Milliliters (ml)</option>
                                <option value="l">Liters (L)</option>
                                <option value="fl_oz">Fluid Ounces (fl oz)</option>
                                <option value="gal">Gallons (gal)</option>
                            </optgroup>
                            <optgroup label="Other">
                                <option value="count">Item Count (ea)</option>
                            </optgroup>
                        </select>
                    </div>
                </div>

                <div class="mt-8 pt-6 border-t border-white/5 text-center">
                    <div class="text-sm text-slate-400">Unit Price</div>
                    <div class="text-2xl font-mono font-bold text-white mt-1">
                        <span x-text="formatCurrency(itemB.unitPrice)"></span>
                        <span class="text-sm font-normal text-slate-500"> / <span
                                x-text="itemB.unit.replace('_', ' ')"></span></span>
                    </div>
                </div>
            </div>
        </div>

        <!-- Result Summary -->
        <div x-show="winner && percentDiff > 0"
            class="text-center bg-emerald-500/10 border border-emerald-500/20 rounded-2xl p-6" style="display: none;">
            <p class="text-2xl text-emerald-300 font-bold mb-2">
                Item <span x-text="winner"></span> is <span x-text="percentDiff"></span>% cheaper!
            </p>
            <p class="text-slate-400">
                You save <span class="text-white font-mono" x-text="formatCurrency(savingsPerUnit)"></span> per <span
                    x-text="baseUnitDisplay"></span>.
            </p>
        </div>

        <!-- Info Panel -->
        <div class="bg-slate-900/50 border border-white/5 rounded-3xl p-8 md:p-12 space-y-6 max-w-3xl mx-auto">
            <h2 class="text-2xl font-bold text-white">Why use the Cost Per Unit Calculator?</h2>

            <div class="prose prose-invert prose-lg text-slate-400 leading-relaxed">
                <p>Ever stood in a supermarket aisle wondering if the "Family Pack" actually saves you money? Or tried to
                    compare the price per ounce of a 20oz box with a 500ml bottle? Retailers intentionally use mismatched
                    sizes
                    and mixed metrics to make grocery price comparison frustrating.</p>
                <p>Our Cost Per Unit Calculator cuts through the confusion. Simply enter the sizes and prices, and our unit
                    price calculator instantly converts everything to a common base unit. Discover the true cost per unit
                    and
                    find out if buying in bulk is actually the better deal.</p>
            </div>

            <div class="grid md:grid-cols-2 gap-8 pt-8 border-t border-white/5">
                <div>
                    <h3 class="text-white font-semibold mb-3 flex items-center gap-2">
                        <svg class="w-5 h-5 text-emerald-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" />
                        </svg>
                        Who is this for?
                    </h3>
                    <ul class="space-y-2 text-slate-400 text-sm">
                        <li>• <strong>Smart Shoppers</strong> stretching their budget</li>
                        <li>• <strong>Bulk Buyers</strong> at warehouse clubs (Costco, Sam's)</li>
                        <li>• <strong>Online Shoppers</strong> comparing Amazon multi-packs</li>
                    </ul>
                </div>
                <div>
                    <h3 class="text-white font-semibold mb-3 flex items-center gap-2">
                        <svg class="w-5 h-5 text-blue-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                        </svg>
                        What it handles
                    </h3>
                    <ul class="space-y-2 text-slate-400 text-sm">
                        <li>• <strong>Mass:</strong> Grams, Kilograms, Ounces, Pounds</li>
                        <li>• <strong>Volume:</strong> Milliliters, Liters, Fl Oz, Gallons</li>
                        <li>• <strong>Counts:</strong> "Per Item" calculations</li>
                    </ul>
                </div>
            </div>
        </div>

    </div>

    <script>
        document.addEventListener('alpine:init', () => {
            Alpine.data('bulkDeal', () => ({
                winner: null,
                percentDiff: 0,
                savingsPerUnit: 0,
                baseUnitDisplay: 'unit',

                itemA: {
                    price: null,
                    count: 1,
                    size: 1,
                    unit: 'oz',
                    unitPrice: 0,
                    normalizedPrice: 0 // Price per base unit (g or ml)
                },
                itemB: {
                    price: null,
                    count: 1,
                    size: 1,
                    unit: 'oz',
                    unitPrice: 0,
                    normalizedPrice: 0
                },

                // Conversion factors to Base Units (g for mass, ml for volume, 1 for count)
                conversions: {
                    // Mass (Base: Grams)
                    gram: 1,
                    kg: 1000,
                    oz: 28.3495,
                    lb: 453.592,

                    // Volume (Base: Milliliters)
                    ml: 1,
                    l: 1000,
                    fl_oz: 29.5735,
                    gal: 3785.41,

                    // Count
                    count: 1
                },

                // Which group does a unit belong to?
                groups: {
                    gram: 'mass',
                    kg: 'mass',
                    oz: 'mass',
                    lb: 'mass',
                    ml: 'vol',
                    l: 'vol',
                    fl_oz: 'vol',
                    gal: 'vol',
                    count: 'count'
                },

                init() {
                    // Watch for unit changes to sync them if user wants (optional UX, keeping separate for now)
                },

                calculate() {
                    // Reset
                    this.winner = null;
                    this.percentDiff = 0;
                    this.savingsPerUnit = 0;

                    const priceA = this.getNormalizedPrice(this.itemA);
                    const priceB = this.getNormalizedPrice(this.itemB);

                    this.itemA.normalizedPrice = priceA;
                    this.itemB.normalizedPrice = priceB;

                    // Simple unit price (price / qty) for display
                    this.itemA.unitPrice = this.getSimpleUnitPrice(this.itemA);
                    this.itemB.unitPrice = this.getSimpleUnitPrice(this.itemB);

                    if (priceA > 0 && priceB > 0) {
                        if (priceA < priceB) {
                            this.winner = 'A';
                            this.setSavings(priceA, priceB, this.itemA);
                        } else if (priceB < priceA) {
                            this.winner = 'B';
                            this.setSavings(priceB, priceA, this.itemB);
                        }
                    }
                },

                getSimpleUnitPrice(item) {
                    if (!item.price || item.price <= 0) return 0;
                    const total = (item.count || 1) * (item.size || 1);
                    if (total <= 0) return 0;
                    return item.price / total;
                },

                getNormalizedPrice(item) {
                    if (!item.price || item.price <= 0) return 0;

                    const totalUnits = (item.count || 1) * (item.size || 1);
                    if (totalUnits <= 0) return 0;

                    // Convert to base unit (g or ml)
                    const factor = this.conversions[item.unit] || 1;
                    const totalBase = totalUnits * factor;

                    return item.price / totalBase;
                },

                setSavings(winnerPrice, loserPrice, winningItem) {
                    // winnerPrice and loserPrice are per BASE unit (g/ml)
                    // We want to show savings per WINNING ITEM'S display unit (e.g. per oz)
                    const diffBase = loserPrice - winnerPrice;
                    const factor = this.conversions[winningItem.unit] || 1;

                    this.savingsPerUnit = diffBase * factor;
                    this.percentDiff = ((diffBase / loserPrice) * 100).toFixed(1);
                    this.baseUnitDisplay = winningItem.unit.replace('_', ' ');
                },

                formatCurrency(val) {
                    if (val === 0 || !val) return '—';
                    // If very small number, show more decimals
                    if (val < 0.01) return '$' + val.toFixed(4);
                    return '$' + val.toFixed(2);
                }
            }));
        });
    </script>

    {{-- Related Tools --}}
    <div class="max-w-4xl mx-auto mt-12 pt-8 border-t border-white/5">
        <p class="text-sm text-slate-500 mb-4">Related tools</p>
        <div class="flex flex-wrap gap-3">
            <a href="{{ route('tools.true-cost') }}"
                class="inline-flex items-center gap-2 px-4 py-2 bg-white/5 hover:bg-white/10 border border-white/10 rounded-lg text-sm text-slate-300 hover:text-white transition-colors">True
                Cost Calculator</a>
            <a href="{{ route('tools.fair.share') }}"
                class="inline-flex items-center gap-2 px-4 py-2 bg-white/5 hover:bg-white/10 border border-white/10 rounded-lg text-sm text-slate-300 hover:text-white transition-colors">Fair
                Share Calculator</a>
        </div>
    </div>
@endsection