<template>
  <!-- Mobile Top Bar -->
  <MobileTopBar
    v-if="isMobile"
    title="Facturi Detaliate"
    :show-back="true"
    :actions="topBarActions"
    @back-click="goBack"
    @action-click="handleTopBarAction"
  />

  <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">Facturi Detaliate</h1>
        <p class="page-subtitle">Vizualizare detaliată a facturilor 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 facturile detaliate, 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 -->
      <div v-else class="invoices-container">
        <!-- Desktop Filters Card -->
        <div v-if="!isMobile" class="filters-card">
          <div class="filters-row">
            <div class="filter-group">
              <label class="form-label">Tip</label>
              <Dropdown
                v-model="selectedType"
                :options="typeOptions"
                optionLabel="label"
                optionValue="value"
                placeholder="Selectați tipul"
                class="w-full"
                @change="loadDetailedData"
              />
            </div>
            <div class="filter-group">
              <label class="form-label">Căutare</label>
              <InputText
                v-model="searchTerm"
                placeholder="Căutare..."
                class="w-full"
                @input="handleSearch"
              />
            </div>
            <div class="filter-group">
              <label class="form-label">Perioadă</label>
              <Dropdown
                v-model="selectedPeriod"
                :options="periodOptions"
                optionLabel="label"
                optionValue="value"
                placeholder="Selectați perioada"
                class="w-full"
                @change="loadDetailedData"
              />
            </div>
          </div>
          <div class="filters-actions">
            <Button
              icon="pi pi-filter-slash"
              label="Resetează"
              severity="secondary"
              outlined
              @click="resetFilters"
            />
            <Button
              icon="pi pi-file-excel"
              label="Export Excel"
              severity="success"
              outlined
              @click="exportExcel"
              :disabled="filteredData.length === 0"
            />
            <Button
              icon="pi pi-file-pdf"
              label="Export PDF"
              severity="danger"
              outlined
              @click="exportPDF"
              :disabled="filteredData.length === 0"
            />
            <Button
              icon="pi pi-refresh"
              label="Actualizează"
              :loading="isLoading"
              @click="loadDetailedData"
            />
          </div>
        </div>

        <!-- Mobile Filter Chips (compact summary) -->
        <div v-if="isMobile" class="mobile-filter-summary">
          <div class="filter-chip" @click="openFilters">
            <i class="pi pi-list"></i>
            <span>{{ getTypeLabel(selectedType) }}</span>
          </div>
          <div v-if="searchTerm" class="filter-chip active" @click="openFilters">
            <i class="pi pi-search"></i>
            <span>{{ searchTerm }}</span>
            <i class="pi pi-times" @click.stop="clearSearch"></i>
          </div>
          <div class="filter-chip" @click="openFilters">
            <i class="pi pi-calendar"></i>
            <span>{{ getPeriodLabel(selectedPeriod) }}</span>
          </div>
        </div>

        <!-- Loading State -->
        <div v-if="isLoading" class="loading-state">
          <div class="loading-spinner"></div>
          <p>Se încarcă facturile...</p>
        </div>

        <!-- Error State -->
        <div v-else-if="error" class="error-state">
          <i class="pi pi-exclamation-circle"></i>
          <p>{{ error }}</p>
          <Button label="Încearcă din nou" icon="pi pi-refresh" @click="loadDetailedData" />
        </div>

        <!-- Data Table / Cards -->
        <div v-else class="data-section">
          <!-- Desktop Table -->
          <div v-if="!isMobile" class="table-wrapper">
            <DataTable
              :value="selectedType === 'treasury' ? paginatedData : paginatedGroups"
              :loading="isLoading"
              stripedRows
              class="p-datatable-sm"
            >
              <!-- Treasury columns -->
              <template v-if="selectedType === 'treasury'">
                <Column field="cont" header="Cont" sortable></Column>
                <Column field="nume_cont" header="Nume Cont" sortable></Column>
                <Column field="sold" header="Sold" sortable>
                  <template #body="slotProps">
                    <span class="font-mono">{{ formatCurrency(slotProps.data.sold) }}</span>
                  </template>
                </Column>
                <Column field="valuta" header="Valută" sortable></Column>
                <Column field="tip" header="Tip" sortable></Column>
              </template>

              <!-- Clients/Suppliers columns -->
              <template v-else>
                <Column :field="selectedType === 'clients' ? 'client' : 'furnizor'" :header="selectedType === 'clients' ? 'Client' : 'Furnizor'" sortable>
                  <template #body="slotProps">
                    <div class="name-cell">
                      <strong>{{ slotProps.data.name }}</strong>
                      <span v-if="slotProps.data.facturi?.length > 1" class="count-badge">
                        ({{ slotProps.data.facturi.length }})
                      </span>
                    </div>
                  </template>
                </Column>
                <Column field="numar_document" header="Nr. Document">
                  <template #body="slotProps">
                    {{ slotProps.data.facturi?.length === 1 ? slotProps.data.facturi[0].numar_document : '-' }}
                  </template>
                </Column>
                <Column field="data_document" header="Data Document">
                  <template #body="slotProps">
                    {{ slotProps.data.facturi?.length === 1 ? formatDate(slotProps.data.facturi[0].data_document) : '-' }}
                  </template>
                </Column>
                <Column field="data_scadenta" header="Data Scadență">
                  <template #body="slotProps">
                    {{ slotProps.data.facturi?.length === 1 ? formatDate(slotProps.data.facturi[0].data_scadenta) : '-' }}
                  </template>
                </Column>
                <Column header="Facturat">
                  <template #body="slotProps">
                    <span class="font-mono">
                      {{ slotProps.data.facturi?.length === 1 ? formatCurrency(slotProps.data.facturi[0].facturat) : '-' }}
                    </span>
                  </template>
                </Column>
                <Column :header="selectedType === 'clients' ? 'Încasat' : 'Achitat'">
                  <template #body="slotProps">
                    <span class="font-mono">
                      {{ slotProps.data.facturi?.length === 1
                        ? formatCurrency(slotProps.data.facturi[0][selectedType === 'clients' ? 'incasat' : 'achitat'])
                        : '-' }}
                    </span>
                  </template>
                </Column>
                <Column field="totalSold" header="Sold" sortable>
                  <template #body="slotProps">
                    <span
                      class="font-mono font-bold"
                      :class="{ 'sold-restant': slotProps.data.hasRestant }"
                    >
                      {{ formatCurrency(slotProps.data.totalSold) }}
                    </span>
                  </template>
                </Column>
              </template>
            </DataTable>
          </div>

          <!-- Mobile Cards -->
          <div v-if="isMobile" class="mobile-cards">
            <!-- Treasury Cards -->
            <template v-if="selectedType === 'treasury'">
              <div
                v-for="row in paginatedData"
                :key="row.id"
                class="invoice-card"
              >
                <div class="card-header-row">
                  <strong>{{ row.cont }}</strong>
                  <span class="card-badge">{{ row.valuta }}</span>
                </div>
                <div class="card-body">
                  <div class="card-field">
                    <span class="field-label">Nume Cont</span>
                    <span class="field-value">{{ row.nume_cont }}</span>
                  </div>
                  <div class="card-field highlight">
                    <span class="field-label">Sold</span>
                    <span class="field-value sold-value">{{ formatCurrency(row.sold) }}</span>
                  </div>
                </div>
              </div>
            </template>

            <!-- Client/Supplier Cards -->
            <template v-else>
              <div
                v-for="group in paginatedGroups"
                :key="group.name"
                class="invoice-card"
                :class="{ 'has-multiple': group.facturi.length > 1 }"
                @click="group.facturi.length > 1 && toggleGroup(group.name)"
              >
                <div class="card-header-row">
                  <div class="header-left">
                    <strong>{{ group.name }}</strong>
                    <span v-if="group.facturi.length > 1" class="count-badge">
                      ({{ group.facturi.length }})
                    </span>
                  </div>
                  <div class="header-right">
                    <span
                      class="sold-value"
                      :class="{ 'sold-restant': group.hasRestant }"
                    >
                      {{ formatCurrency(group.totalSold) }}
                    </span>
                    <i
                      v-if="group.facturi.length > 1"
                      :class="['pi', isGroupExpanded(group.name) ? 'pi-chevron-up' : 'pi-chevron-down']"
                    ></i>
                  </div>
                </div>

                <!-- Single invoice details -->
                <div v-if="group.facturi.length === 1" class="card-body">
                  <div class="card-field">
                    <span class="field-label">Nr. Document</span>
                    <span class="field-value">{{ group.facturi[0].numar_document }}</span>
                  </div>
                  <div class="card-row-inline">
                    <div class="card-field">
                      <span class="field-label">Data Doc.</span>
                      <span class="field-value">{{ formatDate(group.facturi[0].data_document) }}</span>
                    </div>
                    <div class="card-field">
                      <span class="field-label">Scadență</span>
                      <span class="field-value">{{ formatDate(group.facturi[0].data_scadenta) }}</span>
                    </div>
                  </div>
                  <div class="card-status" :class="getStatusClass(group.facturi[0].status)">
                    {{ group.facturi[0].status }}
                  </div>
                </div>

                <!-- Multiple invoices expanded -->
                <div v-if="group.facturi.length > 1 && isGroupExpanded(group.name)" class="card-sub-items">
                  <div
                    v-for="(factura, idx) in group.facturi"
                    :key="`${group.name}-${idx}`"
                    class="sub-item"
                  >
                    <div class="sub-item-header">
                      <span>{{ factura.numar_document }}</span>
                      <span
                        class="sub-item-sold"
                        :class="{ 'sold-restant': factura.status === 'Restant' }"
                      >
                        {{ formatCurrency(factura.sold) }}
                      </span>
                    </div>
                    <div class="sub-item-dates">
                      <span>{{ formatDate(factura.data_scadenta) }}</span>
                      <span :class="getStatusClass(factura.status)">{{ factura.status }}</span>
                    </div>
                  </div>
                </div>
              </div>
            </template>

            <!-- Empty state -->
            <div v-if="(selectedType === 'treasury' ? paginatedData : paginatedGroups).length === 0" class="empty-data">
              <i class="pi pi-inbox"></i>
              <p>Nu există facturi pentru criteriile selectate</p>
            </div>
          </div>

          <!-- Pagination -->
          <div class="pagination-wrapper">
            <Paginator
              v-model:rows="rowsPerPage"
              :totalRecords="totalRecords"
              v-model:first="firstRow"
              :rowsPerPageOptions="[10, 25, 50, 100]"
              @page="handlePageChange"
            />
          </div>

          <!-- Totals Summary -->
          <div v-if="filteredData.length > 0" class="totals-summary">
            <div class="total-item">
              <span class="total-label">Total Sold:</span>
              <span class="total-value">{{ formatCurrency(calculateTotal('sold')) }}</span>
            </div>
            <div v-if="selectedType !== 'treasury'" class="total-item">
              <span class="total-label">Total Facturat:</span>
              <span class="total-value">{{ formatCurrency(calculateTotal('facturat')) }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </main>

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

  <!-- Mobile Filters BottomSheet -->
  <BottomSheet v-model="isFilterSheetOpen">
    <div class="filter-sheet-content">
      <h3 class="filter-sheet-title">Filtre</h3>

      <div class="filter-sheet-group">
        <label class="form-label">Tip</label>
        <Dropdown
          v-model="selectedType"
          :options="typeOptions"
          optionLabel="label"
          optionValue="value"
          placeholder="Selectați tipul"
          class="w-full"
        />
      </div>

      <div class="filter-sheet-group">
        <label class="form-label">Căutare</label>
        <InputText
          v-model="searchTerm"
          placeholder="Căutare client/furnizor..."
          class="w-full"
        />
      </div>

      <div class="filter-sheet-group">
        <label class="form-label">Perioadă</label>
        <Dropdown
          v-model="selectedPeriod"
          :options="periodOptions"
          optionLabel="label"
          optionValue="value"
          placeholder="Selectați perioada"
          class="w-full"
        />
      </div>

      <div class="filter-sheet-actions">
        <Button
          label="Resetează"
          icon="pi pi-filter-slash"
          severity="secondary"
          outlined
          class="flex-1"
          @click="resetFilters"
        />
        <Button
          label="Aplică"
          icon="pi pi-check"
          class="flex-1"
          @click="applyFilters"
        />
      </div>
    </div>
  </BottomSheet>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted, watch } from 'vue'
