// Pagina schedina PayTourist — accessibile via magic link senza login
// URL: /schedina/<jwt-token>

function ScedinaPage({ token }) {
  const [data, setData] = React.useState(null);
  const [loading, setLoading] = React.useState(true);
  const [error, setError] = React.useState(null);
  const [saving, setSaving] = React.useState(false);
  const [submitting, setSubmitting] = React.useState(false);
  const [submitDone, setSubmitDone] = React.useState(false);
  const [toast, setToast] = React.useState(null);

  // Lookup tables
  const [nations, setNations] = React.useState([]);
  const [docTypes, setDocTypes] = React.useState([]);
  const [guestTypes, setGuestTypes] = React.useState([]);
  const [reductions, setReductions] = React.useState([]);

  // Stato locale per le modifiche ai campi
  const [sendEmail, setSendEmail] = React.useState(false);
  const [guestEmail, setGuestEmail] = React.useState("");
  const [guests, setGuests] = React.useState([]);

  const showToast = (msg, type = "success") => {
    setToast({ msg, type });
    setTimeout(() => setToast(null), 3500);
  };

  // ---------------------------------------------------------------------------
  // Load schedina
  // ---------------------------------------------------------------------------

  const [tokenExpired, setTokenExpired] = React.useState(false);

  React.useEffect(() => {
    setLoading(true);
    window.API.getSchedina(token)
      .then(d => {
        setData(d);
        setSendEmail(d.send_receipt_email || false);
        setGuestEmail(d.guest_email || "");
        // Difesa contro payload anomalo: una schedina senza ospiti non dovrebbe
        // arrivare ma se succede meglio una pagina vuota che un crash.
        setGuests((d.guests || []).map(g => ({ ...g })));
        if (d.status === "submitted") setSubmitDone(true);
      })
      .catch(err => {
        if (err.status === 401 || err.status === 410 || err.status === 404) {
          setTokenExpired(true);
        } else {
          setError(err.message || "Errore nel caricamento della schedina");
        }
      })
      .finally(() => setLoading(false));
  }, [token]);

  // Carica lookup dopo aver ottenuto la schedina
  React.useEffect(() => {
    if (!data) return;
    const load = (tipo, setter) =>
      window.API.getSchedinaLookup(token, tipo).then(setter).catch(() => {});
    load("nations", setNations);
    load("documents-types", setDocTypes);
    load("guests-types", setGuestTypes);
    load("reductions", setReductions);
  }, [data]);

  // ---------------------------------------------------------------------------
  // Helpers
  // ---------------------------------------------------------------------------

  const updateGuest = (idx, field, value) => {
    setGuests(prev => prev.map((g, i) => i === idx ? { ...g, [field]: value } : g));
  };

  const isSubmittable = () => {
    if (!data || data.status === "submitted") return false;
    return guests.every(g => g.pt_type_id && g.pt_nationality);
  };

  const fmtDate = (iso) => {
    if (!iso) return "n.d.";
    return new Date(iso + "T00:00:00").toLocaleDateString("it-IT", { day: "2-digit", month: "short", year: "numeric" });
  };

  // ---------------------------------------------------------------------------
  // Save & Submit
  // ---------------------------------------------------------------------------

  const _emailValid = (e) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(e);

  // Esegue il salvataggio senza toast: usato sia dal bottone "Salva bozza" (che mostra
  // il toast) sia da "Invia" (che vuole un comportamento atomico: se save fallisce,
  // submit non parte). Se "Invia ricevuta" è attivo serve un'email valida.
  const _persist = async () => {
    const email = guestEmail.trim();
    if (sendEmail && !_emailValid(email)) {
      throw new Error("Inserisci un'email valida per inviare la ricevuta all'ospite.");
    }
    await window.API.updateSchedina(token, {
      send_receipt_email: sendEmail,
      guest_email: email || null,
      guests: guests.map(g => ({
        checkin_record_id: g.id,
        pt_type_id: g.pt_type_id || null,
        pt_sex: g.pt_sex || null,
        pt_nationality: g.pt_nationality || null,
        pt_residence_country: g.pt_residence_country || null,
        pt_residence_city: g.pt_residence_city || null,
        pt_birth_country: g.pt_birth_country || null,
        pt_birth_city: g.pt_birth_city || null,
        pt_document_type_id: g.pt_document_type_id || null,
        pt_document_released_by_country: g.pt_document_released_by_country || null,
        pt_document_released_by_city: g.pt_document_released_by_city || null,
        pt_tax_refused: g.pt_tax_refused != null ? g.pt_tax_refused : null,
        pt_reduction_id: g.pt_reduction_id || null,
      })),
    });
  };

  const handleSave = async () => {
    setSaving(true);
    try {
      await _persist();
      showToast("Modifiche salvate");
    } catch (err) {
      showToast(err.message || "Errore nel salvataggio", "error");
    } finally {
      setSaving(false);
    }
  };

  const handleSubmit = async () => {
    if (!window.confirm("Inviare la schedina a PayTourist? I documenti verranno eliminati dopo l'invio.")) return;
    setSubmitting(true);
    try {
      await _persist();
      await window.API.submitSchedina(token);
      setSubmitDone(true);
      setData(d => ({ ...d, status: "submitted" }));
      showToast("Schedina inviata con successo!");
    } catch (err) {
      showToast(err.message || "Errore nell'invio", "error");
    } finally {
      setSubmitting(false);
    }
  };

  // ---------------------------------------------------------------------------
  // Render states
  // ---------------------------------------------------------------------------

  if (loading) {
    return (
      <div style={{ display: "flex", alignItems: "center", justifyContent: "center", minHeight: "100vh", flexDirection: "column", gap: 12, color: "var(--gray-500)" }}>
        <div style={{ fontSize: 32, fontWeight: 700, letterSpacing: "-0.02em", color: "var(--gray-900)" }}>Argo</div>
        <div style={{ fontSize: 14 }}>Caricamento schedina…</div>
      </div>
    );
  }

  if (tokenExpired) {
    return (
      <div style={{ display: "flex", alignItems: "center", justifyContent: "center", minHeight: "100vh", background: "var(--gray-50)" }}>
        <div style={{ maxWidth: 480, textAlign: "center", padding: "40px 32px", background: "white", borderRadius: 12, boxShadow: "0 2px 12px rgba(0,0,0,.08)" }}>
          <div style={{ fontSize: 48, marginBottom: 16 }}>⏱</div>
          <div style={{ fontSize: 20, fontWeight: 700, color: "var(--gray-900)", marginBottom: 8 }}>
            Link scaduto
          </div>
          <div style={{ fontSize: 14, color: "var(--gray-600)", lineHeight: 1.6, marginBottom: 24 }}>
            Il link per questa schedina è valido 72 ore dall'invio dell'email.<br />
            Per aprire la schedina, accedi al tuo <strong>dashboard Argo</strong>, vai nella scheda della struttura, apri il tab <strong>Sessioni ospiti</strong> e clicca il bottone <strong>Schedina</strong> accanto alla sessione.
          </div>
          <a
            href="/"
            style={{ display: "inline-block", padding: "10px 24px", background: "var(--green-600)", color: "white", borderRadius: 8, fontWeight: 600, fontSize: 14, textDecoration: "none" }}
          >
            Vai al dashboard
          </a>
        </div>
      </div>
    );
  }

  if (error) {
    return (
      <div style={{ display: "flex", alignItems: "center", justifyContent: "center", minHeight: "100vh", flexDirection: "column", gap: 12, color: "var(--gray-500)" }}>
        <div style={{ fontSize: 40 }}>🔒</div>
        <div style={{ fontSize: 18, fontWeight: 600, color: "var(--gray-900)" }}>Link non valido</div>
        <div style={{ fontSize: 14 }}>{error}</div>
      </div>
    );
  }

  const isReadonly = submitDone || data?.status === "submitted";

  // ---------------------------------------------------------------------------
  // Main render
  // ---------------------------------------------------------------------------

  return (
    <div style={{ minHeight: "100vh", background: "var(--gray-50)", fontFamily: "var(--font-sans)" }}>
      {/* Toast */}
      {toast && (
        <div style={{ position: "fixed", bottom: 20, right: 20, zIndex: 999, background: toast.type === "error" ? "var(--red-600)" : "#1a1a1a", color: "white", padding: "10px 18px", borderRadius: 8, fontSize: 13, boxShadow: "0 4px 12px rgba(0,0,0,.2)" }}>
          {toast.msg}
        </div>
      )}

      {/* Header */}
      <div style={{ background: "white", borderBottom: "1px solid var(--gray-200)", padding: "16px 32px" }}>
        <div style={{ maxWidth: 900, margin: "0 auto", display: "flex", alignItems: "center", justifyContent: "space-between" }}>
          <div>
            <div style={{ fontSize: 20, fontWeight: 700, letterSpacing: "-0.02em", color: "var(--gray-900)" }}>Argo</div>
            <div style={{ fontSize: 13, color: "var(--gray-500)", marginTop: 2 }}>Schedina PayTourist</div>
          </div>
          <div style={{ textAlign: "right" }}>
            <div style={{ fontSize: 14, fontWeight: 600, color: "var(--gray-900)" }}>{data?.property_name || "n.d."}</div>
            <div style={{ fontSize: 12, color: "var(--gray-500)", marginTop: 2 }}>
              {data?.guest_name} · {fmtDate(data?.check_in_date)} → {fmtDate(data?.check_out_date)}
            </div>
          </div>
        </div>
      </div>

      <div style={{ maxWidth: 900, margin: "0 auto", padding: "32px 24px" }}>

        {/* Status banner */}
        {isReadonly && (
          <div style={{ background: "var(--green-50)", border: "1px solid var(--green-200)", borderRadius: 8, padding: "14px 18px", marginBottom: 24, display: "flex", alignItems: "center", gap: 10 }}>
            <span style={{ fontSize: 20 }}>✅</span>
            <div>
              <div style={{ fontSize: 14, fontWeight: 600, color: "var(--green-800)" }}>Schedina inviata con successo</div>
              <div style={{ fontSize: 13, color: "var(--green-700)", marginTop: 2 }}>La schedina è stata trasmessa a PayTourist. I documenti degli ospiti sono stati eliminati.</div>
            </div>
          </div>
        )}

        {data?.status === "failed" && !isReadonly && (
          <div style={{ background: "var(--red-50)", border: "1px solid var(--red-200)", borderRadius: 8, padding: "14px 18px", marginBottom: 24 }}>
            <div style={{ fontSize: 14, fontWeight: 600, color: "var(--red-800)" }}>⚠ Invio fallito ({data.retry_count}/3 tentativi)</div>
            {data.error_message && <div style={{ fontSize: 13, color: "var(--red-700)", marginTop: 4 }}>{data.error_message}</div>}
          </div>
        )}

        {/* Info riepilogo */}
        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(160px, 1fr))", gap: 12, marginBottom: 24 }}>
          {[
            { label: "Ospite principale", value: data?.guest_name },
            { label: "Check-in", value: fmtDate(data?.check_in_date) },
            { label: "Check-out", value: fmtDate(data?.check_out_date) },
            { label: "Ospiti", value: `${data?.adults} adult${data?.adults === 1 ? "o" : "i"}${data?.children ? `, ${data?.children} bambin${data?.children === 1 ? "o" : "i"}` : ""}` },
          ].map(k => (
            <div key={k.label} style={{ background: "white", border: "1px solid var(--gray-200)", borderRadius: 8, padding: "12px 16px" }}>
              <div style={{ fontSize: 11, color: "var(--gray-500)", textTransform: "uppercase", letterSpacing: "0.05em", fontWeight: 600 }}>{k.label}</div>
              <div style={{ fontSize: 14, fontWeight: 600, color: "var(--gray-900)", marginTop: 4 }}>{k.value || "n.d."}</div>
            </div>
          ))}
        </div>

        {/* Campi schedina globali */}
        <div style={{ background: "white", border: "1px solid var(--gray-200)", borderRadius: 8, padding: "20px 24px", marginBottom: 24 }}>
          <h2 style={{ fontSize: 15, fontWeight: 600, color: "var(--gray-900)", margin: "0 0 16px" }}>Dati prenotazione</h2>
          <div>
            <div style={{ fontSize: 12, fontWeight: 600, color: "var(--gray-600)", textTransform: "uppercase", letterSpacing: "0.04em", marginBottom: 6 }}>
              Invia ricevuta via email all'ospite
            </div>
            <label style={{ display: "flex", alignItems: "center", gap: 8, cursor: isReadonly ? "default" : "pointer" }}>
              <input type="checkbox" checked={sendEmail} onChange={e => setSendEmail(e.target.checked)} disabled={isReadonly} style={{ width: 16, height: 16 }} />
              <span style={{ fontSize: 13, color: "var(--gray-700)" }}>{sendEmail ? "Sì, invia ricevuta" : "Non inviare"}</span>
            </label>

            {sendEmail && (
              <div style={{ marginTop: 14, maxWidth: 360 }}>
                <label style={{ display: "block", fontSize: 12, fontWeight: 600, color: "var(--gray-600)", marginBottom: 6, textTransform: "uppercase", letterSpacing: "0.04em" }}>
                  Email ospite
                </label>
                <input
                  className="input"
                  type="email"
                  inputMode="email"
                  value={guestEmail}
                  onChange={e => setGuestEmail(e.target.value)}
                  placeholder="ospite@email.com"
                  disabled={isReadonly}
                />
                <div style={{ fontSize: 11, color: "var(--gray-400)", marginTop: 4 }}>
                  Indirizzo a cui inviare la ricevuta della tassa di soggiorno.
                </div>
              </div>
            )}
          </div>
        </div>

        {/* Ospiti */}
        <div style={{ display: "flex", flexDirection: "column", gap: 20, marginBottom: 24 }}>
          {guests.map((g, idx) => (
            <GuestCard
              key={g.id}
              guest={g}
              index={idx}
              nations={nations}
              docTypes={docTypes}
              guestTypes={guestTypes}
              reductions={reductions}
              readonly={isReadonly}
              token={token}
              onChange={(field, value) => updateGuest(idx, field, value)}
            />
          ))}
        </div>

        {/* Footer azioni — sticky su mobile */}
        {!isReadonly && (
          <div className="sticky-submit" style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
            <button className="btn btn-secondary" onClick={handleSave} disabled={saving || submitting} style={{ flex: "1 1 140px" }}>
              {saving ? "Salvataggio…" : "Salva bozza"}
            </button>
            <button
              className="btn btn-primary"
              onClick={handleSubmit}
              disabled={submitting || saving || !isSubmittable()}
              style={{ flex: "2 1 200px", minHeight: 52 }}
            >
              {submitting ? "Invio in corso…" : "Invia a PayTourist"}
            </button>
          </div>
        )}
        {!isReadonly && !isSubmittable() && (
          <div style={{ textAlign: "right", fontSize: 12, color: "var(--color-egeo-muted)", marginTop: 6 }}>
            Compila almeno <strong>Tipo ospite</strong> e <strong>Nazionalità</strong> per ogni ospite per poter inviare.
          </div>
        )}
      </div>
    </div>
  );
}

