<template>
  <div class="p-6">
    <h1 class="text-2xl font-bold mb-6">Invoices</h1>

    <!-- Header -->
    <div class="flex items-center justify-between mb-6">
      <div class="flex gap-2">
        <button
          @click="view = 'list'"
          :class="[
            'px-4 py-2 rounded-lg transition-colors',
            view === 'list'
              ? 'bg-amber text-background'
              : 'border border-border text-text-primary hover:bg-surface-elevated'
          ]"
        >
          List
        </button>
        <button
          @click="view = 'create'"
          :class="[
            'px-4 py-2 rounded-lg transition-colors',
            view === 'create'
              ? 'bg-amber text-background'
              : 'border border-border text-text-primary hover:bg-surface-elevated'
          ]"
        >
          Create
        </button>
      </div>
    </div>

    <!-- List View -->
    <div v-if="view === 'list'" class="bg-surface border border-border rounded-lg overflow-hidden">
      <div v-if="invoicesStore.invoices.length > 0" class="overflow-x-auto">
        <table class="w-full">
          <thead class="bg-surface-elevated">
            <tr>
              <th class="px-4 py-3 text-left text-sm font-medium text-text-secondary">Invoice #</th>
              <th class="px-4 py-3 text-left text-sm font-medium text-text-secondary">Client</th>
              <th class="px-4 py-3 text-left text-sm font-medium text-text-secondary">Date</th>
              <th class="px-4 py-3 text-right text-sm font-medium text-text-secondary">Amount</th>
              <th class="px-4 py-3 text-center text-sm font-medium text-text-secondary">Status</th>
              <th class="px-4 py-3 text-center text-sm font-medium text-text-secondary">Actions</th>
            </tr>
          </thead>
          <tbody class="divide-y divide-border">
            <tr
              v-for="invoice in invoicesStore.invoices"
              :key="invoice.id"
              class="hover:bg-surface-elevated transition-colors"
            >
              <td class="px-4 py-3 text-text-primary font-medium">
                {{ invoice.invoice_number }}
              </td>
              <td class="px-4 py-3 text-text-primary">
                {{ getClientName(invoice.client_id) }}
              </td>
              <td class="px-4 py-3 text-text-secondary">
                {{ formatDate(invoice.date) }}
              </td>
              <td class="px-4 py-3 text-right text-text-primary font-mono">
                ${{ invoice.total.toFixed(2) }}
              </td>
              <td class="px-4 py-3 text-center">
                <span
                  :class="[
                    'px-2 py-1 text-xs font-medium rounded',
                    invoice.status === 'paid' ? 'bg-green-900 text-green-200' :
                    invoice.status === 'pending' ? 'bg-yellow-900 text-yellow-200' :
                    'bg-red-900 text-red-200'
                  ]"
                >
                  {{ invoice.status }}
                </span>
              </td>
              <td class="px-4 py-3 text-center">
                <div class="flex items-center justify-center gap-2">
                  <button
                    @click="viewInvoice(invoice)"
                    class="p-2 text-text-secondary hover:text-amber transition-colors"
                    title="View"
                  >
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
                    </svg>
                  </button>
                  <button
                    @click="exportPDF(invoice)"
                    class="p-2 text-text-secondary hover:text-amber transition-colors"
                    title="Export PDF"
                  >
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                    </svg>
                  </button>
                  <button
                    @click="confirmDelete(invoice)"
                    class="p-2 text-text-secondary hover:text-error transition-colors"
                    title="Delete"
                  >
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                    </svg>
                  </button>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>

      <div v-else class="text-center text-text-secondary py-12">
        No invoices yet. Create your first invoice!
      </div>
    </div>

    <!-- Create View -->
    <div v-else-if="view === 'create'" class="bg-surface border border-border rounded-lg p-6">
      <h2 class="text-xl font-bold mb-4">Create Invoice</h2>

      <form @submit.prevent="handleCreate" class="space-y-4">
        <!-- Client -->
        <div>
          <label class="block text-sm text-text-secondary mb-1">Client *</label>
          <select
            v-model="createForm.client_id"
            required
            class="w-full px-3 py-2 bg-background border border-border rounded-lg text-text-primary focus:outline-none focus:border-amber"
          >
            <option :value="0">Select a client</option>
            <option
              v-for="client in clientsStore.clients"
              :key="client.id"
              :value="client.id"
            >
              {{ client.name }}
            </option>
          </select>
        </div>

        <!-- Date -->
        <div class="grid grid-cols-2 gap-4">
          <div>
            <label class="block text-sm text-text-secondary mb-1">Invoice Date *</label>
            <input
              v-model="createForm.date"
              type="date"
              required
              class="w-full px-3 py-2 bg-background border border-border rounded-lg text-text-primary focus:outline-none focus:border-amber"
            />
          </div>
          <div>
            <label class="block text-sm text-text-secondary mb-1">Due Date</label>
            <input
              v-model="createForm.due_date"
              type="date"
              class="w-full px-3 py-2 bg-background border border-border rounded-lg text-text-primary focus:outline-none focus:border-amber"
            />
          </div>
        </div>

        <!-- Tax Rate -->
        <div class="grid grid-cols-2 gap-4">
          <div>
            <label class="block text-sm text-text-secondary mb-1">Tax Rate (%)</label>
            <input
              v-model.number="createForm.tax_rate"
              type="number"
              min="0"
              max="100"
              step="0.01"
              class="w-full px-3 py-2 bg-background border border-border rounded-lg text-text-primary focus:outline-none focus:border-amber"
            />
          </div>
          <div>
            <label class="block text-sm text-text-secondary mb-1">Discount ($)</label>
            <input
              v-model.number="createForm.discount"
              type="number"
              min="0"
              step="0.01"
              class="w-full px-3 py-2 bg-background border border-border rounded-lg text-text-primary focus:outline-none focus:border-amber"
            />
          </div>
        </div>

        <!-- Notes -->
        <div>
          <label class="block text-sm text-text-secondary mb-1">Notes</label>
          <textarea
            v-model="createForm.notes"
            rows="3"
            class="w-full px-3 py-2 bg-background border border-border rounded-lg text-text-primary focus:outline-none focus:border-amber"
            placeholder="Additional notes for the invoice"
          ></textarea>
        </div>

        <!-- Calculated Total -->
        <div class="bg-surface-elevated rounded-lg p-4">
          <div class="flex justify-between text-text-secondary mb-2">
            <span>Subtotal:</span>
            <span>${{ calculateSubtotal().toFixed(2) }}</span>
          </div>
          <div class="flex justify-between text-text-secondary mb-2">
            <span>Tax ({{ createForm.tax_rate }}%):</span>
            <span>${{ calculateTax().toFixed(2) }}</span>
          </div>
          <div class="flex justify-between text-text-secondary mb-2">
            <span>Discount:</span>
            <span>-${{ createForm.discount.toFixed(2) }}</span>
          </div>
          <div class="flex justify-between text-text-primary font-bold text-lg pt-2 border-t border-border">
            <span>Total:</span>
            <span>${{ calculateTotal().toFixed(2) }}</span>
          </div>
        </div>

        <!-- Buttons -->
        <div class="flex justify-end gap-3 pt-4">
          <button
            type="button"
            @click="view = 'list'"
            class="px-4 py-2 border border-border text-text-primary rounded-lg hover:bg-surface-elevated transition-colors"
          >
            Cancel
          </button>
          <button
            type="submit"
            class="px-4 py-2 bg-amber text-background font-medium rounded-lg hover:bg-amber-hover transition-colors"
          >
            Create Invoice
          </button>
        </div>
      </form>
    </div>

    <!-- Invoice Detail View -->
    <div
      v-if="showDetailDialog"
      class="fixed inset-0 bg-black/50 flex items-center justify-center z-50"
      @click.self="showDetailDialog = false"
    >
      <div class="bg-surface border border-border rounded-lg w-full max-w-2xl mx-4 p-6 max-h-[90vh] overflow-y-auto">
        <div class="flex items-start justify-between mb-6">
          <div>
            <h2 class="text-2xl font-bold text-text-primary">Invoice {{ selectedInvoice?.invoice_number }}</h2>
            <p class="text-text-secondary">{{ getClientName(selectedInvoice?.client_id || 0) }}</p>
          </div>
          <button
            @click="showDetailDialog = false"
            class="p-2 text-text-secondary hover:text-text-primary transition-colors"
          >
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
            </svg>
          </button>
        </div>

        <div class="space-y-4">
          <div class="grid grid-cols-2 gap-4">
            <div>
              <p class="text-sm text-text-secondary">Invoice Date</p>
              <p class="text-text-primary">{{ formatDate(selectedInvoice?.date || '') }}</p>
            </div>
            <div>
              <p class="text-sm text-text-secondary">Due Date</p>
              <p class="text-text-primary">{{ selectedInvoice?.due_date ? formatDate(selectedInvoice.due_date) : '-' }}</p>
            </div>
          </div>

          <div class="border-t border-border pt-4">
            <div class="flex justify-between text-text-secondary mb-2">
              <span>Subtotal:</span>
              <span>${{ (selectedInvoice?.subtotal || 0).toFixed(2) }}</span>
            </div>
            <div class="flex justify-between text-text-secondary mb-2">
              <span>Tax ({{ selectedInvoice?.tax_rate || 0 }}%):</span>
              <span>${{ (selectedInvoice?.tax_amount || 0).toFixed(2) }}</span>
            </div>
            <div class="flex justify-between text-text-secondary mb-2">
              <span>Discount:</span>
              <span>-${{ (selectedInvoice?.discount || 0).toFixed(2) }}</span>
            </div>
            <div class="flex justify-between text-text-primary font-bold text-lg pt-2 border-t border-border">
              <span>Total:</span>
              <span>${{ (selectedInvoice?.total || 0).toFixed(2) }}</span>
            </div>
          </div>

          <div v-if="selectedInvoice?.notes" class="border-t border-border pt-4">
            <p class="text-sm text-text-secondary mb-1">Notes</p>
            <p class="text-text-primary">{{ selectedInvoice.notes }}</p>
          </div>
        </div>

        <div class="flex justify-end gap-3 mt-6">
          <button
            @click="exportPDF(selectedInvoice!)"
            class="px-4 py-2 bg-amber text-background font-medium rounded-lg hover:bg-amber-hover transition-colors"
          >
            Export PDF
          </button>
        </div>
      </div>
    </div>

    <!-- Delete Confirmation Dialog -->
    <div
      v-if="showDeleteDialog"
      class="fixed inset-0 bg-black/50 flex items-center justify-center z-50"
      @click.self="showDeleteDialog = false"
    >
      <div class="bg-surface border border-border rounded-lg w-full max-w-sm mx-4 p-6">
        <h2 class="text-xl font-bold mb-2">Delete Invoice</h2>
        <p class="text-text-secondary mb-6">
          Are you sure you want to delete invoice "{{ invoiceToDelete?.invoice_number }}"? This action cannot be undone.
        </p>
        <div class="flex justify-end gap-3">
          <button
            @click="showDeleteDialog = false"
            class="px-4 py-2 border border-border text-text-primary rounded-lg hover:bg-surface-elevated transition-colors"
          >
            Cancel
          </button>
          <button
            @click="handleDelete"
            class="px-4 py-2 bg-error text-white font-medium rounded-lg hover:opacity-90 transition-opacity"
          >
            Delete
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { invoke } from '@tauri-apps/api/core'
import { useInvoicesStore, type Invoice } from '../stores/invoices'
import { useClientsStore } from '../stores/clients'

