/* ============================================================
   PURE SPA — AGENDA · Modales
   Nueva reserva · Detalle · Mover · Cancelar · Bloquear ·
   Ficha clienta · Servicio
   ============================================================ */
function timeOptions(step = 10) {
  const out = [];
  for (let t = 10 * 60; t <= 18 * 60 + 50; t += step) out.push(`${String(Math.floor(t / 60)).padStart(2, "0")}:${String(t % 60).padStart(2, "0")}`);
  return out;
}
function todayIso() { return TODAY; }

/* ---------- NUEVA RESERVA ---------- */
function NewBookingModal({ onClose, date }) {
  const toast = useToast();
  const beds = PureApi.getBeds().filter((b) => b.active);
  const [d, setD] = useState({
    name: "", phone: "", email: "", serviceId: "", date: date || TODAY, start: "",
    bedId: "", status: "confirmed", payStatus: "pending", payMethod: "", origin: "Web", internalNotes: "",
  });
  const [err, setErr] = useState({});
  const set = (k, v) => setD((p) => ({ ...p, [k]: v }));
  const svc = d.serviceId ? PureApi.getServiceById(d.serviceId) : null;
  const check = (d.serviceId && d.date && d.start && d.bedId) ? PureApi.checkSlot(d.serviceId, d.date, d.start, d.bedId) : null;

  const submit = () => {
    const e = {};
    ["name", "phone", "serviceId", "date", "start", "bedId"].forEach((k) => { if (!d[k]) e[k] = "Obligatorio"; });
    setErr(e);
    if (Object.keys(e).length) return;
    if (check && !check.ok) { toast(check.reason, "info"); return; }
    PureApi.createBooking({
      name: d.name, phone: d.phone, email: d.email || null,
      serviceId: d.serviceId, date: d.date, start: d.start, bedId: d.bedId,
      status: d.status, payStatus: d.payStatus, payMethod: d.payMethod || null, origin: d.origin,
      internalNotes: d.internalNotes,
    });
    toast("Reserva creada correctamente");
    onClose();
  };

  return (
    <Modal open onClose={onClose} side eyebrow="Agenda" title="Nueva reserva">
      <div style={{ marginBottom: 4 }}>
        <Eyebrow style={{ marginBottom: 12 }}>Clienta</Eyebrow>
        <Field label="Nombre" required error={err.name}><Input value={d.name} error={err.name} onChange={(e) => set("name", e.target.value)} placeholder="Nombre completo" /></Field>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
          <Field label="Teléfono" required error={err.phone}><Input value={d.phone} error={err.phone} onChange={(e) => set("phone", e.target.value)} placeholder="+56 9 ..." /></Field>
          <Field label="Email"><Input value={d.email} onChange={(e) => set("email", e.target.value)} placeholder="opcional" /></Field>
        </div>

        <Eyebrow style={{ margin: "10px 0 12px" }}>Reserva</Eyebrow>
        <Field label="Servicio" required error={err.serviceId}><Select value={d.serviceId} onChange={(v) => set("serviceId", v)} placeholder="Elegir experiencia" options={PureApi.getServices().filter((s) => s.active).map((s) => ({ value: s.id, label: `${s.name} · ${s.duration}min · ${clp(s.price)}` }))} /></Field>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
          <Field label="Fecha" required error={err.date}><Input type="date" value={d.date} error={err.date} onChange={(e) => set("date", e.target.value)} /></Field>
          <Field label="Hora" required error={err.start}><Select value={d.start} onChange={(v) => set("start", v)} placeholder="--:--" options={timeOptions()} /></Field>
        </div>
        <Field label="Camilla" required error={err.bedId}><Select value={d.bedId} onChange={(v) => set("bedId", v)} placeholder="Asignar camilla" options={beds.map((b) => ({ value: b.id, label: b.name }))} /></Field>

        {check && (
          <div style={{ display: "flex", alignItems: "center", gap: 9, padding: "10px 13px", borderRadius: 10, marginBottom: 14,
            background: check.ok ? "#E4EFE4" : "#F3E0DD", color: check.ok ? "#3E6B43" : "#9C5048" }}>
            <Icon name={check.ok ? "CheckCircle" : "AlertCircle"} size={16} color={check.ok ? "#3E6B43" : "#9C5048"} />
            <span style={{ fontFamily: "var(--font-body)", fontSize: 12.5, fontWeight: 400 }}>
              {check.ok ? `Disponible · termina ${endTime(d.start, svc)}` : check.reason}
            </span>
          </div>
        )}

        <Eyebrow style={{ margin: "10px 0 12px" }}>Estado y origen</Eyebrow>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
          <Field label="Estado reserva"><Select value={d.status} onChange={(v) => set("status", v)} options={Object.keys(STATUS).filter((s) => s !== "blocked").map((s) => ({ value: s, label: STATUS[s].label }))} /></Field>
          <Field label="Estado pago"><Select value={d.payStatus} onChange={(v) => set("payStatus", v)} options={[{ value: "pending", label: "Pendiente" }, { value: "paid", label: "Pagado" }]} /></Field>
          <Field label="Método de pago"><Select value={d.payMethod} onChange={(v) => set("payMethod", v)} placeholder="—" options={Object.keys(METHOD_LABEL).map((m) => ({ value: m, label: METHOD_LABEL[m] }))} /></Field>
          <Field label="Origen"><Select value={d.origin} onChange={(v) => set("origin", v)} options={PureConstants.ORIGINS} /></Field>
        </div>
        <Field label="Notas internas"><Textarea value={d.internalNotes} onChange={(e) => set("internalNotes", e.target.value)} placeholder="Visible solo para el equipo" /></Field>

        <div style={{ display: "flex", gap: 10, marginTop: 8 }}>
          <Button variant="soft" onClick={onClose}>Cancelar</Button>
          <Button variant="primary" full onClick={submit} arrow>Crear reserva</Button>
        </div>
      </div>
    </Modal>
  );
}

