<template>
  <div class="app-container" :class="{ 'mobile-layout': isMobile }">
    <!-- US-501: Mobile Material Design Top Bar -->
    <MobileTopBar
      v-if="isMobile"
      title="Trezorerie"
      :show-menu="true"
      :actions="mobileTopBarActions"
      @menu-click="showDrawer = true"
      @action-click="handleTopBarAction"
    />

    <!-- US-501: Export Menu (for mobile export dropdown) -->
    <Menu ref="exportMenu" :model="exportMenuItems" :popup="true" />

    <!-- Mobile Drawer Menu (replaces old Sidebar) -->
    <MobileDrawerMenu
      v-model="showDrawer"
      :user="authStore.user"
      @logout="handleLogout"
    />

    <!-- US-109: Filter BottomSheet for mobile -->
    <BottomSheet v-model="showFilters">
      <h3 class="bottom-sheet-title">Filtre</h3>
      <div class="bottom-sheet-filters">
        <!-- Register Type -->
        <div class="form-group">
          <label class="form-label">Tip Registru</label>
          <Dropdown
            v-model="filters.registerType"
            :options="registerTypeOptions"
            option-label="label"
            option-value="value"
            placeholder="Selectați tipul"
            class="w-full"
            @change="handleFilterChange"
          />
        </div>

        <!-- Bank/Cash Account -->
        <div class="form-group">
          <label class="form-label">{{ contColumnHeader }}</label>
          <Dropdown
            v-model="filters.bankAccount"
            :options="bankAccountOptions"
            :placeholder="`Toate ${isBancaType ? 'băncile' : 'casele'}`"
            :showClear="true"
            class="w-full"
            @change="handleFilterChange"
            :disabled="!filters.registerType || bankAccountOptions.length === 0"
          />
        </div>

        <!-- Partner Search -->
        <div class="form-group">
          <label class="form-label">Căutare Partener</label>
          <InputText
            v-model="filters.partnerName"
            placeholder="Nume partener..."
            class="w-full"
            @input="handleSearchChange"
          />
        </div>

        <!-- Bottom sheet actions -->
        <div class="bottom-sheet-actions">
          <Button
            icon="pi pi-filter-slash"
            label="Resetează"
            class="p-button-outlined p-button-secondary"
            @click="resetFilters(); showFilters = false"
          />
          <Button
            icon="pi pi-check"
            label="Aplică"
            @click="showFilters = false"
          />
        </div>
      </div>
    </BottomSheet>

    <div class="register-view">
      <!-- Header - Desktop only -->
      <div class="page-header" v-if="!isMobile">
        <h1 class="page-title">
          <i class="pi pi-wallet"></i>
          Registru Casă / Bancă
        </h1>
      </div>

      <!-- Company Selection (when no company selected) -->
      <Card v-if="!companyStore.selectedCompany" class="company-selection-card">
        <template #content>
          <div class="company-selection">
            <p class="text-color-secondary mb-3">
              Selectați o companie pentru a vizualiza registrul de casă și
              bancă:
            </p>
            <Dropdown
              v-model="selectedCompanyId"
              :options="companyStore.companyListFormatted"
              option-label="displayName"
              option-value="id_firma"
              placeholder="Alegeți compania"
              class="w-full"
              @change="handleCompanyChange"
            />
          </div>
        </template>
      </Card>

      <!-- US-109: Mobile Totals Bar (replaces old two-row toolbar) -->
      <div v-if="isMobile && companyStore.selectedCompany && hasData" class="mobile-totals-bar">
        <div class="mobile-totals-grid">
          <div class="total-item">
            <span class="total-label">Sold Prec:</span>
            <span class="total-value">{{ formatCompact(treasuryStore.totals.sold_precedent_all) }}</span>
          </div>
          <div class="total-item">
            <span class="total-label">Încasări:</span>
            <span class="total-value incasari">{{ formatCompact(treasuryStore.totals.total_incasari_all) }}</span>
          </div>
          <div class="total-item">
            <span class="total-label">Plăți:</span>
            <span class="total-value plati">{{ formatCompact(treasuryStore.totals.total_plati_all) }}</span>
          </div>
          <div class="total-item">
            <span class="total-label">Sold Final:</span>
            <span class="total-value">{{ formatCompact(treasuryStore.totals.sold_final_all) }}</span>
          </div>
        </div>
      </div>

      <!-- Filters - Desktop only (mobile uses BottomSheet) -->
      <Card v-if="companyStore.selectedCompany && !isMobile" class="filters-card">
        <template #content>
          <div class="form">
            <div class="form-row">
              <div class="form-col">
                <div class="form-group">
                  <label class="form-label">Tip Registru</label>
                  <Dropdown
                    v-model="filters.registerType"
                    :options="registerTypeOptions"
                    option-label="label"
                    option-value="value"
                    placeholder="Selectați tipul"
                    class="w-full"
                    @change="handleFilterChange"
                  />
                </div>
              </div>
              <div class="form-col">
                <div class="form-group">
                  <label class="form-label">{{ contColumnHeader }}</label>
                  <Dropdown
                    v-model="filters.bankAccount"
                    :options="bankAccountOptions"
                    :placeholder="`Toate ${isBancaType ? 'băncile' : 'casele'}`"
                    :showClear="true"
                    class="w-full"
                    @change="handleFilterChange"
                    :disabled="
                      !filters.registerType || bankAccountOptions.length === 0
                    "
                  />
                </div>
              </div>
              <div class="form-col">
                <div class="form-group">
                  <label class="form-label">Căutare Partener</label>
                  <InputText
                    v-model="filters.partnerName"
                    placeholder="Nume partener..."
                    class="w-full"
                    @input="handleSearchChange"
                  />
                </div>
              </div>
            </div>

            <!-- US-501: Desktop Action buttons with Export dropdown -->
            <div v-if="!isMobile" class="form-actions">
              <Button
                icon="pi pi-filter-slash"
                label="Resetează Filtre"
                class="p-button-outlined p-button-secondary"
                @click="resetFilters"
              />
              <SplitButton
                label="Export"
                icon="pi pi-download"
                :model="desktopExportItems"
                @click="exportPDF"
                class="p-button-outlined"
                :disabled="!hasData"
              />
              <Button
                icon="pi pi-refresh"
                label="Actualizează"
                :loading="treasuryStore.isLoading"
                @click="refreshData"
              />
            </div>
          </div>
        </template>
      </Card>

      <!-- Summary Stats - Compact, right aligned (hidden on mobile - only Sold Final in toolbar) -->
      <!-- Folosește totaluri din TOATE înregistrările (backend) nu doar pagina curentă -->
      <div v-if="!isMobile && companyStore.selectedCompany" class="summary-stats-inline">
        <div class="stat-item">
          <span class="stat-label">Sold Precedent:</span>
          <span
            class="stat-value"
            :class="treasuryStore.totals.sold_precedent_all >= 0 ? 'incasari' : 'plati'"
            >{{ formatCurrency(treasuryStore.totals.sold_precedent_all) }}</span
          >
        </div>
        <div class="stat-item">
          <span class="stat-label">Încasări:</span>
          <span class="stat-value incasari">{{
            formatCurrency(treasuryStore.totals.total_incasari_all)
          }}</span>
        </div>
        <div class="stat-item">
          <span class="stat-label">Plăți:</span>
          <span class="stat-value plati">{{
            formatCurrency(treasuryStore.totals.total_plati_all)
          }}</span>
        </div>
        <div class="stat-item">
          <span class="stat-label">Sold Final:</span>
          <span
            class="stat-value"
            :class="treasuryStore.totals.sold_final_all >= 0 ? 'incasari' : 'plati'"
            >{{ formatCurrency(treasuryStore.totals.sold_final_all) }}</span
          >
        </div>
      </div>

      <!-- Data Table -->
      <Card v-if="companyStore.selectedCompany" class="data-card">
        <template #content>
          <!-- Mobile: Card Layout -->
          <div v-if="isMobile" class="mobile-card-list">
            <div
              v-for="reg in treasuryStore.registers"
              :key="`${reg.dataact}-${reg.nract}`"
              class="mobile-data-card"
            >
              <div class="card-header">{{ reg.nume || 'Fără partener' }}</div>
              <div class="card-row">
                <span class="card-meta">{{ formatDateShort(reg.dataact) }} · {{ reg.nume_cont_bancar }}</span>
                <span
                  class="card-amount"
                  :class="reg.incasari > 0 ? 'positive' : (reg.plati > 0 ? 'negative' : '')"
                >
                  <template v-if="reg.incasari > 0">+{{ formatNumber(reg.incasari) }}</template>
                  <template v-else-if="reg.plati > 0">-{{ formatNumber(reg.plati) }}</template>
                  <template v-else>{{ formatNumber(0) }}</template>
                </span>
              </div>
            </div>
            <div v-if="treasuryStore.registers.length === 0" class="mobile-empty">
              <i class="pi pi-info-circle"></i>
              <p>Nu au fost găsite înregistrări</p>
            </div>
          </div>

          <!-- Desktop: DataTable -->
          <DataTable
            v-if="!isMobile"
            :value="treasuryStore.registers"
            :loading="treasuryStore.isLoading"
            :paginator="true"
            :rows="pagination.rows"
            :total-records="treasuryStore.pagination.totalRecords"
            :lazy="true"
            :striped-rows="true"
            paginator-template="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown"
            :rows-per-page-options="[25, 50, 100]"
            current-page-report-template="Afișare {first} - {last} din {totalRecords} înregistrări"
            responsive-layout="scroll"
            @page="onPage"
            class="p-datatable-sm"
            :rowClass="getRowClass"
          >
            <template #empty>
              <div class="table-empty">
                <i class="pi pi-info-circle table-empty-icon"></i>
                <p class="table-empty-message">
                  Nu au fost găsite înregistrări
                </p>
              </div>
            </template>

            <template #loading>
              <div class="loading-state">
                <ProgressSpinner />
                <p>Se încarcă registrul...</p>
              </div>
            </template>

            <Column field="dataact" header="Data" sortable class="col-data">
              <template #body="slotProps">
                {{ formatDate(slotProps.data.dataact) }}
              </template>
            </Column>
            <Column field="nract" header="Nr." sortable class="col-nr" />
            <Column
              field="nume_cont_bancar"
              :header="contColumnHeader"
              sortable
              class="col-cont"
            />
            <Column
              field="nume"
              header="Partener"
              sortable
              class="col-partener"
            />
            <Column
              v-if="isValutaType"
              field="valuta"
              header="Valuta"
              sortable
              class="col-valuta"
            />
            <Column
              field="incasari"
              header="Încasări"
              sortable
              class="col-numeric"
            >
              <template #body="slotProps">
                <span class="numeric-value" v-if="slotProps.data.incasari > 0">
                  {{ formatNumber(slotProps.data.incasari) }}
                </span>
                <span class="numeric-value zero" v-else>0,00</span>
              </template>
            </Column>
            <Column field="plati" header="Plăți" sortable class="col-numeric">
              <template #body="slotProps">
                <span class="numeric-value" v-if="slotProps.data.plati > 0">
                  {{ formatNumber(slotProps.data.plati) }}
                </span>
                <span class="numeric-value zero" v-else>0,00</span>
              </template>
            </Column>
            <Column
              field="sold"
              header="Sold Cumulat"
              sortable
              class="col-numeric col-sold"
            >
              <template #body="slotProps">
                <span
                  class="numeric-value"
                  :class="{ negative: slotProps.data.sold < 0 }"
                >
                  {{ formatNumber(slotProps.data.sold) }}
                </span>
              </template>
            </Column>
            <Column
              field="explicatia"
              header="Explicație"
              class="col-explicatie"
            >
              <template #body="slotProps">
                {{ truncateText(slotProps.data.explicatia, 100) }}
              </template>
            </Column>
          </DataTable>
        </template>
      </Card>
    </div>

    <!-- US-109/US-307: Mobile Bottom Navigation (using default nav items) -->
    <MobileBottomNav v-if="isMobile" />
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted, watch } from "vue";
import { useToast } from "primevue/usetoast";
import { useTreasuryStore } from "@reports/stores/treasury";
import { useCompanyStore, useAuthStore } from "@reports/stores/sharedStores";
import { useAccountingPeriodStore } from "@reports/stores/sharedStores";
import { format } from "date-fns";
import { exportToExcel, exportBankCashRegisterPDF } from "@reports/utils/exportUtils";

