<template>
  <div class="receipt-unified-view" :class="{ 'mobile-compose-layout': isMobile }">
    <!-- US-105: Mobile Top Bar using shared MobileTopBar component -->
    <MobileTopBar
      v-if="isMobile"
      :title="mobileTitle"
      :show-back="true"
      :actions="mobileTopBarActions"
      @back-click="goBack"
      @action-click="handleTopBarAction"
    />

    <!-- US-042: More Menu for view mode (used by MobileTopBar action) -->
    <Menu
      v-if="isMobile"
      ref="moreMenuRef"
      id="more_menu"
      :model="moreMenuItems"
      :popup="true"
    />

    <!-- Desktop Header -->
    <div v-if="!isMobile" class="view-header">
      <div class="header-left">
        <Button
          icon="pi pi-arrow-left"
          severity="secondary"
          text
          rounded
          @click="goBack"
        />
        <h1 class="view-title">
          <i :class="modeIcon"></i>
          {{ modeTitle }}
        </h1>
        <Tag
          v-if="isViewMode && receipt"
          :value="getStatusLabel(receipt.status)"
          :severity="getStatusSeverity(receipt.status)"
        />
      </div>
      <div class="header-right">
        <!-- Create/Edit mode actions -->
        <template v-if="!isViewMode">
          <Button
            icon="pi pi-save"
            label="Salveaza"
            :loading="saving"
            @click="saveReceipt"
          />
          <Button
            v-if="isEditMode && receipt?.status === 'draft'"
            icon="pi pi-send"
            label="Trimite"
            severity="success"
            :loading="submitting"
            @click="submitForReview"
          />
        </template>

        <!-- View mode actions -->
        <template v-else>
          <Button
            v-if="receipt?.status === 'draft' || receipt?.status === 'rejected'"
            icon="pi pi-pencil"
            label="Editeaza"
            @click="goToEdit"
          />
          <Button
            v-if="receipt?.status === 'draft'"
            icon="pi pi-send"
            label="Trimite"
            severity="success"
            @click="submitReceipt"
            :loading="submitting"
          />
          <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"
          />
        </template>
      </div>
    </div>

    <!-- Rejection Alert -->
    <Message
      v-if="receipt?.rejection_reason"
      severity="warn"
      :closable="false"
      class="rejection-message"
    >
      <strong>Motiv respingere:</strong> {{ receipt.rejection_reason }}
      <br>
      <small>Respins de {{ receipt.reviewed_by }} la {{ formatDateTime(receipt.reviewed_at) }}</small>
    </Message>

    <!-- Unified Form -->
    <UnifiedReceiptForm
      ref="unifiedFormRef"
      v-model="form"
      :ocr-data="ocrData"
      :partners="partners"
      :expense-types="expenseTypes"
      :supplier-source="supplierSource"
      :supplier-warning="supplierWarning.show"
      :syncing-suppliers="syncingSuppliers"
      :existing-attachments="existingAttachments"
      :selected-files="selectedFiles"
      :readonly="isViewMode"
      @ocr-result="onOCRResult"
      @file-selected="onFileSelected"
      @ocr-error="onOCRError"
      @partner-selected="onPartnerSelected"
      @sync-suppliers="syncSuppliers"
      @create-supplier="createLocalSupplierFromWarning"
      @add-files="onAddFiles"
      @remove-file="onRemoveFile"
      @remove-attachment="removeExistingAttachment"
      @download-attachment="downloadAttachment"
    />

    <!-- Validation Banners -->
    <div class="validation-banners" v-if="!isViewMode && validationErrors.length > 0">
      <Message
        v-for="(error, idx) in validationErrors"
        :key="idx"
        severity="warn"
        :closable="false"
      >
        {{ error }}
      </Message>
    </div>

    <!-- Reject Dialog -->
    <Dialog
      v-model:visible="showRejectDialog"
      header="Respinge Bon"
      :modal="true"
      :style="{ width: '450px' }"
    >
      <div class="dialog-content">
        <p>Introduceti motivul respingerii:</p>
        <Textarea
          v-model="rejectReason"
          rows="3"
          class="w-full"
          placeholder="Motiv respingere (minim 5 caractere)..."
        />
      </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>

    <!-- Create Supplier Dialog -->
    <Dialog
      v-model:visible="showCreateSupplierDialog"
      header="Creaza Furnizor Local"
      :modal="true"
      :style="{ width: '400px' }"
    >
      <div class="dialog-content">
        <p>Furnizorul nu a fost gasit. Creati un furnizor local?</p>
        <div class="form-field">
          <label>Nume</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="showCreateSupplierDialog = false" />
        <Button label="Creaza" icon="pi pi-plus" @click="createLocalSupplier" />
      </template>
    </Dialog>

    <!-- US-041: Mobile Bottom Action Bar - Gmail Compose Style -->
    <footer v-if="isMobile && !isViewMode" class="mobile-form-bottom-bar" :class="{ 'keyboard-visible': keyboardVisible }">
      <Button
        label="Salvează Ciornă"
        icon="pi pi-save"
        severity="secondary"
        outlined
        class="bottom-bar-btn"
        :loading="saving"
        @click="saveReceipt"
      />
      <Button
        label="Trimite pentru Validare"
        icon="pi pi-send"
        severity="success"
        class="bottom-bar-btn"
        :loading="submitting"
        :disabled="!canSubmit"
        @click="submitForReviewMobile"
      />
    </footer>

    <!-- US-042: Mobile View Mode Bottom Bar - Contextual buttons by status -->
    <footer v-if="isMobile && isViewMode && receipt" class="mobile-form-bottom-bar">
      <!-- DRAFT status: Editează / Trimite -->
      <Button
        v-if="receipt.status === 'draft'"
        label="Editează"
        icon="pi pi-pencil"
        severity="secondary"
        outlined
        class="bottom-bar-btn"
        @click="goToEdit"
      />
      <Button
        v-if="receipt.status === 'draft'"
        label="Trimite"
        icon="pi pi-send"
        severity="success"
        class="bottom-bar-btn"
        :loading="submitting"
        @click="submitReceipt"
      />
      <!-- PENDING status: Validează / Respinge -->
      <Button
        v-if="receipt.status === 'pending_review'"
        label="Validează"
        icon="pi pi-check"
        severity="success"
        class="bottom-bar-btn"
        :loading="approving"
        @click="approveReceipt"
      />
      <Button
        v-if="receipt.status === 'pending_review'"
        label="Respinge"
        icon="pi pi-times"
        severity="danger"
        class="bottom-bar-btn"
        @click="openRejectDialog"
      />
      <!-- APPROVED status: Anulează -->
      <Button
        v-if="receipt.status === 'approved'"
        label="Anulează Validarea"
        icon="pi pi-replay"
        severity="warning"
        class="bottom-bar-btn"
        :loading="cancelling"
        @click="confirmCancelApproval"
      />
      <!-- REJECTED status: Editează -->
      <Button
        v-if="receipt.status === 'rejected'"
        label="Editează"
        icon="pi pi-pencil"
        severity="primary"
        class="bottom-bar-btn"
        @click="goToEdit"
      />
    </footer>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useToast } from 'primevue/usetoast'