// ---------------------------------------------------------------------------
// GuestCard
// ---------------------------------------------------------------------------

function CityAutocomplete({ label, field, value, onChange, readonly, token }) {
  const [query, setQuery] = React.useState("");
  const [suggestions, setSuggestions] = React.useState([]);
  const [open, setOpen] = React.useState(false);
  const debounceRef = React.useRef(null);
  const wrapRef = React.useRef(null);

  // Risolve il nome dal ID al mount (se il valore è già impostato)
  React.useEffect(() => {
    if (value != null && query === "") {
      window.API.getSchedinaLookup(token, "cities", { id: value })
        .then(res => { if (res[0]) setQuery(res[0].name); })
        .catch(() => {});
    }
  }, [value]);

  // Click fuori → chiudi dropdown
  React.useEffect(() => {
    const handler = (e) => { if (wrapRef.current && !wrapRef.current.contains(e.target)) setOpen(false); };
    document.addEventListener("mousedown", handler);
    return () => document.removeEventListener("mousedown", handler);
  }, []);

  const handleInput = (e) => {
    const q = e.target.value;
    setQuery(q);
    onChange(null); // deseleziona finché non si sceglie di nuovo
    clearTimeout(debounceRef.current);
    if (q.length >= 2) {
      debounceRef.current = setTimeout(() => {
        window.API.getSchedinaLookup(token, "cities", { q })
          .then(res => { setSuggestions(res); setOpen(true); })
          .catch(() => {});
      }, 280);
    } else {
      setSuggestions([]);
      setOpen(false);
    }
  };

  const select = (city) => {
    setQuery(city.name);
    onChange(city.id);
    setSuggestions([]);
    setOpen(false);
  };

  const LABEL_STYLE = { display: "block", fontSize: 12, fontWeight: 600, color: "var(--gray-600)", marginBottom: 4, textTransform: "uppercase", letterSpacing: "0.04em" };

  const [isMobileSmall, setIsMobileSmall] = React.useState(window.innerWidth <= 640);
  React.useEffect(() => {
    const handler = () => setIsMobileSmall(window.innerWidth <= 640);
    window.addEventListener("resize", handler, { passive: true });
    return () => window.removeEventListener("resize", handler);
  }, []);

  return (
    <div ref={wrapRef} style={{ position: "relative" }}>
      <label style={LABEL_STYLE}>{label}</label>
      <input
        className="input"
        value={query}
        onChange={handleInput}
        onFocus={() => suggestions.length > 0 && setOpen(true)}
        disabled={readonly}
        placeholder="Cerca comune…"
        style={{ fontSize: 16, minHeight: 44 }}
        autoComplete="off"
      />
      {open && suggestions.length > 0 && (
        <div style={{ position: isMobileSmall ? "fixed" : "absolute", top: isMobileSmall ? undefined : "100%", left: isMobileSmall ? 12 : 0, right: isMobileSmall ? 12 : 0, background: "white", border: "1px solid var(--border-default)", borderRadius: 6, zIndex: 200, maxHeight: 220, overflowY: "auto", boxShadow: "0 4px 16px rgba(0,0,0,.12)" }}>
          {suggestions.map(c => (
            <div
              key={c.id}
              onMouseDown={() => select(c)}
              style={{ padding: "10px 14px", fontSize: 14, cursor: "pointer", borderBottom: "1px solid var(--border-subtle)" }}
            >
              {c.name}
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

// Hoisted da dentro GuestCard: definirli inline causava un nuovo `type` a ogni render,
// remountando ogni <select> e — soprattutto — il CityAutocomplete annidato, che azzerava
// il proprio stato locale `query` ad ogni keystroke. Bug invisibile in dev, devastante in prod.
const _SCHED_LABEL_STYLE = { display: "block", fontSize: 12, fontWeight: 600, color: "var(--color-egeo-muted)", marginBottom: 4, textTransform: "uppercase", letterSpacing: "0.04em" };

function SchedSelectField({ label, field, options, required, guest, onChange, readonly }) {
  return (
    <div>
      <label style={_SCHED_LABEL_STYLE}>
        {label}{required && <span style={{ color: "var(--color-danger)" }}> *</span>}
      </label>
      <select
        className="input"
        value={guest[field] != null ? guest[field] : ""}
        onChange={e => onChange(field, e.target.value ? (isNaN(e.target.value) ? e.target.value : parseInt(e.target.value, 10)) : null)}
        disabled={readonly}
        style={{ fontSize: 16, minHeight: 44 }}
      >
        <option value="">Seleziona</option>
        {options.map(o => (
          <option key={o.id} value={o.id}>{o.name || o.description || o.id}</option>
        ))}
      </select>
    </div>
  );
}

function SchedCityField({ label, field, guest, onChange, readonly, token }) {
  return (
    <CityAutocomplete
      label={label}
      field={field}
      value={guest[field]}
      onChange={v => onChange(field, v)}
      readonly={readonly}
      token={token}
    />
  );
}

const _ITALY_IDS = new Set(["118", "IT", 118]);
const _isItalian = (v) => v != null && (_ITALY_IDS.has(v) || _ITALY_IDS.has(String(v)));

function GuestCard({ guest, index, nations, docTypes, guestTypes, reductions, readonly, token, onChange }) {
  const [photoOpen, setPhotoOpen] = React.useState(false);
  const sf = { guest, onChange, readonly };
  const cf = { guest, onChange, readonly, token };

  return (
    <div style={{ background: "white", border: "1px solid var(--gray-200)", borderRadius: 8, overflow: "hidden" }}>
      {/* Card header */}
      <div style={{ padding: "16px 20px", borderBottom: "1px solid var(--gray-100)", display: "flex", alignItems: "center", gap: 14, background: "var(--gray-25)" }}>
        {guest.raw_image_url ? (
          <img
            src={guest.raw_image_url}
            alt={`Documento ospite ${index + 1}`}
            onClick={() => setPhotoOpen(true)}
            style={{ width: 56, height: 40, objectFit: "cover", borderRadius: 6, cursor: "pointer", border: "1px solid var(--gray-200)", flexShrink: 0 }}
            title="Clicca per ingrandire"
          />
        ) : (
          <div style={{ width: 56, height: 40, background: "var(--gray-100)", borderRadius: 6, display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0, fontSize: 11, color: "var(--gray-400)" }}>
            No foto
          </div>
        )}
        <div style={{ minWidth: 0, flex: 1 }}>
          <div style={{ fontSize: 14, fontWeight: 600, color: "var(--gray-900)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}
            title={`Ospite ${index + 1} · ${guest.first_name || ""} ${guest.last_name || ""}`.trim()}>
            Ospite {index + 1} · {guest.first_name} {guest.last_name}
          </div>
          <div style={{ fontSize: 12, color: "var(--gray-500)", marginTop: 2, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>
            {guest.birth_date ? `Nato il ${guest.birth_date}` : ""}{guest.document_number ? ` · Doc. ${guest.document_number}` : ""}
          </div>
        </div>
      </div>

      {/* Fields */}
      <div style={{ padding: "18px 20px", display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(200px, 1fr))", gap: 14 }}>
        <SchedSelectField {...sf} label="Tipo ospite" field="pt_type_id" options={guestTypes} required />

        <div>
          <label style={_SCHED_LABEL_STYLE}>Sesso</label>
          <select className="input" value={guest.pt_sex != null ? guest.pt_sex : ""} onChange={e => onChange("pt_sex", e.target.value ? parseInt(e.target.value, 10) : null)} disabled={readonly} style={{ fontSize: 16, minHeight: 44 }}>
            <option value="">Seleziona</option>
            <option value="1">Maschio</option>
            <option value="2">Femmina</option>
          </select>
        </div>

        <SchedSelectField {...sf} label="Nazionalità" field="pt_nationality" options={nations} required />

        <SchedSelectField {...sf} label="Paese di residenza" field="pt_residence_country" options={nations} />
        {_isItalian(guest.pt_residence_country) && (
          <SchedCityField {...cf} label="Comune di residenza" field="pt_residence_city" />
        )}

        <SchedSelectField {...sf} label="Paese di nascita" field="pt_birth_country" options={nations} />
        {_isItalian(guest.pt_birth_country) && (
          <SchedCityField {...cf} label="Comune di nascita" field="pt_birth_city" />
        )}

        <SchedSelectField {...sf} label="Tipo documento" field="pt_document_type_id" options={docTypes} />
        <SchedSelectField {...sf} label="Paese rilascio documento" field="pt_document_released_by_country" options={nations} />
        {_isItalian(guest.pt_document_released_by_country) && (
          <SchedCityField {...cf} label="Comune rilascio documento" field="pt_document_released_by_city" />
        )}

        <SchedSelectField {...sf} label="Riduzione tassa" field="pt_reduction_id" options={reductions} />

        <div>
          <label style={_SCHED_LABEL_STYLE}>Esente tassa</label>
          <select className="input" value={guest.pt_tax_refused != null ? (guest.pt_tax_refused ? "1" : "0") : ""} onChange={e => onChange("pt_tax_refused", e.target.value === "" ? null : e.target.value === "1")} disabled={readonly} style={{ fontSize: 16, minHeight: 44 }}>
            <option value="">Seleziona</option>
            <option value="0">No</option>
            <option value="1">Sì</option>
          </select>
        </div>
      </div>

      {/* Photo modal */}
      {photoOpen && guest.raw_image_url && (
        <div
          onClick={() => setPhotoOpen(false)}
          style={{ position: "fixed", inset: 0, background: "rgba(0,0,0,0.8)", zIndex: 1000, display: "flex", alignItems: "center", justifyContent: "center", cursor: "zoom-out" }}
        >
          <img src={guest.raw_image_url} alt="Documento" style={{ maxWidth: "90vw", maxHeight: "90vh", borderRadius: 8, objectFit: "contain" }} onClick={e => e.stopPropagation()} />
        </div>
      )}
    </div>
  );
}

window.ScedinaPage = ScedinaPage;