<template>
  <div class="max-w-6xl mx-auto px-4 py-6 space-y-8" data-ui="dashboard_v1">
    <!-- Header -->
    <div class="flex items-center justify-between">
      <h1 class="text-2xl font-semibold">Dashboard</h1>
      <div class="flex items-center gap-3">
        <span class="text-sm text-gray-600">Min</span>
        <UToggle
          :model-value="operatingMode === 'target'"
          @update:model-value="(value) => setOperatingMode(value ? 'target' : 'min')"
        />
        <span class="text-sm text-gray-600">Target</span>
      </div>
    </div>

    <!-- Core Metrics -->
    <DashboardCoreMetrics />

    <!-- Member Coverage -->
    <MemberCoveragePanel />

    <!-- Advanced Tools -->
    <AdvancedAccordion />

    <!-- Next Session -->
    <UCard class="shadow-sm rounded-xl">
      <div class="flex items-center justify-between">
        <div class="space-y-1">
          <h3 class="font-semibold">Next Value Session</h3>
          <p class="text-sm text-gray-600">Review contributions and distribute surplus</p>
        </div>
        <UButton color="primary" @click="navigateTo('/session')">
          Start Session
        </UButton>
      </div>
    </UCard>
  </div>
</template>

<script setup lang="ts">
// Import components explicitly to avoid auto-import issues
import DashboardCoreMetrics from '~/components/dashboard/DashboardCoreMetrics.vue'
import MemberCoveragePanel from '~/components/dashboard/MemberCoveragePanel.vue'
import AdvancedAccordion from '~/components/dashboard/AdvancedAccordion.vue'

// Access composable data
const { operatingMode, setOperatingMode } = useCoopBuilder()
</script>