<template>
  <div class="receipt-create-view">
    <div class="roa-card">
      <div class="roa-card-header">
        <div>
          <h2 class="roa-card-title">
            <i :class="isViewMode ? 'pi pi-receipt' : 'pi pi-plus-circle'"></i>
            {{ isViewMode ? `Bon #${receipt?.id}` : (isEditMode ? 'Editare Bon Fiscal' : 'Bon Fiscal Nou') }}
          </h2>
          <span v-if="isViewMode && receipt" :class="['status-badge', getStatusClass(receipt.status)]">
            {{ getStatusLabel(receipt.status) }}
          </span>
        </div>
      </div>

      <!-- Rejection Reason Alert -->
      <div v-if="receipt?.rejection_reason" class="rejection-alert">
        <i class="pi pi-exclamation-triangle"></i>
        <div>
          <strong>Motiv respingere:</strong>
          <p>{{ receipt.rejection_reason }}</p>
          <small>Respins de {{ receipt.reviewed_by }} la {{ formatDateTime(receipt.reviewed_at) }}</small>
        </div>
      </div>

      <form id="receipt-form" @submit.prevent="saveReceipt">
        <div class="receipt-form-layout">
          <!-- COLOANA STÂNGA: Upload & OCR / Attachments -->
          <div class="form-column-left">
            <!-- OCR Section - hidden in view mode -->
            <div class="upload-section" v-if="!isViewMode">
              <h3>
                <i class="pi pi-camera"></i>
                {{ isEditMode ? 'Re-scanare OCR (optional)' : 'Poza Bon' }}
              </h3>

              <!-- OCR Upload Zone -->
              <OCRUploadZone
                ref="ocrUploadZone"
                @ocr-result="onOCRResult"
                @file-selected="onOCRFileSelected"
                @error="onOCRError"
              />

              <!-- OCR Applied Banner (collapsed state) -->
              <div
                v-if="ocrData && ocrCollapsed"
                class="ocr-applied-banner"
                @click="ocrCollapsed = false"
              >
                <i class="pi pi-check-circle"></i>
                <span>Date OCR aplicate</span>
                <i class="pi pi-chevron-down"></i>
              </div>

              <!-- OCR Preview (expanded state) -->
              <OCRPreview
                v-if="ocrData && !ocrCollapsed"
                :data="ocrData"
                @apply="applyOCRData"
                @dismiss="dismissOCRData"
                @collapse="ocrCollapsed = true"
              />
            </div>

            <!-- View-only Attachments (view mode) -->
            <div class="upload-section" v-if="isViewMode && existingAttachments.length">
              <h3>
                <i class="pi pi-images"></i>
                Atasamente ({{ existingAttachments.length }})
              </h3>
              <div class="attachments-grid">
                <div
                  v-for="att in existingAttachments"
                  :key="att.id"
                  class="attachment-item"
                >
                  <template v-if="att.mime_type?.startsWith('image/')">
                    <Image
                      :src="attachmentBlobUrls[att.id] || ''"
                      :alt="att.filename"
                      preview
                      class="attachment-image"
                    />
                  </template>
                  <template v-else>
                    <div class="pdf-attachment">
                      <i class="pi pi-file-pdf"></i>
                      <span>{{ att.filename }}</span>
                    </div>
                  </template>
                  <Button
                    icon="pi pi-download"
                    severity="secondary"
                    rounded
                    size="small"
                    class="download-btn"
                    @click="downloadAttachment(att)"
                  />
                </div>
              </div>
            </div>

            <!-- Empty state for view mode with no attachments -->
            <div class="upload-section" v-if="isViewMode && !existingAttachments.length">
              <h3>
                <i class="pi pi-images"></i>
                Atasamente
              </h3>
              <div class="empty-state">
                <i class="pi pi-image"></i>
                <p>Niciun atasament</p>
              </div>
            </div>

            <!-- Standard Upload Section (for edit mode or additional files) -->
            <div class="upload-section" v-if="isEditMode || selectedFiles.length > 0">
              <h3 v-if="isEditMode">
                <i class="pi pi-images"></i>
                Atasamente
                <!-- Simple add button for edit mode -->
                <Button
                  icon="pi pi-plus"
                  label="Adauga"
                  severity="secondary"
                  size="small"
                  class="add-attachment-btn"
                  @click="triggerFileInput"
                />
                <input
                  ref="editFileInput"
                  type="file"
                  accept="image/*,application/pdf"
                  multiple
                  class="hidden-file-input"
                  @change="onEditFileSelect"
                />
              </h3>
              <h3 v-else-if="selectedFiles.length > 0">
                <i class="pi pi-paperclip"></i>
                Fisiere Selectate
              </h3>

              <!-- Existing attachments (edit mode) -->
              <div v-if="existingAttachments.length" class="image-preview-grid">
                <div
                  v-for="att in existingAttachments"
                  :key="att.id"
                  class="image-preview-item"
                >
                  <!-- Image with loaded blob URL -->
                  <img
                    v-if="att.mime_type?.startsWith('image/') && attachmentBlobUrls[att.id]"
                    :src="attachmentBlobUrls[att.id]"
                    :alt="att.filename"
                  />
                  <!-- Placeholder when blob not yet loaded -->
                  <div
                    v-else-if="att.mime_type?.startsWith('image/') && !attachmentBlobUrls[att.id]"
                    class="image-placeholder"
                  >
                    <i class="pi pi-image" style="font-size: 2rem; color: #94a3b8;"></i>
                    <span>{{ att.filename }}</span>
                  </div>
                  <div v-else class="pdf-preview">
                    <i class="pi pi-file-pdf" style="font-size: 2rem;"></i>
                    <span>{{ att.filename }}</span>
                  </div>
                  <div class="attachment-actions">
                    <!-- OCR Rescan button for images -->
                    <Button
                      v-if="att.mime_type?.startsWith('image/')"
                      icon="pi pi-sync"
                      severity="info"
                      rounded
                      size="small"
                      :loading="ocrRescanningId === att.id"
                      @click="rescanAttachmentOCR(att)"
                    />
                    <Button
                      icon="pi pi-download"
                      severity="secondary"
                      rounded
                      size="small"
                      @click="downloadAttachment(att)"
                    />
                    <Button
                      icon="pi pi-times"
                      severity="danger"
                      rounded
                      size="small"
                      @click="removeExistingAttachment(att.id)"
                    />
                  </div>
                </div>
              </div>

              <!-- Selected files preview (both create and edit mode) -->
              <div v-if="selectedFiles.length" class="selected-files-list">
                <div
                  v-for="(file, index) in selectedFiles"
                  :key="index"
                  class="selected-file-item"
                >
                  <i :class="file.type.startsWith('image/') ? 'pi pi-image' : 'pi pi-file-pdf'"></i>
                  <span class="file-name">{{ file.name }}</span>
                  <span class="file-size">{{ formatFileSize(file.size) }}</span>
                  <Button
                    icon="pi pi-times"
                    severity="danger"
                    rounded
                    size="small"
                    @click="removeSelectedFile(index)"
                  />
                </div>
              </div>

              <!-- New files pending upload (edit mode) -->
              <div v-if="isEditMode && selectedFiles.length" class="selected-files-list">
                <div class="pending-files-header">Fisiere noi de incarcat:</div>
                <div
                  v-for="(file, index) in selectedFiles"
                  :key="index"
                  class="selected-file-item"
                >
                  <i :class="file.type.startsWith('image/') ? 'pi pi-image' : 'pi pi-file-pdf'"></i>
                  <span class="file-name">{{ file.name }}</span>
                  <span class="file-size">{{ formatFileSize(file.size) }}</span>
                  <Button
                    icon="pi pi-times"
                    severity="danger"
                    rounded
                    size="small"
                    @click="removeSelectedFile(index)"
                  />
                </div>
              </div>
            </div>
          </div>

          <!-- COLOANA DREAPTA: Formular Compact (flat layout, no sections) -->
          <div class="form-column-right">
            <!-- SECTION: Furnizor -->
            <div class="form-group">
              <div class="form-row">
                <div class="form-field flex-2">
                  <label>Furnizor</label>
                  <AutoComplete
                    v-model="form.partner_name"
                    :suggestions="filteredPartners"
                    optionLabel="name"
                    field="name"
                    @complete="searchPartners"
                    @item-select="onPartnerSelect"
                    placeholder="Cauta furnizor..."
                    dropdown
                    :forceSelection="false"
                    :disabled="isReadOnly"
                  />
                  <small v-if="supplierSource" class="p-text-success supplier-selected">
                    <i class="pi pi-check-circle"></i>
                    Validat ({{ supplierSource }})
                  </small>
                </div>
                <div class="form-field flex-1">
                  <label>CUI</label>
                  <InputText v-model="form.cui" placeholder="RO12345678" :disabled="isReadOnly" />
                  <small v-if="supplierWarning.show" class="p-text-warning supplier-warning">
                    <i class="pi pi-exclamation-triangle"></i>
                    Negasit
                  </small>
                </div>
              </div>
              <!-- Adresa colapsata -->
              <div class="address-collapsed" v-if="form.vendor_address" @click="showAddressExpanded = !showAddressExpanded">
                <i :class="showAddressExpanded ? 'pi pi-chevron-up' : 'pi pi-chevron-down'"></i>
                <span class="address-preview">{{ showAddressExpanded ? 'Ascunde adresa' : form.vendor_address }}</span>
              </div>
              <div class="address-expanded" v-if="form.vendor_address && showAddressExpanded">
                <InputText v-model="form.vendor_address" placeholder="Adresa furnizor" :disabled="isReadOnly" class="input-small" />
              </div>
            </div>

            <!-- SECTION: Document (all on one line) -->
            <div class="form-group">
              <div class="form-row document-row-inline">
                <div class="form-field">
                  <label>Tip</label>
                  <Dropdown
                    v-model="form.receipt_type"
                    :options="receiptTypeOptions"
                    optionLabel="label"
                    optionValue="value"
                    placeholder="Tip"
                    :disabled="isReadOnly"
                    class="dropdown-compact dropdown-borderless"
                  />
                </div>
                <div class="form-field">
                  <label>Nr.</label>
                  <InputText v-model="form.receipt_number" placeholder="12345" style="max-width: 90px;" :disabled="isReadOnly" />
                </div>
                <div class="form-field">
                  <label>Data *</label>
                  <Calendar
                    v-model="form.receipt_date"
                    dateFormat="dd.mm.yy"
                    showIcon
                    required
                    :disabled="isReadOnly"
                  />
                </div>
                <div class="form-field">
                  <div class="direction-header">
                    <label>Operatiune</label>
                    <Tag
                      v-if="directionAutoDetected"
                      severity="info"
                      value="Auto"
                      class="auto-tag"
                    />
                  </div>
                  <Dropdown
                    v-model="form.direction"
                    :options="directionOptions"
                    optionLabel="label"
                    optionValue="value"
                    placeholder="Tip"
                    :disabled="isReadOnly"
                    @change="directionAutoDetected = false"
                    class="dropdown-compact dropdown-borderless"
                  />
                </div>
              </div>
              <!-- Warning when ÎNCASARE but no client data -->
              <Message v-if="missingClientWarning" severity="warn" :closable="false" class="mt-1 message-compact">
                <small>Incasare detectata dar lipsesc datele clientului.</small>
              </Message>
            </div>

            <!-- SECTION: VALORI (compact inline layout) -->
            <div class="form-group values-section">
              <!-- Row 1: TOTAL + Payment methods (CARD/NUMERAR) + Mod Plata (at END to avoid overlap) -->
              <div class="values-row-inline">
                <div class="value-item value-item-total">
                  <label>TOTAL *</label>
                  <InputNumber
                    v-model="form.amount"
                    :minFractionDigits="2"
                    :maxFractionDigits="2"
                    required
                    :disabled="isReadOnly"
                    class="input-compact"
                    :pt="{ root: { style: 'width: 130px' } }"
                  />
                </div>
                <!-- Payment methods from OCR (CARD, NUMERAR) - BEFORE Mod Plata -->
                <div class="value-item payment-method-item" v-for="(pm, idx) in form.payment_methods" :key="pm.method">
                  <label>{{ pm.method }}</label>
                  <InputNumber
                    v-model="form.payment_methods[idx].amount"
                    locale="en-US"
                    :minFractionDigits="2"
                    :maxFractionDigits="2"
                    :disabled="isReadOnly"
                    :inputStyle="{ width: '110px' }"
                    class="input-payment-method"
                  />
                </div>
                <!-- Mod Plata at END - can't overlap anything after it -->
                <div class="value-item value-item-payment">
                  <label>Mod Plata</label>
                  <Dropdown
                    v-model="form.payment_mode"
                    :options="paymentModeOptions"
                    optionLabel="label"
                    optionValue="value"
                    placeholder="Selecteaza"
                    :disabled="isReadOnly"
                    class="dropdown-payment dropdown-borderless"
                  />
                </div>
              </div>

              <!-- Row 2: TVA entries inline (only if present) -->
              <div class="values-row-inline tva-compact" v-if="form.tva_breakdown?.length > 0">
                <div class="value-item tva-item" v-for="(entry, idx) in form.tva_breakdown" :key="'tva-'+idx">
                  <label>TVA {{ entry.code }} {{ entry.percent }}%</label>
                  <InputNumber
                    v-model="form.tva_breakdown[idx].amount"
                    :minFractionDigits="2"
                    :maxFractionDigits="2"
                    :disabled="isReadOnly"
                    :inputStyle="{ width: '110px' }"
                    class="input-tva"
                  />
                </div>
                <div class="value-item tva-total-item">
                  <label>Total TVA</label>
                  <span class="tva-total-value">{{ formatTvaTotal() }}</span>
                </div>
              </div>
            </div>

            <!-- SECTION: Categorizare -->
            <div class="form-group form-group-last">
              <div class="form-row">
                <div class="form-field flex-1">
                  <label>Tip Cheltuiala *</label>
                  <Dropdown
                    v-model="form.expense_type_code"
                    :options="expenseTypes"
                    optionLabel="name"
                    optionValue="code"
                    placeholder="Selecteaza tip cheltuiala"
                    required
                    :disabled="isReadOnly"
                    class="dropdown-borderless"
                  />
                </div>
              </div>
              <div class="form-row optional-fields">
                <div class="form-field flex-2">
                  <label class="label-small">Descriere</label>
                  <Textarea
                    v-model="form.description"
                    rows="2"
                    placeholder="Descriere optionala..."
                    :disabled="isReadOnly"
                  />
                </div>
                <div class="form-field items-count-field" v-if="form.items_count">
                  <label class="label-small label-muted">Nr. Art.</label>
                  <InputNumber
                    v-model="form.items_count"
                    :min="1"
                    placeholder="17"
                    class="items-count-input"
                    :disabled="isReadOnly"
                  />
                </div>
              </div>
            </div>
          </div>
          <!-- End form-column-right -->
        </div>
        <!-- End receipt-form-layout -->

        <!-- Accounting Entries (view mode only) -->
        <div v-if="isViewMode && receipt?.entries?.length" class="entries-section">
          <h3>
            <i class="pi pi-book"></i>
            Note Contabile
          </h3>
          <div class="entries-table-container">
            <table class="entries-table">
              <thead>
                <tr>
                  <th>Tip</th>
                  <th>Cont</th>
                  <th>Denumire Cont</th>
                  <th style="text-align: right;">Suma</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="entry in receipt.entries" :key="entry.id">
                  <td>
                    <Tag
                      :value="entry.entry_type === 'debit' ? 'D' : 'C'"
                      :severity="entry.entry_type === 'debit' ? 'danger' : 'success'"
                    />
                  </td>
                  <td>{{ entry.account_code }}</td>
                  <td>{{ entry.account_name || '-' }}</td>
                  <td :class="entry.entry_type" style="text-align: right;">
                    {{ formatAmount(entry.amount) }}
                  </td>
                </tr>
              </tbody>
              <tfoot>
                <tr>
                  <td colspan="3" style="text-align: right;"><strong>Total Debit:</strong></td>
                  <td class="debit" style="text-align: right;">
                    <strong>{{ formatAmount(totalDebit) }}</strong>
                  </td>
                </tr>
                <tr>
                  <td colspan="3" style="text-align: right;"><strong>Total Credit:</strong></td>
                  <td class="credit" style="text-align: right;">
                    <strong>{{ formatAmount(totalCredit) }}</strong>
                  </td>
                </tr>
              </tfoot>
            </table>

            <div v-if="!isBalanced" class="balance-warning">
              <i class="pi pi-exclamation-triangle"></i>
              Atentie: Notele contabile nu sunt echilibrate!
            </div>
          </div>
        </div>

        <!-- Spacer for floating buttons -->
        <div class="floating-buttons-spacer"></div>
      </form>

      <!-- Pre-validation Banners -->
      <div class="validation-banners" v-if="!isViewMode">
        <!-- Missing required fields banner -->
        <div class="validation-banner" v-if="missingRequiredFields.length > 0">
          <i class="pi pi-exclamation-circle"></i>
          <span>Campuri obligatorii necompletate: <strong>{{ missingRequiredFields.join(', ') }}</strong></span>
        </div>

        <!-- Cross-validation warning: amount vs payment methods -->
        <div class="validation-banner warning" v-if="!validationState.amountMatchesPayments">
          <i class="pi pi-exclamation-triangle"></i>
          <span>Totalul nu corespunde cu suma metodelor de plata</span>
        </div>
      </div>
    </div>

    <!-- Action Buttons - Top Horizontal -->
    <div class="action-buttons-top">
      <Button
        icon="pi pi-arrow-left"
        label="Inapoi"
        severity="secondary"
        @click="$router.push('/data-entry')"
      />

      <!-- View mode buttons -->
      <template v-if="isViewMode">
        <Button
          v-if="receipt?.status === 'draft' || receipt?.status === 'rejected'"
          icon="pi pi-pencil"
          label="Editeaza"
          @click="$router.push(`/data-entry/${receipt.id}/edit`)"
        />
        <Button
          v-if="receipt?.status === 'draft'"
          icon="pi pi-send"
          label="Trimite"
          severity="success"
          @click="submitReceipt"
          :loading="submitting"
        />
        <Button
          v-if="receipt?.status === 'rejected'"
          icon="pi pi-refresh"
          label="Re-trimite"
          severity="warning"
          @click="resubmitReceipt"
          :loading="submitting"
        />
        <!-- Pending review: Approve/Reject buttons -->
        <Button
          v-if="receipt?.status === 'pending_review'"
          icon="pi pi-check"
          label="Valideaza"
          severity="success"
          @click="approveReceipt"
          :loading="approving"
        />
        <Button
          v-if="receipt?.status === 'pending_review'"
          icon="pi pi-times"
          label="Respinge"
          severity="danger"
          @click="openRejectDialog"
          :loading="rejecting"
        />
        <!-- Approved: Unapprove button -->
        <Button
          v-if="receipt?.status === 'approved'"
          icon="pi pi-undo"
          label="Anuleaza Validarea"
          severity="warning"
          @click="unapproveReceipt"
          :loading="unapproving"
        />
      </template>

      <!-- Edit/Create mode buttons -->
      <template v-else>
        <Button
          type="submit"
          icon="pi pi-save"
          label="Salveaza"
          :loading="saving"
          form="receipt-form"
        />
        <Button
          v-if="isEditMode && receipt?.status === 'draft'"
          type="button"
          icon="pi pi-send"
          label="Trimite"
          severity="success"
          :loading="submitting"
          @click="submitForReview"
        />
      </template>
    </div>

    <!-- Create Supplier Dialog -->
    <Dialog
      v-model:visible="showCreateSupplierDialog"
      header="Furnizor Negasit"
      :modal="true"
      :style="{ width: '450px' }"
    >
      <div class="dialog-content">
        <p>
          <i class="pi pi-exclamation-triangle" style="color: var(--orange-500);"></i>
          Furnizorul cu CUI <strong>{{ pendingSupplierData?.fiscal_code }}</strong> nu a fost gasit in baza de date.
        </p>
        <p>Doriti sa creati un furnizor local cu datele extrase din bon?</p>

        <div class="form-field" style="margin-top: 1rem;">
          <label>Nume Furnizor</label>
          <InputText v-model="pendingSupplierData.name" class="w-full" />
        </div>

        <div class="form-field">
          <label>CUI</label>
          <InputText v-model="pendingSupplierData.fiscal_code" class="w-full" disabled />
        </div>

        <div class="form-field">
          <label>Adresa</label>
          <InputText v-model="pendingSupplierData.address" class="w-full" />
        </div>
      </div>

      <template #footer>
        <Button label="Anuleaza" severity="secondary" @click="cancelCreateSupplier" />
        <Button label="Creaza Furnizor" icon="pi pi-plus" @click="createLocalSupplier" />
      </template>
    </Dialog>

    <!-- Reject Dialog -->
    <Dialog
      v-model:visible="showRejectDialog"
      header="Respinge Bon"
      :modal="true"
      :style="{ width: '450px' }"
    >
      <div class="dialog-content">
        <p>
          <i class="pi pi-exclamation-triangle" style="color: var(--red-500);"></i>
          Introduceti motivul respingerii bonului:
        </p>

        <div class="form-field" style="margin-top: 1rem;">
          <label>Motiv respingere *</label>
          <Textarea
            v-model="rejectReason"
            rows="3"
            class="w-full"
            placeholder="Explicati de ce bonul este respins (minim 5 caractere)..."
          />
        </div>
      </div>

      <template #footer>
        <Button label="Anuleaza" severity="secondary" @click="showRejectDialog = false" />
        <Button
          label="Respinge"
          icon="pi pi-times"
          severity="danger"
          @click="rejectReceipt"
          :loading="rejecting"
          :disabled="!rejectReason || rejectReason.length < 5"
        />
      </template>
    </Dialog>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useToast } from 'primevue/usetoast'