import { useConfirm } from 'primevue/useconfirm'
import Button from 'primevue/button'
import Tag from 'primevue/tag'
import Message from 'primevue/message'
import Dialog from 'primevue/dialog'
import Textarea from 'primevue/textarea'
import InputText from 'primevue/inputtext'
import Menu from 'primevue/menu'

import { useReceiptsStore } from '@data-entry/stores/receiptsStore'
import { useCompanyStore } from '@data-entry/stores/sharedStores'

import UnifiedReceiptForm from '@data-entry/components/receipts/UnifiedReceiptForm.vue'
import MobileTopBar from '@shared/components/mobile/MobileTopBar.vue'
import {
  getDefaultUnifiedFormState,
  legacyToUnifiedForm,
  unifiedFormToApiPayload,
  apiToUiTva,
  apiToUiPayments,
} from '@data-entry/utils/receiptConversions'

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

// US-041: Mobile detection and keyboard awareness
const isMobile = ref(window.innerWidth < 768)
const keyboardVisible = ref(false)
const initialViewportHeight = ref(window.innerHeight)

const handleResize = () => {
  isMobile.value = window.innerWidth < 768

  // US-041: Detect virtual keyboard on mobile
  // When keyboard opens, viewport height decreases significantly
  if (isMobile.value) {
    const heightDiff = initialViewportHeight.value - window.visualViewport?.height || window.innerHeight
    keyboardVisible.value = heightDiff > 150 // Keyboard typically takes 150px+ of space
  }
}

