@extends('layouts.app')

@section('title', 'Farmer Dashboard - AgroSmart Pro')

@section('content')
<div class="space-y-8">
    <!-- Welcome Header -->
    <div class="bg-gradient-to-r from-green-600 to-blue-600 rounded-2xl p-8 text-white shadow-lg">
        <h1 class="text-4xl font-bold mb-2">👋 Welcome, {{ auth()->user()->name }}!</h1>
        <p class="text-lg text-green-100">{{ auth()->user()->district ?? 'Bangladesh' }} • {{ auth()->user()->phone ?? 'No phone' }}</p>
    </div>

    <!-- Quick Stats -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
        <div class="bg-white rounded-xl shadow-lg p-6 border-l-4 border-green-600 hover:shadow-xl transition">
            <div class="flex justify-between items-start">
                <div>
                    <p class="text-sm font-semibold text-gray-600 uppercase">Active Crops</p>
                    <p class="text-4xl font-bold text-green-600 mt-2">{{ $stats['active_crops'] }}</p>
                    <p class="text-xs text-gray-500 mt-2">out of {{ $stats['total_crops'] }} total</p>
                </div>
                <i class="fas fa-leaf text-4xl text-green-200"></i>
            </div>
        </div>

        <div class="bg-white rounded-xl shadow-lg p-6 border-l-4 border-blue-600 hover:shadow-xl transition">
            <div class="flex justify-between items-start">
                <div>
                    <p class="text-sm font-semibold text-gray-600 uppercase">Disease Scans</p>
                    <p class="text-4xl font-bold text-blue-600 mt-2">{{ $stats['total_scans'] }}</p>
                    <p class="text-xs text-gray-500 mt-2">{{ $stats['disease_detected'] }} detected</p>
                </div>
                <i class="fas fa-microscope text-4xl text-blue-200"></i>
            </div>
        </div>

        <div class="bg-white rounded-xl shadow-lg p-6 border-l-4 border-red-600 hover:shadow-xl transition">
            <div class="flex justify-between items-start">
                <div>
                    <p class="text-sm font-semibold text-gray-600 uppercase">Product Checks</p>
                    <p class="text-4xl font-bold text-red-600 mt-2">{{ $stats['total_checks'] }}</p>
                    <p class="text-xs text-gray-500 mt-2">{{ $stats['fake_products'] }} suspicious</p>
                </div>
                <i class="fas fa-shield-alt text-4xl text-red-200"></i>
            </div>
        </div>

        <div class="bg-white rounded-xl shadow-lg p-6 border-l-4 border-purple-600 hover:shadow-xl transition">
            <div class="flex justify-between items-start">
                <div>
                    <p class="text-sm font-semibold text-gray-600 uppercase">Alerts</p>
                    <p class="text-4xl font-bold text-purple-600 mt-2">{{ $stats['unread_alerts'] }}</p>
                    <p class="text-xs text-gray-500 mt-2">unread notifications</p>
                </div>
                <i class="fas fa-bell text-4xl text-purple-200"></i>
            </div>
        </div>
    </div>

    <!-- Action Cards -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
        <a href="{{ route('disease.index') }}" class="bg-white rounded-xl shadow-lg p-8 hover:shadow-2xl transition text-center group">
            <div class="text-6xl mb-4 group-hover:scale-110 transition">🔬</div>
            <h3 class="text-2xl font-bold text-gray-900 mb-2">Disease Detection</h3>
            <p class="text-gray-600">Upload crop image for AI analysis</p>
        </a>

        <a href="{{ route('product.index') }}" class="bg-white rounded-xl shadow-lg p-8 hover:shadow-2xl transition text-center group">
            <div class="text-6xl mb-4 group-hover:scale-110 transition">🛡️</div>
            <h3 class="text-2xl font-bold text-gray-900 mb-2">Fake Product Check</h3>
            <p class="text-gray-600">Verify product authenticity</p>
        </a>

        <a href="{{ route('chat.index') }}" class="bg-white rounded-xl shadow-lg p-8 hover:shadow-2xl transition text-center group relative">
            <div class="text-6xl mb-4 group-hover:scale-110 transition">💬</div>
            <h3 class="text-2xl font-bold text-gray-900 mb-2">Live Chat</h3>
            <p class="text-gray-600">Connect with officers</p>
            @if($stats['pending_chats'] > 0)
                <span class="absolute top-4 right-4 bg-red-500 text-white px-3 py-1 rounded-full text-sm font-bold">{{ $stats['pending_chats'] }}</span>
            @endif
        </a>
    </div>

    <!-- Recent Activity -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <!-- Recent Crops -->
        <div class="bg-white rounded-xl shadow-lg p-6">
            <h2 class="text-2xl font-bold text-gray-900 mb-6 flex items-center space-x-2">
                <i class="fas fa-leaf text-green-600"></i>
                <span>Recent Crops</span>
            </h2>
            <div class="space-y-4">
                @forelse($recentActivity['crops'] as $crop)
                    <div class="flex items-center justify-between p-4 bg-gray-50 rounded-lg hover:bg-green-50 transition">
                        <div>
                            <h3 class="font-bold text-gray-900">{{ $crop->crop_name }}</h3>
                            <p class="text-sm text-gray-600">{{ $crop->crop_name_bn }} • {{ $crop->land_size_decimal }} শতক</p>
                            <div class="flex items-center space-x-2 mt-2">
                                <span class="px-2 py-1 bg-blue-100 text-blue-700 text-xs rounded-full">{{ ucfirst($crop->status) }}</span>
                                <span class="text-xs text-gray-500">{{ $crop->created_at->diffForHumans() }}</span>
                            </div>
                        </div>
                        <div class="text-right">
                            <p class="text-sm font-semibold text-gray-900">৳{{ $crop->investment_cost ?? '0' }}</p>
                        </div>
                    </div>
                @empty
                    <p class="text-center text-gray-500 py-8">No crops added yet</p>
                @endforelse
            </div>
        </div>

        <!-- Recent Alerts -->
        <div class="bg-white rounded-xl shadow-lg p-6">
            <h2 class="text-2xl font-bold text-gray-900 mb-6 flex items-center space-x-2">
                <i class="fas fa-exclamation-triangle text-red-600"></i>
                <span>Recent Alerts</span>
            </h2>
            <div class="space-y-4">
                @forelse($recentActivity['alerts'] as $alert)
                    <div class="flex items-start space-x-3 p-4 bg-gray-50 rounded-lg border-l-4 border-{{ $alert->severity_level === 'critical' ? 'red' : ($alert->severity_level === 'high' ? 'orange' : 'yellow') }}-500">
                        <div class="text-2xl">
                            @if($alert->severity_level === 'critical')
                                🚨
                            @elseif($alert->severity_level === 'high')
                                ⚠️
                            @else
                                ℹ️
                            @endif
                        </div>
                        <div class="flex-1">
                            <h3 class="font-bold text-gray-900">{{ $alert->title }}</h3>
                            <p class="text-sm text-gray-600 mt-1">{{ $alert->message }}</p>
                            <p class="text-xs text-gray-500 mt-2">{{ $alert->created_at->diffForHumans() }}</p>
                        </div>
                    </div>
                @empty
                    <p class="text-center text-gray-500 py-8">No alerts</p>
                @endforelse
            </div>
        </div>
    </div>

    <!-- Weather Widget -->
    <div class="bg-gradient-to-br from-blue-400 to-blue-600 rounded-2xl shadow-lg p-8 text-white">
        <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
            <div>
                <h2 class="text-3xl font-bold mb-2">🌦️ Weather Update</h2>
                <p class="text-blue-100" id="weatherLocation">Loading...</p>
                <div class="mt-6 space-y-3">
                    <div class="flex justify-between">
                        <span>Temperature:</span>
                        <span id="weatherTemp" class="font-bold text-2xl">--°C</span>
                    </div>
                    <div class="flex justify-between">
                        <span>Humidity:</span>
                        <span id="weatherHumidity" class="font-bold">--%</span>
                    </div>
                    <div class="flex justify-between">
                        <span>Condition:</span>
                        <span id="weatherCondition" class="font-bold">--</span>
                    </div>
                </div>
            </div>
            <div class="flex items-center justify-center">
                <div class="text-center">
                    <div class="text-8xl mb-4">⛅</div>
                    <button onclick="refreshWeather()" class="px-6 py-2 bg-white text-blue-600 rounded-lg font-bold hover:bg-blue-50 transition">
                        <i class="fas fa-sync"></i> Refresh
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

@push('scripts')
<script>
function refreshWeather() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition((position) => {
            const lat = position.coords.latitude;
            const lon = position.coords.longitude;
            
            axios.post('/api/weather/current', {
                latitude: lat,
                longitude: lon,
                district: '{{ auth()->user()->district }}'
            }).then(res => {
                if (res.data.success) {
                    document.getElementById('weatherLocation').textContent = res.data.location.name;
                    document.getElementById('weatherTemp').textContent = res.data.current.temperature + '°C';
                    document.getElementById('weatherHumidity').textContent = res.data.current.humidity + '%';
                    document.getElementById('weatherCondition').textContent = res.data.current.condition_bn;
                }
            }).catch(err => console.error('Weather error:', err));
        });
    }
}

// Load weather on page load
window.addEventListener('load', refreshWeather);
</script>
@endpush