@extends('layouts.admin')

@section('header')
    <h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight font-display tracking-tight">
        {{ __('Machine Management') }} > {{ __('Utilization Rate') }}
    </h2>
@endsection

@section('content')
<div class="space-y-8" x-data="utilizationDashboard()">
    <!-- Page Header & Global Discovery -->
    <div class="flex flex-col md:flex-row md:items-end md:justify-between gap-6">
        <div>
            <h1 class="text-4xl font-black text-slate-800 dark:text-white tracking-tighter font-display">{{ __('Fleet Performance') }}</h1>
            <p class="text-sm font-bold text-slate-500 dark:text-slate-400 mt-1 uppercase tracking-[0.2em]">{{ __('Utilization, OEE and Operational Intelligence') }}</p>
        </div>
        
        <!-- Global Date Filter -->
        <div class="flex items-center bg-white dark:bg-slate-900 rounded-2xl p-1.5 shadow-sm border border-slate-200 dark:border-slate-800 animate-luxury-in">
            <button @click="prevDay()" class="p-2 hover:bg-slate-50 dark:hover:bg-slate-800 rounded-xl transition-colors text-slate-400"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M15 19l-7-7 7-7" /></svg></button>
            <div class="px-4 text-sm font-black text-slate-700 dark:text-slate-200 font-mono tracking-tight" x-text="startDate"></div>
            <button @click="nextDay()" class="p-2 hover:bg-slate-50 dark:hover:bg-slate-800 rounded-xl transition-colors text-slate-400"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M9 5l7 7-7 7" /></svg></button>
        </div>
    </div>

    <!-- Fleet Summary Cards (Always visible) -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 animate-luxury-in">
        <!-- Avg OEE Card -->
        <div class="luxury-card p-8 rounded-3xl bg-white dark:bg-slate-900 border border-slate-100 dark:border-slate-800 relative group overflow-hidden shadow-lg">
            <p class="text-xs font-black text-slate-400 dark:text-slate-500 uppercase tracking-widest flex items-center gap-2 mb-4">
                <span class="w-2 h-2 rounded-full bg-cyan-500"></span>
                {{ __('Fleet Avg OEE') }}
            </p>
            <div class="flex items-baseline gap-2">
                <span class="text-6xl font-black text-slate-900 dark:text-white font-display tracking-tighter" x-text="fleetStats.avgOee">0</span>
                <span class="text-2xl font-black text-cyan-500/80">%</span>
            </div>
            <div class="mt-8 flex items-center justify-between text-[10px] font-bold uppercase tracking-widest text-slate-400">
                <span>{{ __('Target Performance') }}</span>
                <span class="text-emerald-500 text-xs">85%</span>
            </div>
        </div>

        <!-- Online Count Card -->
        <div class="luxury-card p-8 rounded-3xl bg-white dark:bg-slate-900 border border-slate-100 dark:border-slate-800 relative group overflow-hidden shadow-lg">
            <p class="text-xs font-black text-slate-400 dark:text-slate-500 uppercase tracking-widest flex items-center gap-2 mb-4">
                <span class="w-2 h-2 rounded-full bg-emerald-500 animate-pulse"></span>
                {{ __('Machines Online') }}
            </p>
            <div class="flex items-baseline gap-2">
                <span class="text-6xl font-black text-slate-900 dark:text-white font-display tracking-tighter" x-text="fleetStats.onlineCount">0</span>
                <span class="text-2xl font-black text-emerald-500/80">/ {{ count($machines) }}</span>
            </div>
            <div class="mt-8 flex items-center justify-between text-[10px] font-bold uppercase tracking-widest text-slate-400">
                <span>{{ __('Current Operational State') }}</span>
                <span class="text-emerald-500 text-xs">LIVE</span>
            </div>
        </div>

        <!-- Total Sales Card -->
        <div class="luxury-card p-8 rounded-3xl bg-white dark:bg-slate-900 border border-slate-100 dark:border-slate-800 relative group overflow-hidden shadow-lg">
            <p class="text-xs font-black text-slate-400 dark:text-slate-500 uppercase tracking-widest flex items-center gap-2 mb-4">
                <span class="w-2 h-2 rounded-full bg-amber-500"></span>
                {{ __('Total Daily Sales') }}
            </p>
            <div class="flex items-baseline gap-2">
                <span class="text-6xl font-black text-slate-900 dark:text-white font-display tracking-tighter" x-text="fleetStats.totalSales">0</span>
                <span class="text-2xl font-black text-amber-500/80">{{ __('Orders') }}</span>
            </div>
            <div class="mt-8 flex items-center justify-between text-[10px] font-bold uppercase tracking-widest text-slate-400">
                <span>{{ __('System Health') }}</span>
                <div class="flex items-center gap-1.5 text-rose-500">
                    <span class="w-1.5 h-1.5 rounded-full bg-rose-500"></span>
                    <span x-text="fleetStats.alertCount">0</span> Alerts
                </div>
            </div>
        </div>
    </div>

    <!-- Main Workspace -->
    <div class="grid grid-cols-1 lg:grid-cols-4 gap-8">
        
        <!-- Navigation: Machine Sidebar -->
        <div class="lg:col-span-1">
            <div class="luxury-card p-0 rounded-3xl overflow-hidden shadow-xl sticky top-24 border border-slate-100 dark:border-slate-800">
                <div class="p-6 border-b border-slate-50 dark:border-slate-800 bg-slate-50/50 dark:bg-slate-900/50">
                    <h3 class="text-xs font-black text-slate-400 uppercase tracking-widest">{{ __('Select Machine') }}</h3>
                </div>
                <div class="max-h-[500px] overflow-y-auto custom-scrollbar divide-y divide-slate-50 dark:divide-slate-800">
                    @foreach($machines as $machine)
                    <button @click="selectMachine('{{ $machine->id }}', '{{ $machine->serial_no }}', '{{ addslashes($machine->name) }}')"
                            :class="selectedMachineId == '{{ $machine->id }}' ? 'bg-cyan-500/5 dark:bg-cyan-500/10' : 'hover:bg-slate-50/80 dark:hover:bg-slate-800/40'"
                            class="w-full text-left p-6 transition-all duration-300 relative group">
                        <div x-show="selectedMachineId == '{{ $machine->id }}'" class="absolute inset-y-0 left-0 w-1 bg-cyan-500 rounded-r-full"></div>
                        <div class="flex items-center gap-4">
                            <div class="flex-shrink-0 relative">
                                <div :class="selectedMachineId == '{{ $machine->id }}' ? 'bg-cyan-500 shadow-cyan-500/20' : 'bg-slate-100 dark:bg-slate-800'"
                                     class="w-12 h-12 rounded-2xl flex items-center justify-center transition-all duration-500 shadow-lg group-hover:scale-110">
                                    <svg class="w-6 h-6" :class="selectedMachineId == '{{ $machine->id }}' ? 'text-white' : 'text-slate-400'" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5"><path d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" /></svg>
                                </div>
                                <span class="absolute -top-1 -right-1 w-3 h-3 rounded-full border-2 border-white dark:border-slate-900" 
                                      :class="'{{ $machine->status }}' === 'online' ? 'bg-emerald-500' : 'bg-slate-400'"></span>
                            </div>
                            <div class="min-w-0">
                                <div class="text-sm font-black text-slate-800 dark:text-slate-100 truncate tracking-tight" :class="selectedMachineId == '{{ $machine->id }}' ? 'text-cyan-600 dark:text-cyan-400' : ''">{{ $machine->name }}</div>
                                <div class="text-[10px] font-mono font-bold text-slate-400 uppercase tracking-[0.2em] mt-0.5">{{ $machine->serial_no }}</div>
                            </div>
                        </div>
                    </button>
                    @endforeach
                </div>
            </div>
        </div>

        <!-- Detail: Metrics & Insights -->
        <div class="lg:col-span-3 space-y-8">
            
            <template x-if="selectedMachineId">
                <div class="animate-luxury-in space-y-8">
                    <!-- OEE Triple Gauges -->
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                        <div class="luxury-card p-6 rounded-3xl text-center">
                            <div id="gauge-availability" class="mx-auto h-40"></div>
                            <h4 class="text-[10px] font-black text-slate-400 uppercase tracking-widest -mt-4">{{ __('Availability') }}</h4>
                        </div>
                        <div class="luxury-card p-6 rounded-3xl text-center">
                            <div id="gauge-performance" class="mx-auto h-40"></div>
                            <h4 class="text-[10px] font-black text-slate-400 uppercase tracking-widest -mt-4">{{ __('Performance') }}</h4>
                        </div>
                        <div class="luxury-card p-6 rounded-3xl text-center">
                            <div id="gauge-quality" class="mx-auto h-40"></div>
                            <h4 class="text-[10px] font-black text-slate-400 uppercase tracking-widest -mt-4">{{ __('Quality') }}</h4>
                        </div>
                    </div>

                    <!-- Unified Timeline Chart -->
                    <div class="luxury-card p-8 rounded-3xl relative overflow-hidden">
                        <div class="flex items-center justify-between mb-8">
                            <div>
                                <h3 class="text-xl font-black text-slate-800 dark:text-white tracking-tight">{{ __('Unified Operational Timeline') }}</h3>
                                <p class="text-[10px] font-bold text-slate-500 uppercase tracking-widest mt-1">{{ __('Connectivity vs Sales Correlation') }}</p>
                            </div>
                            <div class="flex items-center gap-4">
                                <div class="flex items-center gap-2">
                                    <span class="w-3 h-1 rounded-full bg-cyan-500"></span>
                                    <span class="text-[10px] font-black text-slate-400 uppercase tracking-widest">連線狀態</span>
                                </div>
                                <div class="flex items-center gap-2">
                                    <span class="w-3 h-3 rounded-full bg-amber-500"></span>
                                    <span class="text-[10px] font-black text-slate-400 uppercase tracking-widest">銷售事件</span>
                                </div>
                            </div>
                        </div>
                        
                        <div id="unified-timeline" class="w-full min-h-[350px]"></div>
                        
                        <div x-show="loading" class="absolute inset-0 bg-white/60 dark:bg-slate-900/60 backdrop-blur-[2px] z-20 flex items-center justify-center">
                            <div class="flex flex-col items-center gap-3">
                                <div class="w-8 h-8 border-4 border-cyan-500/20 border-t-cyan-500 rounded-full animate-spin"></div>
                                <span class="text-[10px] font-black text-slate-400 uppercase tracking-widest">Aggregating intelligence...</span>
                            </div>
                        </div>
                    </div>
                </div>
            </template>

            <!-- Initial State -->
            <template x-if="!selectedMachineId">
                <div class="luxury-card p-24 rounded-3xl flex flex-col items-center justify-center text-center opacity-80 border-dashed border-2 border-slate-200 dark:border-slate-800">
                    <div class="w-24 h-24 rounded-full bg-slate-50 dark:bg-slate-800/50 flex items-center justify-center mb-8">
                        <svg class="w-12 h-12 text-slate-300 dark:text-slate-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-2.123-7.947c-2.333 0-4.66.307-6.877.914m-1.5-3.619l1.125-1.125m0 0l1.125 1.125m-1.125-1.125V3h-.75m-6.75 4.5V3h-.75m2.25 13.5v3.25a2.25 2.25 0 01-2.25 2.25h-5.25a2.25 2.25 0 01-2.25-2.25V5.25A2.25 2.25 0 015.25 3H12m1.5 12l1.125-1.125m0 0l1.125 1.125m-1.125-1.125V18" /></svg>
                    </div>
                    <h3 class="text-2xl font-black text-slate-400 dark:text-slate-600 tracking-tighter">{{ __('Select a machine to deep dive') }}</h3>
                    <p class="text-sm font-bold text-slate-400 mt-2 uppercase tracking-widest">{{ __('Real-time OEE analysis awaits') }}</p>
                </div>
            </template>

        </div>
    </div>