/* ---------- DETALLE DE RESERVA ---------- */
function Row({ k, v }) {
  return <div style={{ display: "flex", justifyContent: "space-between", padding: "10px 0", borderBottom: `1px solid ${C.line}`, gap: 12 }}>
    <span style={{ fontFamily: "var(--font-body)", fontSize: 12, color: C.taupe, fontWeight: 400 }}>{k}</span>
    <span style={{ fontFamily: "var(--font-body)", fontSize: 13, color: C.espresso, fontWeight: 500, textAlign: "right" }}>{v}</span>
  </div>;
}
function BookingDetailModal({ onClose, id }) {
  const { can, openModal, version } = useApp();
  const toast = useToast();
  const b = PureApi.getBookingById(id);
  if (!b) return null;
  const svc = svcOf(b);
  const pays = PureApi.getPayments({}).filter((p) => p.bookingId === id);
  const act = (status) => { PureApi.setBookingStatus(id, status); toast("Reserva actualizada"); onClose(); };

  return (
    <Modal open onClose={onClose} side eyebrow={b._svcName} title={custName(b)}>
      <div style={{ display: "flex", gap: 8, marginBottom: 16, flexWrap: "wrap" }}>
        <StatusBadge status={b.status} /><StatusBadge status={b.payStatus} kind="pay" /><Tag>{b.origin}</Tag>
      </div>

      <div style={{ background: C.white, border: `1px solid ${C.line}`, borderRadius: 12, padding: "4px 16px", marginBottom: 18 }}>
        <Row k="Servicio" v={b._svcName} />
        <Row k="Fecha" v={fullDate(b.date)} />
        <Row k="Hora" v={`${b.start} – ${endTime(b.start, svc)} hrs`} />
        <Row k="Camilla" v={bedName(b.bedId)} />
        <Row k="Teléfono" v={custPhone(b)} />
        <div style={{ display: "flex", justifyContent: "space-between", padding: "10px 0", gap: 12 }}>
          <span style={{ fontFamily: "var(--font-body)", fontSize: 12, color: C.taupe }}>Email</span>
          <span style={{ fontFamily: "var(--font-body)", fontSize: 13, color: C.espresso, fontWeight: 500 }}>{custEmail(b)}</span>
        </div>
      </div>

      {b.comment && <div style={{ marginBottom: 16 }}><Eyebrow style={{ marginBottom: 6 }}>Comentario de la clienta</Eyebrow>
        <p style={{ fontFamily: "var(--font-body)", fontWeight: 300, fontSize: 13, color: C.espresso, lineHeight: 1.6, fontStyle: "italic" }}>"{b.comment}"</p></div>}

      {can("payment:view") && <div style={{ marginBottom: 16 }}><Eyebrow style={{ marginBottom: 8 }}>Pagos asociados</Eyebrow>
        {pays.length ? pays.map((p) => (
          <div key={p.id} style={{ display: "flex", justifyContent: "space-between", alignItems: "center", padding: "9px 12px", background: C.white, border: `1px solid ${C.line}`, borderRadius: 10, marginBottom: 6 }}>
            <div><div style={{ fontFamily: "var(--font-display)", fontSize: 15, color: C.espresso }}>{clp(p.amount)}</div><div style={{ fontFamily: "var(--font-body)", fontSize: 10.5, color: C.taupe }}>{METHOD_LABEL[p.method] || "—"}</div></div>
            <StatusBadge status={p.status} kind="pay" />
          </div>
        )) : <p style={{ fontFamily: "var(--font-body)", fontWeight: 300, fontSize: 12.5, color: C.taupe }}>Sin pagos registrados.</p>}</div>}

      <div style={{ marginBottom: 18 }}><Eyebrow style={{ marginBottom: 8 }}>Historial de cambios</Eyebrow>
        <div style={{ position: "relative", paddingLeft: 16 }}>
          {(b.history || []).map((h, i) => (
            <div key={i} style={{ position: "relative", paddingBottom: 12 }}>
              <span style={{ position: "absolute", left: -16, top: 4, width: 7, height: 7, borderRadius: 999, background: i === 0 ? C.gold : C.line }} />
              {i < b.history.length - 1 && <span style={{ position: "absolute", left: -13, top: 11, bottom: 0, width: 1, background: C.line }} />}
              <div style={{ fontFamily: "var(--font-body)", fontSize: 12.5, color: C.espresso, fontWeight: 400 }}>{h.text}</div>
              <div style={{ fontFamily: "var(--font-body)", fontSize: 10.5, color: C.taupe }}>{h.ts} · {h.who}</div>
            </div>
          ))}
          {(!b.history || b.history.length === 0) && <p style={{ fontFamily: "var(--font-body)", fontWeight: 300, fontSize: 12.5, color: C.taupe }}>Sin movimientos.</p>}
        </div>
      </div>

      {/* acciones por permiso */}
      <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
        {can("booking:move") && !["cancelled", "completed", "no_show"].includes(b.status) && <Button variant="soft" size="sm" onClick={() => openModal("move", { id })}><Icon name="MoveRight" size={14} color={C.espresso} style={{ marginRight: 5 }} />Mover</Button>}
        {can("booking:complete") && b.payStatus !== "paid" && b.status !== "cancelled" && <Button variant="soft" size="sm" onClick={() => act("paid")}>Marcar pagada</Button>}
        {can("booking:complete") && !["cancelled", "completed", "no_show"].includes(b.status) && <Button variant="soft" size="sm" onClick={() => act("completed")}>Completada</Button>}
        {can("booking:no_show") && !["cancelled", "completed", "no_show"].includes(b.status) && <Button variant="soft" size="sm" onClick={() => act("no_show")}>No asistió</Button>}
        {can("booking:cancel") && b.status !== "cancelled" && <Button variant="danger" size="sm" onClick={() => openModal("cancel", { id })}>Cancelar reserva</Button>}
      </div>
    </Modal>
  );
}