const handleVisualViewportResize = () => {
  if (!isMobile.value) return
  const currentHeight = window.visualViewport?.height || window.innerHeight
  const heightDiff = initialViewportHeight.value - currentHeight
  keyboardVisible.value = heightDiff > 150
}

// 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 modeTitle = computed(() => {
  if (isViewMode.value) return `Bon #${receipt.value?.id || ''}`
  if (isEditMode.value) return 'Editare Bon'
  return 'Bon Fiscal Nou'
})

const modeIcon = computed(() => {
  if (isViewMode.value) return 'pi pi-receipt'
  return 'pi pi-plus-circle'
})

// US-041: Mobile title - shorter for top bar
const mobileTitle = computed(() => {
  if (isViewMode.value) return `Bon #${receipt.value?.id || ''}`
  if (isEditMode.value) return 'Editare Bon'
  return 'Bon Nou'
})

// US-041: Can submit validation for mobile
const canSubmit = computed(() => {
  return form.value.amount && form.value.amount > 0 && form.value.receipt_date
})

// US-042: Can delete - allow delete for draft/rejected, not for approved/pending
const canDelete = computed(() => {
  if (!receipt.value) return false
  return ['draft', 'rejected'].includes(receipt.value.status)
})

// US-042: More menu items - contextual based on status
const moreMenuItems = computed(() => {
  const items = []

  if (!receipt.value) return items

  // Always available: view attachments
  if (existingAttachments.value.length > 0) {
    items.push({
      label: 'Vizualizează Atașamente',
      icon: 'pi pi-images',
      command: () => scrollToAttachments()
    })
  }

  // Share option
  items.push({
    label: 'Partajează',
    icon: 'pi pi-share-alt',
    command: () => shareReceipt()
  })

  // Separator before dangerous actions
  items.push({ separator: true })

  // Delete option (if allowed)
  if (canDelete.value) {
    items.push({
      label: 'Șterge Bonul',
      icon: 'pi pi-trash',
      class: 'p-menuitem-danger',
      command: () => confirmDelete()
    })
  }

  return items
})

// US-105: Mobile top bar actions - contextual based on mode
const mobileTopBarActions = computed(() => {
  const actions = []

  if (!isViewMode.value) {
    // Create/Edit mode: attach file + save
    actions.push({
      id: 'attach',
      icon: 'pi pi-paperclip',
      label: 'Atașează fișier',
      tooltip: 'Atașează fișier'
    })
    actions.push({
      id: 'save',
      icon: 'pi pi-save',
      label: 'Salvează',
      tooltip: 'Salvează'
    })
  } else {
    // View mode: edit (if allowed), delete (if allowed), more menu
    if (receipt.value?.status === 'draft' || receipt.value?.status === 'rejected') {
      actions.push({
        id: 'edit',
        icon: 'pi pi-pencil',
        label: 'Editează',
        tooltip: 'Editează'
      })
    }
    if (canDelete.value) {
      actions.push({
        id: 'delete',
        icon: 'pi pi-trash',
        label: 'Șterge',
        tooltip: 'Șterge'
      })
    }
    actions.push({
      id: 'more',
      icon: 'pi pi-ellipsis-v',
      label: 'Mai multe',
      tooltip: 'Mai multe opțiuni'
    })
  }

  return actions
})

// US-105: Handle top bar action clicks
const handleTopBarAction = (action) => {
  switch (action.id) {
    case 'attach':
      triggerFileAttach()
      break
    case 'save':
      saveReceipt()
      break
    case 'edit':
      goToEdit()
      break
    case 'delete':
      confirmDelete()
      break
    case 'more':
      // Toggle more menu - need to pass event
      moreMenuRef.value?.toggle({ currentTarget: document.querySelector('[aria-label="Mai multe opțiuni"]') })
      break
  }
}