</div>

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<script>
function utilizationDashboard() {
    return {
        selectedMachineId: '',
        selectedMachineSn: '',
        selectedMachineName: '',
        startDate: new Date().toISOString().split('T')[0],
        loading: false,
        fleetStats: { avgOee: 0, onlineCount: 0, totalSales: 0, alertCount: 0 },
        charts: {},

        prevDay() {
            let d = new Date(this.startDate);
            d.setDate(d.getDate() - 1);
            this.startDate = d.toISOString().split('T')[0];
            this.fetchData();
        },
        nextDay() {
            let d = new Date(this.startDate);
            d.setDate(d.getDate() + 1);
            this.startDate = d.toISOString().split('T')[0];
            this.fetchData();
        },

        init() {
            // Fleet stats from server/mock
            this.fleetStats = {
                avgOee: 72.4,
                onlineCount: Number("{{ count($machines->where('status', 'online')) }}") || 0,
                totalSales: 128,
                alertCount: 3
            };
        },

        selectMachine(id, sn, name) {
            this.selectedMachineId = id;
            this.selectedMachineSn = sn;
            this.selectedMachineName = name;
            this.fetchData();
        },

        async fetchData() {
            if (!this.selectedMachineId) return;
            this.loading = true;
            
            try {
                const response = await fetch(`/admin/machines/${this.selectedMachineId}/utilization-ajax?date=${this.startDate}`);
                const result = await response.json();
                
                if (result.success) {
                    const stats = result.data.overview;
                    const chartData = result.data.chart;

                    this.$nextTick(() => {
                        this.renderGauges(stats);
                        this.renderTimeline(chartData);
                    });
                }
            } catch (error) {
                console.error('Failed to fetch utilization data:', error);
            } finally {
                this.loading = false;
            }
        },

        renderGauges({availability, performance, quality}) {
            const isDark = document.documentElement.classList.contains('dark');
            const trackColor = isDark ? '#1e293b' : '#f1f5f9';
            
            const createGauge = (id, value, color) => {
                const el = document.querySelector(`#${id}`);
                if (!el) return;
                if (this.charts[id]) this.charts[id].destroy();
                
                const options = {
                    series: [value],
                    chart: { height: 200, type: 'radialBar', sparkline: { enabled: true } },
                    plotOptions: {
                        radialBar: {
                            hollow: { size: '65%' },
                            dataLabels: {
                                name: { show: false },
                                value: { 
                                    offsetY: 10, 
                                    fontSize: '22px', 
                                    fontWeight: 900, 
                                    fontFamily: 'Outfit',
                                    color: isDark ? '#fff' : '#1e293b',
                                    formatter: (v) => v + '%'
                                }
                            },
                            track: { background: trackColor }
                        }
                    },
                    colors: [color],
                    stroke: { lineCap: 'round' }
                };
                this.charts[id] = new ApexCharts(el, options);
                this.charts[id].render();
            };

            createGauge('gauge-availability', availability, '#06b6d4');
            createGauge('gauge-performance', performance, '#f59e0b');
            createGauge('gauge-quality', quality, '#10b981');
        },

        renderTimeline(chartData) {
            const el = document.querySelector("#unified-timeline");
            if (!el) return;
            if (this.charts['timeline']) this.charts['timeline'].destroy();
            
            const isDark = document.documentElement.classList.contains('dark');
            
            const options = {
                series: [
                    {
                        name: '{{ __("OEE.Activity") }}',
                        type: 'rangeBar',
                        data: chartData.uptime || []
                    },
                    {
                        name: '{{ __("OEE.Sales") }}',
                        type: 'scatter',
                        data: chartData.sales || []
                    }
                ],
                chart: { 
                    height: 350, 
                    toolbar: { show: false }, 
                    background: 'transparent',
                    fontFamily: 'Outfit'
                },
                plotOptions: { 
                    bar: { 
                        horizontal: true, 
                        barHeight: '40%',
                        rangeBarGroupRows: true
                    } 
                },
                xaxis: { 
                    type: 'datetime', 
                    labels: { style: { colors: isDark ? '#94a3b8' : '#64748b', fontWeight: 700 } } 
                },
                yaxis: {
                    labels: { style: { colors: isDark ? '#94a3b8' : '#64748b', fontWeight: 700 } }
                },
                markers: { size: 6, colors: ['#f59e0b'], strokeColors: '#fff', strokeWidth: 2 },
                grid: { borderColor: isDark ? '#1e293b' : '#f1f5f9', strokeDashArray: 4 },
                legend: { show: false },
                tooltip: { 
                    theme: isDark ? 'dark' : 'light',
                    x: { format: 'HH:mm' }
                },
                noData: {
                    text: '{{ __("No machines available") }}',
                    align: 'center',
                    verticalAlign: 'middle',
                    style: { color: isDark ? '#475569' : '#94a3b8', fontSize: '14px', fontFamily: 'Outfit' }
                }
            };
            this.charts['timeline'] = new ApexCharts(el, options);
            this.charts['timeline'].render();
        }
    }
}
</script>
@endpush
@endsection