<script setup lang="ts">
import { computed, reactive } from 'vue'
import { Link, router, usePage } from '@inertiajs/vue3'

const { props } = usePage<{
  computer: any
  availableComponents: any[]
  states: any[]
  errors?: Record<string, string>
}>()
const { computer, availableComponents, states } = props
const errors = computed(() => props.errors || {})

const form = reactive({
  id: computer.id,
  title: computer.title,
  sellPrice: computer.sellPrice,
  gpuScore: computer.gpuScore,
  cpuScore: computer.cpuScore,
  globalScore: computer.globalScore,
  stateId: computer.state.id,
  componentsId: computer.components.map((c: any) => c.id),
})

function updateComponents(componentsId: number[]) {
  form.componentsId = componentsId
}

function deleteComputer(id: number) {
  router.delete(`/computers/${id}`)
}

function getErrorMessage(field: string): string | null {
  return errors.value[field] || null
}
</script>

<template>
  <div class="max-w-4xl mx-auto p-8 bg-white shadow-lg rounded-lg">
    <h1 class="text-2xl font-semibold mb-8 text-gray-800">Edit Computer</h1>
    <form class="space-y-6">
      <div>
        <label class="block text-gray-700 text-sm font-bold mb-2" for="title">Title</label>
        <input
          v-model="form.title"
          class="w-full mt-2 border-gray-200 focus:border-indigo-600 focus:ring focus:ring-indigo-500/40 px-3 py-2 border rounded text-gray-700"
          type="text"
        />
      </div>

      <div>
        <label class="block text-gray-700 text-sm font-bold mb-2" for="sellPrice">Sell Price</label>
        <input
          name="sell_price"
          v-model="form.sellPrice"
          class="w-full mt-2 border-gray-200 focus:border-indigo-600 focus:ring focus:ring-indigo-500/40 px-3 py-2 border rounded text-gray-700"
          type="number"
          step="0.01"
        />
      </div>

      <div class="grid grid-cols-3 gap-4">
        <div>
          <label class="block text-gray-700 text-sm font-bold mb-2" for="gpuScore">GPU Score</label>
          <input
            v-model="form.gpuScore"
            class="w-full border-gray-200 focus:border-indigo-600 focus:ring focus:ring-indigo-500/40 px-3 py-2 border rounded text-gray-700"
            type="number"
          />
        </div>
        <div>
          <label class="block text-gray-700 text-sm font-bold mb-2" for="cpuScore">CPU Score</label>
          <input
            v-model="form.cpuScore"
            class="w-full border-gray-200 focus:border-indigo-600 focus:ring focus:ring-indigo-500/40 px-3 py-2 border rounded text-gray-700"
            type="number"
          />
        </div>
        <div>
          <label class="block text-gray-700 text-sm font-bold mb-2" for="globalScore"
            >Global Score</label
          >
          <input
            v-model="form.globalScore"
            class="w-full border-gray-200 focus:border-indigo-600 focus:ring focus:ring-indigo-500/40 px-3 py-2 border rounded text-gray-700"
            type="number"
          />
        </div>
      </div>

      <div class="pt-2">
        <label class="block text-gray-700 text-sm font-bold mb-2" for="components">State</label>
        <select
          v-model="form.stateId"
          class="w-full mt-2 border-gray-200 focus:border-indigo-600 focus:ring-indigo-500 px-3 py-2.5 focus:ring-1 border rounded text-gray-700 bg-white"
        >
          <option disabled value="">Please select one</option>
          <option v-for="state in states" :key="state.id" :value="state.id">
            {{ state.name }}
          </option>
        </select>
      </div>
      <div
        class="flex flex-col md:flex-row items-stretch justify-between space-y-2 md:space-y-0 md:space-x-2"
      >
        <Link
          :href="`/computers/${form.id}`"
          method="put"
          :data="form"
          as="button"
          class="w-full md:w-auto px-4 py-2 bg-indigo-600 text-white rounded hover:bg-blue-700 transition flex justify-center"
        >
          Save
        </Link>
        <button
          @click="deleteComputer(computer.id)"
          class="w-full md:w-auto px-4 py-2 bg-gray-300 text-white rounded hover:bg-red-500 transition flex items-center justify-center"
        >
          Delete
        </button>
      </div>
    </form>
  </div>
</template>

<style scoped></style>