// US-501: Mobile Material Design components
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 MobileDrawerMenu from "@shared/components/mobile/MobileDrawerMenu.vue";
import Menu from "primevue/menu";
import SplitButton from "primevue/splitbutton";
import { useRouter } from "vue-router";

const toast = useToast();
const router = useRouter();
const treasuryStore = useTreasuryStore();
const companyStore = useCompanyStore();
const periodStore = useAccountingPeriodStore();
const authStore = useAuthStore();

// State for company selection
const selectedCompanyId = ref(companyStore.selectedCompany?.id_firma || null);

// Mobile state
const isMobile = ref(window.innerWidth < 768);
const showFilters = ref(false);
const actionsMenu = ref(null);
const showDrawer = ref(false);

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

// US-501: Mobile TopBar actions (filter, reset, export dropdown)
const mobileTopBarActions = computed(() => [
  {
    icon: "pi pi-filter",
    label: "Filtre",
    tooltip: "Filtre",
    active: hasActiveFilters.value
  },
  {
    icon: "pi pi-filter-slash",
    label: "Resetează",
    tooltip: "Resetează Filtrele"
  },
  {
    icon: "pi pi-download",
    label: "Export",
    tooltip: "Export"
  }
]);

// US-501: Export menu ref for mobile
const exportMenu = ref(null);
const exportMenuItems = ref([
  {
    label: "Export PDF",
    icon: "pi pi-file-pdf",
    command: () => exportPDF()
  },
  {
    label: "Export XLSX",
    icon: "pi pi-file-excel",
    command: () => exportExcel()
  }
]);

