@extends('layouts.app')

@section('title', 'Dashboard - Todo Management System')

@section('content')
<div x-data="dashboard">
    <!-- Page Header -->
    <div class="mb-6 sm:mb-8 flex flex-col sm:flex-row sm:justify-between sm:items-start gap-4">
        <div>
            <h1 class="text-2xl sm:text-3xl font-bold text-gray-900 dark:text-white">Dashboard</h1>
            <p class="mt-2 text-sm sm:text-base text-gray-600 dark:text-gray-400">Projelerinizin ve görevlerinizin genel durumunu görüntüleyin</p>
        </div>
        <button @click="refreshDashboard()" class="btn-secondary self-start sm:self-auto">
            <span class="mr-2">🔄</span>
            <span class="hidden sm:inline">Yenile</span>
            <span class="sm:hidden">Yenile</span>
        </button>
    </div>

    <!-- Statistics Cards -->
    <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4 mb-8">
        <!-- Total Projects -->
        <div class="card">
            <div class="flex items-center">
                <div class="flex-shrink-0">
                    <div class="w-8 h-8 bg-blue-500 rounded-md flex items-center justify-center">
                        <span class="text-white text-sm font-medium">📁</span>
                    </div>
                </div>
                <div class="ml-4">
                    <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Toplam Proje</p>
                    <p class="text-2xl font-semibold text-gray-900 dark:text-white" x-text="stats.totalProjects">0</p>
                </div>
            </div>
        </div>

        <!-- Active Projects -->
        <div class="card">
            <div class="flex items-center">
                <div class="flex-shrink-0">
                    <div class="w-8 h-8 bg-green-500 rounded-md flex items-center justify-center">
                        <span class="text-white text-sm font-medium">🚀</span>
                    </div>
                </div>
                <div class="ml-4">
                    <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Aktif Proje</p>
                    <p class="text-2xl font-semibold text-gray-900 dark:text-white" x-text="stats.activeProjects">0</p>
                </div>
            </div>
        </div>

        <!-- Total Todos -->
        <div class="card">
            <div class="flex items-center">
                <div class="flex-shrink-0">
                    <div class="w-8 h-8 bg-yellow-500 rounded-md flex items-center justify-center">
                        <span class="text-white text-sm font-medium">📝</span>
                    </div>
                </div>
                <div class="ml-4">
                    <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Toplam Görev</p>
                    <p class="text-2xl font-semibold text-gray-900 dark:text-white" x-text="stats.totalTodos">0</p>
                </div>
            </div>
        </div>

        <!-- Active Todos -->
        <div class="card">
            <div class="flex items-center">
                <div class="flex-shrink-0">
                    <div class="w-8 h-8 bg-orange-500 rounded-md flex items-center justify-center">
                        <span class="text-white text-sm font-medium">⚡</span>
                    </div>
                </div>
                <div class="ml-4">
                    <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Aktif Görev</p>
                    <p class="text-2xl font-semibold text-gray-900 dark:text-white" x-text="stats.activeTodos">0</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Charts Section -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 lg:gap-8 mb-6 sm:mb-8">
        <!-- Completion Chart -->
        <div class="card">
            <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between mb-4 gap-3">
                <h3 class="text-base sm:text-lg font-medium text-gray-900 dark:text-white">Tamamlanan Görevler</h3>
                <select x-model="chartPeriod" @change="updateChart()" class="form-select text-sm w-full sm:w-auto" :disabled="isChartLoading">
                    <option value="daily">Günlük</option>
                    <option value="weekly">Haftalık</option>
                    <option value="monthly">Aylık</option>
                </select>
            </div>
            <div class="h-48 sm:h-64 relative">
                <div x-show="isChartLoading" class="absolute inset-0 flex items-center justify-center bg-white dark:bg-gray-800 bg-opacity-75 z-10 rounded">
                    <div class="animate-spin rounded-full h-6 w-6 sm:h-8 sm:w-8 border-b-2 border-blue-600"></div>
                </div>
                <canvas id="completionChart" class="touch-pan-y"></canvas>
            </div>
        </div>

        <!-- Project Status Chart -->
        <div class="card">
            <h3 class="text-base sm:text-lg font-medium text-gray-900 dark:text-white mb-4">Proje Durumları</h3>
            <div class="h-48 sm:h-64">
                <canvas id="projectChart" class="touch-pan-y"></canvas>
            </div>
        </div>
    </div>

    <!-- Quick Actions -->
    <div class="card">
        <h3 class="text-base sm:text-lg font-medium text-gray-900 dark:text-white mb-4">Hızlı İşlemler</h3>
        <div class="grid grid-cols-1 sm:grid-cols-3 gap-3 sm:gap-4">
            <button @click="createProject()" class="btn-primary justify-center sm:justify-start">
                <span class="mr-2">➕</span>
                Yeni Proje
            </button>
            <button @click="createTodo()" class="btn-secondary justify-center sm:justify-start">
                <span class="mr-2">📝</span>
                Yeni Görev
            </button>
            <button @click="viewReports()" class="btn-success justify-center sm:justify-start">
                <span class="mr-2">📊</span>
                Raporlar
            </button>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