import { useReceiptsStore } from '@data-entry/stores/receiptsStore'
import { useCompanyStore } from '@data-entry/stores/sharedStores'
import api from '@data-entry/services/api'
import OCRUploadZone from '@data-entry/components/ocr/OCRUploadZone.vue'
import OCRPreview from '@data-entry/components/ocr/OCRPreview.vue'
import Dialog from 'primevue/dialog'
import Tag from 'primevue/tag'
import Message from 'primevue/message'
import AutoComplete from 'primevue/autocomplete'
import Image from 'primevue/image'

const route = useRoute()
const router = useRouter()
const toast = useToast()
const store = useReceiptsStore()
const companyStore = useCompanyStore()

// Mode detection
const isViewMode = computed(() => !!route.params.id && !route.path.endsWith('/edit'))
const isEditMode = computed(() => !!route.params.id && route.path.endsWith('/edit'))
const isCreateMode = computed(() => !route.params.id)
const isReadOnly = computed(() => isViewMode.value)
const receiptId = computed(() => route.params.id)
const receipt = ref(null)

// Get selected company ID from store
const getSelectedCompanyId = () => {
  return companyStore.selectedCompanyId || 1
}

const form = ref({
  receipt_type: 'bon_fiscal',
  direction: 'cheltuiala',
  receipt_date: new Date(),
  amount: null,
  // partner_id removed - supplier data is text-only
  partner_name: null,
  cui: '',  // Fiscal code from OCR
  ocr_raw_text: '',  // Raw OCR text for debugging
  expense_type_code: null,
  payment_mode: null,  // NEW: casa/banca/avans_decontare
  cash_register_id: null,  // Legacy - keep for backwards compatibility
  cash_register_name: null,
  cash_register_account: null,
  receipt_number: '',
  description: '',
  company_id: getSelectedCompanyId(),
  // TVA info (multiple entries support)
  tva_breakdown: [],  // Array of {code, percent, amount}
  tva_total: null,
  items_count: null,
  vendor_address: '',
  payment_methods: [],  // Array of {method, amount}
})