/* ---------- MOVER ---------- */
function MoveBookingModal({ onClose, id }) {
  const toast = useToast();
  const b = PureApi.getBookingById(id);
  if (!b) return null;
  const beds = PureApi.getBeds().filter((x) => x.active);
  const [d, setD] = useState({ date: b.date, start: b.start, bedId: b.bedId, reason: "" });
  const set = (k, v) => setD((p) => ({ ...p, [k]: v }));
  const check = PureApi.checkSlot(b.serviceId, d.date, d.start, d.bedId, id);
  const submit = () => {
    if (!check.ok) { toast(check.reason, "info"); return; }
    PureApi.moveBooking(id, d); toast("Reserva movida correctamente"); onClose();
  };
  return (
    <Modal open onClose={onClose} eyebrow={custName(b)} title="Mover reserva" width={460}>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
        <Field label="Nueva fecha" required><Input type="date" value={d.date} onChange={(e) => set("date", e.target.value)} /></Field>
        <Field label="Nueva hora" required><Select value={d.start} onChange={(v) => set("start", v)} options={timeOptions()} /></Field>
      </div>
      <Field label="Nueva camilla" required><Select value={d.bedId} onChange={(v) => set("bedId", v)} options={beds.map((x) => ({ value: x.id, label: x.name }))} /></Field>
      <Field label="Motivo del cambio"><Input value={d.reason} onChange={(e) => set("reason", e.target.value)} placeholder="Ej: la clienta pidió más tarde" /></Field>
      <div style={{ display: "flex", alignItems: "center", gap: 9, padding: "10px 13px", borderRadius: 10, marginBottom: 16,
        background: check.ok ? "#E4EFE4" : "#F3E0DD", color: check.ok ? "#3E6B43" : "#9C5048" }}>
        <Icon name={check.ok ? "CheckCircle" : "AlertCircle"} size={16} color={check.ok ? "#3E6B43" : "#9C5048"} />
        <span style={{ fontFamily: "var(--font-body)", fontSize: 12.5 }}>{check.ok ? "Horario disponible" : check.reason}</span>
      </div>
      <div style={{ display: "flex", gap: 10 }}><Button variant="soft" onClick={onClose}>Volver</Button><Button variant="primary" full onClick={submit} arrow>Confirmar cambio</Button></div>
    </Modal>
  );
}

