<template>
  <div>
    <div class="page-header">
      <h2>Vendors</h2>
      <button class="btn btn-primary" @click="openModal()">+ Add Vendor</button>
    </div>

    <!-- Filters -->
    <div class="filters">
      <input
        v-model="search"
        type="text"
        class="form-control"
        placeholder="Search vendors..."
        @input="debouncedSearch"
      />
    </div>

    <div class="card">
      <div v-if="loading" class="loading">Loading...</div>

      <template v-else>
        <div class="table-container">
          <table>
            <thead>
              <tr>
                <th>Vendor Name</th>
                <th>Contact</th>
                <th>Phone</th>
                <th>Email</th>
                <th>Actions</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="vendor in vendors" :key="vendor.vendorid">
                <td>{{ vendor.vendor }}</td>
                <td>{{ vendor.contact || '-' }}</td>
                <td>{{ vendor.phone || '-' }}</td>
                <td>{{ vendor.email || '-' }}</td>
                <td class="actions">
                  <button
                    class="btn btn-secondary btn-sm"
                    @click="openModal(vendor)"
                  >
                    Edit
                  </button>
                  <button
                    class="btn btn-danger btn-sm"
                    @click="confirmDelete(vendor)"
                  >
                    Delete
                  </button>
                </td>
              </tr>
              <tr v-if="vendors.length === 0">
                <td colspan="5" style="text-align: center; color: var(--text-light);">
                  No vendors found
                  <SearchSuggestion :suggestion="suggestion" @pick="applySuggestion" />
                </td>
              </tr>
            </tbody>
          </table>
        </div>

        <!-- Pagination -->
        <PaginationBar
          :page="page"
          :totalPages="totalPages"
          :perPage="perPage"
          @update:page="goToPage"
          @update:perPage="changePerPage"
        />
      </template>
    </div>

    <!-- Add/Edit Modal -->
    <div v-if="showModal" class="modal-overlay">
      <div class="modal">
        <div class="modal-header">
          <h3>{{ editingVendor ? 'Edit Vendor' : 'Add Vendor' }}</h3>
        </div>
        <form @submit.prevent="saveVendor">
          <div class="modal-body">
            <div class="form-group">
              <label for="vendor">Vendor Name *</label>
              <input
                id="vendor"
                v-model="form.vendor"
                type="text"
                class="form-control"
                required
              />
            </div>

            <div class="form-group">
              <label for="contact">Contact Person</label>
              <input
                id="contact"
                v-model="form.contact"
                type="text"
                class="form-control"
              />
            </div>

            <div class="form-group">
              <label for="phone">Phone</label>
              <input
                id="phone"
                v-model="form.phone"
                type="text"
                class="form-control"
              />
            </div>

            <div class="form-group">
              <label for="email">Email</label>
              <input
                id="email"
                v-model="form.email"
                type="email"
                class="form-control"
              />
            </div>

            <div class="form-group">
              <label for="address">Address</label>
              <textarea
                id="address"
                v-model="form.address"
                class="form-control"
                rows="2"
              ></textarea>
            </div>

            <div class="form-group">
              <label for="website">Website</label>
              <input
                id="website"
                v-model="form.website"
                type="url"
                class="form-control"
              />
            </div>

            <div class="form-group">
              <label for="notes">Notes</label>
              <textarea
                id="notes"
                v-model="form.notes"
                class="form-control"
                rows="2"
              ></textarea>
            </div>

            <div v-if="error" class="error-message">{{ error }}</div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" @click="closeModal">Cancel</button>
            <button type="submit" class="btn btn-primary" :disabled="saving">
              {{ saving ? 'Saving...' : 'Save' }}
            </button>
          </div>
        </form>
      </div>
    </div>

    <!-- Delete Confirmation Modal -->
    <div v-if="showDeleteModal" class="modal-overlay" @click.self="showDeleteModal = false">
      <div class="modal">
        <div class="modal-header">
          <h3>Delete Vendor</h3>
        </div>
        <div class="modal-body">
          <p>Are you sure you want to delete <strong>{{ vendorToDelete?.vendor }}</strong>?</p>
          <p style="color: var(--text-light); font-size: 0.875rem;">This action cannot be undone.</p>
        </div>
        <div class="modal-footer">
          <button class="btn btn-secondary" @click="showDeleteModal = false">Cancel</button>
          <button class="btn btn-danger" @click="deleteVendor">Delete</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { vendorsApi } from '../../api'