// US-501: Desktop export dropdown items (SplitButton)
const desktopExportItems = ref([
  {
    label: "Export PDF",
    icon: "pi pi-file-pdf",
    command: () => exportPDF()
  },
  {
    label: "Export XLSX",
    icon: "pi pi-file-excel",
    command: () => exportExcel()
  }
]);

// US-501: Handle top bar action clicks
const handleTopBarAction = (action, event) => {
  if (action.icon === "pi pi-filter") {
    showFilters.value = !showFilters.value;
  } else if (action.icon === "pi pi-filter-slash") {
    resetFilters();
  } else if (action.icon === "pi pi-download") {
    exportMenu.value.toggle(event);
  }
};

// US-109: Bottom nav items for MobileBottomNav component
// US-307: Removed custom mobileBottomNavItems - using MobileBottomNav defaults

// Handle window resize
const handleResize = () => {
  isMobile.value = window.innerWidth < 768;
  if (!isMobile.value) {
    showFilters.value = false; // Reset when switching to desktop
  }
};

// Register type options for dropdown - doar cele 4 tipuri, fără "Toate"
const registerTypeOptions = [
  { label: "Casă LEI", value: "CASA_LEI" },
  { label: "Casă Valută", value: "CASA_VALUTA" },
  { label: "Bancă LEI", value: "BANCA_LEI" },
  { label: "Bancă Valută", value: "BANCA_VALUTA" },
];