const invoicesStore = useInvoicesStore()
const clientsStore = useClientsStore()

// View state
const view = ref<'list' | 'create'>('list')

// Dialog state
const showDetailDialog = ref(false)
const showDeleteDialog = ref(false)
const selectedInvoice = ref<Invoice | null>(null)
const invoiceToDelete = ref<Invoice | null>(null)

// Create form
const createForm = reactive({
  client_id: 0,
  date: new Date().toISOString().split('T')[0],
  due_date: '',
  tax_rate: 0,
  discount: 0,
  notes: ''
})

// Get client name by ID
function getClientName(clientId: number): string {
  const client = clientsStore.clients.find(c => c.id === clientId)
  return client?.name || 'Unknown Client'
}

// Format date
function formatDate(dateString: string): string {
  if (!dateString) return '-'
  const date = new Date(dateString)
  return date.toLocaleDateString('en-US', {
    month: 'short',
    day: 'numeric',
    year: 'numeric'
  })
}

// Calculate subtotal (simplified - would need line items in a real app)
function calculateSubtotal(): number {
  // For now, just return 0 - would need time entries or line items
  return 0
}

// Calculate tax
function calculateTax(): number {
  return calculateSubtotal() * (createForm.tax_rate / 100)
}

// Calculate total
function calculateTotal(): number {
  return calculateSubtotal() + calculateTax() - createForm.discount
}

