<template>
  <!-- Mobile Top Bar -->
  <MobileTopBar
    v-if="isMobile"
    title="Setări"
    :show-menu="true"
    @menu-click="showDrawer = true"
  />

  <!-- Mobile Drawer Menu (replaces old Sidebar) -->
  <MobileDrawerMenu
    v-model="showDrawer"
    :user="authStore.user"
    :available-servers="authStore.availableServers"
    :current-server-id="authStore.selectedServerId"
    :auth-store="authStore"
    @logout="handleLogout"
    @server-switched="handleServerSwitched"
  />

  <main class="main-content" :class="{ 'mobile-layout': isMobile }">
    <div class="app-container">
      <!-- Page Header - only on desktop -->
      <div v-if="!isMobile" class="page-header">
        <h1 class="page-title">
          <i class="pi pi-cog"></i>
          Setări
        </h1>
        <p class="page-subtitle">Configurare și monitorizare sistem</p>
      </div>

      <!-- Settings Cards Grid -->
      <div class="settings-grid">
        <!-- OCR Setări Card -->
        <router-link to="/data-entry/ocr-metrics" class="settings-card">
          <div class="card-icon ocr-icon">
            <i class="pi pi-chart-line"></i>
          </div>
          <div class="card-content">
            <h3 class="card-title">OCR Setări</h3>
            <p class="card-description">Metrici și configurare OCR pentru procesarea bonurilor</p>
          </div>
          <i class="pi pi-chevron-right card-arrow"></i>
        </router-link>

        <!-- Cache Stats Card -->
        <router-link to="/reports/cache-stats" class="settings-card">
          <div class="card-icon cache-icon">
            <i class="pi pi-database"></i>
          </div>
          <div class="card-content">
            <h3 class="card-title">Cache Stats</h3>
            <p class="card-description">Statistici și monitorizare cache sistem</p>
          </div>
          <i class="pi pi-chevron-right card-arrow"></i>
        </router-link>

        <!-- Server Logs Card -->
        <router-link to="/reports/server-logs" class="settings-card">
          <div class="card-icon logs-icon">
            <i class="pi pi-file"></i>
          </div>
          <div class="card-content">
            <h3 class="card-title">Loguri Server</h3>
            <p class="card-description">Vizualizare și analiză loguri aplicație</p>
          </div>
          <i class="pi pi-chevron-right card-arrow"></i>
        </router-link>

        <!-- Telegram Card -->
        <router-link to="/reports/telegram" class="settings-card">
          <div class="card-icon telegram-icon">
            <i class="pi pi-send"></i>
          </div>
          <div class="card-content">
            <h3 class="card-title">Telegram</h3>
            <p class="card-description">Conectare bot Telegram pentru notificări</p>
          </div>
          <i class="pi pi-chevron-right card-arrow"></i>
        </router-link>
      </div>
    </div>
  </main>

  <!-- Mobile Bottom Nav - US-307: Using default nav items -->
  <MobileBottomNav v-if="isMobile" />
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'
import MobileTopBar from '@shared/components/mobile/MobileTopBar.vue'
import MobileBottomNav from '@shared/components/mobile/MobileBottomNav.vue'
import MobileDrawerMenu from '@shared/components/mobile/MobileDrawerMenu.vue'
import { useAuthStore, useCompanyStore, useAccountingPeriodStore } from '@reports/stores/sharedStores'

const router = useRouter()
const authStore = useAuthStore()
const companyStore = useCompanyStore()
const periodStore = useAccountingPeriodStore()

// State
const showDrawer = ref(false)

// Detectare mobile - reactive with resize listener
const windowWidth = ref(window.innerWidth)
const isMobile = computed(() => windowWidth.value <= 768)

// Handle window resize for mobile detection
const handleResize = () => {
  windowWidth.value = window.innerWidth
}

// Handle logout from drawer menu
const handleLogout = async () => {
  await authStore.logout()
  router.push('/login')
}

// Handle server switch completed
const handleServerSwitched = async (newServerId) => {
  // Clear selected company and period FIRST to prevent stale data from old server
  companyStore.clearSelectedCompany()
  periodStore.reset()
}

// US-307: Removed custom mobileNavItems - using MobileBottomNav defaults

// Lifecycle
onMounted(() => {
  window.addEventListener('resize', handleResize)
})