const filters = ref({
  registerType: "BANCA_LEI", // Default: Registrul de Banca Lei
  partnerName: "",
  bankAccount: null, // Filter for specific bank/cash account
});

// Bank/cash account options for dropdown
const bankAccountOptions = ref([]);

const pagination = ref({
  page: 0,
  rows: 50,
});

const formatCurrency = (amount, currency = "RON") => {
  if (!amount) return "0,00 " + currency;
  return new Intl.NumberFormat("ro-RO", {
    style: "currency",
    currency: currency,
  }).format(amount);
};

const formatNumber = (amount) => {
  if (amount === null || amount === undefined) return "";
  return new Intl.NumberFormat("ro-RO", {
    minimumFractionDigits: 2,
    maximumFractionDigits: 2,
  }).format(amount);
};

const formatDate = (dateString) => {
  if (!dateString) return "";
  return format(new Date(dateString), "dd.MM.yyyy");
};

// Short date format for mobile cards (DD/MM)
const formatDateShort = (dateString) => {
  if (!dateString) return "";
  const date = new Date(dateString);
  return `${String(date.getDate()).padStart(2, "0")}/${String(date.getMonth() + 1).padStart(2, "0")}`;
};

// Compact number format (no decimals for large numbers)
const formatCompact = (amount) => {
  if (!amount) return "0";
  if (Math.abs(amount) >= 10000) {
    return new Intl.NumberFormat("ro-RO", {
      maximumFractionDigits: 0,
    }).format(amount);
  }
  return new Intl.NumberFormat("ro-RO", {
    minimumFractionDigits: 2,
    maximumFractionDigits: 2,
  }).format(amount);
};

// Truncate text to maxLength characters
const truncateText = (text, maxLength = 100) => {
  if (!text) return "";
  if (text.length <= maxLength) return text;
  return text.substring(0, maxLength) + "...";
};