import { useRouter } from 'vue-router'
import Button from 'primevue/button'
import Dropdown from 'primevue/dropdown'
import InputText from 'primevue/inputtext'
import DataTable from 'primevue/datatable'
import Column from 'primevue/column'
import Paginator from 'primevue/paginator'
import { useToast } from 'primevue/usetoast'
import MobileTopBar from '@shared/components/mobile/MobileTopBar.vue'
import MobileBottomNav from '@shared/components/mobile/MobileBottomNav.vue'
import BottomSheet from '@shared/components/mobile/BottomSheet.vue'
import { useDashboardStore } from '@reports/stores/dashboard'
import { useCompanyStore, useAccountingPeriodStore } from '@reports/stores/sharedStores'
import * as XLSX from 'xlsx'
import jsPDF from 'jspdf'
import 'jspdf-autotable'

const router = useRouter()
const toast = useToast()
const dashboardStore = useDashboardStore()
const companyStore = useCompanyStore()
const periodStore = useAccountingPeriodStore()

// Mobile detection
const windowWidth = ref(window.innerWidth)
const isMobile = computed(() => windowWidth.value < 768)

const handleResize = () => {
  windowWidth.value = window.innerWidth
}

// State
const isLoading = ref(false)
const error = ref(null)
const selectedType = ref('clients')
const searchTerm = ref('')
const selectedPeriod = ref('all')
const detailedData = ref([])
const firstRow = ref(0)
const rowsPerPage = ref(25)
const expandedGroups = ref(new Set())
const isFilterSheetOpen = ref(false)