const selectedFiles = ref([])
const existingAttachments = ref([])
const attachmentBlobUrls = ref({}) // Map of attachment ID -> blob URL
const saving = ref(false)
const submitting = ref(false)

// OCR related refs
const ocrUploadZone = ref(null)
const ocrData = ref(null)
const ocrFile = ref(null)
const ocrCollapsed = ref(false)
const ocrRescanningId = ref(null) // ID of attachment being rescanned

// Edit mode file input ref
const editFileInput = ref(null)

// Supplier dialog refs
const showCreateSupplierDialog = ref(false)
const pendingSupplierData = ref(null)
const supplierWarning = ref({ show: false, cui: '', name: '' })

// Address collapsed state
const showAddressExpanded = ref(false)

// OCR indicator for payment mode
const paymentSetFromOCR = ref(false)

// Auto-detection state for direction (PLATĂ/ÎNCASARE)
const directionAutoDetected = ref(false)
const directionAutoReason = ref('')  // e.g., "CUI furnizor = CUI firmă curentă"
const missingClientWarning = ref(false)

// AutoComplete support
const filteredPartners = ref([])
const supplierSource = ref(null) // 'local', 'synced', or null

const partners = computed(() => store.partners)
const expenseTypes = computed(() => store.expenseTypes)
const cashRegisters = computed(() => store.cashRegisters)

// Accounting entries computed properties (for view mode)
const totalDebit = computed(() => {
  if (!receipt.value?.entries) return 0
  return receipt.value.entries
    .filter(e => e.entry_type === 'debit')
    .reduce((sum, e) => sum + parseFloat(e.amount), 0)
})

const totalCredit = computed(() => {
  if (!receipt.value?.entries) return 0
  return receipt.value.entries
    .filter(e => e.entry_type === 'credit')
    .reduce((sum, e) => sum + parseFloat(e.amount), 0)
})

const isBalanced = computed(() => {
  return Math.abs(totalDebit.value - totalCredit.value) < 0.01
})

// Pre-validation computed states for visual indicators
const validationState = computed(() => ({
  hasAmount: form.value.amount && form.value.amount > 0,
  hasDate: !!form.value.receipt_date,
  hasExpenseType: !!form.value.expense_type_code,
  hasPaymentMode: !!form.value.payment_mode,
  hasAttachment: selectedFiles.value.length > 0 || existingAttachments.value.length > 0 || !!ocrFile.value,

  // Cross-validation
  amountMatchesPayments: !form.value.payment_methods?.length ||
    Math.abs((form.value.amount || 0) - form.value.payment_methods.reduce((s, p) => s + (p.amount || 0), 0)) < 0.02
}))

const missingRequiredFields = computed(() => {
  const missing = []
  if (!validationState.value.hasAmount) missing.push('Suma')
  if (!validationState.value.hasDate) missing.push('Data')
  if (!validationState.value.hasExpenseType) missing.push('Tip cheltuiala')
  if (!validationState.value.hasAttachment) missing.push('Atasament')
  return missing
})

// Payment mode options
const paymentModeOptions = ref([
  { value: 'casa', label: 'Casa (numerar firma)' },
  { value: 'banca', label: 'Banca (virament/POS)' },
  { value: 'avans_decontare', label: 'Avans Decontare (decont angajat)' },
])

// Receipt type options (dropdown)
const receiptTypeOptions = ref([
  { value: 'bon_fiscal', label: 'Bon Fiscal' },
  { value: 'chitanta', label: 'Chitanta' },
])