// Check if current filter is a VALUTA type (to show Valuta column)
const isValutaType = computed(() => {
  return (
    filters.value.registerType === "CASA_VALUTA" ||
    filters.value.registerType === "BANCA_VALUTA"
  );
});

// Check if current filter is BANCA type (for dynamic column header)
const isBancaType = computed(() => {
  return (
    filters.value.registerType === "BANCA_LEI" ||
    filters.value.registerType === "BANCA_VALUTA"
  );
});

// Dynamic column header for Casa/Banca
const contColumnHeader = computed(() => {
  return isBancaType.value ? "Banca" : "Casa";
});

// Accounting period text for PDF export
const accountingPeriodText = computed(() => {
  // Use the global period store
  return periodStore.selectedPeriod?.display_name || "";
});

// Helper to remove diacritics from text
const removeDiacritics = (text) => {
  if (!text) return "";
  return text
    .replace(/[ăâ]/gi, (match) => (match === match.toLowerCase() ? "a" : "A"))
    .replace(/[îâ]/gi, (match) => (match === match.toLowerCase() ? "i" : "I"))
    .replace(/[ș]/gi, (match) => (match === match.toLowerCase() ? "s" : "S"))
    .replace(/[ț]/gi, (match) => (match === match.toLowerCase() ? "t" : "T"))
    .replace(/[Ă]/g, "A")
    .replace(/[Â]/g, "A")
    .replace(/[Î]/g, "I")
    .replace(/[Ș]/g, "S")
    .replace(/[Ț]/g, "T");
};

// Get register type label for PDF (no diacritics)
const getRegisterTypeLabel = (type) => {
  const labels = {
    CASA_LEI: "Casa LEI",
    CASA_VALUTA: "Casa Valuta",
    BANCA_LEI: "Banca LEI",
    BANCA_VALUTA: "Banca Valuta",
  };
  return labels[type] || type;
};

// Get PDF title based on register type
const getPdfTitle = (type) => {
  const titles = {
    CASA_LEI: "Registrul de Casa LEI",
    CASA_VALUTA: "Registrul de Casa Valuta",
    BANCA_LEI: "Registrul de Banca LEI",
    BANCA_VALUTA: "Registrul de Banca Valuta",
  };
  return titles[type] || "Registrul de Casa si Banca";
};

// Load bank/cash accounts for dropdown when register type changes
const loadBankAccounts = async () => {
  if (!companyStore.selectedCompany || !filters.value.registerType) {
    bankAccountOptions.value = [];
    return;
  }

  try {
    const apiService = (await import("../services/api")).default;
    const response = await apiService.get("/treasury/bank-cash-accounts", {
      params: {
        company: companyStore.selectedCompany.id_firma,
        register_type: filters.value.registerType,
      },
    });
    bankAccountOptions.value = response.data || [];
  } catch (error) {
    console.error("Failed to load bank accounts:", error);
    bankAccountOptions.value = [];
  }
};

// Watch for register type changes to reload bank accounts
watch(
  () => filters.value.registerType,
  async () => {
    // Reset bank account selection when register type changes
    filters.value.bankAccount = null;
    await loadBankAccounts();
  },
);

const getRowClass = (data) => {
  return data.tip_registru.includes("BANCA") ? "bank-row" : "cash-row";
};

const onPage = async (event) => {
  // PrimeVue pagination is 0-indexed for page
  pagination.value.page = event.page;
  pagination.value.rows = event.rows;
  await loadData();
};

const resetFilters = async () => {
  filters.value = {
    registerType: "BANCA_LEI", // Reset la default: Registrul de Banca Lei
    partnerName: "",
    bankAccount: null, // Reset bank account filter
  };
  pagination.value.page = 0;
  await loadBankAccounts(); // Reload bank accounts for default register type
  await loadData();
};

// Computed
const hasData = computed(() => treasuryStore.registers.length > 0);

// Mobile: Check if any filter is active (non-default value)
const hasActiveFilters = computed(() => {
  return (
    filters.value.registerType !== "BANCA_LEI" ||
    filters.value.partnerName !== "" ||
    filters.value.bankAccount !== null
  );
});