// Options
const typeOptions = [
  { label: 'Clienți', value: 'clients' },
  { label: 'Furnizori', value: 'suppliers' },
  { label: 'Trezorerie', value: 'treasury' }
]

const periodOptions = [
  { label: 'Toate', value: 'all' },
  { label: '7 zile', value: '7d' },
  { label: '1 lună', value: '1m' },
  { label: '3 luni', value: '3m' },
  { label: '6 luni', value: '6m' },
  { label: '12 luni', value: '12m' }
]

// Top bar actions for mobile
const topBarActions = computed(() => [
  {
    icon: 'pi pi-filter',
    label: 'Filtre',
    tooltip: 'Deschide filtre',
    active: searchTerm.value || selectedPeriod.value !== 'all'
  }
])

// 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' }
])

// Currency formatter
const formatCurrency = (value) => {
  if (value === null || value === undefined) return '0 RON'
  return new Intl.NumberFormat('ro-RO', {
    style: 'currency',
    currency: 'RON',
    minimumFractionDigits: 0,
    maximumFractionDigits: 0
  }).format(Math.abs(value))
}

// Date formatter
const formatDate = (value) => {
  if (!value) return '-'
  const date = new Date(value)
  if (isNaN(date.getTime())) return value
  return date.toLocaleDateString('ro-RO', {
    day: '2-digit',
    month: '2-digit',
    year: 'numeric'
  })
}