// Operation type / direction options (dropdown)
const directionOptions = ref([
  { value: 'cheltuiala', label: 'Cheltuiala (Plata)' },
  { value: 'incasare', label: 'Incasare' },
])

// AutoComplete search function
const searchPartners = (event) => {
  const query = event.query.toLowerCase()
  filteredPartners.value = partners.value.filter(p =>
    p.name.toLowerCase().includes(query) ||
    (p.fiscal_code && p.fiscal_code.toLowerCase().includes(query))
  )
}

onMounted(async () => {
  await store.fetchAllNomenclatures()

  if (isEditMode.value || isViewMode.value) {
    await loadReceipt()
  } else {
    // For new receipts, ensure company_id is set from the current selected company
    form.value.company_id = companyStore.selectedCompanyId || 1
  }
})

const loadReceipt = async () => {
  try {
    receipt.value = await store.fetchReceiptById(receiptId.value)

    // Parse TVA breakdown - ensure amounts are numbers
    const parsedTvaBreakdown = (receipt.value.tva_breakdown || []).map(entry => ({
      code: entry.code,
      percent: entry.percent,
      amount: parseFloat(entry.amount) || 0
    }))

    // Populate form
    form.value = {
      receipt_type: receipt.value.receipt_type,
      direction: receipt.value.direction,
      receipt_date: new Date(receipt.value.receipt_date),
      amount: parseFloat(receipt.value.amount),
      // partner_id removed - supplier data is text-only
      partner_name: receipt.value.partner_name,
      cui: receipt.value.cui || '',
      ocr_raw_text: receipt.value.ocr_raw_text || '',
      expense_type_code: receipt.value.expense_type_code,
      payment_mode: receipt.value.payment_mode || null,  // NEW
      cash_register_id: receipt.value.cash_register_id,  // Legacy
      cash_register_name: receipt.value.cash_register_name,
      cash_register_account: receipt.value.cash_register_account,
      receipt_number: receipt.value.receipt_number || '',
      description: receipt.value.description || '',
      company_id: receipt.value.company_id,
      // TVA info - parsed as numbers
      tva_breakdown: parsedTvaBreakdown,
      tva_total: receipt.value.tva_total ? parseFloat(receipt.value.tva_total) : null,
      items_count: receipt.value.items_count || null,
      vendor_address: receipt.value.vendor_address || '',
      payment_methods: receipt.value.payment_methods || [],
    }

    // form.partner_name is bound directly to AutoComplete, no separate selectedPartner needed

    existingAttachments.value = receipt.value.attachments || []

    // Load blob URLs for attachments (with auth)
    await loadAttachmentBlobUrls()
  } catch (error) {
    toast.add({
      severity: 'error',
      summary: 'Eroare',
      detail: 'Nu s-a putut incarca bonul',
      life: 5000,
    })
    router.push('/data-entry')
  }
}

// Load blob URLs for all attachments
const loadAttachmentBlobUrls = async () => {
  for (const att of existingAttachments.value) {
    try {
      const blobUrl = await store.fetchAttachmentBlob(att.id)
      if (blobUrl) {
        attachmentBlobUrls.value[att.id] = blobUrl
      }
    } catch (error) {
      console.error(`Failed to load blob for attachment ${att.id}:`, error)
    }
  }
}

// Download attachment
const downloadAttachment = async (attachment) => {
  try {
    await store.downloadAttachment(attachment.id, attachment.filename)
    toast.add({
      severity: 'success',
      summary: 'Succes',
      detail: 'Fisierul a fost descarcat',
      life: 2000,
    })
  } catch (error) {
    toast.add({
      severity: 'error',
      summary: 'Eroare',
      detail: 'Nu s-a putut descarca fisierul',
      life: 5000,
    })
  }
}

// OCR handlers
const onOCRFileSelected = (file) => {
  ocrFile.value = file
  // Add to selected files for upload
  if (!selectedFiles.value.some(f => f.name === file.name)) {
    selectedFiles.value = [file, ...selectedFiles.value]
  }
}

const onOCRResult = (data) => {
  ocrData.value = data
  toast.add({
    severity: 'success',
    summary: 'OCR Procesare',
    detail: 'Datele au fost extrase din imagine',
    life: 3000,
  })
}

const onOCRError = (message) => {
  toast.add({
    severity: 'error',
    summary: 'Eroare OCR',
    detail: message,
    life: 5000,
  })
}

// Rescan existing attachment through OCR
const rescanAttachmentOCR = async (attachment) => {
  if (ocrRescanningId.value) return // Already processing

  ocrRescanningId.value = attachment.id

  try {
    // Fetch the attachment blob
    const response = await apiService.get(`/receipts/attachments/${attachment.id}/download`, {
      responseType: 'blob',
    })

    // Create a File object from the blob
    const file = new File([response.data], attachment.filename, { type: attachment.mime_type })

    // Send to OCR
    const formData = new FormData()
    formData.append('file', file)

    const ocrResponse = await apiService.post('/ocr/extract', formData, {
      headers: { 'Content-Type': 'multipart/form-data' },
      timeout: 60000,
    })

    if (ocrResponse.data.success) {
      const resultData = {
        ...ocrResponse.data.data,
        _ocr_message: ocrResponse.data.message
      }
      ocrData.value = resultData
      ocrCollapsed.value = false
      toast.add({
        severity: 'success',
        summary: 'OCR Procesare',
        detail: 'Datele au fost re-extrase din atasament',
        life: 3000,
      })
    } else {
      toast.add({
        severity: 'error',
        summary: 'Eroare OCR',
        detail: ocrResponse.data.message || 'Procesare OCR esuata',
        life: 5000,
      })
    }
  } catch (error) {
    const message = error.response?.data?.detail || error.message || 'Eroare la procesarea OCR'
    toast.add({
      severity: 'error',
      summary: 'Eroare OCR',
      detail: message,
      life: 5000,
    })
  } finally {
    ocrRescanningId.value = null
  }
}