// Mobile: Actions menu items
const actionMenuItems = computed(() => [
  {
    label: "Resetează Filtre",
    icon: "pi pi-filter-slash",
    command: resetFilters,
  },
  {
    label: "Export Excel",
    icon: "pi pi-file-excel",
    command: exportExcel,
    disabled: !hasData.value,
  },
  {
    label: "Export PDF",
    icon: "pi pi-file-pdf",
    command: exportPDF,
    disabled: !hasData.value,
  },
  { separator: true },
  {
    label: "Actualizează",
    icon: "pi pi-refresh",
    command: refreshData,
  },
]);

// Handle company change from dropdown
const handleCompanyChange = async () => {
  if (!selectedCompanyId.value) return;
  const company = companyStore.getCompanyById(selectedCompanyId.value);
  if (company) {
    companyStore.setSelectedCompany(company);
    await loadData();
  }
};

// Handle filter change
const handleFilterChange = async () => {
  pagination.value.page = 0;
  await loadData();
};

// Debounced search handler
const handleSearchChange = (() => {
  let timeout;
  return () => {
    clearTimeout(timeout);
    timeout = setTimeout(async () => {
      pagination.value.page = 0;
      await loadData();
    }, 500);
  };
})();

// Refresh data with toast notification
const refreshData = async () => {
  await loadData();
  toast.add({
    severity: "success",
    summary: "Actualizare reușită",
    detail: "Registrul a fost actualizat cu succes",
    life: 3000,
  });
};

// Fetch ALL data for export (not just current page)
const fetchAllData = async () => {
  if (!companyStore.selectedCompany) return [];
  if (!periodStore.selectedPeriod) return [];

  try {
    // Get luna/an from period store
    const { luna, an } = periodStore.selectedPeriod;

    const params = {
      company: companyStore.selectedCompany.id_firma,
      page: 1,
      page_size: 999999, // Get all data
      luna: luna,
      an: an,
    };

    // Add register_type filter
    if (filters.value.registerType) {
      params.register_type = filters.value.registerType;
    }

    if (filters.value.partnerName) {
      params.partner_name = filters.value.partnerName;
    }
    if (filters.value.bankAccount) {
      params.bank_account = filters.value.bankAccount;
    }

    const apiService = (await import("../services/api")).default;
    const response = await apiService.get("/treasury/bank-cash-register", {
      params,
    });

    return response.data.registers || [];
  } catch (error) {
    console.error("Failed to fetch all data:", error);
    return [];
  }
};

// Export to Excel
const exportExcel = async () => {
  if (!hasData.value) {
    toast.add({
      severity: "warn",
      summary: "Nu există date",
      detail: "Nu există înregistrări de exportat",
      life: 3000,
    });
    return;
  }

  toast.add({
    severity: "info",
    summary: "Se pregătește exportul",
    detail: "Se încarcă toate datele...",
    life: 2000,
  });

  const allData = await fetchAllData();

  if (allData.length === 0) {
    toast.add({
      severity: "error",
      summary: "Eroare",
      detail: "Nu s-au putut prelua datele pentru export",
      life: 3000,
    });
    return;
  }

  // Prepare data for export - conditionally include Valuta column only for VALUTA types
  // Column order: Data, Nr., Casă/Bancă, Partener, [Valuta], Încasări, Plăți, Sold Cumulat, Explicație
  const exportData = allData.map((row) => {
    const baseData = {
      Data: row.dataact ? formatDate(row.dataact) : "",
      "Nr.": row.nract || "",
    };

    // Use dynamic column name (Casă/Bancă) - BEFORE Partener
    baseData[contColumnHeader.value] = row.nume_cont_bancar || "";
    baseData["Partener"] = row.nume || "";

    // Add Valuta column only for VALUTA register types
    if (isValutaType.value) {
      baseData["Valuta"] = row.valuta || "";
    }

    // Add numeric columns
    baseData["Încasări"] = parseFloat(row.incasari) || 0;
    baseData["Plăți"] = parseFloat(row.plati) || 0;
    baseData["Sold Cumulat"] = parseFloat(row.sold) || 0;
    baseData["Explicație"] = truncateText(row.explicatia, 100);

    return baseData;
  });

  const result = exportToExcel(
    exportData,
    `registru_casa_banca_${companyStore.selectedCompany.name.replace(/\s+/g, "_")}`,
    "Registru Casă și Bancă",
  );

  if (result.success) {
    toast.add({
      severity: "success",
      summary: "Export reușit",
      detail: `${allData.length} înregistrări exportate cu succes`,
      life: 3000,
    });
  } else {
    toast.add({
      severity: "error",
      summary: "Eroare la export",
      detail: "Nu s-a putut genera fișierul Excel",
      life: 3000,
    });
  }
};