// View invoice details
function viewInvoice(invoice: Invoice) {
  selectedInvoice.value = invoice
  showDetailDialog.value = true
}

// Confirm delete
function confirmDelete(invoice: Invoice) {
  invoiceToDelete.value = invoice
  showDeleteDialog.value = true
}

// Handle delete
async function handleDelete() {
  if (invoiceToDelete.value?.id) {
    await invoicesStore.deleteInvoice(invoiceToDelete.value.id)
  }
  showDeleteDialog.value = false
  invoiceToDelete.value = null
}

// Handle create
async function handleCreate() {
  if (!createForm.client_id) {
    alert('Please select a client')
    return
  }

  const subtotal = calculateSubtotal()
  const taxAmount = subtotal * (createForm.tax_rate / 100)
  const total = subtotal + taxAmount - createForm.discount

  const invoice: Invoice = {
    client_id: createForm.client_id,
    invoice_number: `INV-${Date.now()}`,
    date: createForm.date,
    due_date: createForm.due_date || undefined,
    subtotal,
    tax_rate: createForm.tax_rate,
    tax_amount: taxAmount,
    discount: createForm.discount,
    total,
    notes: createForm.notes || undefined,
    status: 'pending'
  }

  await invoicesStore.createInvoice(invoice)
  view.value = 'list'
}

// Export PDF (placeholder - would need PDF generation)
async function exportPDF(invoice: Invoice) {
  try {
    await invoke('export_invoice_pdf', { invoiceId: invoice.id })
  } catch (error) {
    console.error('Failed to export PDF:', error)
    alert('Failed to export PDF. This feature requires backend implementation.')
  }
}

// Load data on mount
onMounted(async () => {
  await Promise.all([
    invoicesStore.fetchInvoices(),
    clientsStore.fetchClients()
  ])
})
</script>