document.addEventListener('alpine:init', () => {
    Alpine.data('dashboard', () => ({
        stats: {
            totalProjects: 0,
            activeProjects: 0,
            totalTodos: 0,
            completedTodos: 0,
            activeTodos: 0
        },
        chartPeriod: 'daily',
        completionChart: null,
        projectChart: null,
        isChartLoading: false,
        darkMode: false,
        
        init() {
            // Get dark mode state from parent component
            this.darkMode = this.$root.darkMode;
            
            this.loadStats();
            this.initCharts();
            
            // Listen for dark mode changes
            this.$watch('$root.darkMode', (value) => {
                this.darkMode = value;
                this.updateChartColors();
            });
            
            // Listen for orientation changes
            window.addEventListener('orientation-changed', () => {
                setTimeout(() => {
                    this.handleOrientationChange();
                }, 200);
            });
        },
        
        async loadStats() {
            try {
                const response = await axios.get('/api/dashboard/stats');
                if (response.data.success) {
                    this.stats = response.data.data;
                }
            } catch (error) {
                console.error('Stats yüklenirken hata:', error);
                // Use fallback data
                this.stats = {
                    totalProjects: 12,
                    activeProjects: 8,
                    totalTodos: 45,
                    completedTodos: 32,
                    activeTodos: 13
                };
            }
        },
        
        initCharts() {
            this.initCompletionChart();
            this.initProjectChart();
        },
        
        async initCompletionChart() {
            try {
                // Load initial chart data
                const chartData = await this.loadChartData('daily');
                
                // Use chart manager if available
                if (window.chartManager) {
                    this.completionChart = await window.chartManager.createLineChart('completionChart', chartData, {
                        plugins: {
                            legend: {
                                display: false
                            }
                        }
                    });
                } else {
                    // Fallback to direct Chart.js
                    const ctx = document.getElementById('completionChart').getContext('2d');
                    this.completionChart = new Chart(ctx, {
                        type: 'line',
                        data: chartData,
                        options: this.getChartOptions('line')
                    });
                }
            } catch (error) {
                console.error('Completion chart initialization error:', error);
            }
        },
        
        async initProjectChart() {
            try {
                // Load project status data
                const projectData = await this.loadProjectStatusData();
                
                // Use chart manager if available
                if (window.chartManager) {
                    this.projectChart = await window.chartManager.createDoughnutChart('projectChart', projectData);
                } else {
                    // Fallback to direct Chart.js
                    const ctx = document.getElementById('projectChart').getContext('2d');
                    this.projectChart = new Chart(ctx, {
                        type: 'doughnut',
                        data: projectData,
                        options: this.getChartOptions('doughnut')
                    });
                }
            } catch (error) {
                console.error('Project chart initialization error:', error);
            }
        },
        
        async updateChart() {
            try {
                // Show loading state
                this.isChartLoading = true;
                
                // Load new chart data based on selected period
                const chartData = await this.loadChartData(this.chartPeriod);
                
                // Update chart using chart manager if available
                if (window.chartManager) {
                    window.chartManager.updateChart('completionChart', chartData);
                } else if (this.completionChart) {
                    // Fallback to direct update
                    this.completionChart.data.labels = chartData.labels;
                    this.completionChart.data.datasets = chartData.datasets;
                    this.completionChart.update();
                }
                
            } catch (error) {
                console.error('Grafik güncellenirken hata:', error);
                if (window.toastManager) {
                    window.toastManager.show('Grafik güncellenirken bir hata oluştu.', 'error');
                } else {
                    window.dispatchEvent(new CustomEvent('show-toast', {
                        detail: {
                            message: 'Grafik güncellenirken bir hata oluştu.',
                            type: 'error'
                        }
                    }));
                }
            } finally {
                this.isChartLoading = false;
            }
        },
        
        async loadChartData(period) {
            try {
                const response = await axios.get('/api/dashboard/chart-data', {
                    params: { period }
                });
                
                if (response.data.success) {
                    return response.data.data;
                }
                throw new Error('API response was not successful');
            } catch (error) {
                console.error('Chart data yüklenirken hata:', error);
                // Return fallback data
                return {
                    labels: ['Pzt', 'Sal', 'Çar', 'Per', 'Cum', 'Cmt', 'Paz'],
                    datasets: [{
                        label: 'Tamamlanan Görevler',
                        data: [12, 19, 3, 5, 2, 3, 9],
                        borderColor: '#3B82F6',
                        backgroundColor: '#3B82F620',
                        tension: 0.4,
                        fill: false
                    }]
                };
            }
        },
        
        async loadProjectStatusData() {
            try {
                const response = await axios.get('/api/dashboard/project-status');
                
                if (response.data.success) {
                    return response.data.data;
                }
                throw new Error('API response was not successful');
            } catch (error) {
                console.error('Project status data yüklenirken hata:', error);
                // Return default data on error
                return {
                    labels: ['Aktif', 'Tamamlandı', 'Arşivlendi'],
                    datasets: [{
                        data: [0, 0, 0],
                        backgroundColor: [
                            'rgb(34, 197, 94)',
                            'rgb(59, 130, 246)',
                            'rgb(251, 191, 36)'
                        ],
                        borderWidth: 0
                    }]
                };
            }
        },
        
        updateChartColors() {
            const colors = this.getChartColors();
            
            if (this.completionChart) {
                // Update completion chart
                const chartOptions = this.getChartOptions('line');
                Object.assign(this.completionChart.options, chartOptions);
                
                // Update dataset colors
                if (this.completionChart.data.datasets[0]) {
                    this.completionChart.data.datasets[0].borderColor = colors.primary;
                    this.completionChart.data.datasets[0].backgroundColor = colors.primary + '20';
                    this.completionChart.data.datasets[0].pointBorderColor = colors.primary;
                    this.completionChart.data.datasets[0].pointBackgroundColor = colors.background;
                }
                
                this.completionChart.update('none');
            }
            
            if (this.projectChart) {
                // Update project chart
                const chartOptions = this.getChartOptions('doughnut');
                Object.assign(this.projectChart.options, chartOptions);
                
                // Update dataset colors
                if (this.projectChart.data.datasets[0]) {
                    this.projectChart.data.datasets[0].backgroundColor = colors.chartPalette.slice(0, 3);
                    this.projectChart.data.datasets[0].borderColor = colors.background;
                }
                
                this.projectChart.update('none');
            }
        },
        
        getChartColors() {
            // Use chart theme manager if available, otherwise fallback
            if (typeof window.getChartColors === 'function') {
                return window.getChartColors();
            }
            
            // Fallback colors
            return this.darkMode ? {
                primary: '#60A5FA',
                background: '#1F2937',
                chartPalette: ['#60A5FA', '#34D399', '#FBBF24']
            } : {
                primary: '#3B82F6',
                background: '#FFFFFF',
                chartPalette: ['#3B82F6', '#10B981', '#F59E0B']
            };
        },
        
        getChartOptions(type) {
            // Use chart theme manager if available, otherwise fallback
            if (typeof window.getChartOptions === 'function') {
                return window.getChartOptions(type);
            }
            
            // Fallback options
            const isMobile = window.innerWidth < 640;
            return {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        labels: {
                            color: this.darkMode ? '#D1D5DB' : '#374151'
                        }
                    }
                }
            };
        },
        
        // Quick action methods
        createProject() {
            // For now, show a toast - will be replaced with actual project creation modal
            window.dispatchEvent(new CustomEvent('show-toast', {
                detail: {
                    message: 'Proje oluşturma özelliği yakında eklenecek.',
                    type: 'info'
                }
            }));
        },
        
        createTodo() {
            // For now, show a toast - will be replaced with actual todo creation modal
            window.dispatchEvent(new CustomEvent('show-toast', {
                detail: {
                    message: 'Görev oluşturma özelliği yakında eklenecek.',
                    type: 'info'
                }
            }));
        },
        
        viewReports() {
            // For now, show a toast - will be replaced with actual reports page
            window.dispatchEvent(new CustomEvent('show-toast', {
                detail: {
                    message: 'Raporlar sayfası yakında eklenecek.',
                    type: 'info'
                }
            }));
        },
        
        // Refresh dashboard data
        async refreshDashboard() {
            try {
                await Promise.all([
                    this.loadStats(),
                    this.updateChart(),
                    this.refreshProjectChart()
                ]);
                
                window.dispatchEvent(new CustomEvent('show-toast', {
                    detail: {
                        message: 'Dashboard verileri güncellendi.',
                        type: 'success'
                    }
                }));
            } catch (error) {
                console.error('Dashboard yenilenirken hata:', error);
                window.dispatchEvent(new CustomEvent('show-toast', {
                    detail: {
                        message: 'Dashboard yenilenirken bir hata oluştu.',
                        type: 'error'
                    }
                }));
            }
        },
        
        async refreshProjectChart() {
            if (this.projectChart) {
                const projectData = await this.loadProjectStatusData();
                this.projectChart.data = projectData;
                this.projectChart.update();
            }
        },
        
        handleOrientationChange() {
            // Resize charts after orientation change
            if (this.completionChart) {
                this.completionChart.resize();
            }
            if (this.projectChart) {
                this.projectChart.resize();
            }
        }
    }));
});
</script>
@endpush