const applyOCRData = async (data) => {
  // Show warnings for problematic OCR data before applying

  // Warning if amount not found
  if (!data.amount || parseFloat(data.amount) <= 0) {
    const paymentSum = data.payment_methods?.reduce((s, p) => s + parseFloat(p.amount || 0), 0) || 0
    if (paymentSum > 0) {
      toast.add({
        severity: 'warn',
        summary: 'Total nedetectat',
        detail: `Totalul nu a fost extras. Suma din plati: ${paymentSum.toFixed(2)} LEI`,
        life: 6000
      })
    } else {
      toast.add({
        severity: 'warn',
        summary: 'Total nedetectat',
        detail: 'Totalul nu a fost extras din OCR. Completati manual.',
        life: 5000
      })
    }
  }

  // Warning if amount doesn't match payment methods sum
  if (data.amount && data.payment_methods?.length > 0) {
    const paymentSum = data.payment_methods.reduce((s, p) => s + parseFloat(p.amount || 0), 0)
    const diff = Math.abs(parseFloat(data.amount) - paymentSum)
    if (diff > 0.02) {
      toast.add({
        severity: 'warn',
        summary: 'Diferenta detectata',
        detail: `Total (${parseFloat(data.amount).toFixed(2)}) ≠ Plati (${paymentSum.toFixed(2)})`,
        life: 5000
      })
    }
  }

  // Apply basic OCR data to form
  if (data.receipt_type) {
    form.value.receipt_type = data.receipt_type
  }
  if (data.receipt_date) {
    form.value.receipt_date = new Date(data.receipt_date)
  }
  if (data.amount) {
    form.value.amount = parseFloat(data.amount)
  }
  if (data.receipt_number) {
    form.value.receipt_number = data.receipt_number
  }

  // Save CUI from OCR
  if (data.cui) {
    form.value.cui = data.cui
  }

  // Save raw OCR text for debugging
  if (data.raw_text) {
    form.value.ocr_raw_text = data.raw_text
  }

  // Apply TVA entries
  if (data.tva_entries?.length > 0) {
    form.value.tva_breakdown = data.tva_entries.map(e => ({
      code: e.code,
      percent: e.percent,
      amount: parseFloat(e.amount)
    }))
  }
  if (data.tva_total) form.value.tva_total = parseFloat(data.tva_total)
  if (data.items_count) form.value.items_count = data.items_count
  if (data.address) form.value.vendor_address = data.address

  // Apply payment methods
  if (data.payment_methods?.length > 0) {
    form.value.payment_methods = data.payment_methods.map(pm => ({
      method: pm.method,
      amount: parseFloat(pm.amount)
    }))
  }

  // Auto-suggest payment_mode if OCR detected CARD
  if (data.suggested_payment_mode) {
    form.value.payment_mode = data.suggested_payment_mode
    paymentSetFromOCR.value = true  // Show OCR indicator
  }

  // AUTO-DETECT DIRECTION (PLATĂ/ÎNCASARE) based on CUI matching
  const companyCui = companyStore.selectedCompany?.fiscal_code?.replace(/^RO/i, '')
  const vendorCui = data.cui?.replace(/^RO/i, '')
  const clientCui = data.client_cui?.replace(/^RO/i, '')

  // Reset auto-detection state
  directionAutoDetected.value = false
  directionAutoReason.value = ''
  missingClientWarning.value = false

  if (vendorCui && companyCui && vendorCui === companyCui) {
    // WE ARE THE VENDOR → ÎNCASARE (income)
    form.value.direction = 'incasare'
    directionAutoDetected.value = true
    directionAutoReason.value = 'CUI furnizor = CUI firma curenta'

    // Partner = CLIENT
    if (data.client_name || data.client_cui) {
      form.value.partner_name = data.client_name || ''
      form.value.cui = data.client_cui || ''
      form.value.vendor_address = data.client_address || ''

      // Search for client in suppliers list
      if (data.client_cui) {
        const clientResult = await store.searchSupplier(data.client_cui)
        if (clientResult.found && clientResult.supplier) {
          form.value.partner_name = clientResult.supplier.name
          form.value.cui = clientResult.supplier.fiscal_code || data.client_cui
          form.value.vendor_address = clientResult.supplier.address || data.client_address || ''
          supplierSource.value = clientResult.source

          toast.add({
            severity: 'success',
            summary: 'Client gasit',
            detail: `${clientResult.supplier.name} (${clientResult.source})`,
            life: 3000,
          })
        }
      }

      toast.add({
        severity: 'info',
        summary: 'Incasare detectata',
        detail: 'Firma curenta este furnizorul. Partenerul este clientul.',
        life: 4000,
      })
    } else {
      // NO CLIENT DATA - show warning
      missingClientWarning.value = true
      toast.add({
        severity: 'warn',
        summary: 'Lipsesc date client',
        detail: 'Incasare detectata dar nu exista date client pe bon. Completeaza manual.',
        life: 5000,
      })
    }

    // Skip the normal supplier search below since we're using client as partner
    toast.add({
      severity: 'success',
      summary: 'Date aplicate',
      detail: 'Datele OCR au fost aplicate in formular',
      life: 3000,
    })
    return

  } else if (clientCui && companyCui && clientCui === companyCui) {
    // WE ARE THE CLIENT → PLATĂ (expense) - standard purchase
    form.value.direction = 'cheltuiala'
    directionAutoDetected.value = true
    directionAutoReason.value = 'CUI client = CUI firma curenta'
    // Partner = VENDOR (continue to normal supplier search below)
  } else if (clientCui && companyCui && clientCui !== companyCui) {
    // Client CUI exists but doesn't match company CUI
    // Check if it's a close match (possible OCR error - differs by 1-2 characters)
    const similarity = calculateCuiSimilarity(clientCui, companyCui)
    if (similarity >= 0.8) {
      // Very similar - likely OCR error
      toast.add({
        severity: 'warn',
        summary: 'CUI client similar',
        detail: `CUI client (${clientCui}) este similar cu CUI firma (${companyCui}). Posibila eroare OCR.`,
        life: 8000
      })
    } else if (clientCui.length >= 6) {
      // Different CUI - show info
      toast.add({
        severity: 'info',
        summary: 'CUI client diferit',
        detail: `CUI client pe bon: ${clientCui}. CUI firma: ${companyCui}`,
        life: 5000
      })
    }
  }
  // ELSE: Neither matches → default to CHELTUIALĂ, partner = vendor (normal flow)

  // Auto-search supplier by CUI if available (vendor as partner)
  if (data.cui) {
    toast.add({
      severity: 'info',
      summary: 'Cautare furnizor',
      detail: `Se cauta furnizor dupa CUI: ${data.cui}`,
      life: 2000,
    })

    const result = await store.searchSupplier(data.cui)

    if (result.found && result.supplier) {
      // Build supplier object for AutoComplete
      const supplierObj = {
        name: result.supplier.name,
        fiscal_code: result.supplier.fiscal_code,
        address: result.supplier.address,
        source: result.source
      }

      // Fill form fields (strings for saving) - form.partner_name is bound directly to AutoComplete
      form.value.partner_name = result.supplier.name
      form.value.cui = result.supplier.fiscal_code || data.cui
      form.value.vendor_address = result.supplier.address || data.address || form.value.vendor_address

      // Set source for visual indicator
      supplierSource.value = result.source

      // Add supplier to store's partners list if not already there (for future suggestions)
      const existsInPartners = store.partners.some(p => p.name === result.supplier.name)
      if (!existsInPartners) {
        store.partners.push(supplierObj)
      }

      toast.add({
        severity: 'success',
        summary: 'Furnizor gasit',
        detail: `${result.supplier.name} (${result.source})`,
        life: 3000,
      })
    } else {
      // Not found - show non-blocking warning, allow continuing
      supplierWarning.value = {
        show: true,
        cui: data.cui,
        name: data.partner_name || ''
      }
      // Still set form values from OCR
      form.value.partner_name = data.partner_name || ''
      // CUI already set above

      toast.add({
        severity: 'warn',
        summary: 'Furnizor negasit',
        detail: `CUI ${data.cui} nu a fost gasit in nomenclator`,
        life: 5000,
      })
    }
  } else if (data.partner_name) {
    // No CUI but have name - try name search in partners list
    const matchingPartner = partners.value.find(p =>
      p.name.toLowerCase().includes(data.partner_name.toLowerCase())
    )
    if (matchingPartner) {
      // Fill form fields - form.partner_name is bound directly to AutoComplete
      form.value.partner_name = matchingPartner.name
      form.value.cui = matchingPartner.fiscal_code || ''
      form.value.vendor_address = matchingPartner.address || form.value.vendor_address || ''
      supplierSource.value = matchingPartner.source || 'local'
    } else {
      // Just set the name from OCR (no matching partner found)
      form.value.partner_name = data.partner_name
    }
  }

  // NOTE: OCRPreview rămâne vizibil pentru comparație side-by-side
  // (NU mai colapsăm automat - utilizatorul poate compara datele)

  toast.add({
    severity: 'success',
    summary: 'Date aplicate',
    detail: 'Datele OCR au fost aplicate in formular',
    life: 3000,
  })
}

const dismissOCRData = () => {
  ocrData.value = null
}

const createLocalSupplier = async () => {
  if (!pendingSupplierData.value) return

  try {
    const supplier = await store.createLocalSupplier(pendingSupplierData.value)

    // Auto-select the new supplier
    form.value.partner_id = supplier.id
    form.value.partner_name = supplier.name

    toast.add({
      severity: 'success',
      summary: 'Furnizor creat',
      detail: `${supplier.name} a fost adaugat`,
      life: 3000,
    })
  } catch (error) {
    toast.add({
      severity: 'error',
      summary: 'Eroare',
      detail: error.message,
      life: 5000,
    })
  } finally {
    showCreateSupplierDialog.value = false
    pendingSupplierData.value = null
  }
}

const cancelCreateSupplier = () => {
  showCreateSupplierDialog.value = false
  pendingSupplierData.value = null
}

// Helper function to calculate similarity between two CUI strings
// Returns a value between 0 and 1 (1 = identical)
const calculateCuiSimilarity = (cui1, cui2) => {
  if (!cui1 || !cui2) return 0
  // Normalize: remove RO/R0 prefix (R0 is common OCR error for RO) and keep only digits
  const norm1 = cui1.replace(/^R[O0]/i, '').replace(/\D/g, '')
  const norm2 = cui2.replace(/^R[O0]/i, '').replace(/\D/g, '')

  if (norm1.length === 0 || norm2.length === 0) return 0
  if (norm1 === norm2) return 1

  // Calculate character-by-character similarity
  const maxLen = Math.max(norm1.length, norm2.length)
  const minLen = Math.min(norm1.length, norm2.length)

  // Length difference penalty
  const lengthSimilarity = minLen / maxLen

  // Character match count
  let matches = 0
  for (let i = 0; i < minLen; i++) {
    if (norm1[i] === norm2[i]) matches++
  }
  const charSimilarity = matches / maxLen

  // Combined similarity (weighted average)
  return (charSimilarity * 0.8 + lengthSimilarity * 0.2)
}

const onPartnerSelect = (event) => {
  const partner = event.value
  if (partner && typeof partner === 'object') {
    form.value.partner_name = partner.name
    form.value.cui = partner.fiscal_code || ''
    form.value.vendor_address = partner.address || form.value.vendor_address || ''
    supplierSource.value = partner.source || 'oracle'
  }
}

const onCashRegisterChange = (event) => {
  const cr = cashRegisters.value.find(c => c.id === event.value)
  form.value.cash_register_name = cr?.name || null
  form.value.cash_register_account = cr?.account_code || null
}

const onFileSelect = (event) => {
  selectedFiles.value = [...selectedFiles.value, ...event.files]
}

const onFileRemove = (event) => {
  selectedFiles.value = selectedFiles.value.filter(f => f.name !== event.file.name)
}

// Edit mode file input handlers
const triggerFileInput = () => {
  editFileInput.value?.click()
}

const onEditFileSelect = (event) => {
  const files = event.target?.files
  if (files?.length > 0) {
    selectedFiles.value = [...selectedFiles.value, ...Array.from(files)]
  }
  // Reset input value to allow selecting same file again
  event.target.value = ''
}

