<script setup lang="ts">
import { Link, usePage } from '@inertiajs/vue3';
import { LogOut, Home, Plus, ShoppingBag, BarChart3 } from 'lucide-vue-next';

const page = usePage();
const shopUser = page.props.auth?.shop_user;
</script>

<template>
    <div class="min-h-screen bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900">
        <header class="border-b border-slate-700/50 bg-slate-800/50 backdrop-blur">
            <div class="mx-auto max-w-7xl px-4 py-4 sm:px-6 lg:px-8">
                <div class="flex items-center justify-between">
                    <div>
                        <h1 class="text-2xl font-black text-white">Mobile Unlock Service Platform</h1>
                        <p class="text-sm text-slate-400">{{ shopUser?.shop_name }}</p>
                    </div>
                    <form action="route('shop.logout')" method="POST" class="inline">
                        <button type="submit" class="inline-flex items-center gap-2 rounded-lg bg-red-600/10 px-3 py-2 text-sm font-bold text-red-400 transition-colors hover:bg-red-600/20">
                            <LogOut :size="16" />
                            Logout
                        </button>
                    </form>
                </div>
            </div>
        </header>

        <nav class="border-b border-slate-700/50 bg-slate-800/30 backdrop-blur">
            <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
                <div class="flex gap-1 overflow-x-auto">
                    <Link href="route('shop.dashboard')" class="flex items-center gap-2 border-b-2 border-transparent px-4 py-3 text-sm font-bold text-slate-300 transition-colors hover:border-blue-500 hover:text-white">
                        <Home :size="16" />
                        Dashboard
                    </Link>
                    <Link href="route('shop.orders.index')" class="flex items-center gap-2 border-b-2 border-transparent px-4 py-3 text-sm font-bold text-slate-300 transition-colors hover:border-blue-500 hover:text-white">
                        <ShoppingBag :size="16" />
                        My Orders
                    </Link>
                    <Link href="route('shop.orders.create')" class="flex items-center gap-2 border-b-2 border-transparent px-4 py-3 text-sm font-bold text-slate-300 transition-colors hover:border-blue-500 hover:text-white">
                        <Plus :size="16" />
                        New Order
                    </Link>
                </div>
            </div>
        </nav>

        <main class="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
            <slot />
        </main>
    </div>
</template>