// Computed - Filtered and grouped data
const filteredData = computed(() => {
  if (!searchTerm.value) return detailedData.value
  return detailedData.value.filter((row) => {
    return Object.values(row).some((val) =>
      String(val).toLowerCase().includes(searchTerm.value.toLowerCase())
    )
  })
})

const groupedData = computed(() => {
  if (selectedType.value === 'treasury') return []

  const groups = {}
  const nameField = selectedType.value === 'clients' ? 'client' : 'furnizor'

  filteredData.value.forEach((row) => {
    const name = row[nameField]
    if (!name) return

    if (!groups[name]) {
      groups[name] = {
        name: name,
        facturi: [],
        totalSold: 0,
        hasRestant: false
      }
    }

    groups[name].facturi.push(row)
    groups[name].totalSold += row.sold || 0
    if (row.status === 'Restant') {
      groups[name].hasRestant = true
    }
  })

  return Object.values(groups)
})

const paginatedGroups = computed(() => {
  if (selectedType.value === 'treasury') return []
  return groupedData.value
})

const paginatedData = computed(() => {
  if (selectedType.value !== 'treasury') return []
  return filteredData.value
})

const totalRecords = computed(() => {
  return dashboardStore.detailedDataTotal || groupedData.value.length
})

// Helper functions
const getTypeLabel = (type) => {
  const option = typeOptions.find(o => o.value === type)
  return option?.label || type
}

