@extends('layouts.app')

@section('title', 'System Sizer II - Recommendations')

@section('content')
<div class="container mx-auto px-4 py-8">
    <div class="mb-8">
        <div class="flex items-center justify-between">
            <div>
                <h1 class="text-3xl font-bold text-gray-800">Recommendations</h1>
                <p class="text-gray-600 mt-2">Based on water test conditions</p>
            </div>
            <a href="{{ route('admin.system-sizer.index') }}" class="bg-gray-600 text-white py-2 px-4 rounded-md hover:bg-gray-700 transition">
                New Test
            </a>
        </div>
    </div>

    {{-- Water Conditions Summary --}}
    <div class="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-8">
        <h2 class="text-lg font-semibold text-blue-800 mb-2">Water Conditions</h2>
        <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4 text-sm">
            @if($conditions->hardnessGpg !== null)
                <div><span class="font-medium text-gray-700">Hardness:</span> {{ $conditions->hardnessGpg }} gpg</div>
            @endif
            @if($conditions->ironPpm !== null)
                <div><span class="font-medium text-gray-700">Iron:</span> {{ $conditions->ironPpm }} ppm</div>
            @endif
            @if($conditions->manganesePpm !== null)
                <div><span class="font-medium text-gray-700">Manganese:</span> {{ $conditions->manganesePpm }} ppm</div>
            @endif
            @if($conditions->tanninPpm !== null)
                <div><span class="font-medium text-gray-700">Tannin:</span> {{ $conditions->tanninPpm }} ppm</div>
            @endif
            @if($conditions->ph !== null)
                <div><span class="font-medium text-gray-700">pH:</span> {{ $conditions->ph }}</div>
            @endif
            @if($conditions->tdsPpm !== null)
                <div><span class="font-medium text-gray-700">TDS:</span> {{ $conditions->tdsPpm }} ppm</div>
            @endif
            @if($conditions->ammoniaPpm !== null)
                <div><span class="font-medium text-gray-700">Ammonia:</span> {{ $conditions->ammoniaPpm }} ppm</div>
            @endif
            @if($conditions->arsenicPpb !== null)
                <div><span class="font-medium text-gray-700">Arsenic:</span> {{ $conditions->arsenicPpb }} ppb</div>
            @endif
            @if($conditions->pfoas)
                <div><span class="font-medium text-gray-700">PFOAs:</span> Detected</div>
            @endif
            @if($conditions->glyphosate)
                <div><span class="font-medium text-gray-700">Glyphosate:</span> Detected</div>
            @endif
            @if($conditions->chromiumVi)
                <div><span class="font-medium text-gray-700">Chromium-VI:</span> Detected</div>
            @endif
        </div>
    </div>

    {{-- Recommendations --}}
    @if($recommendations->isEmpty())
        <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-6 text-center">
            <p class="text-yellow-800 text-lg">No matching systems found for the given water conditions.</p>
            <a href="{{ route('admin.system-sizer.index') }}" class="mt-4 inline-block text-blue-600 hover:underline">Try different conditions</a>
        </div>
    @else
        <div class="space-y-6">
            @foreach($recommendations as $rec)
                <div class="bg-white rounded-lg shadow-md overflow-hidden border {{ $loop->first ? 'border-green-400 border-2' : 'border-gray-200' }}">
                    @if($loop->first)
                        <div class="bg-green-500 text-white px-4 py-1 text-sm font-semibold">
                            TOP RECOMMENDATION
                        </div>
                    @endif

                    <div class="p-6">
                        <div class="flex items-start justify-between mb-4">
                            <div>
                                <h3 class="text-xl font-bold text-gray-800">{{ $rec->system->name }}</h3>
                                <p class="text-sm text-gray-500">{{ $rec->system->system_id }} | {{ $rec->system->type }}</p>
                            </div>
                            <div class="text-right">
                                <div class="inline-block px-3 py-1 rounded-full text-sm font-semibold
                                    {{ $rec->matchScore >= 80 ? 'bg-green-100 text-green-800' : ($rec->matchScore >= 50 ? 'bg-yellow-100 text-yellow-800' : 'bg-red-100 text-red-800') }}">
                                    {{ $rec->matchScore }}% Match
                                </div>
                            </div>
                        </div>

                        <p class="text-gray-600 text-sm mb-4">{{ $rec->system->description }}</p>

                        <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
                            <div class="bg-gray-50 rounded p-3">
                                <div class="text-xs text-gray-500 uppercase">Tanks</div>
                                <div class="font-semibold text-gray-800">{{ $rec->system->getTankDescription() }}</div>
                            </div>
                            <div class="bg-gray-50 rounded p-3">
                                <div class="text-xs text-gray-500 uppercase">Media</div>
                                <div class="font-semibold text-gray-800 text-sm">{{ $rec->system->media_type }}</div>
                            </div>
                            <div class="bg-gray-50 rounded p-3">
                                <div class="text-xs text-gray-500 uppercase">Regeneration</div>
                                <div class="font-semibold text-gray-800">{{ ucfirst($rec->system->regeneration_type) }}</div>
                            </div>
                        </div>

                        {{-- Matched Contaminants --}}
                        @if(!empty($rec->matchedContaminants))
                            <div class="mb-3">
                                <h4 class="text-sm font-semibold text-green-700 mb-2">Treats:</h4>
                                <div class="flex flex-wrap gap-2">
                                    @foreach($rec->matchedContaminants as $matched)
                                        <span class="inline-block bg-green-100 text-green-800 text-xs px-2 py-1 rounded">
                                            {{ $matched }}
                                        </span>
                                    @endforeach
                                </div>
                            </div>
                        @endif

                        {{-- Unmatched Contaminants --}}
                        @if(!empty($rec->unmatchedContaminants))
                            <div class="mb-3">
                                <h4 class="text-sm font-semibold text-red-700 mb-2">Not Addressed:</h4>
                                <div class="flex flex-wrap gap-2">
                                    @foreach($rec->unmatchedContaminants as $unmatched)
                                        <span class="inline-block bg-red-100 text-red-800 text-xs px-2 py-1 rounded">
                                            {{ $unmatched }}
                                        </span>
                                    @endforeach
                                </div>
                            </div>
                        @endif

                        {{-- Notes --}}
                        @if(!empty($rec->notes))
                            <div class="bg-amber-50 border border-amber-200 rounded p-3 mb-4">
                                <h4 class="text-sm font-semibold text-amber-800 mb-1">Notes:</h4>
                                <p class="text-sm text-amber-700">{{ $rec->notes }}</p>
                            </div>
                        @endif

                        {{-- Valve Programming --}}
                        <div class="border-t pt-4 mt-4">
                            <h4 class="text-sm font-semibold text-gray-700 mb-2">Valve Programming ({{ $rec->system->valve_type }})</h4>
                            <div class="grid grid-cols-2 md:grid-cols-4 gap-3 text-sm">
                                <div>
                                    <span class="text-gray-500">Backwash:</span>
                                    <span class="font-medium">{{ $rec->system->backwash_min }} min</span>
                                </div>
                                <div>
                                    <span class="text-gray-500">Brine Draw:</span>
                                    <span class="font-medium">{{ $rec->system->brine_draw_slow_rinse_min }} min</span>
                                </div>
                                <div>
                                    <span class="text-gray-500">Rapid Rinse:</span>
                                    <span class="font-medium">{{ $rec->system->rapid_rinse_min }} min</span>
                                </div>
                                <div>
                                    <span class="text-gray-500">Brine Fill:</span>
                                    <span class="font-medium">{{ $rec->system->brine_fill_min }} min</span>
                                </div>
                                <div>
                                    <span class="text-gray-500">Injector:</span>
                                    <span class="font-medium">{{ $rec->system->injector_color }} ({{ $rec->system->injector_gpm }} GPM)</span>
                                </div>
                                <div>
                                    <span class="text-gray-500">Salt:</span>
                                    <span class="font-medium">{{ $rec->system->salt_per_regeneration_lbs }} lbs</span>
                                </div>
                                <div>
                                    <span class="text-gray-500">Brine Tank:</span>
                                    <span class="font-medium">{{ $rec->system->brine_tank_size }}</span>
                                </div>
                                <div>
                                    <span class="text-gray-500">Regen Time:</span>
                                    <span class="font-medium">{{ $rec->system->regen_time }}</span>
                                </div>
                            </div>
                            @if($rec->system->valve_notes)
                                <p class="text-xs text-gray-500 mt-2">{{ $rec->system->valve_notes }}</p>
                            @endif
                        </div>

                        <div class="mt-4">
                            <a href="{{ route('admin.system-sizer.systems.show', $rec->system) }}" class="text-blue-600 hover:underline text-sm">
                                View Full System Details &rarr;
                            </a>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    @endif
</div>
@endsection