import PaginationBar from '../../components/PaginationBar.vue'
import { useToast } from '../../composables/toast'
import { apiError } from '../../utils/apiError'
import { useListQuery } from '@/composables/listQuery'
import SearchSuggestion from '@/components/SearchSuggestion.vue'
const toast = useToast()

const vendors = ref([])
const loading = ref(true)
const { page, search, setPage, setSearch, suggestion, reportCount } = useListQuery({ onChange: loadVendors })

// Take the offered spelling. setSearch only syncs the URL and the watcher
// that reloads is suppressed because search.value already holds the new
// term, so load directly.
function applySuggestion(word) {
  search.value = word
  setSearch(word)
  loadVendors()
}
const totalPages = ref(1)
const perPage = ref(20)

const showModal = ref(false)
const editingVendor = ref(null)
const saving = ref(false)
const error = ref('')

const showDeleteModal = ref(false)
const vendorToDelete = ref(null)

const form = ref({
  vendor: '',
  contact: '',
  phone: '',
  email: '',
  address: '',
  website: '',
  notes: ''
})

let searchTimeout = null

onMounted(() => {
  loadVendors()
})

async function loadVendors() {
  loading.value = true
  try {
    const params = {
      page: page.value,
      perpage: perPage.value
    }
    if (search.value) params.search = search.value

    const response = await vendorsApi.list(params)
    vendors.value = response.data.data || []
    reportCount(vendors.value.length)
    totalPages.value = response.data.meta?.pagination?.totalpages || response.data.meta?.pagination?.total_pages || 1
  } catch (err) {
    console.error('Error loading vendors:', err)
  } finally {
    loading.value = false
  }
}

function debouncedSearch() {
  clearTimeout(searchTimeout)
  searchTimeout = setTimeout(() => {
    setSearch(search.value)
    loadVendors()
  }, 300)
}

function goToPage(p) {
  setPage(p)
  loadVendors()
}

function changePerPage(newPerPage) {
  perPage.value = newPerPage
  setPage(1)
  loadVendors()
}

function openModal(vendor = null) {
  editingVendor.value = vendor
  if (vendor) {
    form.value = {
      vendor: vendor.vendor || '',
      contact: vendor.contact || '',
      phone: vendor.phone || '',
      email: vendor.email || '',
      address: vendor.address || '',
      website: vendor.website || '',
      notes: vendor.notes || ''
    }
  } else {
    form.value = {
      vendor: '',
      contact: '',
      phone: '',
      email: '',
      address: '',
      website: '',
      notes: ''
    }
  }
  error.value = ''
  showModal.value = true
}

function closeModal() {
  showModal.value = false
  editingVendor.value = null
}

async function saveVendor() {
  error.value = ''
  saving.value = true

  try {
    if (editingVendor.value) {
      await vendorsApi.update(editingVendor.value.vendorid, form.value)
    } else {
      await vendorsApi.create(form.value)
    }
    closeModal()
    loadVendors()
  } catch (err) {
    console.error('Error saving vendor:', err)
    error.value = apiError(err, 'Failed to save vendor')
  } finally {
    saving.value = false
  }
}

function confirmDelete(vendor) {
  vendorToDelete.value = vendor
  showDeleteModal.value = true
}

async function deleteVendor() {
  try {
    await vendorsApi.delete(vendorToDelete.value.vendorid)
    showDeleteModal.value = false
    vendorToDelete.value = null
    loadVendors()
  } catch (err) {
    console.error('Error deleting vendor:', err)
    toast.error('Failed to delete vendor')
  }
}
</script>