onUnmounted(() => {
  window.removeEventListener('resize', handleResize)
})
</script>

<style scoped>
/* Mobile Layout - Padding for fixed top/bottom bars */
.main-content.mobile-layout {
  padding-top: 56px;
  padding-bottom: 56px;
}

/* Page header styles */
/* US-514: Reduced from var(--space-xl) to var(--space-md) for less excessive top spacing */
.page-header {
  margin-bottom: var(--space-md);
}

.page-title {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--text-2xl);
  font-weight: var(--font-semibold);
  color: var(--text-color);
  margin: 0 0 var(--space-sm) 0;
}

.page-title i {
  color: var(--color-primary);
}

.page-subtitle {
  font-size: var(--text-base);
  color: var(--text-color-secondary);
  margin: 0;
}

/* Settings Cards Grid */
.settings-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg);
  padding: var(--space-md);
}

/* Responsive: 2x2 on mobile, 4 columns on desktop */
@media (max-width: 1200px) {
  .settings-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .settings-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
    padding: var(--space-sm);
  }
}

@media (max-width: 480px) {
  .settings-grid {
    gap: var(--space-sm);
    padding: var(--space-xs);
  }
}

/* Settings Card - Action Card Style */
.settings-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-lg);
  background: var(--surface-card);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: inherit;
  transition: all var(--transition-fast);
  cursor: pointer;
  position: relative;
  min-height: 180px;
}

.settings-card:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.settings-card:active {
  transform: translateY(0);
}

/* Card Icon Container */
.card-icon {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-md);
  font-size: var(--text-2xl);
}

/* Icon color variants */
.card-icon.ocr-icon {
  background: var(--blue-50);
  color: var(--blue-600);
}

.card-icon.cache-icon {
  background: var(--green-50);
  color: var(--green-600);
}

.card-icon.logs-icon {
  background: var(--yellow-50);
  color: var(--yellow-600);
}

.card-icon.telegram-icon {
  background: var(--cyan-50);
  color: var(--cyan-600);
}

/* Card Content */
.card-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.card-title {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--text-color);
  margin: 0;
}

.card-description {
  font-size: var(--text-sm);
  color: var(--text-color-secondary);
  margin: 0;
  line-height: var(--leading-normal);
}

/* Card Arrow */
.card-arrow {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  color: var(--text-color-secondary);
  font-size: var(--text-sm);
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.settings-card:hover .card-arrow {
  opacity: 1;
}

/* Mobile optimizations */
@media (max-width: 768px) {
  .settings-card {
    padding: var(--space-md);
    min-height: 150px;
  }

  .card-icon {
    width: 48px;
    height: 48px;
    font-size: var(--text-xl);
    margin-bottom: var(--space-sm);
  }

  .card-title {
    font-size: var(--text-base);
  }

  .card-description {
    font-size: var(--text-xs);
  }

  .card-arrow {
    display: none;
  }
}

/* ================================================
   Dark Mode Support
   ================================================ */

/* Manual dark mode via data-theme attribute */
[data-theme="dark"] .card-icon.ocr-icon {
  background: var(--blue-900);
  color: var(--blue-400);
}

[data-theme="dark"] .card-icon.cache-icon {
  background: var(--green-900);
  color: var(--green-400);
}

[data-theme="dark"] .card-icon.logs-icon {
  background: var(--yellow-900);
  color: var(--yellow-400);
}

[data-theme="dark"] .card-icon.telegram-icon {
  background: var(--cyan-900);
  color: var(--cyan-400);
}

[data-theme="dark"] .settings-card:hover {
  border-color: var(--blue-500);
}

/* Auto dark mode (when no manual theme is set) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .card-icon.ocr-icon {
    background: var(--blue-900);
    color: var(--blue-400);
  }

  :root:not([data-theme]) .card-icon.cache-icon {
    background: var(--green-900);
    color: var(--green-400);
  }

  :root:not([data-theme]) .card-icon.logs-icon {
    background: var(--yellow-900);
    color: var(--yellow-400);
  }

  :root:not([data-theme]) .card-icon.telegram-icon {
    background: var(--cyan-900);
    color: var(--cyan-400);
  }

  :root:not([data-theme]) .settings-card:hover {
    border-color: var(--blue-500);
  }
}
</style>