/* ---------- CANCELAR ---------- */
function CancelBookingModal({ onClose, id }) {
  const toast = useToast();
  const b = PureApi.getBookingById(id);
  if (!b) return null;
  const [reason, setReason] = useState("");
  const [note, setNote] = useState("");
  const submit = () => {
    if (!reason) { toast("Elige un motivo", "info"); return; }
    PureApi.cancelBooking(id, reason, note); toast("Reserva cancelada"); onClose();
  };
  return (
    <Modal open onClose={onClose} eyebrow={custName(b)} title="Cancelar reserva" width={440}>
      <p style={{ fontFamily: "var(--font-body)", fontWeight: 300, fontSize: 13, color: C.taupe, lineHeight: 1.6, marginBottom: 16 }}>
        La reserva quedará registrada en el historial y su horario se liberará en la agenda.
      </p>
      <Field label="Motivo de cancelación" required><Select value={reason} onChange={setReason} placeholder="Elegir motivo" options={PureConstants.CANCEL_REASONS} /></Field>
      <Field label="Nota interna"><Textarea value={note} onChange={(e) => setNote(e.target.value)} placeholder="Detalle opcional" /></Field>
      <div style={{ display: "flex", gap: 10 }}><Button variant="soft" onClick={onClose}>Volver</Button><Button variant="danger" full onClick={submit}>Confirmar cancelación</Button></div>
    </Modal>
  );
}

/* ---------- BLOQUEAR HORARIO ---------- */
function BlockTimeModal({ onClose, date }) {
  const toast = useToast();
  const [d, setD] = useState({ date: date || TODAY, start: "13:00", end: "14:00", bedId: "all", reason: "", notes: "" });
  const set = (k, v) => setD((p) => ({ ...p, [k]: v }));
  const submit = () => {
    if (!d.reason) { toast("Elige un motivo", "info"); return; }
    if (d.end <= d.start) { toast("La hora de término debe ser posterior", "info"); return; }
    PureApi.createBlockedTime(d); toast("Horario bloqueado"); onClose();
  };
  return (
    <Modal open onClose={onClose} eyebrow="Agenda" title="Bloquear horario" width={460}>
      <Field label="Fecha" required><Input type="date" value={d.date} onChange={(e) => set("date", e.target.value)} /></Field>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
        <Field label="Inicio" required><Select value={d.start} onChange={(v) => set("start", v)} options={timeOptions(30)} /></Field>
        <Field label="Término" required><Select value={d.end} onChange={(v) => set("end", v)} options={timeOptions(30)} /></Field>
      </div>
      <Field label="Camilla"><Select value={d.bedId} onChange={(v) => set("bedId", v)} options={[{ value: "all", label: "Todas las camillas" }, ...PureApi.getBeds().map((b) => ({ value: b.id, label: b.name }))]} /></Field>
      <Field label="Motivo" required><Select value={d.reason} onChange={(v) => set("reason", v)} placeholder="Elegir motivo" options={PureConstants.BLOCK_REASONS} /></Field>
      <Field label="Nota interna"><Textarea value={d.notes} onChange={(e) => set("notes", e.target.value)} placeholder="Opcional" /></Field>
      <div style={{ display: "flex", gap: 10 }}><Button variant="soft" onClick={onClose}>Cancelar</Button><Button variant="primary" full onClick={submit}>Bloquear</Button></div>
    </Modal>
  );
}

