@extends('layouts.app')

@section('title', 'Shrimp Suitability Calculator')

@push('styles')
<style>
    .fish-picker {
        border: 1px solid rgba(16,33,41,.1);
        border-radius: 1rem;
        background: rgba(255,255,255,.8);
    }
    .fish-picker summary {
        list-style: none;
        cursor: pointer;
        padding: 1rem 1.1rem;
        font-weight: 700;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
    }
    .fish-picker summary::-webkit-details-marker {
        display: none;
    }
    .fish-picker summary::after {
        content: "+";
        font-size: 1.25rem;
        line-height: 1;
        color: var(--brand-sea);
    }
    .fish-picker[open] summary::after {
        content: "-";
    }
    .fish-picker-body {
        padding: 0 1.1rem 1.1rem;
        border-top: 1px solid rgba(16,33,41,.08);
    }
    .fish-option {
        border: 1px solid rgba(16,33,41,.08);
        border-radius: 1rem;
        padding: .85rem;
        display: flex;
        gap: .65rem;
        align-items: flex-start;
        height: 100%;
        background: #fff;
    }
</style>
@endpush

@section('content')
<div class="container">
    <div class="mb-4">
        <h1>Shrimp Suitability Calculator</h1>
        <p class="text-muted mb-0">Enter your tank parameters once and we will check them against all visible shrimp currently in stock or available to backorder.</p>
    </div>

    <div class="card section-card mb-4">
        <div class="card-body p-4">
            <form method="post" action="{{ route('compatibility.evaluate-all') }}" class="row g-3">
                @csrf
                <div class="col-6 col-md-4"><select name="ph" class="form-select"><option value="">pH</option>@foreach(['5.5','5.8','6.0','6.2','6.4','6.6','6.8','7.0','7.2','7.4','7.6'] as $value)<option value="{{ $value }}" @selected(old('ph') == $value)>{{ $value }}</option>@endforeach</select></div>
                <div class="col-6 col-md-4"><select name="gh" class="form-select"><option value="">GH</option>@foreach(range(3,12) as $value)<option value="{{ $value }}" @selected((string) old('gh') === (string) $value)>{{ $value }}</option>@endforeach</select></div>
                <div class="col-6 col-md-4"><select name="kh" class="form-select"><option value="">KH</option>@foreach(range(0,8) as $value)<option value="{{ $value }}" @selected((string) old('kh') === (string) $value)>{{ $value }}</option>@endforeach</select></div>
                <div class="col-6 col-md-4"><select name="tds" class="form-select"><option value="">TDS</option>@foreach([90,110,130,150,180,200,220,250,280] as $value)<option value="{{ $value }}" @selected((string) old('tds') === (string) $value)>{{ $value }}</option>@endforeach</select></div>
                <div class="col-6 col-md-4"><select name="temperature" class="form-select"><option value="">Temperature</option>@foreach(range(18,27) as $value)<option value="{{ $value }}" @selected((string) old('temperature') === (string) $value)>{{ $value }} °C</option>@endforeach</select></div>
                <div class="col-6 col-md-4"><select name="tank_size" class="form-select"><option value="">Tank size</option>@foreach([10,20,30,45,60,90,120] as $value)<option value="{{ $value }}" @selected((string) old('tank_size') === (string) $value)>{{ $value }} L</option>@endforeach</select></div>
                <div class="col-12"><select name="tank_age" class="form-select"><option value="">Tank maturity / age</option><option value="under_4_weeks" @selected(old('tank_age') === 'under_4_weeks')>Under 4 weeks</option><option value="1_3_months" @selected(old('tank_age') === '1_3_months')>1 to 3 months</option><option value="3_6_months" @selected(old('tank_age') === '3_6_months')>3 to 6 months</option><option value="6_months_plus" @selected(old('tank_age') === '6_months_plus')>6 months+</option></select></div>
                <div class="col-12">
                    <details class="fish-picker" @if(old('fish_species')) open @endif>
                        <summary>
                            <span>Fish currently kept</span>
                            <span class="small text-muted">Open to choose tank mates</span>
                        </summary>
                        <div class="fish-picker-body">
                            <div class="row g-3 pt-3">
                                @foreach ($fishSpecies as $fish)
                                    <div class="col-md-6 col-lg-4">
                                        <label class="fish-option">
                                            <input type="checkbox" name="fish_species[]" value="{{ $fish->id }}" @checked(in_array((string) $fish->id, old('fish_species', []), true))>
                                            <span>{{ $fish->common_name }}<br><span class="small text-muted">{{ $fish->category }}</span></span>
                                        </label>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </details>
                </div>
                <div class="col-12">
                    <details class="fish-picker" @if(old('snail_species')) open @endif>
                        <summary>
                            <span>Snails currently kept</span>
                            <span class="small text-muted">Open to choose snail species</span>
                        </summary>
                        <div class="fish-picker-body">
                            <div class="row g-3 pt-3">
                                @foreach ($snailSpecies as $snail)
                                    <div class="col-md-6 col-lg-4">
                                        <label class="fish-option">
                                            <input type="checkbox" name="snail_species[]" value="{{ $snail->id }}" @checked(in_array((string) $snail->id, old('snail_species', []), true))>
                                            <span>{{ $snail->common_name }}<br><span class="small text-muted">{{ $snail->category }}</span></span>
                                        </label>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </details>
                </div>
                <div class="col-12 d-flex flex-wrap gap-2">
                    <button class="btn btn-primary">Check all shrimp</button>
                    <a href="{{ route('compatibility.index') }}" class="btn btn-outline-primary">Reset</a>
                </div>
            </form>
        </div>
    </div>

    @if($results !== null)
        @php($recommended = $results->filter(fn ($result) => $result['evaluation']['score'] >= 55))
        @if($recommended->isEmpty())
            <div class="alert alert-warning">No currently available shrimp look suitable for these inputs. You can still review the closest matches below.</div>
        @else
            <div class="alert alert-success">{{ $recommended->count() }} shrimp option{{ $recommended->count() === 1 ? '' : 's' }} look potentially suitable or borderline for this setup.</div>
        @endif

        <div class="row g-3">
            @forelse($results as $result)
                @php($product = $result['product'])
                @php($evaluation = $result['evaluation'])
                <div class="col-12">
                    <div class="card section-card">
                        <div class="card-body p-4">
                            <div class="d-flex flex-wrap justify-content-between gap-3 mb-3">
                                <div>
                                    <div class="small text-muted">{{ $product->category?->name }}</div>
                                    <h2 class="h4 mb-1">{{ $product->name }}</h2>
                                    <div class="small text-muted">@money($product->current_price) · {{ $product->stock_quantity > 0 ? 'In stock' : 'Backorder available' }}</div>
                                </div>
                                <div class="text-md-end">
                                    <div class="fw-bold">{{ $evaluation['status'] }}</div>
                                    <div class="small text-muted">Score: {{ $evaluation['score'] }}%</div>
                                </div>
                            </div>
                            <p class="text-muted">{{ $evaluation['summary'] }}</p>
                            @if (!empty($evaluation['warnings']))
                                <div class="alert alert-warning py-2 px-3 small">
                                    <ul class="mb-0 ps-3">
                                        @foreach ($evaluation['warnings'] as $warning)
                                            <li>{{ $warning }}</li>
                                        @endforeach
                                    </ul>
                                </div>
                            @endif
                            <div class="row g-3">
                                @foreach ($evaluation['checks'] as $label => $check)
                                    <div class="col-6 col-md-4 col-xl-2">
                                        <div class="border rounded-4 p-3 small h-100">
                                            <strong>{{ $label }}</strong><br>
                                            Input: {{ $check['value'] }}<br>
                                            Target: {{ $check['min'] }} - {{ $check['max'] }}<br>
                                            <span class="{{ $check['inRange'] ? 'text-success' : 'text-danger' }}">{{ $check['inRange'] ? 'In range' : 'Out of range' }}</span>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                            @if (!empty($evaluation['snailWarnings']))
                                <div class="mt-3">
                                    <h4 class="h6">Snail compatibility notes</h4>
                                    @foreach ($evaluation['snailWarnings'] as $warning)
                                        <div class="border rounded-4 p-3 small mb-2">
                                            <strong>{{ $warning['snail'] }}</strong> - {{ str_replace('_', ' ', $warning['level']) }}<br>
                                            {{ $warning['notes'] }}
                                        </div>
                                    @endforeach
                                </div>
                            @endif
                            <div class="mt-3 d-flex flex-wrap gap-2">
                                <a href="{{ route('products.show', $product) }}" class="btn btn-primary btn-sm">View product</a>
                            </div>
                        </div>
                    </div>
                </div>
            @empty
                <div class="col-12">
                    <div class="alert alert-info">No shrimp products are currently available to check.</div>
                </div>
            @endforelse
        </div>
    @endif
</div>
@endsection