const removeSelectedFile = (index) => {
  selectedFiles.value = selectedFiles.value.filter((_, i) => i !== index)
}

const removeExistingAttachment = async (attachmentId) => {
  try {
    await store.deleteAttachment(attachmentId)
    existingAttachments.value = existingAttachments.value.filter(a => a.id !== attachmentId)
    toast.add({
      severity: 'success',
      summary: 'Succes',
      detail: 'Atasamentul a fost sters',
      life: 3000,
    })
  } catch (error) {
    toast.add({
      severity: 'error',
      summary: 'Eroare',
      detail: error.message,
      life: 5000,
    })
  }
}

const formatFileSize = (bytes) => {
  if (bytes < 1024) return bytes + ' B'
  if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB'
  return (bytes / (1024 * 1024)).toFixed(1) + ' MB'
}

const formatCurrency = (value) => {
  if (value === null || value === undefined) return '0.00'
  return parseFloat(value).toLocaleString('ro-RO', { minimumFractionDigits: 2, maximumFractionDigits: 2 })
}

const formatTvaTotal = () => {
  if (!form.value.tva_breakdown?.length) return '0.00'
  const total = form.value.tva_breakdown.reduce((sum, e) => sum + (e.amount || 0), 0)
  return total.toLocaleString('ro-RO', { minimumFractionDigits: 2, maximumFractionDigits: 2 })
}

// View mode helper functions
const formatAmount = (amount) => {
  return new Intl.NumberFormat('ro-RO', {
    style: 'currency',
    currency: 'RON',
  }).format(amount)
}

const formatDateTime = (dateStr) => {
  if (!dateStr) return '-'
  return new Date(dateStr).toLocaleString('ro-RO')
}

const getStatusClass = (status) => {
  const classes = {
    draft: 'status-draft',
    pending_review: 'status-pending',
    approved: 'status-approved',
    rejected: 'status-rejected',
    synced: 'status-synced',
  }
  return classes[status] || ''
}

const getStatusLabel = (status) => {
  const labels = {
    draft: 'Ciorna',
    pending_review: 'In asteptare',
    approved: 'Validat',
    rejected: 'Respins',
    synced: 'Sincronizat',
  }
  return labels[status] || status
}

// View mode workflow actions
const submitReceipt = async () => {
  submitting.value = true
  try {
    const result = await store.submitReceipt(receipt.value.id)
    if (result.success) {
      toast.add({
        severity: 'success',
        summary: 'Succes',
        detail: 'Bonul a fost trimis spre aprobare',
        life: 3000,
      })
      await loadReceipt()
    } else {
      toast.add({
        severity: 'error',
        summary: 'Eroare',
        detail: result.message,
        life: 5000,
      })
    }
  } catch (error) {
    toast.add({
      severity: 'error',
      summary: 'Eroare',
      detail: error.message || 'Nu s-a putut trimite bonul',
      life: 5000,
    })
  } finally {
    submitting.value = false
  }
}

const resubmitReceipt = async () => {
  submitting.value = true
  try {
    const result = await store.resubmitReceipt(receipt.value.id)
    if (result.success) {
      toast.add({
        severity: 'success',
        summary: 'Succes',
        detail: 'Bonul a fost re-trimis spre aprobare',
        life: 3000,
      })
      await loadReceipt()
    } else {
      toast.add({
        severity: 'error',
        summary: 'Eroare',
        detail: result.message,
        life: 5000,
      })
    }
  } catch (error) {
    toast.add({
      severity: 'error',
      summary: 'Eroare',
      detail: error.message || 'Nu s-a putut re-trimite bonul',
      life: 5000,
    })
  } finally {
    submitting.value = false
  }
}

// Workflow action states
const approving = ref(false)
const rejecting = ref(false)
const unapproving = ref(false)
const showRejectDialog = ref(false)
const rejectReason = ref('')

const approveReceipt = async () => {
  approving.value = true
  try {
    const result = await store.approveReceipt(receipt.value.id)
    if (result.success) {
      toast.add({
        severity: 'success',
        summary: 'Succes',
        detail: 'Bonul a fost validat',
        life: 3000,
      })
      await loadReceipt()
    } else {
      toast.add({
        severity: 'error',
        summary: 'Eroare',
        detail: result.message,
        life: 5000,
      })
    }
  } catch (error) {
    toast.add({
      severity: 'error',
      summary: 'Eroare',
      detail: error.message || 'Nu s-a putut valida bonul',
      life: 5000,
    })
  } finally {
    approving.value = false
  }
}

const openRejectDialog = () => {
  rejectReason.value = ''
  showRejectDialog.value = true
}

const rejectReceipt = async () => {
  if (!rejectReason.value || rejectReason.value.length < 5) {
    toast.add({
      severity: 'warn',
      summary: 'Atentie',
      detail: 'Motivul respingerii trebuie sa aiba minim 5 caractere',
      life: 3000,
    })
    return
  }

  rejecting.value = true
  try {
    const result = await store.rejectReceipt(receipt.value.id, rejectReason.value)
    if (result.success) {
      toast.add({
        severity: 'success',
        summary: 'Succes',
        detail: 'Bonul a fost respins',
        life: 3000,
      })
      showRejectDialog.value = false
      await loadReceipt()
    } else {
      toast.add({
        severity: 'error',
        summary: 'Eroare',
        detail: result.message,
        life: 5000,
      })
    }
  } catch (error) {
    toast.add({
      severity: 'error',
      summary: 'Eroare',
      detail: error.message || 'Nu s-a putut respinge bonul',
      life: 5000,
    })
  } finally {
    rejecting.value = false
  }
}

const unapproveReceipt = async () => {
  unapproving.value = true
  try {
    const result = await store.unapproveReceipt(receipt.value.id)
    if (result.success) {
      toast.add({
        severity: 'success',
        summary: 'Succes',
        detail: 'Validarea a fost anulata',
        life: 3000,
      })
      await loadReceipt()
    } else {
      toast.add({
        severity: 'error',
        summary: 'Eroare',
        detail: result.message,
        life: 5000,
      })
    }
  } catch (error) {
    toast.add({
      severity: 'error',
      summary: 'Eroare',
      detail: error.message || 'Nu s-a putut anula validarea',
      life: 5000,
    })
  } finally {
    unapproving.value = false
  }
}

const validateForm = () => {
  // Check if we have at least one file (for new receipts)
  // Also check ocrFile as a fallback (file selected for OCR processing)
  if (!isEditMode.value && selectedFiles.value.length === 0 && !ocrFile.value) {
    toast.add({
      severity: 'warn',
      summary: 'Validare',
      detail: 'Trebuie sa adaugi cel putin o poza a bonului',
      life: 3000,
    })
    return false
  }

  if (!form.value.receipt_date) {
    toast.add({
      severity: 'warn',
      summary: 'Validare',
      detail: 'Data bonului este obligatorie',
      life: 3000,
    })
    return false
  }

  if (!form.value.amount || form.value.amount <= 0) {
    toast.add({
      severity: 'warn',
      summary: 'Validare',
      detail: 'Suma trebuie sa fie mai mare decat 0',
      life: 3000,
    })
    return false
  }

  if (!form.value.expense_type_code) {
    toast.add({
      severity: 'warn',
      summary: 'Validare',
      detail: 'Tipul cheltuielii este obligatoriu',
      life: 3000,
    })
    return false
  }

  // Payment mode is validated at submit time, not at draft save
  // (can save draft without payment mode, but submit requires it)

  return true
}

const saveReceipt = async () => {
  if (!validateForm()) return

  saving.value = true

  try {
    // Clean up payment_methods and tva_breakdown - convert null amounts to 0
    const cleanedPaymentMethods = form.value.payment_methods?.map(pm => ({
      ...pm,
      amount: pm.amount ?? 0
    })) || null

    const cleanedTvaBreakdown = form.value.tva_breakdown?.map(entry => ({
      ...entry,
      amount: entry.amount ?? 0
    })) || null

    const data = {
      ...form.value,
      receipt_date: form.value.receipt_date.toISOString().split('T')[0],
      payment_methods: cleanedPaymentMethods,
      tva_breakdown: cleanedTvaBreakdown,
    }

    let savedReceipt

    if (isEditMode.value) {
      savedReceipt = await store.updateReceipt(receiptId.value, data)
    } else {
      savedReceipt = await store.createReceipt(data)
    }

    // Upload new files
    for (const file of selectedFiles.value) {
      try {
        await store.uploadAttachment(savedReceipt.id, file)
      } catch (error) {
        toast.add({
          severity: 'warn',
          summary: 'Atentie',
          detail: `Nu s-a putut incarca: ${file.name}`,
          life: 5000,
        })
      }
    }

    toast.add({
      severity: 'success',
      summary: 'Succes',
      detail: isEditMode.value ? 'Bonul a fost actualizat' : 'Bonul a fost creat',
      life: 3000,
    })

    router.push(`/data-entry/${savedReceipt.id}`)
  } catch (error) {
    toast.add({
      severity: 'error',
      summary: 'Eroare',
      detail: error.message || 'Nu s-a putut salva bonul',
      life: 5000,
    })
  } finally {
    saving.value = false
  }
}