// Form state
const form = ref(getDefaultUnifiedFormState())
const receipt = ref(null)
const unifiedFormRef = ref(null)

// OCR state
const ocrData = ref(null)

// Files state
const selectedFiles = ref([])
const existingAttachments = ref([])

// Loading states
const saving = ref(false)
const submitting = ref(false)
const approving = ref(false)
const rejecting = ref(false)
const cancelling = ref(false)
const syncingSuppliers = ref(false)

// US-042: More menu ref
const moreMenuRef = ref(null)

// Supplier state
const supplierSource = ref(null)
const supplierWarning = ref({ show: false, cui: '', name: '' })
const showCreateSupplierDialog = ref(false)
const pendingSupplierData = ref({ name: '', fiscal_code: '', address: '' })

// Reject dialog
const showRejectDialog = ref(false)
const rejectReason = ref('')

// Computed
const partners = computed(() => store.partners)
const expenseTypes = computed(() => store.expenseTypes)

const validationErrors = computed(() => {
  const errors = []
  if (!form.value.amount || form.value.amount <= 0) {
    errors.push('Suma totala este obligatorie')
  }
  if (!form.value.receipt_date) {
    errors.push('Data este obligatorie')
  }
  if (selectedFiles.value.length === 0 && existingAttachments.value.length === 0 && isCreateMode.value) {
    errors.push('Atasati cel putin o imagine a bonului')
  }
  return errors
})

// Status helpers
const getStatusLabel = (status) => {
  const labels = {
    draft: 'Ciorna',
    pending_review: 'In Asteptare',
    approved: 'Aprobat',
    rejected: 'Respins',
  }
  return labels[status] || status
}

const getStatusSeverity = (status) => {
  const severities = {
    draft: 'secondary',
    pending_review: 'warning',
    approved: 'success',
    rejected: 'danger',
  }
  return severities[status] || 'info'
}

// Lifecycle
onMounted(async () => {
  // US-041: Mobile event listeners
  window.addEventListener('resize', handleResize)
  if (window.visualViewport) {
    window.visualViewport.addEventListener('resize', handleVisualViewportResize)
  }
  initialViewportHeight.value = window.innerHeight

  // Load nomenclatures
  await store.fetchAllNomenclatures()

  // Sync suppliers if empty
  if (store.partners.length === 0) {
    await syncSuppliers()
  }

  // Load receipt if edit/view mode
  if (isEditMode.value || isViewMode.value) {
    await loadReceipt()
  } else {
    // Set company ID for new receipts
    form.value.company_id = companyStore.selectedCompanyId || 1
  }
})

// US-041: Cleanup event listeners
onUnmounted(() => {
  window.removeEventListener('resize', handleResize)
  if (window.visualViewport) {
    window.visualViewport.removeEventListener('resize', handleVisualViewportResize)
  }
})

// Load existing receipt
const loadReceipt = async () => {
  try {
    receipt.value = await store.fetchReceiptById(route.params.id)

    // Convert to unified form format
    form.value = {
      receipt_type: receipt.value.receipt_type || 'bon_fiscal',
      receipt_date: new Date(receipt.value.receipt_date),
      receipt_number: receipt.value.receipt_number || '',
      partner_name: receipt.value.partner_name || null,
      cui: receipt.value.cui || '',
      vendor_address: receipt.value.vendor_address || '',
      amount: parseFloat(receipt.value.amount) || null,
      tva: apiToUiTva(receipt.value.tva_breakdown),
      payments: apiToUiPayments(receipt.value.payment_methods),
      expense_type_code: receipt.value.expense_type_code || null,
      description: receipt.value.description || '',
      ocr_raw_text: receipt.value.ocr_raw_text || '',
      items_count: receipt.value.items_count || null,
      company_id: receipt.value.company_id,
    }

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

    // Set supplier source if CUI matches a known supplier
    if (form.value.cui) {
      const result = await store.searchSupplier(form.value.cui)
      if (result.found) {
        supplierSource.value = result.source
      }
    }
  } catch (error) {
    toast.add({
      severity: 'error',
      summary: 'Eroare',
      detail: 'Nu s-a putut incarca bonul',
      life: 5000,
    })
    router.push('/data-entry')
  }
}

