<template>
    <div class="min-h-screen bg-gray-50">
        <div class="max-w-7xl mx-auto px-4 py-6">
            <!-- Header -->
            <div class="bg-white rounded-lg shadow-sm p-6 mb-6">
                <div class="flex justify-between items-center">
                    <div>
                        <h1 class="text-2xl font-bold text-gray-900">{{ business.shop_name }}</h1>
                        <p class="text-gray-600">Welcome back!</p>
                    </div>
                    <div class="text-right">
                        <p class="text-sm text-gray-500">Plan: {{ business.plan_type }}</p>
                        <p class="text-sm text-gray-500">Expires: {{ business.plan_expiry_date }}</p>
                    </div>
                </div>
            </div>

            <!-- Stats Cards -->
            <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
                <div class="bg-white rounded-lg shadow-sm p-4">
                    <div class="text-2xl font-bold text-blue-600">{{ stats.products }}</div>
                    <div class="text-sm text-gray-600">Products</div>
                </div>
                <div class="bg-white rounded-lg shadow-sm p-4">
                    <div class="text-2xl font-bold text-green-600">{{ stats.sales }}</div>
                    <div class="text-sm text-gray-600">Sales Today</div>
                </div>
                <div class="bg-white rounded-lg shadow-sm p-4">
                    <div class="text-2xl font-bold text-orange-600">{{ stats.repairs }}</div>
                    <div class="text-sm text-gray-600">Repairs</div>
                </div>
                <div class="bg-white rounded-lg shadow-sm p-4">
                    <div class="text-2xl font-bold text-purple-600">{{ stats.unlock_orders }}</div>
                    <div class="text-sm text-gray-600">Unlock Orders</div>
                </div>
            </div>

            <!-- Quick Actions -->
            <div class="bg-white rounded-lg shadow-sm p-6">
                <h2 class="text-lg font-semibold mb-4">Quick Actions</h2>
                <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
                    <Link href="/business/products" class="bg-blue-500 hover:bg-blue-600 text-white rounded-lg p-4 text-center">
                        <div class="text-2xl mb-2">📱</div>
                        <div class="font-medium">Products</div>
                    </Link>
                    <Link href="/business/sales" class="bg-green-500 hover:bg-green-600 text-white rounded-lg p-4 text-center">
                        <div class="text-2xl mb-2">💰</div>
                        <div class="font-medium">Sales</div>
                    </Link>
                    <Link href="/business/repairs" class="bg-orange-500 hover:bg-orange-600 text-white rounded-lg p-4 text-center">
                        <div class="text-2xl mb-2">🔧</div>
                        <div class="font-medium">Repairs</div>
                    </Link>
                    <Link href="/business/unlock-orders" class="bg-purple-500 hover:bg-purple-600 text-white rounded-lg p-4 text-center">
                        <div class="text-2xl mb-2">🔓</div>
                        <div class="font-medium">Unlock Orders</div>
                    </Link>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { Link } from '@inertiajs/vue3';

defineProps({
    business: Object,
    stats: Object,
});
</script>