<template>
  <!-- Mobile Top Bar -->
  <MobileTopBar
    v-if="isMobile"
    title="Analiză Scadențe"
    :show-back="true"
    @back-click="goBack"
  />

  <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">Analiză Scadențe</h1>
        <p class="page-subtitle">Analiza scadențelor clienți și furnizori</p>
      </div>

      <!-- Loading state when no company selected -->
      <div v-if="!companyStore.selectedCompany" class="empty-state">
        <i class="pi pi-building empty-icon"></i>
        <h2 class="empty-title">Selectați o companie</h2>
        <p class="empty-description">
          Pentru a vizualiza analiza scadențelor, vă rugăm să selectați o companie din Dashboard.
        </p>
        <Button
          label="Mergi la Dashboard"
          icon="pi pi-arrow-left"
          @click="goBack"
          class="empty-action"
        />
      </div>

      <!-- Main content - MaturityAndDetailsCard -->
      <div v-else class="maturity-container">
        <MaturityAndDetailsCard
          :companyId="companyStore.selectedCompany?.id_firma"
          @periodChanged="handlePeriodChange"
        />
      </div>
    </div>
  </main>

  <!-- Mobile Bottom Nav -->
  <MobileBottomNav v-if="isMobile" :items="mobileNavItems" />
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'
import Button from 'primevue/button'
import MobileTopBar from '@shared/components/mobile/MobileTopBar.vue'
import MobileBottomNav from '@shared/components/mobile/MobileBottomNav.vue'
import MaturityAndDetailsCard from '@reports/components/dashboard/cards/MaturityAndDetailsCard.vue'
import { useCompanyStore } from '@reports/stores/sharedStores'

const router = useRouter()
const companyStore = useCompanyStore()

// 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
}

// Navigation
const goBack = () => {
  router.push('/reports/dashboard')
}

// Handle period change from MaturityAndDetailsCard
const handlePeriodChange = (period) => {
  console.log('Maturity period changed:', period)
}

// Mobile navigation items
const mobileNavItems = computed(() => [
  { to: '/data-entry', icon: 'pi pi-receipt', label: 'Bonuri' },
  { icon: 'pi pi-cloud-upload', label: 'Upload' },
  { to: '/reports/dashboard', icon: 'pi pi-chart-bar', label: 'Rapoarte', active: true },
  { to: '/settings', icon: 'pi pi-cog', label: 'Setări' }
])

// 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;
}

/* App container */
.app-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: var(--space-lg);
}

@media (max-width: 768px) {
  .app-container {
    padding: var(--space-md);
  }
}

/* Page Header - Desktop only */
.page-header {
  margin-bottom: var(--space-xl);
}

.page-title {
  font-size: var(--text-3xl);
  font-weight: var(--font-bold);
  color: var(--text-color);
  margin: 0 0 var(--space-xs) 0;
}

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

/* Maturity container */
.maturity-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

/* Empty state styles */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  text-align: center;
  padding: var(--space-xl);
  background: var(--surface-card);
  border-radius: var(--radius-lg);
  border: 1px solid var(--surface-border);
}

.empty-icon {
  font-size: 64px;
  color: var(--text-color-secondary);
  margin-bottom: var(--space-lg);
  opacity: 0.5;
}

.empty-title {
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  color: var(--text-color);
  margin: 0 0 var(--space-sm) 0;
}

.empty-description {
  font-size: var(--text-base);
  color: var(--text-color-secondary);
  margin: 0 0 var(--space-lg) 0;
  max-width: 400px;
}

.empty-action {
  margin-top: var(--space-md);
}
</style>