/* ---------- FICHA CLIENTA ---------- */
function CustomerModal({ onClose, id }) {
  const { version } = useApp();
  const c = PureApi.getCustomerById(id);
  if (!c) return null;
  const bookings = PureApi.getBookings({}).filter((b) => b.customerId === id).sort((a, b) => (b.date + b.start).localeCompare(a.date + a.start));
  const pays = PureApi.getPayments({}).filter((p) => p.customerId === id);
  return (
    <Modal open onClose={onClose} side eyebrow="Ficha de clienta" title={c.name}>
      <div style={{ display: "flex", alignItems: "center", gap: 14, marginBottom: 18 }}>
        <Avatar name={c.name} size={56} />
        <div>
          <div style={{ fontFamily: "var(--font-body)", fontSize: 13, color: C.espresso }}>{c.phone}</div>
          <div style={{ fontFamily: "var(--font-body)", fontSize: 12, color: C.taupe }}>{c.email}</div>
        </div>
      </div>
      <div style={{ display: "flex", gap: 6, flexWrap: "wrap", marginBottom: 18 }}>
        {c.tags.map((t) => <Tag key={t} tone={t === "VIP" ? "dark" : t === "Frecuente" ? "gold" : "soft"}>{t}</Tag>)}
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 10, marginBottom: 20 }}>
        {[["Visitas", c.visits], ["Total gastado", clp(c.spent)], ["Última visita", shortDate(c.lastVisit)], ["Cancelaciones", c.cancellations], ["No shows", c.noShows], ["Próxima", c.nextBooking ? shortDate(c.nextBooking) : "—"]].map(([k, v]) => (
          <div key={k} style={{ background: C.white, border: `1px solid ${C.line}`, borderRadius: 10, padding: "11px 13px" }}>
            <div style={{ fontFamily: "var(--font-display)", fontSize: 17, color: C.espresso, lineHeight: 1 }}>{v}</div>
            <div style={{ fontFamily: "var(--font-body)", fontSize: 9.5, fontWeight: 600, letterSpacing: "0.06em", textTransform: "uppercase", color: C.taupe, marginTop: 4 }}>{k}</div>
          </div>
        ))}
      </div>
      <Eyebrow style={{ marginBottom: 8 }}>Notas internas / preferencias</Eyebrow>
      <p style={{ fontFamily: "var(--font-body)", fontWeight: 300, fontSize: 13, color: C.espresso, lineHeight: 1.6, background: C.gold15, borderRadius: 10, padding: "12px 14px", marginBottom: 18 }}>{c.notes}</p>

      <Eyebrow style={{ marginBottom: 8 }}>Historial de reservas</Eyebrow>
      <div style={{ marginBottom: 18 }}>
        {bookings.length ? bookings.map((b) => (
          <div key={b.id} style={{ display: "flex", alignItems: "center", gap: 12, padding: "10px 0", borderBottom: `1px solid ${C.line}` }}>
            <div style={{ fontFamily: "var(--font-display)", fontSize: 14, color: C.espresso, width: 56 }}>{shortDate(b.date)}</div>
            <div style={{ flex: 1 }}><div style={{ fontFamily: "var(--font-body)", fontSize: 12.5, color: C.espresso, fontWeight: 500 }}>{b._svcName}</div><div style={{ fontFamily: "var(--font-body)", fontSize: 11, color: C.taupe }}>{b.start} · {bedShort(b.bedId)}</div></div>
            <StatusBadge status={b.status} />
          </div>
        )) : <p style={{ fontFamily: "var(--font-body)", fontWeight: 300, fontSize: 12.5, color: C.taupe }}>Aún sin reservas.</p>}
      </div>

      <Eyebrow style={{ marginBottom: 8 }}>Historial de pagos</Eyebrow>
      <div>
        {pays.length ? pays.map((p) => (
          <div key={p.id} style={{ display: "flex", justifyContent: "space-between", alignItems: "center", padding: "9px 0", borderBottom: `1px solid ${C.line}` }}>
            <span style={{ fontFamily: "var(--font-body)", fontSize: 12.5, color: C.espresso }}>{p.serviceName} · {METHOD_LABEL[p.method]}</span>
            <span style={{ display: "flex", gap: 10, alignItems: "center" }}><span style={{ fontFamily: "var(--font-display)", fontSize: 14, color: C.espresso }}>{clp(p.amount)}</span><StatusBadge status={p.status} kind="pay" /></span>
          </div>
        )) : <p style={{ fontFamily: "var(--font-body)", fontWeight: 300, fontSize: 12.5, color: C.taupe }}>Sin pagos.</p>}
      </div>
    </Modal>
  );
}

