<script setup lang="ts">
import { ref } from "vue"
import { useI18n } from "vue-i18n"
import { SidebarInset, SidebarProvider } from "@/components/ui/sidebar"
import AppSidebar from "@/components/dashboard/AppSidebar.vue"
import SiteHeader from "@/components/dashboard/SiteHeader.vue"
import SectionCards from "@/components/dashboard/SectionCards.vue"
import DashboardView from "@/views/DashboardView.vue"
import ProjectListView from "@/views/ProjectListView.vue"
import UsersView from "@/views/UsersView.vue"
import TranscriptionsView from "@/views/TranscriptionsView.vue"
import SettingsView from "@/views/SettingsView.vue"

const { t } = useI18n()

const sidebarStyle = {
  '--sidebar-width': '16rem',
  '--header-height': '3rem',
}

const activeTab = ref('metrics')
const viewingProject = ref(false)

function openProject() {
  viewingProject.value = true
}

function backToProjects() {
  viewingProject.value = false
}

const tabContent: Record<string, { title: string; description: string; cards: { label: string; value: string; trend: string; up: boolean }[] }> = {
  metrics: {
    title: 'Métricas',
    description: 'Indicadores y KPIs generales',
    cards: [
      { label: 'Proyectos activos', value: '12', trend: '+3', up: true },
      { label: 'Completados', value: '48', trend: '+8', up: true },
      { label: 'En pausa', value: '5', trend: '-2', up: false },
      { label: 'Por iniciar', value: '7', trend: '+1', up: true },
    ],
  },
  projects: {
    title: 'Proyectos',
    description: 'Proyectos asignados en KAPPA',
    cards: [],
  },
  lifecycle: {
    title: 'Ciclo de Vida',
    description: 'Seguimiento del ciclo de vida de los proyectos',
    cards: [
      { label: 'En planificación', value: '8', trend: '+2', up: true },
      { label: 'En desarrollo', value: '15', trend: '+5', up: true },
      { label: 'En revisión', value: '6', trend: '-1', up: false },
      { label: 'Entregados', value: '32', trend: '+4', up: true },
    ],
  },
  analytics: {
    title: 'Analíticas',
    description: 'Métricas y estadísticas',
    cards: [
      { label: 'Horas registradas', value: '1,240h', trend: '+8%', up: true },
      { label: 'HU entregadas', value: '89', trend: '+12%', up: true },
      { label: 'Tiempo promedio', value: '3.2d', trend: '-5%', up: true },
      { label: 'Satisfacción', value: '92%', trend: '+2%', up: true },
    ],
  },
  team: {
    title: 'Equipo',
    description: 'Miembros del equipo y su carga de trabajo',
    cards: [
      { label: 'Miembros', value: '8', trend: '+1', up: true },
      { label: 'Asignados', value: '6', trend: '0', up: true },
      { label: 'Disponibles', value: '2', trend: '-1', up: false },
      { label: 'Productividad', value: '87%', trend: '+3%', up: true },
    ],
  },
  documents: {
    title: 'Documentos',
    description: 'Biblioteca de documentos',
    cards: [
      { label: 'Documentos', value: '156', trend: '+12', up: true },
      { label: 'Compartidos', value: '43', trend: '+5', up: true },
      { label: 'Borradores', value: '18', trend: '-3', up: false },
      { label: 'Plantillas', value: '24', trend: '+2', up: true },
    ],
  },
  'data-library': {
    title: 'Biblioteca de Datos',
    description: 'Repositorio de datos y recursos',
    cards: [
      { label: 'Archivos', value: '89', trend: '+7', up: true },
      { label: 'Bases de datos', value: '4', trend: '0', up: true },
      { label: 'APIs conectadas', value: '6', trend: '+1', up: true },
      { label: 'Storage usado', value: '2.4GB', trend: '+12%', up: false },
    ],
  },
  reports: {
    title: 'Reportes',
    description: 'Reportes generados',
    cards: [
      { label: 'Reportes este mes', value: '23', trend: '+8', up: true },
      { label: 'Programados', value: '5', trend: '+2', up: true },
      { label: 'Exportados', value: '156', trend: '+18', up: true },
      { label: 'Pendientes', value: '3', trend: '-1', up: true },
    ],
  },
  'word-assistant': {
    title: 'Asistente Word',
    description: 'Generación de documentos con IA',
    cards: [
      { label: 'Documentos creados', value: '34', trend: '+6', up: true },
      { label: 'Plantillas usadas', value: '12', trend: '+3', up: true },
      { label: 'Tokens consumidos', value: '45.2K', trend: '+22%', up: false },
      { label: 'Docs pendientes', value: '8', trend: '-2', up: true },
    ],
  },
  templates: {
    title: 'Plantillas',
    description: 'Gestión de plantillas',
    cards: [
      { label: 'Plantillas activas', value: '18', trend: '+2', up: true },
      { label: 'Usadas este mes', value: '9', trend: '+4', up: true },
      { label: 'Categorías', value: '5', trend: '0', up: true },
      { label: 'Próximas', value: '3', trend: '+1', up: true },
    ],
  },
}
</script>

<template>
  <SidebarProvider :style="sidebarStyle">
    <AppSidebar
      :active-tab="viewingProject ? 'projects' : activeTab"
      @update:active-tab="activeTab = $event; viewingProject = false"
    />
    <SidebarInset>
      <SiteHeader :active-tab="viewingProject ? 'projects' : activeTab" />
      <div class="flex flex-1 flex-col">
        <div class="@container/main flex flex-1 flex-col gap-2">
          <div class="flex flex-col gap-0 py-4 md:gap-0 md:py-6">
            <template v-if="viewingProject">
              <div class="px-4 lg:px-6">
                <button
                  class="mb-4 inline-flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground transition-colors"
                  @click="backToProjects"
                >
                  ← {{ t('common.backToProjects') }}
                </button>
              </div>
              <DashboardView @navigate-settings="activeTab = 'settings'" />
            </template>
            <template v-else-if="activeTab === 'projects'">
              <ProjectListView
                @select-project="openProject()"
              />
            </template>
            <template v-else-if="activeTab === 'transcriptions'">
              <TranscriptionsView @navigate-settings="activeTab = 'settings'" />
            </template>
            <template v-else-if="activeTab === 'settings'">
              <SettingsView />
            </template>
            <template v-else-if="activeTab === 'team'">
              <UsersView />
            </template>
            <template v-else>
              <SectionCards :cards="tabContent[activeTab]?.cards ?? []" />
            </template>
          </div>
        </div>
      </div>
    </SidebarInset>
  </SidebarProvider>
</template>
