/* ============================================================
   PURE SPA — AGENDA · Servicios  /admin/services  +  Camillas /admin/beds
   ============================================================ */
function ServicesView() {
  const { version, openModal, can } = useApp();
  const services = useMemo(() => PureApi.getServices(), [version]);
  const editable = can("service:update");
  return (
    <div>
      <PageHead eyebrow="Catálogo" title="Servicios" sub="Los rituales que ofrecemos. Solo Owner y Admin editan precios.">
        {editable && <Button variant="primary" size="sm" onClick={() => openModal("service", {})}><Icon name="Plus" size={14} color={C.espresso} style={{ marginRight: 4 }} />Nuevo servicio</Button>}
      </PageHead>
      <div className="pu-svc-grid" style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 16 }}>
        {services.map((s) => (
          <Card key={s.id} pad={0} style={{ overflow: "hidden", opacity: s.active ? 1 : 0.55 }}>
            <div style={{ height: 130, background: `url('${s.photo}') center/cover`, position: "relative" }}>
              <div style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg, rgba(43,37,32,0.05), rgba(43,37,32,0.5))" }} />
              <div style={{ position: "absolute", top: 12, right: 12, display: "flex", gap: 6 }}>
                {s.online && <Tag tone="dark">Online</Tag>}
                <Tag tone={s.active ? "gold" : "soft"}>{s.active ? "Activo" : "Inactivo"}</Tag>
              </div>
              <div style={{ position: "absolute", left: 16, bottom: 12 }}>
                <Eyebrow color={C.champagne}>{s.eyebrow}</Eyebrow>
                <div style={{ fontFamily: "var(--font-display)", fontSize: 23, color: C.ivory, lineHeight: 1.05, marginTop: 2 }}>{s.name}</div>
              </div>
            </div>
            <div style={{ padding: 18 }}>
              <p style={{ fontFamily: "var(--font-body)", fontWeight: 300, fontSize: 12.5, color: C.taupe, lineHeight: 1.6, marginBottom: 14, minHeight: 40 }}>{s.desc}</p>
              <div style={{ display: "flex", gap: 16, marginBottom: 16 }}>
                <div><div style={{ fontFamily: "var(--font-body)", fontSize: 9.5, fontWeight: 600, letterSpacing: "0.08em", textTransform: "uppercase", color: C.taupe }}>Duración</div><div style={{ fontFamily: "var(--font-display)", fontSize: 18, color: C.espresso }}>{s.duration} min</div></div>
              <div><div style={{ fontFamily: "var(--font-body)", fontSize: 9.5, fontWeight: 600, letterSpacing: "0.08em", textTransform: "uppercase", color: C.taupe }}>Limpieza</div><div style={{ fontFamily: "var(--font-display)", fontSize: 18, color: C.espresso }}>{s.cleanup} min</div></div>
                <div style={{ marginLeft: "auto", textAlign: "right" }}><div style={{ fontFamily: "var(--font-body)", fontSize: 9.5, fontWeight: 600, letterSpacing: "0.08em", textTransform: "uppercase", color: C.taupe }}>Precio</div><div style={{ fontFamily: "var(--font-display)", fontSize: 20, color: C.goldDeep }}>{clp(s.price)}</div></div>
              </div>
              {editable && (
                <div style={{ display: "flex", gap: 8 }}>
                  <Button variant="soft" size="sm" onClick={() => openModal("service", { id: s.id })}><Icon name="Pencil" size={13} color={C.espresso} style={{ marginRight: 5 }} />Editar</Button>
                  <Button variant="soft" size="sm" onClick={() => PureApi.updateService(s.id, { active: !s.active })}>{s.active ? "Desactivar" : "Activar"}</Button>
                </div>
              )}
              {!editable && <div style={{ fontFamily: "var(--font-body)", fontSize: 11, fontWeight: 300, color: C.taupe, fontStyle: "italic" }}>Solo lectura para tu rol.</div>}
            </div>
          </Card>
        ))}
      </div>
    </div>
  );
}

function BedsView() {
  const { version, can } = useApp();
  const beds = useMemo(() => PureApi.getBeds(), [version]);
  const editable = can("bed:update");
  const todayBk = PureApi.getBookings({ date: TODAY }).filter((b) => !["cancelled", "no_show"].includes(b.status));
  return (
    <div>
      <PageHead eyebrow="Recursos" title="Camillas" sub="La agenda funciona por disponibilidad de camillas." />
      <div className="pu-svc-grid" style={{ display: "grid", gridTemplateColumns: "repeat(2,1fr)", gap: 16 }}>
        {beds.map((bed) => {
          const count = todayBk.filter((b) => b.bedId === bed.id).length;
          return (
            <Card key={bed.id} pad={20} style={{ opacity: bed.active ? 1 : 0.6 }}>
              <div style={{ display: "flex", alignItems: "flex-start", gap: 16 }}>
                <div style={{ width: 54, height: 54, borderRadius: 14, background: C.gold15, display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}>
                  <Icon name="BedDouble" size={26} color={C.goldDeep} />
                </div>
                <div style={{ flex: 1 }}>
                  <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 2 }}>
                    <h3 style={{ fontFamily: "var(--font-display)", fontSize: 22, color: C.espresso }}>{bed.name}</h3>
                    <Tag tone={bed.active ? "gold" : "soft"}>{bed.active ? "Activa" : "Inactiva"}</Tag>
                  </div>
                  <div style={{ fontFamily: "var(--font-body)", fontSize: 11, fontWeight: 600, letterSpacing: "0.08em", color: C.taupe, marginBottom: 8 }}>{bed.code}</div>
                  <p style={{ fontFamily: "var(--font-body)", fontWeight: 300, fontSize: 13, color: C.taupe, lineHeight: 1.6, marginBottom: 14 }}>{bed.desc}</p>
                  <div style={{ display: "flex", alignItems: "center", gap: 16 }}>
                    <div><div style={{ fontFamily: "var(--font-display)", fontSize: 20, color: C.espresso }}>{count}</div><div style={{ fontFamily: "var(--font-body)", fontSize: 10.5, color: C.taupe }}>reservas hoy</div></div>
                    {editable && <Button variant="soft" size="sm" onClick={() => PureApi.updateBed(bed.id, { active: !bed.active })}>{bed.active ? "Desactivar" : "Activar"}</Button>}
                  </div>
                </div>
              </div>
            </Card>
          );
        })}
      </div>
      <p style={{ fontFamily: "var(--font-body)", fontWeight: 300, fontSize: 12.5, color: C.taupe, marginTop: 16, display: "flex", gap: 8, alignItems: "center" }}>
        <Icon name="Info" size={14} color={C.taupe} />Una camilla inactiva deja de ofrecerse para nuevas reservas y desaparece de la disponibilidad pública.
      </p>
    </div>
  );
}

Object.assign(window, { ServicesView, BedsView });