<template>
  <main class="container mx-auto px-6 py-8">
    <div class="max-w-3xl mx-auto">
      <div class="flex flex-wrap items-center justify-between gap-3 mb-6">
        <div>
          <h1 class="text-2xl font-bold">
            Nouvelle machine
          </h1>
          <p class="text-sm text-gray-500">
            Renseignez les informations de base pour créer la machine.
          </p>
        </div>
        <NuxtLink to="/machines" class="btn btn-ghost">
          Annuler
        </NuxtLink>
      </div>

      <div v-if="c.loading" class="flex justify-center items-center py-12">
        <span class="loading loading-spinner loading-lg" />
      </div>

      <form v-else class="space-y-6" @submit.prevent="c.finalizeMachineCreation">
        <div v-if="c.createError" class="alert alert-error" role="alert">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="h-5 w-5 shrink-0"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" />
          </svg>
          <span>{{ c.createError }}</span>
        </div>

        <div class="card bg-base-100 shadow-sm">
          <div class="card-body space-y-6">
            <!-- Basic fields -->
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div class="form-control">
                <label class="label" for="machine-field-name">
                  <span class="label-text">Nom de la machine <span class="text-error">*</span></span>
                </label>
                <input
                  id="machine-field-name"
                  v-model="c.newMachine.name"
                  type="text"
                  placeholder="Ex: Presse hydraulique #1"
                  class="input input-bordered input-sm md:input-md"
                  :disabled="!canEdit"
                  required
                >
              </div>

              <div class="form-control">
                <label class="label" for="machine-field-site">
                  <span class="label-text">Site <span class="text-error">*</span></span>
                </label>
                <select
                  id="machine-field-site"
                  v-model="c.newMachine.siteId"
                  class="select select-bordered select-sm md:select-md"
                  :disabled="!canEdit"
                  required
                >
                  <option value="">
                    Sélectionner un site
                  </option>
                  <option v-for="site in c.sites" :key="site.id" :value="site.id">
                    {{ site.name }}
                  </option>
                </select>
              </div>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div class="form-control">
                <label class="label" for="machine-field-reference">
                  <span class="label-text">Référence</span>
                </label>
                <input
                  id="machine-field-reference"
                  v-model="c.newMachine.reference"
                  type="text"
                  placeholder="Ex: PRESS-001"
                  class="input input-bordered input-sm md:input-md"
                  :disabled="!canEdit"
                >
              </div>

              <div class="form-control">
                <label class="label">
                  <span class="label-text">Cloner depuis une machine</span>
                </label>
                <SearchSelect
                  v-model="c.newMachine.cloneFromMachineId"
                  :options="c.machines"
                  :disabled="!canEdit"
                  :clearable="true"
                  placeholder="Rechercher une machine..."
                  empty-text="Aucune machine trouvée"
                />
              </div>
            </div>

            <!-- Actions -->
            <div class="flex justify-end gap-3 pt-4 border-t border-base-200">
              <NuxtLink to="/machines" class="btn btn-outline btn-sm md:btn-md">
                Annuler
              </NuxtLink>
              <button
                type="submit"
                class="btn btn-sm md:btn-md btn-primary"
                :disabled="!canEdit || !c.newMachine.name?.trim() || c.submitting"
                :class="{ loading: c.submitting }"
              >
                Créer la machine
              </button>
            </div>
          </div>
        </div>
      </form>
    </div>
  </main>
</template>

<script setup>
import { proxyRefs } from 'vue'
import { useMachineCreatePage } from '~/composables/useMachineCreatePage'
import SearchSelect from '~/components/common/SearchSelect.vue'

const c = proxyRefs(useMachineCreatePage())
const { canEdit } = usePermissions()
</script>