const submitForReview = async () => {
  // First save any changes
  if (!validateForm()) return

  submitting.value = true

  try {
    // Save first
    await saveReceipt()

    // Then submit
    const result = await store.submitReceipt(receiptId.value)

    if (result.success) {
      toast.add({
        severity: 'success',
        summary: 'Succes',
        detail: 'Bonul a fost trimis spre aprobare',
        life: 3000,
      })
      router.push('/data-entry')
    } else {
      toast.add({
        severity: 'error',
        summary: 'Eroare',
        detail: result.message,
        life: 5000,
      })
    }
  } catch (error) {
    toast.add({
      severity: 'error',
      summary: 'Eroare',
      detail: error.message || 'Nu s-a putut trimite bonul',
      life: 5000,
    })
  } finally {
    submitting.value = false
  }
}
</script>

<style scoped>
/* Action Buttons - Bottom Right */
.action-buttons-top {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
  z-index: 100;
}

.floating-buttons-spacer {
  height: 20px;
}

/* Validation banners */
.validation-banners {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.validation-banner {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  background: #fef3c7;
  border: 1px solid #fbbf24;
  color: #92400e;
  font-size: 0.875rem;
}

.validation-banner.warning {
  background: #fee2e2;
  border-color: #f87171;
  color: #991b1b;
}

.validation-banner i {
  font-size: 1.1rem;
}

/* 2-column layout */
.receipt-form-layout {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(380px, 1.5fr);
  gap: 1.5rem;
  align-items: start;
}

.form-column-left {
  position: sticky;
  top: 1rem;
}

.form-column-right {
  min-width: 0;
}

.form-column-right h3 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  margin-top: 0;
}

@media (max-width: 1024px) {
  .receipt-form-layout {
    grid-template-columns: 1fr;
  }
  .form-column-left {
    position: static;
  }
}

/* OCR Applied Banner (collapsed state) */
.ocr-applied-banner {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1rem;
  background: #dcfce7;
  border: 1px solid #86efac;
  border-radius: 8px;
  cursor: pointer;
  margin-top: 0.75rem;
  transition: background 0.2s;
}

.ocr-applied-banner:hover {
  background: #bbf7d0;
}

.ocr-applied-banner .pi-check-circle {
  color: #22c55e;
  font-size: 1.1rem;
}

.ocr-applied-banner span {
  flex: 1;
  font-weight: 500;
  color: #166534;
  font-size: 0.9rem;
}

.ocr-applied-banner .pi-chevron-down {
  color: #166534;
  font-size: 0.8rem;
}

.upload-section {
  margin-bottom: 1rem;
}

.upload-section h3 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  margin-top: 0;
  font-size: 1rem;
}

/* Hidden file input */
.hidden-file-input {
  display: none;
}

/* Add attachment button in header */
.add-attachment-btn {
  margin-left: auto;
}

/* Pending files header */
.pending-files-header {
  font-size: 0.85rem;
  color: #64748b;
  font-weight: 500;
  margin-bottom: 0.5rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px dashed #cbd5e1;
}

.radio-group {
  display: flex;
  gap: 1.5rem;
}

.radio-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.pdf-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  background: #f5f5f5;
  padding: 1rem;
}

.pdf-preview span {
  font-size: 0.75rem;
  margin-top: 0.5rem;
  text-align: center;
  word-break: break-word;
}

/* Selected files list */
.selected-files-list {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.selected-file-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
}

.selected-file-item i {
  color: #667eea;
  font-size: 1.25rem;
}

.selected-file-item .file-name {
  flex: 1;
  font-weight: 500;
  color: #1e293b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.selected-file-item .file-size {
  font-size: 0.85rem;
  color: #64748b;
}

/* Extra details section (TVA, items, address) */
.extra-details-section {
  margin-top: 1rem;
  padding: 0.75rem;
  background: #f0f9ff;
  border: 1px solid #bae6fd;
  border-radius: 8px;
}

.extra-details-section h3 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  margin-top: 0;
  color: #0284c7;
  font-size: 0.95rem;
}