/* ---------- SERVICIO (crear/editar) ---------- */
function ServiceModal({ onClose, id }) {
  const toast = useToast();
  const existing = id ? PureApi.getServiceById(id) : null;
  const [d, setD] = useState(existing || { name: "", eyebrow: "", duration: 60, cleanup: 10, price: 0, online: true, active: true, desc: "" });
  const set = (k, v) => setD((p) => ({ ...p, [k]: v }));
  const submit = () => {
    if (!d.name) { toast("Falta el nombre", "info"); return; }
    if (id) PureApi.updateService(id, d); else PureApi.createService(d);
    toast(id ? "Servicio actualizado" : "Servicio creado"); onClose();
  };
  return (
    <Modal open onClose={onClose} eyebrow="Catálogo" title={id ? "Editar servicio" : "Nuevo servicio"} width={480}>
      <Field label="Nombre" required><Input value={d.name} onChange={(e) => set("name", e.target.value)} /></Field>
      <Field label="Eyebrow / categoría"><Input value={d.eyebrow} onChange={(e) => set("eyebrow", e.target.value)} placeholder="Ej: Ritual Profundo" /></Field>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 12 }}>
        <Field label="Duración (min)"><Input type="number" value={d.duration} onChange={(e) => set("duration", +e.target.value)} /></Field>
        <Field label="Limpieza (min)"><Input type="number" value={d.cleanup} onChange={(e) => set("cleanup", +e.target.value)} /></Field>
        <Field label="Precio"><Input type="number" value={d.price} onChange={(e) => set("price", +e.target.value)} /></Field>
      </div>
      <Field label="Descripción"><Textarea value={d.desc} onChange={(e) => set("desc", e.target.value)} /></Field>
      <div style={{ display: "flex", gap: 18, marginBottom: 18 }}>
        <label style={{ display: "flex", alignItems: "center", gap: 8, cursor: "pointer", fontFamily: "var(--font-body)", fontSize: 13, color: C.espresso }}>
          <input type="checkbox" checked={d.online} onChange={(e) => set("online", e.target.checked)} style={{ accentColor: C.gold, width: 16, height: 16 }} />Visible online</label>
        <label style={{ display: "flex", alignItems: "center", gap: 8, cursor: "pointer", fontFamily: "var(--font-body)", fontSize: 13, color: C.espresso }}>
          <input type="checkbox" checked={d.active} onChange={(e) => set("active", e.target.checked)} style={{ accentColor: C.gold, width: 16, height: 16 }} />Activo</label>
      </div>
      <div style={{ display: "flex", gap: 10 }}><Button variant="soft" onClick={onClose}>Cancelar</Button><Button variant="primary" full onClick={submit} arrow>{id ? "Guardar" : "Crear servicio"}</Button></div>
    </Modal>
  );
}

Object.assign(window, { NewBookingModal, BookingDetailModal, MoveBookingModal, CancelBookingModal, BlockTimeModal, CustomerModal, ServiceModal });