<script setup lang="ts">
import { Head, Link } from '@inertiajs/vue3';
import { Gift, Eye, MousePointerClick, TrendingUp, Activity, Zap, Server } from 'lucide-vue-next';

const props = defineProps<{
    bonuses: any[];
    totalViews: number;
    totalClicks: number;
    todayViews: number;
    todayClicks: number;
    socialClicks: {
        twitch: number;
        instagram: number;
        kick: number;
    };
    uptimeMonitors: {
        id: number;
        name: string;
        status: string;
    }[];
}>();

// Calculate Conversion Rate
const conversionRate = props.totalViews > 0
    ? ((props.totalClicks / props.totalViews) * 100).toFixed(1)
    : '0.0';

</script>

<template>
    <Head title="Dashboard">
        <!-- We use FontAwesome for social icons because lucide deprecated theirs -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    </Head>

    <div class="p-6 space-y-6">
        <h1 class="text-2xl font-bold">Dashboard Statistiken</h1>

        <!-- Top Level Stats -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
            <div class="bg-white dark:bg-gray-800 p-6 rounded-2xl shadow-sm border border-gray-100 dark:border-gray-700">
                <div class="flex justify-between items-start mb-4">
                    <div>
                        <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Total Views</p>
                        <h3 class="text-3xl font-bold mt-1">{{ totalViews }}</h3>
                    </div>
                    <div class="p-3 bg-blue-50 dark:bg-blue-900/20 text-blue-500 rounded-xl">
                        <Eye :size="24" />
                    </div>
                </div>
                <div class="flex items-center text-sm">
                    <span class="text-green-500 flex items-center font-medium">
                        <TrendingUp :size="16" class="mr-1" /> +{{ todayViews }}
                    </span>
                    <span class="text-gray-400 ml-2">heute</span>
                </div>
            </div>

            <div class="bg-white dark:bg-gray-800 p-6 rounded-2xl shadow-sm border border-gray-100 dark:border-gray-700">
                <div class="flex justify-between items-start mb-4">
                    <div>
                        <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Total Clicks</p>
                        <h3 class="text-3xl font-bold mt-1">{{ totalClicks }}</h3>
                    </div>
                    <div class="p-3 bg-purple-50 dark:bg-purple-900/20 text-purple-500 rounded-xl">
                        <MousePointerClick :size="24" />
                    </div>
                </div>
                <div class="flex items-center text-sm">
                    <span class="text-green-500 flex items-center font-medium">
                        <TrendingUp :size="16" class="mr-1" /> +{{ todayClicks }}
                    </span>
                    <span class="text-gray-400 ml-2">heute</span>
                </div>
            </div>

            <div class="bg-white dark:bg-gray-800 p-6 rounded-2xl shadow-sm border border-gray-100 dark:border-gray-700">
                <div class="flex justify-between items-start mb-4">
                    <div>
                        <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Conversion Rate</p>
                        <h3 class="text-3xl font-bold mt-1">{{ conversionRate }}%</h3>
                    </div>
                    <div class="p-3 bg-green-50 dark:bg-green-900/20 text-green-500 rounded-xl">
                        <Activity :size="24" />
                    </div>
                </div>
                <div class="flex items-center text-sm">
                    <span class="text-gray-400">Clicks / Views</span>
                </div>
            </div>

            <div class="bg-white dark:bg-gray-800 p-6 rounded-2xl shadow-sm border border-gray-100 dark:border-gray-700">
                <div class="flex justify-between items-start mb-4">
                    <div>
                        <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Aktive Deals</p>
                        <h3 class="text-3xl font-bold mt-1">{{ bonuses.filter(b => b.is_active).length }}</h3>
                    </div>
                    <div class="p-3 bg-orange-50 dark:bg-orange-900/20 text-orange-500 rounded-xl">
                        <Gift :size="24" />
                    </div>
                </div>
                <div class="flex items-center text-sm">
                    <Link href="/admin/bonuses" class="text-blue-500 hover:text-blue-600 font-medium">Alle verwalten &rarr;</Link>
                </div>
            </div>
        </div>

        <!-- Social Media Stats -->
        <h2 class="text-xl font-bold mt-8 mb-4">Social Media Klicks</h2>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
            <div class="bg-white dark:bg-gray-800 p-6 rounded-2xl shadow-sm border border-gray-100 dark:border-gray-700 flex items-center justify-between">
                <div class="flex items-center gap-4">
                    <div class="p-4 bg-purple-100 dark:bg-purple-900/30 text-[#9146FF] rounded-xl">
                        <i class="fab fa-twitch text-2xl"></i>
                    </div>
                    <div>
                        <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Twitch</p>
                        <h3 class="text-2xl font-bold">{{ socialClicks.twitch }}</h3>
                    </div>
                </div>
            </div>
            <div class="bg-white dark:bg-gray-800 p-6 rounded-2xl shadow-sm border border-gray-100 dark:border-gray-700 flex items-center justify-between">
                <div class="flex items-center gap-4">
                    <div class="p-4 bg-pink-100 dark:bg-pink-900/30 text-pink-600 rounded-xl">
                        <i class="fab fa-instagram text-2xl"></i>
                    </div>
                    <div>
                        <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Instagram</p>
                        <h3 class="text-2xl font-bold">{{ socialClicks.instagram }}</h3>
                    </div>
                </div>
            </div>
            <div class="bg-white dark:bg-gray-800 p-6 rounded-2xl shadow-sm border border-gray-100 dark:border-gray-700 flex items-center justify-between">
                <div class="flex items-center gap-4">
                    <div class="p-4 bg-green-100 dark:bg-green-900/30 text-[#53FC18] rounded-xl">
                        <Zap :size="24" />
                    </div>
                    <div>
                        <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Kick</p>
                        <h3 class="text-2xl font-bold">{{ socialClicks.kick }}</h3>
                    </div>
                </div>
            </div>
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
            <!-- Deals Stats Table -->
            <div class="lg:col-span-2">
                <h2 class="text-xl font-bold mt-8 mb-4">Deal Performance</h2>
                <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-sm border border-gray-100 dark:border-gray-700 overflow-hidden">
                    <div class="overflow-x-auto">
                        <table class="w-full text-left border-collapse">
                            <thead>
                                <tr class="bg-gray-50 dark:bg-gray-900 border-b border-gray-100 dark:border-gray-700 text-sm font-medium text-gray-500 dark:text-gray-400">
                                    <th class="p-4">Casino</th>
                                    <th class="p-4 text-center">Views</th>
                                    <th class="p-4 text-center">Clicks</th>
                                    <th class="p-4 text-center">Conv. Rate</th>
                                    <th class="p-4 text-right">Status</th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-gray-100 dark:divide-gray-700">
                                <tr v-for="bonus in bonuses" :key="bonus.id" class="hover:bg-gray-50 dark:hover:bg-gray-900/50 transition">
                                    <td class="p-4">
                                        <div class="flex items-center gap-3">
                                            <div class="w-10 h-10 rounded-lg overflow-hidden flex items-center justify-center" :style="{ backgroundColor: bonus.hover_color ? bonus.hover_color + '20' : '#e5e7eb' }">
                                                <img v-if="bonus.image_path" :src="bonus.image_path" class="w-full h-full object-cover" alt="Bonus" />
                                                <Gift v-else :size="20" :color="bonus.brand_color || '#9ca3af'" />
                                            </div>
                                            <div>
                                                <div class="font-bold">{{ bonus.name }}</div>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="p-4 text-center font-medium">{{ bonus.views_count }}</td>
                                    <td class="p-4 text-center font-medium">{{ bonus.clicks_count }}</td>
                                    <td class="p-4 text-center">
                                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-200">
                                            {{ bonus.views_count > 0 ? ((bonus.clicks_count / bonus.views_count) * 100).toFixed(1) : '0.0' }}%
                                        </span>
                                    </td>
                                    <td class="p-4 text-right">
                                        <span v-if="bonus.is_active" class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400">
                                            Aktiv
                                        </span>
                                        <span v-else class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400">
                                            Inaktiv
                                        </span>
                                    </td>
                                </tr>
                                <tr v-if="bonuses.length === 0">
                                    <td colspan="5" class="p-8 text-center text-gray-500">
                                        Keine Deals gefunden.
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <!-- Uptime Monitors -->
            <div class="lg:col-span-1">
                <h2 class="text-xl font-bold mt-8 mb-4">Uptime Kuma Status</h2>
                <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-sm border border-gray-100 dark:border-gray-700 overflow-hidden">
                    <ul class="divide-y divide-gray-100 dark:divide-gray-700">
                        <li v-for="monitor in uptimeMonitors" :key="monitor.id" class="p-4 flex items-center justify-between">
                            <div class="flex items-center gap-3">
                                <Server :size="20" class="text-gray-400" />
                                <span class="font-medium">{{ monitor.name }}</span>
                                <span class="text-xs text-gray-500">#{{ monitor.id }}</span>
                            </div>
                            <span v-if="monitor.status === 'up'" class="flex items-center gap-1.5 text-sm font-medium text-green-600 dark:text-green-400">
                                <span class="w-2 h-2 rounded-full bg-green-500"></span> UP
                            </span>
                            <span v-else class="flex items-center gap-1.5 text-sm font-medium text-red-600 dark:text-red-400">
                                <span class="w-2 h-2 rounded-full bg-red-500"></span> DOWN
                            </span>
                        </li>
                        <li v-if="!uptimeMonitors || uptimeMonitors.length === 0" class="p-8 text-center text-gray-500">
                            Keine Statusdaten verfügbar oder API nicht erreichbar.
                        </li>
                    </ul>
                </div>
            </div>
        </div>

    </div>
</template>