.tva-table {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.tva-row {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.tva-row.total {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px dashed #0284c7;
}

.tva-label {
  min-width: 150px;
  font-weight: 500;
  color: #334155;
}

.tva-input {
  max-width: 150px;
}

.tva-value {
  font-weight: 600;
  color: #0284c7;
}

/* Supplier warning */
.supplier-warning {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 0.25rem;
  color: #f59e0b;
}

/* Supplier selected indicator */
.supplier-selected {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 0.25rem;
  color: #22c55e;
  font-weight: 500;
}

/* Field hint */
.field-hint {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.8rem;
  color: #64748b;
}

/* Payment methods display */
.payment-methods-display {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* Dialog content */
.dialog-content {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.dialog-content p {
  margin: 0;
  line-height: 1.6;
}

.dialog-content p:first-child {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

.dialog-content .form-field {
  margin-bottom: 0.5rem;
}

.dialog-content .form-field label {
  display: block;
  margin-bottom: 0.25rem;
  font-weight: 500;
  color: #334155;
}

/* ========================================
   COMPACT FORM SECTIONS (matching OCRPreview)
   ======================================== */

.form-section {
  padding: 0.6rem 0;
  border-bottom: 1px solid #e2e8f0;
}

.form-section:last-of-type {
  border-bottom: none;
}

.form-section-title {
  font-size: 0.7rem;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
}

.form-section-content {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Compact form rows */
.form-row {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  flex-wrap: wrap;
}

.form-row .form-field {
  margin-bottom: 0;
}

.form-field.flex-1 {
  flex: 1;
  min-width: 150px;
}

.form-field.flex-2 {
  flex: 2;
  min-width: 200px;
}

/* Inline radio groups */
.radio-group-inline {
  display: flex;
  gap: 1rem;
  padding: 0.35rem 0;
}

.radio-group-inline .radio-item {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.radio-group-inline .radio-item label {
  font-size: 0.9rem;
  margin-bottom: 0;
}

/* Direction header with auto-detect indicator */
.direction-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
}

.direction-header .field-label {
  font-size: 0.85rem;
  font-weight: 500;
  color: #475569;
}

.auto-tag {
  font-size: 0.65rem !important;
  padding: 0.15rem 0.4rem !important;
  cursor: help;
}

/* Amount input styling */
.amount-input {
  max-width: 150px;
}

/* Payment field wrapper with OCR indicator */
.payment-field-wrapper {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.payment-field-wrapper .p-dropdown {
  flex: 1;
}

.ocr-indicator {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  color: #22c55e;
  font-weight: 500;
  white-space: nowrap;
}

.ocr-indicator .pi-check-circle {
  font-size: 0.85rem;
}

/* TVA edit table - compact */
.tva-edit-table {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.tva-edit-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.tva-label-compact {
  min-width: 80px;
  font-size: 0.85rem;
  color: #475569;
}

.tva-input-compact {
  max-width: 120px;
}

.tva-edit-row.tva-total-row {
  margin-top: 0.35rem;
  padding-top: 0.35rem;
  border-top: 1px dashed #cbd5e1;
}

.tva-total-value {
  font-weight: 600;
  color: #0284c7;
  font-size: 0.9rem;
}

/* Payment methods display in form */
.payment-methods-display {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.35rem;
}

/* ========================================
   FLAT LAYOUT STYLES (with subtle borders)
   ======================================== */

/* Form groups with subtle borders */
.form-group {
  padding: 0.75rem 0;
  border-bottom: 1px solid #e2e8f0;
}

.form-group:first-child {
  padding-top: 0;
}

.form-group-last {
  border-bottom: none;
  padding-bottom: 0;
}

/* Compact form row spacing */
.form-group > .form-row {
  margin-bottom: 0.6rem;
}

.form-group > .form-row:last-child {
  margin-bottom: 0;
}

/* Collapsed address - clickable */
.address-collapsed {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.5rem;
  margin-top: 0.4rem;
  background: #f8fafc;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.15s;
}

.address-collapsed:hover {
  background: #f1f5f9;
}

.address-collapsed i {
  font-size: 0.7rem;
  color: #64748b;
}

.address-preview {
  font-size: 0.75rem;
  color: #64748b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 300px;
}

/* Expanded address */
.address-expanded {
  margin-top: 0.4rem;
  padding: 0.4rem;
  background: #f8fafc;
  border-radius: 4px;
}

.address-expanded .p-inputtext {
  font-size: 0.85rem;
  width: 100%;
}

/* Document row - all fields inline */
.document-row-inline {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: flex-end;
}

.document-row-inline .form-field {
  flex: 0 0 auto;
}

/* ========================================
   VALUES SECTION (compact inline)
   ======================================== */

.values-section {
  background: #f8fafc;
  border-radius: 6px;
  padding: 0.5rem 0.75rem;
}

/* CSS Grid layout with FIXED columns to prevent overlap */
.values-row-inline {
  display: grid;
  grid-template-columns: 140px 120px 200px;  /* TOTAL | CARD | MOD PLATA - fixed widths */
  column-gap: 2rem;  /* 32px gap between columns */
  align-items: start;
}

.value-item {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  max-width: 100%;  /* Prevent overflow */
  overflow: hidden;
}

/* TOTAL - first column */
.value-item-total {
  width: 140px;
  max-width: 140px;
}

/* Payment methods (CARD, NUMERAR) - middle columns */
.payment-method-item {
  width: 120px;
  max-width: 120px;
}

/* MOD PLATA - last column */
.value-item-payment {
  width: 200px;
  max-width: 200px;
}

.value-item label {
  font-size: 0.75rem;
  font-weight: 500;
  color: #64748b;
  text-transform: uppercase;
}

/* Force InputNumber to respect container width */
.input-compact {
  width: 100% !important;
  max-width: 130px !important;
}

:deep(.value-item-total .p-inputnumber) {
  width: 100% !important;
  max-width: 130px !important;
}

:deep(.value-item-total .p-inputnumber-input) {
  width: 100% !important;
}

:deep(.payment-method-item .p-inputnumber) {
  width: 100% !important;
  max-width: 110px !important;
}

:deep(.payment-method-item .p-inputnumber-input) {
  width: 100% !important;
}

.dropdown-payment {
  width: 100% !important;
  max-width: 190px !important;
}

:deep(.dropdown-payment) {
  width: 100% !important;
  max-width: 190px !important;
}

:deep(.dropdown-payment .p-dropdown) {
  width: 100% !important;
}

.payment-method-value {
  display: inline-block;
  font-size: 0.95rem;
  font-weight: 500;
  color: #334155;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  min-width: 90px;
  text-align: right;
}

/* TVA compact row */
.tva-compact {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px dashed #cbd5e1;
}

.tva-item {
  flex: 0 0 auto;
}

.input-tva {
  width: 110px !important;
}

:deep(.input-tva) {
  width: 110px !important;
}

:deep(.input-tva .p-inputnumber-input) {
  width: 110px !important;
}

.tva-total-item {
  padding-left: 0.5rem;
}

.tva-total-value {
  display: inline-block;
  font-size: 0.95rem;
  font-weight: 500;
  color: #334155;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  min-width: 90px;
  text-align: right;
}

/* Small labels for secondary fields */
.label-small {
  font-size: 0.8rem !important;
  color: #64748b !important;
}

/* Muted labels for optional fields */
.label-muted {
  color: #94a3b8 !important;
}

/* Small inputs */
.input-small {
  font-size: 0.85rem;
}

/* Compact dropdowns */
.dropdown-compact {
  min-width: 130px;
}

/* Compact message */
.message-compact {
  padding: 0.35rem 0.5rem;
  font-size: 0.8rem;
}

/* Payment methods inline */
.payment-methods-inline {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
  padding-top: 0.25rem;
}

.payment-tags-field {
  display: flex;
  flex-direction: column;
}

/* TVA row inline */
.tva-row-inline {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  align-items: flex-end;
  padding: 0.5rem 0;
  margin-top: 0.5rem;
  background: #f8fafc;
  border-radius: 4px;
  padding: 0.5rem;
}

.tva-field {
  flex: 0 0 auto;
}

.tva-input-inline {
  max-width: 100px;
}

.tva-total-field {
  display: flex;
  flex-direction: column;
  padding-left: 0.5rem;
}

.tva-total-inline {
  font-weight: 500;
  color: #334155;
  font-size: 0.95rem;
  padding: 0.5rem 0;
}

/* Optional fields row */
.optional-fields {
  background: #f8fafc;
  padding: 0.5rem;
  border-radius: 4px;
  margin-top: 0.4rem;
}

/* Items count field */
.items-count-field {
  flex: 0 0 auto;
  max-width: 80px;
}

.items-count-input {
  max-width: 70px;
}

/* Direction header (dropdown version) */
.direction-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}

.direction-header label {
  margin-bottom: 0;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  /* Furnizor/CUI row - full width each */
  .form-row {
    flex-direction: column;
    gap: 0.75rem;
  }

  .form-field.flex-2,
  .form-field.flex-1 {
    width: 100%;
    min-width: unset;
  }

  /* Document row (Tip/Nr/Data/Operatiune) - 2x2 grid */
  .document-row-inline {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
  }

  .document-row-inline .form-field {
    width: 100%;
  }

  /* Values row (TOTAL/Mod Plata) - 2 columns */
  .values-row-inline {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
  }

  .values-row-inline .value-item {
    min-width: unset;
  }

  /* TVA row - 2 columns */
  .values-row-inline.tva-compact {
    grid-template-columns: 1fr 1fr;
  }

  /* Optional fields row - stack on very small screens */
  .optional-fields {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .optional-fields .form-field.flex-2 {
    flex: 2;
    min-width: 180px;
  }

  .optional-fields .items-count-field {
    flex: 0 0 80px;
    min-width: 80px;
  }

  /* Dropdowns and inputs full width in their containers */
  .form-field :deep(.p-dropdown),
  .form-field :deep(.p-autocomplete),
  .form-field :deep(.p-calendar) {
    width: 100% !important;
  }

  /* Action buttons on mobile - not fixed, flow with content */
  .action-buttons-top {
    position: static;
    width: 100%;
    padding: 1rem;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
    margin-top: 1rem;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    gap: 0.5rem;
  }

  /* Smaller buttons on mobile */
  .action-buttons-top .p-button {
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
  }

  /* No extra space needed since buttons flow with content */
  .floating-buttons-spacer {
    display: none;
  }
}

/* ========================================
   VIEW MODE STYLES
   ======================================== */

/* Status Badge */
.status-badge {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 12px;
  font-size: 0.85rem;
  font-weight: 500;
  margin-top: 0.5rem;
}

.status-draft {
  background: #f1f5f9;
  color: #475569;
}

.status-pending {
  background: #fef3c7;
  color: #92400e;
}

.status-approved {
  background: #dcfce7;
  color: #166534;
}

.status-rejected {
  background: #fee2e2;
  color: #991b1b;
}

.status-synced {
  background: #dbeafe;
  color: #1e40af;
}

/* Rejection Alert */
.rejection-alert {
  display: flex;
  gap: 1rem;
  padding: 1rem;
  background: #fff3e0;
  border-radius: 8px;
  margin-bottom: 1rem;
}

.rejection-alert i {
  font-size: 1.5rem;
  color: #f57c00;
}

.rejection-alert p {
  margin: 0.5rem 0;
}

.rejection-alert small {
  color: #666;
}

/* Attachments Grid (view mode) */
.attachments-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
}

.attachment-item {
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
}

.attachment-image {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

.pdf-attachment {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  gap: 0.5rem;
}

.pdf-attachment i {
  font-size: 2.5rem;
  color: #dc2626;
}

.pdf-attachment span {
  font-size: 0.85rem;
  color: #475569;
  text-align: center;
  word-break: break-word;
}

.attachment-item .download-btn {
  position: absolute;
  bottom: 0.5rem;
  right: 0.5rem;
}

/* Attachment actions (edit mode) */
.attachment-actions {
  position: absolute;
  bottom: 0.5rem;
  right: 0.5rem;
  display: flex;
  gap: 0.35rem;
}

/* Image preview grid (edit mode) */
.image-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.image-preview-item {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
}

.image-preview-item img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  display: block;
}

.image-placeholder {
  width: 100%;
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: #f1f5f9;
  color: #94a3b8;
  font-size: 0.75rem;
  text-align: center;
  padding: 0.5rem;
}

.image-placeholder span {
  word-break: break-all;
  max-width: 100%;
}

/* Empty State */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  color: #94a3b8;
  text-align: center;
}

.empty-state i {
  font-size: 2.5rem;
  margin-bottom: 0.75rem;
}

.empty-state p {
  margin: 0;
}

/* Accounting Entries Section */
.entries-section {
  margin-top: 1.5rem;
  padding: 1rem;
  background: #f8fafc;
  border-radius: 8px;
}

.entries-section h3 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 1rem 0;
  color: #334155;
}

.entries-table-container {
  overflow-x: auto;
}

.entries-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.entries-table th,
.entries-table td {
  padding: 0.75rem;
  text-align: left;
  border-bottom: 1px solid #e2e8f0;
}

.entries-table th {
  background: #f1f5f9;
  font-weight: 600;
  color: #475569;
}

.entries-table tbody tr:hover {
  background: #f8fafc;
}

.entries-table .debit {
  color: #dc2626;
}

.entries-table .credit {
  color: #16a34a;
}

.entries-table tfoot td {
  border-bottom: none;
  padding-top: 1rem;
}

.balance-warning {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
  padding: 0.75rem;
  background: #fff3e0;
  border-radius: 8px;
  color: #f57c00;
}
</style>

<!-- Non-scoped styles for PrimeVue overrides (per CSS rules - no :deep()) -->
<style>
/* Borderless dropdown - matches InputText height (44px) */
.dropdown-borderless.p-dropdown {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  min-height: 44px !important;
  height: 44px !important;
  padding: 0 !important;
}

.dropdown-borderless.p-dropdown:hover,
.dropdown-borderless.p-dropdown.p-focus {
  border: none !important;
  box-shadow: none !important;
}

.dropdown-borderless .p-dropdown-label {
  padding: 0.6rem 0.75rem !important;
  line-height: 1.4 !important;
}

.dropdown-borderless .p-dropdown-trigger {
  background: transparent !important;
  width: 2.5rem !important;
}
</style>
