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

    <!-- Filters -->
    <div class="filters">
      <input
        v-model="search"
        type="text"
        class="form-control"
        placeholder="Search models..."
        @input="debouncedSearch"
      />
      <select v-model="vendorFilter" class="form-control" @change="applyFilter">
        <option value="">All Vendors</option>
        <option v-for="v in vendors" :key="v.vendorid" :value="v.vendorid">
          {{ v.vendor }}
        </option>
      </select>
    </div>

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

      <template v-else>
        <div class="table-container">
          <table>
            <thead>
              <tr>
                <th>Model</th>
                <th>Vendor</th>
                <th>Type</th>
                <th>Documentation</th>
                <th>Actions</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="m in models" :key="m.modelnumberid">
                <td>
                  <div>{{ m.modelnumber }}</div>
                  <small v-if="m.description" class="text-muted">{{ m.description }}</small>
                </td>
                <td>{{ m.vendor || '-' }}</td>
                <td>{{ m.modeltype || '-' }}</td>
                <td>
                  <a v-if="m.documentationurl" :href="m.documentationurl" target="_blank" class="btn btn-sm btn-link">
                    View Docs
                  </a>
                  <span v-else>-</span>
                </td>
                <td class="actions">
                  <button class="btn btn-secondary btn-sm" @click="openModal(m)">Edit</button>
                  <button class="btn btn-danger btn-sm" @click="confirmDelete(m)">Delete</button>
                </td>
              </tr>
              <tr v-if="models.length === 0">
                <td colspan="5" style="text-align: center; color: var(--text-light);">
                  No models found
                </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 modal-lg">
        <div class="modal-header">
          <h3>{{ editingModel ? 'Edit Model' : 'Add Model' }}</h3>
        </div>
        <form @submit.prevent="saveModel">
          <div class="modal-body">
            <div class="form-row">
              <div class="form-group">
                <label for="modelnumber">Model Number *</label>
                <input
                  id="modelnumber"
                  v-model="form.modelnumber"
                  type="text"
                  class="form-control"
                  required
                />
              </div>
              <div class="form-group">
                <label for="vendorid">Vendor *</label>
                <select id="vendorid" v-model="form.vendorid" class="form-control" required>
                  <option value="">Select vendor...</option>
                  <option v-for="v in vendors" :key="v.vendorid" :value="v.vendorid">
                    {{ v.vendor }}
                  </option>
                </select>
              </div>
            </div>

            <div class="form-row">
              <div class="form-group">
                <label for="modeltypeid">Model Type</label>
                <select id="modeltypeid" v-model="form.modeltypeid" class="form-control">
                  <option value="">Select type...</option>
                  <option v-for="mt in modelTypes" :key="mt.modeltypeid" :value="mt.modeltypeid">
                    {{ mt.modeltype }}
                  </option>
                </select>
              </div>
              <div class="form-group">
                <label for="description">Description</label>
                <input id="description" v-model="form.description" type="text" class="form-control" />
              </div>
            </div>

            <div class="form-group">
              <label for="documentationurl">Documentation URL</label>
              <input
                id="documentationurl"
                v-model="form.documentationurl"
                type="url"
                class="form-control"
                placeholder="https://..."
              />
            </div>

            <div class="form-group">
              <label>Image</label>
              <div class="image-manage">
                <img v-if="form.imageurl" :src="withBase(form.imageurl)" alt="Model image" class="image-thumb" />
                <div class="image-actions">
                  <!--
                    Offered when CREATING too. The photo is stored as
                    model-<id>.<ext>, so it cannot be sent before the model has
                    an id - but making the operator save, reopen and come back
                    just to add a picture reads as a missing feature. On a new
                    model the file is held here and uploaded immediately after
                    the model is created.
                  -->
                  <input
                    ref="imageFileInput"
                    type="file"
                    accept=".png,.jpg,.jpeg,.gif,.webp,.svg"
                    style="display: none"
                    @change="onImageSelected"
                  />
                  <button type="button" class="btn btn-secondary btn-sm" :disabled="uploadingImage" @click="triggerImageUpload">
                    {{ uploadingImage ? 'Uploading...' : ((form.imageurl || pendingImageFile) ? 'Replace' : 'Upload') }}
                  </button>
                  <button v-if="form.imageurl || pendingImageFile" type="button" class="btn btn-danger btn-sm" @click="removeImage">Remove</button>
                  <small v-if="pendingImageFile" class="text-muted pending-note">
                    {{ pendingImageFile.name }} will be uploaded when you save.
                  </small>
                </div>
              </div>
            </div>

            <div class="form-group">
              <label for="imageurl">Image URL</label>
              <!--
                type="text", NOT type="url". An uploaded photo sets this field to
                an application path such as /api/models/image/model-120.png, and
                native url validation demands an absolute URL with a scheme - so
                the browser refused to save the form with "Please enter a URL"
                for a value this page had just written itself.
              -->
              <input
                id="imageurl"
                v-model="form.imageurl"
                type="text"
                class="form-control"
                placeholder="https://... or /api/models/image/..."
              />
              <small class="text-muted">
                Set automatically when you upload a photo. Accepts a full web address or a path on this server.
              </small>
            </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 Model</h3>
        </div>
        <div class="modal-body">
          <p>Are you sure you want to delete <strong>{{ modelToDelete?.modelnumber }}</strong>?</p>
        </div>
        <div class="modal-footer">
          <button class="btn btn-secondary" @click="showDeleteModal = false">Cancel</button>
          <button class="btn btn-danger" @click="deleteModel">Delete</button>
        </div>
      </div>
    </div>
  </div>
</template>

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

