<template>
  <div 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:;">Lavandería</a>
                </li>
                <li class="breadcrumb-item active" aria-current="page">
                  <span>Recepción de Ropa</span>
                </li>
              </ol>
            </nav>
          </div>
        </li>
      </ul>
    </teleport>

    <div class="row layout-top-spacing">
      <div class="col-xl-8 col-lg-8 col-sm-12 layout-spacing">
        <div class="panel lavanderia-panel p-4">
          <div class="lavanderia-heading">
            <h4>Registro de Orden</h4>
          </div>

          <form @submit.prevent="crearOrden">
            <div class="row">
              <div class="col-md-8 mb-3">
                <label class="form-label">Nombre del Cliente *</label>
                <input
                  type="text"
                  class="form-control"
                  v-model="form.cliente_nombre"
                  :class="{'is-invalid': errors.cliente_nombre}"
                  placeholder="Ej. Juan Pérez"
                />
                <div class="invalid-feedback" v-if="errors.cliente_nombre">
                  <div v-for="(msg, i) in errors.cliente_nombre" :key="i">
                    {{ msg }}
                  </div>
                </div>
              </div>
              <div class="col-md-4 mb-3">
                <label class="form-label">¿Prioritaria?</label>
                <div class="form-check form-switch mt-2">
                  <input
                    class="form-check-input"
                    type="checkbox"
                    v-model="form.is_priority"
                    id="isPriority"
                  />
                  <label class="form-check-label" for="isPriority">
                    Orden urgente
                  </label>
                </div>
              </div>

              <div class="col-md-6 mb-3">
                <label class="form-label">Correo del Cliente</label>
                <input
                  type="email"
                  class="form-control"
                  v-model="form.cliente_email"
                  :class="{'is-invalid': errors.cliente_email}"
                  placeholder="Opcional, para notificar cuando esté lista"
                />
                <div class="invalid-feedback" v-if="errors.cliente_email">
                  <div v-for="(msg, i) in errors.cliente_email" :key="i">
                    {{ msg }}
                  </div>
                </div>
              </div>

              <div class="col-md-6 mb-3">
                <label class="form-label">Tipo de Servicio *</label>
                <input
                  type="text"
                  class="form-control"
                  v-model="form.tipo_servicio"
                  :class="{'is-invalid': errors.tipo_servicio}"
                  placeholder="Ej. Lavado y Doblado, Lavado en Seco"
                />
                <div class="invalid-feedback" v-if="errors.tipo_servicio">
                  <div v-for="(msg, i) in errors.tipo_servicio" :key="i">
                    {{ msg }}
                  </div>
                </div>
              </div>

              <div class="col-12 mt-2 mb-1">
                <hr />
                <small class="text-muted">
                  Detalle exacto de prendas e instrucciones claras ayudan a evitar errores en lavado, secado y planchado.
                </small>
              </div>

              <div class="col-md-12 mb-3 mt-2">
                <label class="form-label">Detalles de la Ropa *</label>
                <textarea
                  class="form-control"
                  rows="3"
                  v-model="form.detalles_ropa"
                  :class="{'is-invalid': errors.detalles_ropa}"
                  placeholder="Ej. 3 camisas, 2 pantalones, 1 saco..."
                ></textarea>
                <div class="invalid-feedback" v-if="errors.detalles_ropa">
                  <div v-for="(msg, i) in errors.detalles_ropa" :key="i">
                    {{ msg }}
                  </div>
                </div>
              </div>

              <div class="col-md-12 mb-3">
                <label class="form-label">Instrucciones Especiales</label>
                <textarea
                  class="form-control"
                  rows="3"
                  v-model="form.instrucciones"
                  :class="{'is-invalid': errors.instrucciones}"
                  placeholder="Ej. No usar secadora, Planchado con mucho almidón, Doblado especial..."
                ></textarea>
                <div class="invalid-feedback" v-if="errors.instrucciones">
                  <div v-for="(msg, i) in errors.instrucciones" :key="i">
                    {{ msg }}
                  </div>
                </div>
              </div>

              <div class="col-md-4 mb-3 mt-2">
                <label class="form-label">Total ($) *</label>
                <input
                  type="number"
                  step="0.01"
                  min="0"
                  class="form-control"
                  v-model.number="form.total"
                  :class="{'is-invalid': errors.total}"
                />
                <div class="invalid-feedback" v-if="errors.total">
                  <div v-for="(msg, i) in errors.total" :key="i">
                    {{ msg }}
                  </div>
                </div>
              </div>

              <div class="col-md-8 mb-4 d-flex align-items-end justify-content-end">
                <button
                  type="submit"
                  class="btn btn-success btn-lg w-100"
                  :disabled="creando"
                >
                  {{ creando ? "Creando orden..." : "Crear orden e imprimir tickets" }}
                </button>
              </div>
            </div>
          </form>
        </div>
      </div>

      <div class="col-xl-4 col-lg-4 col-sm-12 layout-spacing">
        <div class="panel lavanderia-summary-card p-3">
          <h5 class="mb-3">Resumen rápido</h5>
          <div class="mb-2">
            <div class="summary-label">Cliente</div>
            <div>{{ form.cliente_nombre || 'Sin nombre' }}</div>
          </div>
          <div class="mb-2">
            <div class="summary-label">Servicio</div>
            <div>{{ form.tipo_servicio || 'Sin servicio' }}</div>
          </div>
          <div class="mb-2">
            <div class="summary-label">Total estimado</div>
            <div>\${{ Number(form.total || 0).toFixed(2) }}</div>
          </div>
          <div class="mb-2">
            <div class="summary-label">Prioridad</div>
            <div>
              <span
                v-if="form.is_priority"
                class="badge bg-danger"
              >
                PRIORITARIA
              </span>
              <span v-else class="text-muted">Normal</span>
            </div>
          </div>
          <hr />
          <h6 class="mt-3">Tips de recepción</h6>
          <ol class="mt-2 small text-muted">
            <li>Verifica nombre del cliente y tipo de servicio.</li>
            <li>Anota cantidad y tipo de prendas.</li>
            <li>Registra instrucciones especiales (no secadora, almidón, etc.).</li>
            <li>Confirma el total y prioridad con el cliente.</li>
          </ol>
        </div>
      </div>
    </div>

    <!-- Modal: Ticket generado con QR -->
    <div
      v-if="mostrarModalOrden && ordenGenerada"
      class="modal fade show printable-ticket-modal"
      style="display: block; background: rgba(0,0,0,0.5);"
      tabindex="-1"
    >
      <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">
              Ticket de Orden - {{ ordenGenerada.folio_unico }}
            </h5>
            <button type="button" class="btn-close" @click="cerrarModalOrden"></button>
          </div>
          <div class="modal-body">
            <div class="row">
              <div class="col-md-6 border-end">
                <h6>Ticket Cliente</h6>
                <p class="mb-1"><strong>Folio:</strong> {{ ordenGenerada.folio_unico }}</p>
                <p class="mb-1"><strong>Cliente:</strong> {{ ordenGenerada.cliente_nombre }}</p>
                <p class="mb-1"><strong>Servicio:</strong> {{ ordenGenerada.tipo_servicio }}</p>
                <p class="mb-1"><strong>Total:</strong> ${{ Number(ordenGenerada.total).toFixed(2) }}</p>
                <p class="mb-1" v-if="ordenGenerada.is_priority">
                  <span class="badge bg-danger">PRIORITARIA</span>
                </p>
                <div class="mt-3 text-center">
                  <img
                    v-if="ordenGenerada.codigo_qr"
                    :src="getQRCodeUrl(ordenGenerada.codigo_qr)"
                    alt="QR Cliente"
                    class="img-fluid border p-2"
                    style="max-width: 220px;"
                  />
                  <p class="small text-muted mt-2">
                    Escanee este código en las áreas de proceso.
                  </p>
                </div>
              </div>
              <div class="col-md-6">
                <h6>Ticket Interno</h6>
                <p class="mb-1"><strong>Detalles:</strong></p>
                <p class="small">{{ ordenGenerada.detalles_ropa }}</p>
                <p class="mb-1"><strong>Instrucciones:</strong></p>
                <p class="small">
                  {{ ordenGenerada.instrucciones || 'Sin instrucciones especiales' }}
                </p>
                <p class="mb-1 mt-2"><strong>Etapa inicial:</strong> Recepción</p>
                <p class="small text-muted">
                  Coloque este ticket en la bolsa/canasta de la orden.
                </p>
              </div>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" @click="cerrarModalOrden">
              Cerrar
            </button>
            <button type="button" class="btn btn-primary" @click="window.print()">
              Imprimir
            </button>
          </div>
        </div>
      </div>
    </div>

    <loading
      v-model:active="isLoading"
      :can-cancel="false"
      :is-full-page="true"
    />
  </div>