// Export to PDF
const exportPDF = async () => {
  if (!hasData.value) {
    toast.add({
      severity: "warn",
      summary: "Nu există date",
      detail: "Nu există înregistrări de exportat",
      life: 3000,
    });
    return;
  }

  toast.add({
    severity: "info",
    summary: "Se pregătește exportul",
    detail: "Se încarcă toate datele...",
    life: 2000,
  });

  const allData = await fetchAllData();

  if (allData.length === 0) {
    toast.add({
      severity: "error",
      summary: "Eroare",
      detail: "Nu s-au putut prelua datele pentru export",
      life: 3000,
    });
    return;
  }

  // Dynamic title based on register type
  const pdfTitle = getPdfTitle(filters.value.registerType);

  // Use the specialized Bank Cash Register PDF export
  const result = exportBankCashRegisterPDF(
    allData,
    {
      companyName: removeDiacritics(companyStore.selectedCompany?.name || ""),
      title: pdfTitle,
      luna: treasuryStore.accountingPeriod.luna,
      an: treasuryStore.accountingPeriod.an,
      isBanca: isBancaType.value,
    },
    `registru-casa-banca-${companyStore.selectedCompany.name.replace(/\s+/g, "-")}`,
  );

  if (result.success) {
    toast.add({
      severity: "success",
      summary: "Export reușit",
      detail: `${allData.length} înregistrări exportate cu succes`,
      life: 3000,
    });
  } else {
    toast.add({
      severity: "error",
      summary: "Eroare la export",
      detail: "Nu s-a putut genera fișierul PDF",
      life: 3000,
    });
  }
};

const loadData = async () => {
  if (!companyStore.selectedCompany) return;
  if (!periodStore.selectedPeriod) return; // Wait for period to be loaded

  treasuryStore.setPagination(pagination.value);

  // Get luna/an from period store
  const { luna, an } = periodStore.selectedPeriod;

  // Build filter params with luna/an instead of date_from/date_to
  const filterParams = {
    partner_name: filters.value.partnerName || undefined,
    register_type: filters.value.registerType || undefined,
    bank_account: filters.value.bankAccount || undefined,
    luna: luna,
    an: an,
  };

  await treasuryStore.loadBankCashRegister(
    companyStore.selectedCompany.id_firma,
    filterParams,
  );
};

onMounted(async () => {
  // Add resize listener for mobile detection
  window.addEventListener("resize", handleResize);

  // Load companies if not loaded
  if (!companyStore.hasCompanies) {
    await companyStore.loadCompanies();
  }

  // Load bank accounts for initial register type if company is selected
  if (companyStore.selectedCompany) {
    await loadBankAccounts();
  }
  // Don't load data here - let period watch handle it with immediate: true
});

onUnmounted(() => {
  window.removeEventListener("resize", handleResize);
});

// Watch for company changes
watch(
  () => companyStore.selectedCompany,
  async (newCompany) => {
    if (newCompany && periodStore.selectedPeriod) {
      await loadBankAccounts();
      await loadData();
    }
  },
);

// Watch for period changes - reload data when period changes
watch(
  () => periodStore.selectedPeriod,
  async (newPeriod) => {
    if (newPeriod && companyStore.selectedCompany) {
      await loadData();
    }
  },
  { immediate: true },
);
</script>

<style scoped>
/* ================================================
   US-109: BankCashRegisterView Mobile Material Design Styles
   ================================================ */

/* Page Container */
.register-view {
  max-width: 1400px;
  margin: 0 auto;
  padding: var(--space-xl);
}

/* Mobile layout adjustments for top/bottom bars */
.mobile-layout .register-view {
  padding-top: calc(56px + var(--space-md)); /* Account for fixed MobileTopBar */
  padding-bottom: calc(56px + var(--space-md)); /* Account for fixed MobileBottomNav */
  padding-left: var(--space-md);
  padding-right: var(--space-md);
}

/* Card Spacing */
.company-selection-card,
.filters-card,
.data-card {
  margin-bottom: var(--space-xl);
}