const getPeriodLabel = (period) => {
  const option = periodOptions.find(o => o.value === period)
  return option?.label || period
}

const getStatusClass = (status) => {
  if (status === 'Restant') return 'status-restant'
  return 'status-ok'
}

const toggleGroup = (groupName) => {
  if (expandedGroups.value.has(groupName)) {
    expandedGroups.value.delete(groupName)
  } else {
    expandedGroups.value.add(groupName)
  }
}

const isGroupExpanded = (groupName) => {
  return expandedGroups.value.has(groupName)
}

const calculateTotal = (field) => {
  return filteredData.value.reduce((sum, row) => sum + (row[field] || 0), 0)
}

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

// Top bar action handler
const handleTopBarAction = (action) => {
  if (action.icon === 'pi pi-filter') {
    openFilters()
  }
}

// Filter functions
const openFilters = () => {
  isFilterSheetOpen.value = true
}

const clearSearch = () => {
  searchTerm.value = ''
  handleSearch()
}

const handleSearch = () => {
  firstRow.value = 0
  expandedGroups.value.clear()
}

const resetFilters = () => {
  selectedType.value = 'clients'
  searchTerm.value = ''
  selectedPeriod.value = 'all'
  firstRow.value = 0
  expandedGroups.value.clear()
  loadDetailedData()
}

const applyFilters = () => {
  isFilterSheetOpen.value = false
  firstRow.value = 0
  expandedGroups.value.clear()
  loadDetailedData()
}

const handlePageChange = () => {
  loadDetailedData()
}

// Data loading
const loadDetailedData = async () => {
  if (!companyStore.selectedCompany) {
    return
  }

  isLoading.value = true
  error.value = null

  try {
    const page = Math.floor(firstRow.value / rowsPerPage.value) + 1
    const luna = periodStore.selectedPeriod?.luna || null
    const an = periodStore.selectedPeriod?.an || null

    const response = await dashboardStore.loadDetailedData(
      selectedType.value,
      companyStore.selectedCompany.id_firma,
      page,
      rowsPerPage.value,
      searchTerm.value,
      luna,
      an
    )

    detailedData.value = response.data
    expandedGroups.value.clear()
  } catch (err) {
    console.error('Failed to load detailed data:', err)
    error.value = err.message || 'Nu s-au putut încărca datele'
    toast.add({
      severity: 'error',
      summary: 'Eroare',
      detail: 'Nu s-au putut încărca facturile detaliate',
      life: 3000
    })
  } finally {
    isLoading.value = false
  }
}

// Export functions
const exportExcel = () => {
  const ws = XLSX.utils.json_to_sheet(filteredData.value)
  const wb = XLSX.utils.book_new()
  XLSX.utils.book_append_sheet(wb, ws, selectedType.value)
  XLSX.writeFile(wb, `facturi_${selectedType.value}_${new Date().toISOString().split('T')[0]}.xlsx`)

  toast.add({
    severity: 'success',
    summary: 'Export reușit',
    detail: `${filteredData.value.length} înregistrări exportate`,
    life: 3000
  })
}