</template>

<script setup>
import { ref } from "vue";
import axios from "axios";
import Loading from "vue-loading-overlay";
import "vue-loading-overlay/dist/css/index.css";
import { useMeta } from "@/composables/use-meta";
import * as OrdenLavanderiaRepository from "@/repositories/OrdenLavanderiaRepository";

useMeta({ title: "Recepción Lavandería" });

const form = ref({
  cliente_nombre: "",
  cliente_email: "",
  tipo_servicio: "",
  detalles_ropa: "",
  instrucciones: "",
  total: 0,
  is_priority: false,
});

const errors = ref({});
const creando = ref(false);
const isLoading = ref(false);

const ordenGenerada = ref(null);
const mostrarModalOrden = ref(false);

const resetForm = () => {
  form.value = {
    cliente_nombre: "",
    cliente_email: "",
    tipo_servicio: "",
    detalles_ropa: "",
    instrucciones: "",
    total: 0,
    is_priority: false,
  };
  errors.value = {};
};

const showMessage = (msg = "", type = "success") => {
  const toast = window.Swal.mixin({
    toast: true,
    position: "top-end",
    showConfirmButton: false,
    timer: 3000,
    timerProgressBar: true,
  });

  toast.fire({
    icon: type,
    title: msg,
  });
};

const crearOrden = async () => {
  creando.value = true;
  isLoading.value = true;
  errors.value = {};

  try {
    const response = await OrdenLavanderiaRepository.createOrden(form.value);
    if (response.data) {
      ordenGenerada.value = response.data;
      mostrarModalOrden.value = true;
      showMessage(`Orden creada: ${response.data.folio_unico}`, "success");
      resetForm();
    }
  } catch (error) {
    if (axios.isAxiosError(error)) {
      errors.value = error.response?.data?.errors || {};
      showMessage(
        "Error al crear la orden: " +
          (error.response?.data?.message || error.message),
        "error"
      );
    }
  } finally {
    creando.value = false;
    isLoading.value = false;
  }
};

const cerrarModalOrden = () => {
  mostrarModalOrden.value = false;
  ordenGenerada.value = null;
};

const getQRCodeUrl = (codigoQr) => {
  if (!codigoQr) return null;
  return `https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${encodeURIComponent(
    codigoQr
  )}`;
};
</script>

<style>
@media print {
  body * {
    visibility: hidden !important;
  }

  .printable-ticket-modal,
  .printable-ticket-modal * {
    visibility: visible !important;
  }

  .printable-ticket-modal {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: auto !important;
    background: #fff !important;
  }

  .printable-ticket-modal .modal-dialog {
    max-width: 800px !important;
    margin: 0 auto !important;
  }

  .printable-ticket-modal .modal-footer .btn {
    display: none !important;
  }
}
</style>
