@extends('layouts.app')

@section('title', 'Sensor Analytics - ' . $sensor->device_uuid)

@section('content')
<div class="container mx-auto px-4 py-6">
    <div class="flex justify-between items-center mb-6">
        <div>
            <h1 class="text-2xl font-semibold text-gray-900">Sensor Analytics</h1>
            <p class="text-gray-600">{{ $sensor->device_uuid }}</p>
        </div>
        <div class="flex space-x-3">
            <a href="{{ route('sensors.show', $sensor->id) }}" class="inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">
                <svg class="-ml-1 mr-2 h-5 w-5 text-gray-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
                </svg>
                Back to Details
            </a>
        </div>
    </div>

    <div class="bg-white shadow-md rounded-lg overflow-hidden mb-6">
        <div class="px-6 py-4 border-b border-gray-200">
            <h2 class="text-lg font-medium text-gray-900">Sensor Information</h2>
        </div>
        <div class="p-6">
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
                <div class="bg-gray-50 rounded-lg p-4">
                    <h3 class="text-sm font-medium text-gray-500">Current Gas Level</h3>
                    <div class="mt-1 flex items-baseline">
                        <p class="text-2xl font-semibold text-gray-900">{{ $sensor->last_gas_level ?? 'N/A' }}%</p>
                    </div>
                </div>
                <div class="bg-gray-50 rounded-lg p-4">
                    <h3 class="text-sm font-medium text-gray-500">Daily Consumption Rate</h3>
                    <div class="mt-1 flex items-baseline">
                        <p class="text-2xl font-semibold text-gray-900">{{ number_format($consumptionRate, 2) }}%</p>
                        <p class="ml-2 text-sm text-gray-500">per day</p>
                    </div>
                </div>
                <div class="bg-gray-50 rounded-lg p-4">
                    <h3 class="text-sm font-medium text-gray-500">Estimated Days Until Empty</h3>
                    <div class="mt-1 flex items-baseline">
                        <p class="text-2xl font-semibold text-gray-900">{{ $daysUntilEmpty ?? 'N/A' }}</p>
                        <p class="ml-2 text-sm text-gray-500">days</p>
                    </div>
                </div>
                <div class="bg-gray-50 rounded-lg p-4">
                    <h3 class="text-sm font-medium text-gray-500">Battery Level</h3>
                    <div class="mt-1 flex items-baseline">
                        <p class="text-2xl font-semibold text-gray-900">{{ $sensor->battery_level ?? 'N/A' }}%</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
        <div class="bg-white shadow-md rounded-lg overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-200">
                <h2 class="text-lg font-medium text-gray-900">Gas Level History (30 Days)</h2>
            </div>
            <div class="p-6">
                <canvas id="gasLevelChart" height="300"></canvas>
            </div>
        </div>
        <div class="bg-white shadow-md rounded-lg overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-200">
                <h2 class="text-lg font-medium text-gray-900">Battery Level History (30 Days)</h2>
            </div>
            <div class="p-6">
                <canvas id="batteryLevelChart" height="300"></canvas>
            </div>
        </div>
    </div>

    <div class="bg-white shadow-md rounded-lg overflow-hidden mb-6">
        <div class="px-6 py-4 border-b border-gray-200">
            <h2 class="text-lg font-medium text-gray-900">Usage Patterns (By Hour)</h2>
        </div>
        <div class="p-6">
            <canvas id="usagePatternsChart" height="300"></canvas>
        </div>
    </div>

    <div class="bg-white shadow-md rounded-lg overflow-hidden">
        <div class="px-6 py-4 border-b border-gray-200">
            <h2 class="text-lg font-medium text-gray-900">Predictive Analysis</h2>
        </div>
        <div class="p-6">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <h3 class="text-md font-medium text-gray-700 mb-2">Refill Prediction</h3>
                    <p class="text-gray-600">
                        @if($daysUntilEmpty)
                            Based on current usage patterns, this cylinder will need a refill in approximately <strong>{{ $daysUntilEmpty }} days</strong>.
                            @if($daysUntilEmpty < 7)
                                <span class="text-red-600 font-medium">Consider scheduling a refill soon.</span>
                            @elseif($daysUntilEmpty < 14)
                                <span class="text-yellow-600 font-medium">Plan for a refill in the coming weeks.</span>
                            @else
                                <span class="text-green-600 font-medium">No immediate refill needed.</span>
                            @endif
                        @else
                            Not enough data to predict refill timing. Continue monitoring for more accurate predictions.
                        @endif
                    </p>
                </div>
                <div>
                    <h3 class="text-md font-medium text-gray-700 mb-2">Usage Insights</h3>
                    <p class="text-gray-600">
                        @if($consumptionRate > 0)
                            This cylinder is being consumed at a rate of <strong>{{ number_format($consumptionRate, 2) }}% per day</strong>.
                            @if($consumptionRate > 5)
                                <span class="text-red-600 font-medium">This is higher than average consumption.</span>
                            @elseif($consumptionRate > 2)
                                <span class="text-yellow-600 font-medium">This is average consumption.</span>
                            @else
                                <span class="text-green-600 font-medium">This is lower than average consumption.</span>
                            @endif
                        @else
                            Not enough data to analyze consumption patterns. Continue monitoring for more insights.
                        @endif
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Gas Level Chart
        const gasLevelCtx = document.getElementById('gasLevelChart').getContext('2d');
        new Chart(gasLevelCtx, {
            type: 'line',
            data: {
                labels: {!! json_encode($gasLevelData->pluck('date')) !!},
                datasets: [{
                    label: 'Average Gas Level (%)',
                    data: {!! json_encode($gasLevelData->pluck('average_level')) !!},
                    backgroundColor: 'rgba(75, 192, 192, 0.2)',
                    borderColor: 'rgba(75, 192, 192, 1)',
                    borderWidth: 2,
                    tension: 0.1
                }]
            },
            options: {
                scales: {
                    y: {
                        beginAtZero: true,
                        max: 100
                    }
                },
                plugins: {
                    tooltip: {
                        callbacks: {
                            label: function(context) {
                                return `Gas Level: ${context.parsed.y.toFixed(1)}%`;
                            }
                        }
                    }
                }
            }
        });

        // Battery Level Chart
        const batteryLevelCtx = document.getElementById('batteryLevelChart').getContext('2d');
        new Chart(batteryLevelCtx, {
            type: 'line',
            data: {
                labels: {!! json_encode($batteryLevelData->pluck('date')) !!},
                datasets: [{
                    label: 'Average Battery Level (%)',
                    data: {!! json_encode($batteryLevelData->pluck('average_level')) !!},
                    backgroundColor: 'rgba(54, 162, 235, 0.2)',
                    borderColor: 'rgba(54, 162, 235, 1)',
                    borderWidth: 2,
                    tension: 0.1
                }]
            },
            options: {
                scales: {
                    y: {
                        beginAtZero: true,
                        max: 100
                    }
                },
                plugins: {
                    tooltip: {
                        callbacks: {
                            label: function(context) {
                                return `Battery Level: ${context.parsed.y.toFixed(1)}%`;
                            }
                        }
                    }
                }
            }
        });

        // Usage Patterns Chart
        const usagePatternsCtx = document.getElementById('usagePatternsChart').getContext('2d');
        new Chart(usagePatternsCtx, {
            type: 'bar',
            data: {
                labels: {!! json_encode($usagePatterns->pluck('hour')) !!},
                datasets: [{
                    label: 'Average Gas Level (%)',
                    data: {!! json_encode($usagePatterns->pluck('average_level')) !!},
                    backgroundColor: 'rgba(153, 102, 255, 0.2)',
                    borderColor: 'rgba(153, 102, 255, 1)',
                    borderWidth: 1
                }]
            },
            options: {
                scales: {
                    y: {
                        beginAtZero: true,
                        max: 100
                    },
                    x: {
                        title: {
                            display: true,
                            text: 'Hour of Day (24h format)'
                        }
                    }
                },
                plugins: {
                    tooltip: {
                        callbacks: {
                            title: function(context) {
                                const hour = context[0].label;
                                return `Hour: ${hour}:00`;
                            },
                            label: function(context) {
                                return `Gas Level: ${context.parsed.y.toFixed(1)}%`;
                            }
                        }
                    }
                }
            }
        });
    });
</script>
@endpush
@endsection