const exportPDF = () => {
  const doc = new jsPDF()

  const columns = selectedType.value === 'treasury'
    ? ['Cont', 'Nume Cont', 'Sold', 'Valută', 'Tip']
    : selectedType.value === 'clients'
      ? ['Client', 'Nr. Document', 'Data Doc.', 'Scadență', 'Facturat', 'Încasat', 'Sold']
      : ['Furnizor', 'Nr. Document', 'Data Doc.', 'Scadență', 'Facturat', 'Achitat', 'Sold']

  const rows = filteredData.value.map((row) => {
    if (selectedType.value === 'treasury') {
      return [row.cont, row.nume_cont, formatCurrency(row.sold), row.valuta, row.tip]
    }
    const nameField = selectedType.value === 'clients' ? 'client' : 'furnizor'
    const paidField = selectedType.value === 'clients' ? 'incasat' : 'achitat'
    return [
      row[nameField],
      row.numar_document,
      formatDate(row.data_document),
      formatDate(row.data_scadenta),
      formatCurrency(row.facturat),
      formatCurrency(row[paidField]),
      formatCurrency(row.sold)
    ]
  })

  doc.autoTable({
    head: [columns],
    body: rows,
    theme: 'grid',
    styles: { fontSize: 8 },
    headStyles: { fillColor: [59, 130, 246] }
  })

  doc.save(`facturi_${selectedType.value}_${new Date().toISOString().split('T')[0]}.pdf`)

  toast.add({
    severity: 'success',
    summary: 'Export reușit',
    detail: `PDF generat cu ${filteredData.value.length} înregistrări`,
    life: 3000
  })
}

// Watchers
watch(
  () => companyStore.selectedCompany,
  (newCompany) => {
    if (newCompany) {
      loadDetailedData()
    }
  }
)

watch(
  () => periodStore.selectedPeriod,
  (newPeriod, oldPeriod) => {
    if (newPeriod && (newPeriod.luna !== oldPeriod?.luna || newPeriod.an !== oldPeriod?.an)) {
      loadDetailedData()
    }
  },
  { deep: true }
)

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

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

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

/* Filters Card - Desktop */
.filters-card {
  background: var(--surface-card);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
}

.filters-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}

.filter-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.form-label {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--text-color-secondary);
}

.filters-actions {
  display: flex;
  gap: var(--space-sm);
  justify-content: flex-end;
  padding-top: var(--space-md);
  border-top: 1px solid var(--surface-border);
}

/* Mobile Filter Summary */
.mobile-filter-summary {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
  padding: var(--space-sm) 0;
}

.filter-chip {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  background: var(--surface-hover);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  color: var(--text-color);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.filter-chip:active {
  background: var(--surface-border);
}

.filter-chip.active {
  background: var(--primary-100);
  color: var(--color-primary);
}

.filter-chip .pi-times {
  font-size: 0.75rem;
  padding: 2px;
}

/* Loading State */
.loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-2xl);
  text-align: center;
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--surface-border);
  border-top: 3px solid var(--color-primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: var(--space-md);
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Error State */
.error-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-2xl);
  text-align: center;
  gap: var(--space-md);
}

.error-state .pi {
  font-size: 48px;
  color: var(--color-error);
}

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

/* Data Section */
.data-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