// OCR handlers
const onOCRResult = async (data) => {
  ocrData.value = data

  toast.add({
    severity: 'success',
    summary: 'OCR Procesare',
    detail: 'Datele au fost extrase',
    life: 3000,
  })

  // Auto-apply 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.receipt_number) form.value.receipt_number = data.receipt_number
  if (data.amount) form.value.amount = parseFloat(data.amount)
  if (data.address) form.value.vendor_address = data.address
  if (data.raw_text) form.value.ocr_raw_text = data.raw_text
  if (data.items_count) form.value.items_count = data.items_count

  // Apply TVA
  if (data.tva_entries?.length > 0) {
    form.value.tva = apiToUiTva(data.tva_entries)
  }

  // Apply payments
  if (data.payment_methods?.length > 0) {
    form.value.payments = apiToUiPayments(data.payment_methods)
  }

  // Search for supplier by CUI
  if (data.cui) {
    form.value.cui = data.cui

    const result = await store.searchSupplier(data.cui)
    if (result.found && result.supplier) {
      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 || ''
      supplierSource.value = result.source
      supplierWarning.value = { show: false, cui: '', name: '' }

      toast.add({
        severity: 'success',
        summary: 'Furnizor gasit',
        detail: `${result.supplier.name} (${result.source})`,
        life: 3000,
      })
    } else {
      // Supplier not found - show warning
      form.value.partner_name = data.partner_name || ''
      supplierSource.value = null
      supplierWarning.value = {
        show: true,
        cui: data.cui,
        name: data.partner_name || ''
      }
    }
  } else if (data.partner_name) {
    form.value.partner_name = data.partner_name
  }
}

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

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

const onPartnerSelected = (partner) => {
  if (partner) {
    supplierSource.value = partner.source || 'local'
    supplierWarning.value = { show: false, cui: '', name: '' }
  }
}

// File handlers
const onAddFiles = (files) => {
  selectedFiles.value = [...selectedFiles.value, ...files]
}

const onRemoveFile = (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: 2000,
    })
  } catch (error) {
    toast.add({
      severity: 'error',
      summary: 'Eroare',
      detail: 'Nu s-a putut sterge atasamentul',
      life: 5000,
    })
  }
}

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

// Supplier handlers
const syncSuppliers = async () => {
  syncingSuppliers.value = true
  try {
    await store.syncSuppliers()
    toast.add({
      severity: 'success',
      summary: 'Sincronizare',
      detail: 'Furnizorii au fost actualizati',
      life: 2000,
    })
  } catch (error) {
    toast.add({
      severity: 'error',
      summary: 'Eroare',
      detail: 'Sincronizare esuata',
      life: 5000,
    })
  } finally {
    syncingSuppliers.value = false
  }
}

const createLocalSupplierFromWarning = () => {
  pendingSupplierData.value = {
    name: supplierWarning.value.name || form.value.partner_name || '',
    fiscal_code: supplierWarning.value.cui || form.value.cui || '',
    address: form.value.vendor_address || '',
  }
  showCreateSupplierDialog.value = true
}

const createLocalSupplier = async () => {
  try {
    await store.createLocalSupplier(pendingSupplierData.value)
    toast.add({
      severity: 'success',
      summary: 'Succes',
      detail: 'Furnizor local creat',
      life: 2000,
    })
    showCreateSupplierDialog.value = false
    supplierSource.value = 'local'
    supplierWarning.value = { show: false, cui: '', name: '' }

    // Update form with created supplier
    form.value.partner_name = pendingSupplierData.value.name
    form.value.cui = pendingSupplierData.value.fiscal_code
    form.value.vendor_address = pendingSupplierData.value.address
  } catch (error) {
    toast.add({
      severity: 'error',
      summary: 'Eroare',
      detail: 'Nu s-a putut crea furnizorul',
      life: 5000,
    })
  }
}

