<template>
  <div v-uppercase-scope class="layout-px-spacing">
    <teleport to="#breadcrumb">
      <ul class="navbar-nav flex-row">
        <li>
          <div class="page-header">
            <nav class="breadcrumb-one" aria-label="breadcrumb">
              <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="javascript:;">Catálogos</a></li>
                <li class="breadcrumb-item active" aria-current="page"><span>{{ $t("catalogos.legacy_products.breadcrumb") }}</span></li>
              </ol>
            </nav>
          </div>
        </li>
      </ul>
    </teleport>

    <div class="row">
      <div class="col-12">
        <div class="panel lavanderia-panel p-4">
            <div class="d-flex justify-content-between align-items-center mb-4 flex-wrap gap-2">
            <div>
              <h4 class="mb-1">{{ $t("catalogos.legacy_products.page_title") }}</h4>
              <p class="text-muted mb-0 small">{{ $t("catalogos.legacy_products.subtitle") }}</p>
            </div>
            <button
              v-if="puedeEditar && !legacyAltasCongeladas"
              type="button"
              class="btn btn-primary"
              @click="abrirModal()"
            >
              {{ $t("catalogos.legacy_products.modal_new") }}
            </button>
          </div>
          <p v-if="puedeEditar && legacyAltasCongeladas" class="alert alert-secondary small py-2 mb-3">
            {{ $t("catalogos.legacy_products.new_disabled_hint") }}
          </p>
          <div v-if="cargando" class="text-center py-4"><div class="spinner-border text-primary"></div></div>
          <div v-else class="table-responsive">
            <table class="table table-bordered">
              <thead>
                <tr>
                  <th>Nombre</th>
                  <th class="text-end">Stock</th>
                  <th v-if="puedeEditar" class="text-center">Acciones</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="p in productos" :key="p.id">
                  <td>{{ p.nombre }}</td>
                  <td class="text-end">{{ p.stock ?? 0 }}</td>
                  <td v-if="puedeEditar" class="text-center">
                    <button type="button" class="btn btn-sm btn-outline-primary me-1" @click="abrirModal(p)">Editar</button>
                    <button type="button" class="btn btn-sm btn-outline-danger" @click="confirmarEliminar(p)">Eliminar</button>
                  </td>
                </tr>
                <tr v-if="productos.length === 0">
                  <td :colspan="puedeEditar ? 3 : 2" class="text-muted text-center">Sin productos. Ejecute los seeders o agregue uno nuevo.</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>

    <!-- Modal crear/editar -->
    <div v-if="mostrarModal" class="modal fade show d-block" tabindex="-1" style="background: rgba(0,0,0,.5);">
      <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">{{ form.id ? $t("catalogos.legacy_products.modal_edit") : $t("catalogos.legacy_products.modal_new") }}</h5>
            <button type="button" class="btn-close" @click="cerrarModal"></button>
          </div>
          <div class="modal-body">
            <div class="mb-3">
              <label class="form-label">Nombre</label>
              <input v-model="form.nombre" type="text" class="form-control" placeholder="Ej. Lavado por kilo" />
            </div>
            <div class="mb-3">
              <label class="form-label">Stock</label>
              <input v-model.number="form.stock" type="number" min="0" class="form-control" />
            </div>
            <p v-if="errorForm" class="text-danger small mb-0">{{ errorForm }}</p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" @click="cerrarModal">Cancelar</button>
            <button type="button" class="btn btn-primary" :disabled="guardando" @click="guardar">{{ guardando ? 'Guardando...' : 'Guardar' }}</button>
          </div>
        </div>
      </div>
    </div>

    <!-- Confirmar eliminar -->
    <div v-if="itemAEliminar" class="modal fade show d-block" tabindex="-1" style="background: rgba(0,0,0,.5);">
      <div class="modal-dialog modal-dialog-centered modal-sm">
        <div class="modal-content">
          <div class="modal-body">
            <p class="mb-0">¿Eliminar &quot;{{ itemAEliminar.nombre }}&quot;?</p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" @click="itemAEliminar = null">No</button>
            <button type="button" class="btn btn-danger" :disabled="eliminando" @click="eliminar">Sí, eliminar</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from "vue";
import { useI18n } from "vue-i18n";
import * as ProductoRepository from "@/repositories/ProductoRepository";
import * as CatalogosProductosLegacyRepository from "@/repositories/CatalogosProductosLegacyRepository";
import { usePageTitle } from "@/composables/use-meta";
import { usePermissions } from "@/composables/use-permissions";

const { t } = useI18n();
usePageTitle(computed(() => t("catalogos.legacy_products.page_title")));

const { loadPermissions, can } = usePermissions();
const puedeEditar = computed(() => can("pos.vender") || can("caja.administrar"));

/** C7: altas congeladas; solo edición de filas existentes (histórico). */
// C7: servicios legacy quedan congelados, pero los productos sí se pueden dar de alta.
const legacyAltasCongeladas = false;

const productos = ref([]);
const cargando = ref(true);
const mostrarModal = ref(false);
const guardando = ref(false);
const errorForm = ref("");
const form = ref({
  id: null,
  nombre: "",
  es_servicio: false,
  tipo_cobro: null,
  stock: 0,
});
const itemAEliminar = ref(null);
const eliminando = ref(false);

function getPayload() {
  // Este módulo legacy ("Conceptos legacy") solo administra PRODUCTOS físicos (stock).
  return {
    nombre: form.value.nombre,
    es_servicio: false,
    stock: Math.max(0, Math.floor(Number(form.value.stock) || 0)),
    tipo_cobro: null,
  };
}

function abrirModal(item = null) {
  if (item) {
    form.value = {
      id: item.id,
      nombre: item.nombre,
      es_servicio: false,
      tipo_cobro: null,
      stock: Number(item.stock) || 0,
    };
  } else {
    form.value = { id: null, nombre: "", es_servicio: false, tipo_cobro: null, stock: 0 };
  }
  errorForm.value = "";
  mostrarModal.value = true;
}

function cerrarModal() {
  mostrarModal.value = false;
}

async function guardar() {
  errorForm.value = "";
  if (!form.value.nombre?.trim()) {
    errorForm.value = "El nombre es obligatorio.";
    return;
  }
  // Solo productos: stock no negativo; tipo_cobro no aplica.
  guardando.value = true;
  try {
    const payload = getPayload();
    if (form.value.id) {
      await ProductoRepository.updateProducto(form.value.id, payload);
    } else {
      await ProductoRepository.createProducto(payload);
    }
    cerrarModal();
    await cargar();
  } catch (e) {
    errorForm.value = e?.response?.data?.message || "Error al guardar.";
  } finally {
    guardando.value = false;
  }
}

async function confirmarEliminar(p) {
  itemAEliminar.value = p;
}

async function eliminar() {
  if (!itemAEliminar.value) return;
  eliminando.value = true;
  try {
    await ProductoRepository.deleteProducto(itemAEliminar.value.id);
    itemAEliminar.value = null;
    await cargar();
  } catch (e) {
    alert(e?.response?.data?.message || "Error al eliminar.");
  } finally {
    eliminando.value = false;
  }
}

async function cargar() {
  cargando.value = true;
  try {
    const res = await CatalogosProductosLegacyRepository.listProductosLegacy();
    productos.value = Array.isArray(res?.data) ? res.data : [];
  } catch {
    productos.value = [];
  }
  cargando.value = false;
}

onMounted(async () => {
  await loadPermissions();
  cargar();
});
</script>
