<template>
    <div class="flex">
        <div class="w-full px-4 md:px-10 py-4">
            <!-- Breadcrumbs -->
            <div class="text-sm breadcrumbs">
                <ul>
                    <li><router-link :to="{ name: 'home' }">Home</router-link></li>
                    <li>Admin</li>
                    <li>Stats</li>
                </ul>
            </div>

            <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4 mt-4 mb-6">
                <div>
                    <h1 class="text-2xl md:text-3xl font-bold flex items-center gap-3">
                        <div
                            class="w-10 h-10 rounded-xl bg-gradient-to-br from-primary to-primary/60 flex items-center justify-center shadow-lg">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2"
                                stroke="currentColor" class="w-5 h-5 text-primary-content">
                                <path stroke-linecap="round" stroke-linejoin="round"
                                    d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75zM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V8.625zM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V4.125z" />
                            </svg>
                        </div>
                        Business Statistics
                    </h1>
                    <p class="text-base-content/60 mt-1 ml-13">Analyze performance and delivery metrics</p>
                </div>
            </div>

            <!-- Tabs -->
            <div role="tablist" class="tabs tabs-boxed mb-6 bg-neutral w-fit">
                <a role="tab" class="tab" :class="{ 'tab-active': activeTab === 'graph' }" @click="activeTab = 'graph'">
                    Daily Graph
                </a>
                <a role="tab" class="tab" :class="{ 'tab-active': activeTab === 'totals' }"
                    @click="activeTab = 'totals'">
                    Totals Comparison
                </a>
            </div>

            <!-- Content -->
            <div v-show="activeTab === 'graph'">
                <DailyGraph />
            </div>
            <div v-show="activeTab === 'totals'">
                <TotalsComparison />
            </div>

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

<script setup lang="ts">
import { ref } from 'vue';
import DailyGraph from './DailyGraph.vue';
import TotalsComparison from './TotalsComparison.vue';

const activeTab = ref<'graph' | 'totals'>('graph');
</script>