/* Numeric Values - Page-specific formatting */
.numeric-value {
  display: block;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-family: var(--font-mono, "Roboto Mono", "Consolas", monospace);
}

.numeric-value.zero {
  color: var(--color-text-muted);
}

.numeric-value.negative {
  color: var(--color-error);
}

/* ================================================
   US-109: Mobile Totals Bar
   ================================================ */

.mobile-totals-bar {
  background: var(--surface-card);
  border: 1px solid var(--surface-border);
  padding: var(--space-sm) var(--space-md);
  margin-bottom: var(--space-md);
  border-radius: var(--radius-md);
}

.mobile-totals-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-xs) var(--space-md);
}

.mobile-totals-bar .total-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.mobile-totals-bar .total-label {
  font-size: var(--text-xs);
  color: var(--text-color-secondary);
  font-weight: var(--font-medium);
}

.mobile-totals-bar .total-value {
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  color: var(--text-color);
}

.mobile-totals-bar .total-value.incasari {
  color: var(--green-600);
}

.mobile-totals-bar .total-value.plati {
  color: var(--red-600);
}

/* ================================================
   US-109: Mobile Card List (Treasury Cards)
   ================================================ */

.mobile-card-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.mobile-data-card {
  background: var(--surface-card);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
}

.mobile-data-card .card-header {
  font-weight: var(--font-semibold);
  color: var(--text-color);
  margin-bottom: var(--space-xs);
  font-size: var(--text-base);
}

.mobile-data-card .card-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--text-sm);
  color: var(--text-color-secondary);
}

.mobile-data-card .card-meta {
  font-size: var(--text-xs);
  color: var(--text-color-secondary);
}

.mobile-data-card .card-amount {
  font-weight: var(--font-semibold);
  color: var(--text-color);
  font-variant-numeric: tabular-nums;
}

.mobile-data-card .card-amount.positive {
  color: var(--green-600);
}

.mobile-data-card .card-amount.negative {
  color: var(--red-600);
}

.mobile-empty {
  text-align: center;
  padding: var(--space-xl);
  color: var(--text-color-secondary);
}

.mobile-empty i {
  font-size: var(--text-3xl);
  margin-bottom: var(--space-sm);
  display: block;
}

/* ================================================
   US-109: Bottom Sheet Styles
   ================================================ */

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

.bottom-sheet-filters {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

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

/* ================================================
   US-109: Mobile Sidebar Menu Styles
   ================================================ */

.sidebar-header {
  padding: var(--space-md);
}

.sidebar-title {
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  color: var(--text-color);
}

.sidebar-menu {
  display: flex;
  flex-direction: column;
  padding: var(--space-sm);
}

.sidebar-item {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md);
  color: var(--text-color);
  text-decoration: none;
  border-radius: var(--radius-md);
  font-weight: var(--font-medium);
  transition: background var(--transition-fast);
}

.sidebar-item:hover {
  background: var(--surface-hover);
}

.sidebar-item.active {
  background: var(--blue-50);
  color: var(--color-primary);
}

.sidebar-item i {
  font-size: var(--text-xl);
  width: 24px;
  text-align: center;
}

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

[data-theme="dark"] .mobile-totals-bar .total-value.incasari {
  color: var(--green-400);
}

[data-theme="dark"] .mobile-totals-bar .total-value.plati {
  color: var(--red-400);
}

[data-theme="dark"] .mobile-data-card .card-amount.positive {
  color: var(--green-400);
}

[data-theme="dark"] .mobile-data-card .card-amount.negative {
  color: var(--red-400);
}

[data-theme="dark"] .sidebar-item.active {
  background: var(--blue-900);
  color: var(--blue-400);
}

/* Auto dark mode */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .mobile-totals-bar .total-value.incasari {
    color: var(--green-400);
  }

  :root:not([data-theme]) .mobile-totals-bar .total-value.plati {
    color: var(--red-400);
  }

  :root:not([data-theme]) .mobile-data-card .card-amount.positive {
    color: var(--green-400);
  }

  :root:not([data-theme]) .mobile-data-card .card-amount.negative {
    color: var(--red-400);
  }

  :root:not([data-theme]) .sidebar-item.active {
    background: var(--blue-900);
    color: var(--blue-400);
  }
}

/* ================================================
   Responsive Design
   ================================================ */

@media (max-width: 768px) {
  .register-view {
    padding: var(--space-md);
  }
}
</style>