const models = ref([])
const vendors = ref([])
const modelTypes = ref([])
const loading = ref(true)
const { page, search, setPage, setSearch } = useListQuery({ onChange: loadModels })
const vendorFilter = ref('')
const totalPages = ref(1)
const perPage = ref(20)

const showModal = ref(false)
const editingModel = ref(null)
// A photo chosen while CREATING a model, uploaded once the model has an id.
const pendingImageFile = ref(null)
const saving = ref(false)
const error = ref('')

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

const imageFileInput = ref(null)
const uploadingImage = ref(false)

const form = ref({
  modelnumber: '',
  vendorid: '',
  modeltypeid: '',
  description: '',
  documentationurl: '',
  imageurl: '',
  notes: ''
})

let searchTimeout = null

onMounted(async () => {
  await Promise.all([
    loadModels(),
    loadVendors(),
    loadModelTypes()
  ])
})

// A filter change must go back to page 1. Selecting a filter while on page 5
// asked the server for page 5 of a result set that now has one page, and the
// list came back empty as though the filter matched nothing.
//
// setPage(1) writes the URL, which the composable's watcher picks up and
// answers with onChange - so calling the loader as well would fetch twice.
// Load directly only when already on page 1, where nothing changes and the
// watcher stays silent.
function applyFilter() {
  if (page.value > 1) setPage(1)
  else loadModels()
}

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

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

async function loadVendors() {
  try {
    const response = await vendorsApi.list({ perpage: 100 })
    vendors.value = response.data.data || []
  } catch (err) {
    console.error('Error loading vendors:', err)
  }
}

async function loadModelTypes() {
  try {
    const response = await modeltypesApi.list({ perpage: 100 })
    modelTypes.value = response.data.data || []
  } catch (err) {
    console.error('Error loading model types:', err)
  }
}

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

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

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

function openModal(m = null) {
  editingModel.value = m
  if (m) {
    form.value = {
      modelnumber: m.modelnumber || '',
      vendorid: m.vendorid || '',
      modeltypeid: m.modeltypeid || '',
      description: m.description || '',
      documentationurl: m.documentationurl || '',
      imageurl: m.imageurl || '',
      notes: m.notes || ''
    }
  } else {
    form.value = {
      modelnumber: '',
      vendorid: '',
      modeltypeid: '',
      description: '',
      documentationurl: '',
      imageurl: '',
      notes: ''
    }
  }
  error.value = ''
  showModal.value = true
}

function closeModal() {
  showModal.value = false
  editingModel.value = null
  // Or a photo picked for a model that was never saved would be uploaded onto
  // the NEXT model created in this session.
  pendingImageFile.value = null
}

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

  try {
    const data = { ...form.value }
    if (!data.vendorid) data.vendorid = null
    if (!data.modeltypeid) data.modeltypeid = null

    if (editingModel.value) {
      await modelsApi.update(editingModel.value.modelnumberid, data)
    } else {
      const created = await modelsApi.create(data)
      // Send a photo chosen before the model existed. A failure here must not
      // read as "the model was not saved" - it was.
      if (pendingImageFile.value) {
        const newId = created?.data?.data?.modelnumberid
        if (newId) {
          try {
            await modelsApi.uploadImage(newId, pendingImageFile.value)
          } catch (imgErr) {
            console.error('Error uploading image:', imgErr)
            toast.error(apiError(imgErr, 'Model saved, but the photo could not be uploaded'))
          }
        }
      }
    }
    closeModal()
    loadModels()
  } catch (err) {
    console.error('Error saving model:', err)
    error.value = apiError(err, 'Failed to save model')
  } finally {
    saving.value = false
  }
}

function triggerImageUpload() {
  imageFileInput.value?.click()
}

async function onImageSelected(event) {
  const file = event.target.files?.[0]
  if (!file) return
  // No model id yet, so hold the file and send it once saveModel has created
  // the record. Nothing is written to the server until the operator saves.
  if (!editingModel.value) {
    pendingImageFile.value = file
    if (imageFileInput.value) imageFileInput.value.value = ''
    return
  }
  uploadingImage.value = true
  try {
    const response = await modelsApi.uploadImage(editingModel.value.modelnumberid, file)
    // Backend returns the updated model with imageurl set to the served URL.
    form.value.imageurl = response.data.data.imageurl || ''
    toast.success('Image uploaded')
    loadModels()
  } catch (err) {
    console.error('Error uploading image:', err)
    toast.error(apiError(err, 'Failed to upload image'))
  } finally {
    uploadingImage.value = false
    if (imageFileInput.value) imageFileInput.value.value = ''
  }
}

async function removeImage() {
  // On a new model there is nothing on the server yet; just drop the choice.
  if (!editingModel.value) {
    pendingImageFile.value = null
    form.value.imageurl = ''
    return
  }
  if (!confirm('Remove this model image?')) return
  try {
    await modelsApi.removeImage(editingModel.value.modelnumberid)
    form.value.imageurl = ''
    toast.success('Image removed')
    loadModels()
  } catch (err) {
    console.error('Error removing image:', err)
    toast.error(apiError(err, 'Failed to remove image'))
  }
}

function confirmDelete(m) {
  modelToDelete.value = m
  showDeleteModal.value = true
}

async function deleteModel() {
  try {
    await modelsApi.delete(modelToDelete.value.modelnumberid)
    showDeleteModal.value = false
    modelToDelete.value = null
    loadModels()
  } catch (err) {
    console.error('Error deleting model:', err)
    toast.error('Failed to delete model')
  }
}
</script>

<style scoped>
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.modal-lg {
  max-width: 600px;
}

.text-muted {
  color: var(--text-light);
  font-size: 0.85rem;
}

.image-manage {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.image-thumb {
  width: 80px;
  height: 80px;
  object-fit: contain;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg);
}

.image-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
</style>
