<template>
    <mainLayout>
         <div class="flex justify-between items-center mb-4">
        <p style="font-family: 'IM FELL Great Primer', serif; font-style: italic;font-size: 25px;">NAMPAN</p>
        <div class="flex gap-2">
        <button 
          @click="openModal" 
          class="px-4 py-2 hover:bg-green-700 rounded-md shadow font-semibold"
          style="background-color: #DAC0A3; color: #102C57;">
        Tambah Nampan
        </button>

        <button 
          @click="emptyTray" 
          class="px-3 py-2 bg-red-500 hover:bg-red-600 text-white rounded-md">
          Kosongkan
        </button>
      </div>
      </div>
        <searchbar v-model:search="searchQuery" />
        <TrayList :search="searchQuery" 
        @edit="editTray"
  @delete="deleteTray"/>
        <div 
      v-if="showModal" 
      class="fixed inset-0 bg-black bg-opacity-40 flex justify-center items-center z-50"
    >
      <div class="bg-white rounded-lg shadow-lg p-6 w-96">
        <h2 class="text-lg font-semibold mb-4">Tambah Nampan</h2>

        <label class="block mb-2 text-sm font-medium">Nama Nampan</label>
        <input 
          v-model="trayName" 
          type="text" 
          placeholder="Contoh: A4" 
          class="w-full border rounded-md p-2 mb-4"
        />

        <div class="flex justify-end gap-2">
          <button 
            @click="closeModal" 
            class="px-4 py-2 bg-gray-400 hover:bg-gray-500 text-white rounded-md">
            Cancel
          </button>

          <button 
            @click="saveTray" 
            class="px-4 py-2 bg-green-600 hover:bg-green-700 text-white rounded-md">
            Save
          </button>
        </div>
      </div>
      </div>
    </mainLayout>

    
</template>
<script setup>
import { ref } from 'vue'
import axios from 'axios'
import mainLayout from '../layouts/mainLayout.vue'
import searchbar from '../components/searchbar.vue'
import TrayList from '../components/TrayList.vue'

const searchQuery = ref("")   // buat search
const showModal = ref(false)  // <-- ini penting, biar tidak undefined
const trayName = ref("")      // nama nampan baru

// buka modal
const openModal = () => {
  showModal.value = true
}

// tutup modal
const closeModal = () => {
  trayName.value = ""
  editingTrayId.value = null
  showModal.value = false
}
// simpan nampan baru
const saveTray = async () => {
  if (!trayName.value.trim()) {
    alert("Nama Nampan tidak boleh kosong")
    return
  }

  try {
    if (editingTrayId.value) {
      // mode edit
      await axios.put(`/api/nampan/${editingTrayId.value}`, { nama: trayName.value })
      alert("Nampan berhasil diupdate")
    } else {
      // mode tambah
      await axios.post("/api/nampan", { nama: trayName.value })
      alert("Nampan berhasil ditambahkan")
    }
    closeModal()
    location.reload()
  } catch (error) {
    console.error(error)
    alert("Gagal menyimpan nampan")
  }
}


// kosongkan semua nampan
const emptyTray = async () => {
  if (!confirm("Yakin ingin memindahkan semua item ke Brankas?")) return

  try {
    await axios.post("/api/brankas", { action: "move_all_from_tray" })
    alert("Semua item berhasil dipindahkan ke Brankas")
    location.reload()
  } catch (error) {
    console.error(error)
    alert("Gagal mengosongkan nampan")
  }
}

const editTray = (tray) => {
  // buka modal edit, bisa pake sama seperti modal tambah
  trayName.value = tray.nama
  editingTrayId.value = tray.id
  showModal.value = true
}

const deleteTray = async (id) => {
  if (!confirm("Yakin ingin menghapus nampan ini?")) return
  try {
    await axios.delete(`/api/nampan/${id}`)
    alert("Nampan berhasil dihapus")
    location.reload()
  } catch (error) {
    console.error(error)
    alert("Gagal menghapus nampan")
  }
}

const editingTrayId = ref(null)

</script>