/* Table wrapper */
.table-wrapper {
  background: var(--surface-card);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.font-mono {
  font-family: var(--font-mono);
}

.font-bold {
  font-weight: var(--font-bold);
}

.name-cell {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.count-badge {
  font-size: var(--text-xs);
  color: var(--text-color-secondary);
  font-weight: var(--font-normal);
}

.sold-restant {
  color: var(--color-error) !important;
}

/* Mobile Cards */
.mobile-cards {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.invoice-card {
  background: var(--surface-card);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.invoice-card.has-multiple {
  cursor: pointer;
}

.card-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-md);
  background: var(--surface-hover);
  border-bottom: 1px solid var(--surface-border);
}

.header-left {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.header-right {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.card-badge {
  font-size: var(--text-xs);
  padding: 2px var(--space-xs);
  background: var(--primary-100);
  color: var(--color-primary);
  border-radius: var(--radius-sm);
}

.card-body {
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.card-field {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-field.highlight {
  padding-top: var(--space-sm);
  border-top: 1px solid var(--surface-border);
  margin-top: var(--space-xs);
}

.card-row-inline {
  display: flex;
  gap: var(--space-md);
}

.card-row-inline .card-field {
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.field-label {
  font-size: var(--text-xs);
  color: var(--text-color-secondary);
}

.field-value {
  font-size: var(--text-sm);
  color: var(--text-color);
  font-weight: var(--font-medium);
}

.sold-value {
  font-family: var(--font-mono);
  font-weight: var(--font-bold);
  color: var(--text-color);
}

.card-status {
  display: inline-flex;
  align-self: flex-start;
  font-size: var(--text-xs);
  padding: 2px var(--space-sm);
  border-radius: var(--radius-full);
  font-weight: var(--font-medium);
}

.status-ok {
  background: var(--green-100);
  color: var(--green-600);
}

.status-restant {
  background: var(--red-100);
  color: var(--red-600);
}

/* Sub items for expanded groups */
.card-sub-items {
  border-top: 1px solid var(--surface-border);
  padding: var(--space-sm) var(--space-md) var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.sub-item {
  padding: var(--space-sm);
  background: var(--surface-hover);
  border-radius: var(--radius-sm);
}

.sub-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  margin-bottom: 4px;
}

.sub-item-sold {
  font-family: var(--font-mono);
  font-weight: var(--font-bold);
}

.sub-item-dates {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-xs);
  color: var(--text-color-secondary);
}

/* Empty data state */
.empty-data {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-2xl);
  text-align: center;
  color: var(--text-color-secondary);
}

.empty-data .pi {
  font-size: 48px;
  margin-bottom: var(--space-md);
  opacity: 0.5;
}

/* Pagination */
.pagination-wrapper {
  display: flex;
  justify-content: center;
}

/* Totals Summary */
.totals-summary {
  display: flex;
  gap: var(--space-lg);
  padding: var(--space-md);
  background: var(--surface-card);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-md);
}

@media (max-width: 768px) {
  .totals-summary {
    flex-direction: column;
    gap: var(--space-sm);
  }
}

.total-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.total-label {
  font-size: var(--text-sm);
  color: var(--text-color-secondary);
}

.total-value {
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  font-family: var(--font-mono);
  color: var(--color-primary);
}

/* Filter Sheet Content */
.filter-sheet-content {
  padding: var(--space-sm) 0;
}

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

.filter-sheet-group {
  margin-bottom: var(--space-md);
}

.filter-sheet-group .form-label {
  display: block;
  margin-bottom: var(--space-xs);
}

.filter-sheet-actions {
  display: flex;
  gap: var(--space-md);
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--surface-border);
}

.flex-1 {
  flex: 1;
}

/* Dark mode support */
[data-theme="dark"] .filter-chip {
  background: var(--surface-100);
}

[data-theme="dark"] .filter-chip.active {
  background: var(--primary-800);
}

[data-theme="dark"] .card-badge {
  background: var(--primary-800);
}

[data-theme="dark"] .status-ok {
  background: var(--green-900);
  color: var(--green-300);
}

[data-theme="dark"] .status-restant {
  background: var(--red-900);
  color: var(--red-300);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .filter-chip {
    background: var(--surface-100);
  }

  :root:not([data-theme]) .filter-chip.active {
    background: var(--primary-800);
  }

  :root:not([data-theme]) .card-badge {
    background: var(--primary-800);
  }

  :root:not([data-theme]) .status-ok {
    background: var(--green-900);
    color: var(--green-300);
  }

  :root:not([data-theme]) .status-restant {
    background: var(--red-900);
    color: var(--red-300);
  }
}
</style>