// Save handlers
const validateForm = () => {
  if (!form.value.receipt_date) {
    toast.add({
      severity: 'error',
      summary: 'Validare',
      detail: 'Data este obligatorie',
      life: 3000,
    })
    return false
  }
  if (!form.value.amount || form.value.amount <= 0) {
    toast.add({
      severity: 'error',
      summary: 'Validare',
      detail: 'Suma este obligatorie',
      life: 3000,
    })
    return false
  }
  return true
}

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

  saving.value = true

  try {
    // Auto-create supplier if warning shown
    if (supplierWarning.value.show && form.value.cui) {
      try {
        await store.createLocalSupplier({
          name: form.value.partner_name || `Furnizor ${form.value.cui}`,
          fiscal_code: form.value.cui,
          address: form.value.vendor_address || null,
        })
        supplierWarning.value = { show: false, cui: '', name: '' }
        supplierSource.value = 'local'
      } catch (e) {
        console.warn('Auto-create supplier failed:', e)
      }
    }

    // Convert form to API format
    const payload = unifiedFormToApiPayload(form.value)

    let savedReceipt

    if (isEditMode.value) {
      savedReceipt = await store.updateReceipt(route.params.id, payload)
    } else {
      savedReceipt = await store.createReceipt(payload)
    }

    // Upload new files
    for (const file of selectedFiles.value) {
      try {
        await store.uploadAttachment(savedReceipt.id, file)
      } catch (e) {
        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 () => {
  if (!validateForm()) return

  submitting.value = true

  try {
    await saveReceipt()
    const result = await store.submitReceipt(route.params.id)

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

const submitReceipt = async () => {
  submitting.value = true
  try {
    const result = await store.submitReceipt(route.params.id)
    if (result.success) {
      toast.add({
        severity: 'success',
        summary: 'Succes',
        detail: 'Bonul a fost trimis',
        life: 3000,
      })
      await loadReceipt()
    }
  } catch (error) {
    toast.add({
      severity: 'error',
      summary: 'Eroare',
      detail: error.message,
      life: 5000,
    })
  } finally {
    submitting.value = false
  }
}

const approveReceipt = async () => {
  approving.value = true
  try {
    const result = await store.approveReceipt(route.params.id)
    if (result.success) {
      toast.add({
        severity: 'success',
        summary: 'Succes',
        detail: 'Bonul a fost aprobat',
        life: 3000,
      })
      await loadReceipt()
    }
  } catch (error) {
    toast.add({
      severity: 'error',
      summary: 'Eroare',
      detail: error.message,
      life: 5000,
    })
  } finally {
    approving.value = false
  }
}

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

const rejectReceipt = async () => {
  rejecting.value = true
  try {
    const result = await store.rejectReceipt(route.params.id, rejectReason.value)
    if (result.success) {
      toast.add({
        severity: 'success',
        summary: 'Succes',
        detail: 'Bonul a fost respins',
        life: 3000,
      })
      showRejectDialog.value = false
      await loadReceipt()
    }
  } catch (error) {
    toast.add({
      severity: 'error',
      summary: 'Eroare',
      detail: error.message,
      life: 5000,
    })
  } finally {
    rejecting.value = false
  }
}

// Navigation
const goBack = () => {
  router.push('/data-entry')
}

const goToEdit = () => {
  router.push(`/data-entry/${route.params.id}/edit`)
}

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

// US-041: Mobile-specific functions
const triggerFileAttach = () => {
  // Trigger the file input in the UnifiedReceiptForm component
  unifiedFormRef.value?.resetUpload?.()
  // Open file dialog via hidden input
  const fileInput = document.querySelector('.unified-receipt-form .hidden-input')
  if (fileInput) {
    fileInput.click()
  }
}

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

  // For create mode, save first then submit
  if (isCreateMode.value) {
    saving.value = true
    submitting.value = true

    try {
      // Auto-create supplier if warning shown
      if (supplierWarning.value.show && form.value.cui) {
        try {
          await store.createLocalSupplier({
            name: form.value.partner_name || `Furnizor ${form.value.cui}`,
            fiscal_code: form.value.cui,
            address: form.value.vendor_address || null,
          })
          supplierWarning.value = { show: false, cui: '', name: '' }
          supplierSource.value = 'local'
        } catch (e) {
          console.warn('Auto-create supplier failed:', e)
        }
      }

      const payload = unifiedFormToApiPayload(form.value)
      const savedReceipt = await store.createReceipt(payload)

      // Upload files
      for (const file of selectedFiles.value) {
        try {
          await store.uploadAttachment(savedReceipt.id, file)
        } catch (e) {
          console.warn(`Upload failed: ${file.name}`, e)
        }
      }

      // Now submit for review
      const result = await store.submitReceipt(savedReceipt.id)
      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 {
      saving.value = false
      submitting.value = false
    }
  } else {
    // Edit mode - use existing submitForReview
    await submitForReview()
  }
}

const confirmDelete = () => {
  confirm.require({
    message: 'Sigur doriți să ștergeți acest bon?',
    header: 'Confirmare Ștergere',
    icon: 'pi pi-exclamation-triangle',
    acceptClass: 'p-button-danger',
    accept: async () => {
      try {
        await store.deleteReceipt(route.params.id)
        toast.add({
          severity: 'success',
          summary: 'Succes',
          detail: 'Bonul a fost șters',
          life: 2000,
        })
        router.push('/data-entry')
      } catch (error) {
        toast.add({
          severity: 'error',
          summary: 'Eroare',
          detail: error.message || 'Nu s-a putut șterge bonul',
          life: 5000,
        })
      }
    },
  })
}

// US-042: More menu toggle
const toggleMoreMenu = (event) => {
  moreMenuRef.value?.toggle(event)
}

// US-042: Helper functions for more menu
const scrollToAttachments = () => {
  const attachmentsSection = document.querySelector('.attachments-section')
  if (attachmentsSection) {
    attachmentsSection.scrollIntoView({ behavior: 'smooth' })
  }
}

const shareReceipt = async () => {
  if (navigator.share && receipt.value) {
    try {
      await navigator.share({
        title: `Bon #${receipt.value.id}`,
        text: `Bon fiscal - ${receipt.value.partner_name || 'Furnizor'} - ${receipt.value.amount} RON`,
        url: window.location.href
      })
    } catch (error) {
      // User cancelled sharing or share failed
      if (error.name !== 'AbortError') {
        // Fallback: copy URL to clipboard
        await navigator.clipboard.writeText(window.location.href)
        toast.add({
          severity: 'success',
          summary: 'Link Copiat',
          detail: 'Link-ul a fost copiat în clipboard',
          life: 2000,
        })
      }
    }
  } else {
    // Fallback for browsers without Web Share API
    try {
      await navigator.clipboard.writeText(window.location.href)
      toast.add({
        severity: 'success',
        summary: 'Link Copiat',
        detail: 'Link-ul a fost copiat în clipboard',
        life: 2000,
      })
    } catch (error) {
      toast.add({
        severity: 'error',
        summary: 'Eroare',
        detail: 'Nu s-a putut copia link-ul',
        life: 3000,
      })
    }
  }
}

// US-042: Cancel approval functionality
const confirmCancelApproval = () => {
  confirm.require({
    message: 'Sigur doriți să anulați validarea acestui bon? Bonul va reveni la status "Ciornă".',
    header: 'Confirmare Anulare Validare',
    icon: 'pi pi-exclamation-triangle',
    acceptClass: 'p-button-warning',
    acceptLabel: 'Da, Anulează',
    rejectLabel: 'Nu',
    accept: async () => {
      await cancelApproval()
    },
  })
}

const cancelApproval = async () => {
  cancelling.value = true
  try {
    // Use existing unapproveReceipt from store
    const result = await store.unapproveReceipt(route.params.id)
    if (result.success !== false) {
      toast.add({
        severity: 'success',
        summary: 'Succes',
        detail: 'Validarea a fost anulată. Bonul a revenit la status Ciornă.',
        life: 3000,
      })
      await loadReceipt()
    } else {
      toast.add({
        severity: 'error',
        summary: 'Eroare',
        detail: result.message || 'Nu s-a putut anula validarea',
        life: 5000,
      })
    }
  } catch (error) {
    toast.add({
      severity: 'error',
      summary: 'Eroare',
      detail: error.message || 'Nu s-a putut anula validarea',
      life: 5000,
    })
  } finally {
    cancelling.value = false
  }
}
</script>

<style scoped>
.receipt-unified-view {
  padding: 1rem;
  max-width: 800px;
  margin: 0 auto;
}

/* Header */
.view-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  padding: 0.75rem 1rem;
  background: var(--surface-card);
  border-radius: 8px;
  border: 1px solid var(--surface-border);
}

.header-left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.view-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-color);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.header-right {
  display: flex;
  gap: 0.5rem;
}

/* Messages */
.rejection-message {
  margin-bottom: 1rem;
}

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

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

.form-field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.form-field label {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-color-secondary);
}

/* Responsive */
@media (max-width: 640px) {
  .receipt-unified-view {
    padding: 0.5rem;
  }

  .view-header {
    flex-direction: column;
    gap: 0.75rem;
    align-items: stretch;
  }

  .header-left {
    justify-content: flex-start;
  }

  .header-right {
    justify-content: flex-end;
    flex-wrap: wrap;
  }
}

/* Dark mode */
[data-theme="dark"] .view-header {
  background: var(--surface-card);
}

/* ========================================
 * US-041/US-105: Mobile Layout
 * Uses shared MobileTopBar component
 * PRD Mobile Layout Tokens:
 * - topBarHeight: 56px
 * - bottomNavHeight: 56px
 * - touchTargetMin: 48px
 * ======================================== */

/* Mobile compose layout container */
.receipt-unified-view.mobile-compose-layout {
  padding: 0;
  padding-top: 56px; /* Space for fixed MobileTopBar */
  padding-bottom: 80px; /* Space for fixed bottom action bar */
  max-width: 100%;
  min-height: 100vh;
  background: var(--surface-ground);
}

/* Hide desktop header on mobile */
.receipt-unified-view.mobile-compose-layout .view-header {
  display: none;
}

/* Mobile Bottom Action Bar - Gmail Compose Style */
.mobile-form-bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: auto;
  min-height: 56px;
  background: var(--surface-card);
  border-top: 1px solid var(--surface-border);
  display: flex;
  align-items: center;
  justify-content: stretch;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  z-index: 1000;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
  /* Safe area for iOS notch/home indicator */
  padding-bottom: max(var(--space-sm), env(safe-area-inset-bottom));
  transition: transform var(--transition-normal), opacity var(--transition-normal);
}

/* Keyboard-aware: move bar above keyboard */
.mobile-form-bottom-bar.keyboard-visible {
  position: absolute;
  transform: translateY(-100%);
}

/* Buttons in bottom bar - equal width */
.mobile-form-bottom-bar .bottom-bar-btn {
  flex: 1;
  min-height: 48px; /* Touch target minimum */
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
}

/* Primary button emphasis */
.mobile-form-bottom-bar .bottom-bar-btn.p-button-success {
  flex: 1.2; /* Slightly wider for primary action */
}

/* Mobile content area adjustments */
.receipt-unified-view.mobile-compose-layout .rejection-message {
  margin: var(--space-sm);
  margin-bottom: 0;
}

.receipt-unified-view.mobile-compose-layout .validation-banners {
  margin: var(--space-sm);
  margin-top: var(--space-sm);
}

/* Form inside mobile layout - 100% width */
.receipt-unified-view.mobile-compose-layout :deep(.unified-receipt-form) {
  max-width: 100%;
  margin: 0;
}

.receipt-unified-view.mobile-compose-layout :deep(.form-body) {
  border-radius: 0;
  border-left: none;
  border-right: none;
}

/* ========================================
 * Dark Mode Support for Mobile Bottom Bar
 * (MobileTopBar handles its own dark mode)
 * ======================================== */
[data-theme="dark"] .mobile-form-bottom-bar {
  background: var(--surface-card);
  border-top-color: var(--surface-border);
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.3);
}

/* ========================================
 * System Preference Dark Mode Support
 * ======================================== */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .mobile-form-bottom-bar {
    background: var(--surface-card);
    border-top-color: var(--surface-border);
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.3);
  }
}
</style>
