@extends('layouts.app')

@section('title', 'Picture Hanging Calculator')
@section('meta_description',
    'Calculate exactly where to place nails for hanging multiple frames evenly. Supports fixed
    gaps or spread evenly strategies.')

@section('content')
    <div class="max-w-4xl mx-auto space-y-12" x-data="pictureHanging()">
        <!-- Header -->
        <div class="text-center space-y-4">
            <h1 class="text-4xl md:text-5xl font-bold text-white tracking-tight">Picture Hanging Calculator</h1>
            <p class="text-slate-400 text-lg">Stop guessing. Get exact measurements for perfect gallery walls.</p>
        </div>

        <!-- Calculator Card -->
        <div class="bg-slate-900/50 border border-white/5 rounded-3xl p-8 shadow-xl">
            <!-- Unit Toggle -->
            <div class="flex justify-center mb-8">
                <div class="bg-white/5 p-1 rounded-xl inline-flex">
                    <button @click="unit = 'in'; calculate()" class="px-6 py-2 rounded-lg text-sm font-medium transition-all"
                        :class="unit === 'in' ? 'bg-indigo-500 text-white shadow-lg' :
                            'text-slate-400 hover:text-white'">
                        Inches (Imperial)
                    </button>
                    <button @click="unit = 'cm'; calculate()"
                        class="px-6 py-2 rounded-lg text-sm font-medium transition-all"
                        :class="unit === 'cm' ? 'bg-indigo-500 text-white shadow-lg' :
                            'text-slate-400 hover:text-white'">
                        CM (Metric)
                    </button>
                </div>
            </div>

            <!-- Inputs Grid -->
            <div class="grid md:grid-cols-3 gap-6 mb-8">
                <div class="space-y-2">
                    <label class="text-sm font-medium text-slate-300">Wall Width</label>
                    <div class="relative">
                        <input type="number" x-model.number="wallWidth" @input="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 transition-colors"
                            placeholder="e.g. 120">
                        <span class="absolute right-4 top-3 text-slate-500 text-sm" x-text="unit"></span>
                    </div>
                </div>

                <div class="space-y-2">
                    <label class="text-sm font-medium text-slate-300">Frame Width</label>
                    <div class="relative">
                        <input type="number" x-model.number="frameWidth" @input="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 transition-colors"
                            placeholder="e.g. 20">
                        <span class="absolute right-4 top-3 text-slate-500 text-sm" x-text="unit"></span>
                    </div>
                </div>

                <div class="space-y-2">
                    <label class="text-sm font-medium text-slate-300">Number of Frames</label>
                    <input type="number" x-model.number="numFrames" @input="calculate" min="1" max="20"
                        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 transition-colors"
                        placeholder="e.g. 3">
                </div>
            </div>

            <!-- Strategy Selection -->
            <div class="space-y-4 mb-8">
                <label class="text-sm font-medium text-slate-300">Spacing Strategy</label>
                <div class="grid md:grid-cols-2 gap-4">
                    <!-- Spread Evenly -->
                    <button @click="strategy = 'spread'; calculate()"
                        class="text-left p-4 rounded-xl border transition-all relative overflow-hidden group"
                        :class="strategy === 'spread' ? 'bg-indigo-500/10 border-indigo-500' :
                            'bg-white/5 border-white/5 hover:bg-white/10'">
                        <div class="font-bold text-white mb-1" :class="{ 'text-indigo-400': strategy === 'spread' }">
                            Spread
                            Evenly</div>
                        <div class="text-xs text-slate-400">Distribute frames across the entire wall width.</div>
                    </button>

                    <!-- Fixed Gap -->
                    <button @click="strategy = 'fixed'; calculate()"
                        class="text-left p-4 rounded-xl border transition-all relative overflow-hidden group"
                        :class="strategy === 'fixed' ? 'bg-indigo-500/10 border-indigo-500' :
                            'bg-white/5 border-white/5 hover:bg-white/10'">
                        <div class="font-bold text-white mb-1" :class="{ 'text-indigo-400': strategy === 'fixed' }">Fixed
                            Gap (Center Group)</div>
                        <div class="text-xs text-slate-400">Keep frames close together, centered on the wall.</div>

                        <!-- Extra input for gap size if selected -->
                        <div x-show="strategy === 'fixed'" class="mt-3 pt-3 border-t border-white/10" @click.stop>
                            <div class="flex items-center gap-2">
                                <span class="text-xs text-slate-300">Gap Size:</span>
                                <input type="number" x-model.number="gapSize" @input="calculate"
                                    class="w-20 bg-black/20 border border-white/10 rounded-lg px-2 py-1 text-sm text-white focus:border-indigo-500">
                                <span class="text-xs text-slate-500" x-text="unit"></span>
                            </div>
                        </div>
                    </button>
                </div>
            </div>

            <!-- Error Message -->
            <div x-show="error"
                class="bg-red-500/10 border border-red-500/20 text-red-400 px-4 py-3 rounded-xl mb-8 text-sm"
                style="display: none;">
                <span x-text="error"></span>
            </div>

            <!-- Visualization -->
            <div class="mb-12" x-show="!error && results.length > 0">
                <label class="text-sm font-medium text-slate-300 block mb-4">Preview</label>
                <div
                    class="w-full bg-slate-800/50 rounded-xl border border-white/10 h-48 relative flex items-center overflow-hidden">
                    <!-- Wall bounds -->
                    <div class="absolute inset-0 flex items-center"
                        :class="strategy === 'spread' ? 'justify-between px-[5%]' : 'justify-center'">

                        <!-- Frames Loop (Visual Only - simplified logic for display) -->
                        <template x-for="(res, index) in results" :key="index">
                            <!-- We need absolute positioning for accuracy in the preview based on percentages -->
                            <div class="absolute h-24 bg-white/10 border-2 border-indigo-500/50 rounded shadow-lg flex items-center justify-center text-xs text-white"
                                :style="`width: ${getPreviewWidth()}%; left: ${getPreviewLeft(res.center)}%; transform: translateX(-50%);`">
                                <span x-text="index + 1"></span>
                                <!-- Center line -->
                                <div
                                    class="absolute top-0 bottom-0 left-1/2 w-px bg-red-500/50 -translate-x-1/2 border-dashed border-l border-red-500">
                                </div>
                            </div>
                        </template>

                    </div>

                    <!-- Wall Center Marker -->
                    <div class="absolute top-0 bottom-0 left-1/2 w-px bg-white/10 -translate-x-1/2"></div>
                </div>
                <div class="text-center mt-2 text-xs text-slate-500">Wall Center</div>
            </div>

            <!-- Results List -->
            <div x-show="!error && results.length > 0">
                <h3 class="text-xl font-bold text-white mb-6">Measurements</h3>
                <div class="bg-indigo-500/10 rounded-2xl border border-indigo-500/20 p-6">
                    <p class="text-indigo-300 text-sm mb-4">
                        Measure from the <strong>Left Edge</strong> of your wall area. Mark the center point for each nail.
                    </p>
                    <div class="space-y-4">
                        <template x-for="(res, index) in results" :key="index">
                            <div
                                class="flex items-center justify-between pb-4 border-b border-white/5 last:border-0 last:pb-0">
                                <div class="flex items-center gap-4">
                                    <div class="w-8 h-8 rounded-full bg-indigo-500 flex items-center justify-center text-white font-bold"
                                        x-text="index + 1"></div>
                                    <div class="text-slate-300">Frame <span x-text="index + 1"></span> Center</div>
                                </div>
                                <div class="text-right">
                                    <div class="text-2xl font-bold text-white">
                                        <span x-text="format(res.center)"></span> <span
                                            class="text-sm font-normal text-slate-400" x-text="unit"></span>
                                    </div>
                                </div>
                            </div>
                        </template>
                    </div>
                </div>
            </div>

        </div>

        <!-- Info Panel -->
        <div class="mt-12 bg-slate-900/50 rounded-3xl p-8 md:p-12 border border-white/5 relative overflow-hidden">
            <div class="absolute top-0 right-0 -mr-20 -mt-20 w-80 h-80 bg-orange-500/10 rounded-full blur-3xl"></div>

            <div class="relative z-10 grid md:grid-cols-2 gap-12">
                <div class="space-y-6">
                    <h2 class="text-2xl font-bold text-white">Why use this tool?</h2>
                    <p class="text-slate-400 leading-relaxed">
                        Hanging multiple frames evenly is deceptively difficult. The math involving frame widths,
                        different gap sizes, and wall positioning often leads to mistakes and unnecessary holes in the wall.
                    </p>
                    <p class="text-slate-400 leading-relaxed">
                        This calculator does the heavy lifting for you, providing the exact center point for each nail
                        so you get it right the first time.
                    </p>
                </div>

                <div class="space-y-6">
                    <h2 class="text-2xl font-bold text-white">Who is this for?</h2>
                    <ul class="space-y-3 text-slate-400">
                        <li class="flex items-start gap-3">
                            <svg class="w-5 h-5 text-orange-400 mt-1 shrink-0" fill="none" stroke="currentColor"
                                viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6">
                                </path>
                            </svg>
                            <span><strong>Homeowners & Renters</strong> wanting a professional gallery wall look.</span>
                        </li>
                        <li class="flex items-start gap-3">
                            <svg class="w-5 h-5 text-orange-400 mt-1 shrink-0" fill="none" stroke="currentColor"
                                viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z">
                                </path>
                            </svg>
                            <span><strong>Interior Decorators</strong> planning layouts for clients.</span>
                        </li>
                        <li class="flex items-start gap-3">
                            <svg class="w-5 h-5 text-orange-400 mt-1 shrink-0" fill="none" stroke="currentColor"
                                viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4">
                                </path>
                            </svg>
                            <span><strong>Galleries & Curators</strong> organizing exhibitions.</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('alpine:init', () => {
            Alpine.data('pictureHanging', () => ({
                unit: 'in',
                wallWidth: 100,
                frameWidth: 20,
                numFrames: 3,
                strategy: 'spread', // 'spread' or 'fixed'
                gapSize: 2,
                results: [],
                error: null,

                init() {
                    this.calculate();
                },

                calculate() {
                    this.error = null;
                    this.results = [];

                    // Parsed values
                    const w = parseFloat(this.wallWidth);
                    const f = parseFloat(this.frameWidth);
                    const n = parseInt(this.numFrames);
                    const g = parseFloat(this.gapSize);

                    if (isNaN(w) || isNaN(f) || isNaN(n) || w <= 0 || f <= 0 || n <= 0) {
                        return; // Wait for valid input
                    }

                    const totalFrameWidth = f * n;

                    if (totalFrameWidth > w) {
                        this.error = "Total frame width exceeds wall width!";
                        return;
                    }

                    if (this.strategy === 'spread') {
                        // Strategy 1: Spread Evenly
                        // The remaining space is (W - totalFrameWidth)
                        // We have (N + 1) gaps typically if we want gaps on ends too.
                        // Or N-1 gaps if ends differ? Usually "Spread Evenly" means equal spacing including ends.
                        // Gap = (W - (N * F)) / (N + 1)
                        const totalGapSpace = w - totalFrameWidth;
                        const individualGap = totalGapSpace / (n + 1);

                        if (individualGap < 0) {
                            this.error = "Frames don't fit on the wall.";
                            return;
                        }

                        let currentPos = individualGap; // Start after first gap

                        for (let i = 0; i < n; i++) {
                            // Center is current pos + half frame
                            const center = currentPos + (f / 2);
                            this.results.push({
                                center: center
                            });
                            // Move past this frame and next gap
                            currentPos += f + individualGap;
                        }

                    } else {
                        // Strategy 2: Fixed Gap (Center Group)
                        // Total Group Width = (N * F) + ((N - 1) * G)
                        const totalGroupWidth = (n * f) + ((n - 1) * g);

                        if (totalGroupWidth > w) {
                            this.error = "Total group width (frames + gaps) exceeds wall width!";
                            return;
                        }

                        // Start point (left edge of first frame) = (W - GroupWidth) / 2
                        let currentPos = (w - totalGroupWidth) / 2;

                        for (let i = 0; i < n; i++) {
                            const center = currentPos + (f / 2);
                            this.results.push({
                                center: center
                            });
                            currentPos += f + g;
                        }
                    }
                },

                format(val) {
                    if (this.unit === 'cm') {
                        return val.toFixed(1);
                    }

                    // Format inches to fractions for display
                    // Tolerance 1/16
                    const fraction = val % 1;
                    const whole = Math.floor(val);

                    if (fraction < 0.03125) return whole; // Basically whole

                    // Simple fraction approximation
                    const gcd = (a, b) => b ? gcd(b, a % b) : a;

                    // Round to nearest 16th
                    const numerator = Math.round(fraction * 16);
                    if (numerator === 16) return whole + 1;
                    if (numerator === 0) return whole;

                    const divisor = gcd(numerator, 16);
                    return `${whole > 0 ? whole + ' ' : ''}${numerator/divisor}/${16/divisor}`;
                },

                getPreviewWidth() {
                    // Return percentage width of a frame relative to wall
                    return (this.frameWidth / this.wallWidth) * 100;
                },

                getPreviewLeft(centerVal) {
                    // Return percentage left position of center
                    return (centerVal / this.wallWidth) * 100;
                }
            }));
        });
    </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.bulk-deal') }}"
                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">Cost
                Per Unit Calculator</a>
            <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>
        </div>
    </div>
@endsection