// Property detail page with 3 tabs
function PropertyDetailPage({ propertyId, host, state, setState, onBack, showToast, reloadData }) {
  const [tab, setTab] = React.useState("info");
  const [qrOpen, setQrOpen] = React.useState(false);
  const [dragOver, setDragOver] = React.useState(false);
  const [saving, setSaving] = React.useState(false);
  const [addSectionOpen, setAddSectionOpen] = React.useState(false);
  const [newSectionLabel, setNewSectionLabel] = React.useState("");
  const [renamingKey, setRenamingKey] = React.useState(null);
  const [renameValue, setRenameValue] = React.useState("");
  const fileInputRef = React.useRef(null);

  const [editOpen, setEditOpen] = React.useState(false);
  const [editName, setEditName] = React.useState("");
  const [editAddress, setEditAddress] = React.useState("");
  const [editComune, setEditComune] = React.useState("");
  const [editRooms, setEditRooms] = React.useState("");
  const [editPhotoFile, setEditPhotoFile] = React.useState(null);
  const [editPhotoPreview, setEditPhotoPreview] = React.useState(null);
  // Tracciamo gli object URL creati da File per revocarli quando vengono
  // sostituiti o quando il componente viene smontato. Senza questo i blob
  // restano in memoria fino al refresh della pagina.
  const editPhotoBlobUrl = React.useRef(null);
  React.useEffect(() => () => {
    if (editPhotoBlobUrl.current) URL.revokeObjectURL(editPhotoBlobUrl.current);
  }, []);
  const _setPhotoFromFile = (f) => {
    if (editPhotoBlobUrl.current) URL.revokeObjectURL(editPhotoBlobUrl.current);
    if (f) {
      const url = URL.createObjectURL(f);
      editPhotoBlobUrl.current = url;
      setEditPhotoFile(f);
      setEditPhotoPreview(url);
    } else {
      editPhotoBlobUrl.current = null;
      setEditPhotoFile(null);
      setEditPhotoPreview(null);
    }
  };
  const [editSaving, setEditSaving] = React.useState(false);
  const editPhotoRef = React.useRef(null);

  const [chatMessages, setChatMessages] = React.useState([]);
  const [chatInput, setChatInput] = React.useState("");
  const [chatLoading, setChatLoading] = React.useState(false);

  const [deleteStep, setDeleteStep] = React.useState(null); // null | "confirm" | "code"
  const [deleteCode, setDeleteCode] = React.useState("");
  const [deleteLoading, setDeleteLoading] = React.useState(false);

  const [sessionTab, setSessionTab] = React.useState("all");
  const [openingSchedina, setOpeningSchedina] = React.useState(null);
  const [drawerSessionId, setDrawerSessionId] = React.useState(null);
  const [regeneratingCheckinLink, setRegeneratingCheckinLink] = React.useState(null);
  // Mappa sessionId -> url del link generato (resettata alla chiusura del drawer)
  const [generatedCheckinLinks, setGeneratedCheckinLinks] = React.useState({});
  // Lock per azioni-bottone: previene doppio click che genera doppia API call
  // (specialmente approva/rifiuta/revoca dove un secondo invio rompe lo stato).
  const sessionActionInflight = React.useRef(new Set());
  const [toggleCheckinPending, setToggleCheckinPending] = React.useState(false);

  // PayTourist config
  const [ptSystems, setPtSystems] = React.useState([]);
  const [ptMatchedSystem, setPtMatchedSystem] = React.useState(null);
  const [ptStructures, setPtStructures] = React.useState([]);
  const [ptSystemId, setPtSystemId] = React.useState(null);
  const [ptStructureId, setPtStructureId] = React.useState(null);
  const [ptSaving, setPtSaving] = React.useState(false);
  const [ptLoadingStructures, setPtLoadingStructures] = React.useState(false);
  const [ptError, setPtError] = React.useState(null);
  const [ptValidating, setPtValidating] = React.useState(false);
  // Token per-property (inserito inline)
  const [ptTokenInput, setPtTokenInput] = React.useState("");
  const [ptSavingToken, setPtSavingToken] = React.useState(false);
  const [ptShowToken, setPtShowToken] = React.useState(false);
  // Modalità sostituzione token (quando token già configurato)
  const [ptReplaceMode, setPtReplaceMode] = React.useState(false);
  const [ptReplaceInput, setPtReplaceInput] = React.useState("");
  const [ptReplaceShow, setPtReplaceShow] = React.useState(false);

  const openEdit = () => {
    setEditName(property.name);
    setEditAddress(property.address || "");
    setEditComune(property.comune || "");
    setEditRooms(property.rooms != null ? String(property.rooms) : "");
    // Reset di eventuale blob URL della sessione precedente, poi mostra foto attuale
    _setPhotoFromFile(null);
    setEditPhotoPreview(property.photo_url || null);
    setEditOpen(true);
  };

  const saveEdit = async () => {
    if (!editName.trim()) return;
    setEditSaving(true);
    try {
      await window.API.patchProperty(propertyId, {
        name: editName.trim(),
        address: editAddress.trim() || null,
        comune: editComune.trim() || null,
        rooms: editRooms ? parseInt(editRooms, 10) : null,
      });
      if (editPhotoFile) await window.API.uploadPhoto(propertyId, editPhotoFile);
      showToast("Struttura aggiornata");
      setEditOpen(false);
      await reloadData();
    } catch (err) {
      showToast(err.message || "Errore", "error");
    } finally {
      setEditSaving(false);
    }
  };

  const property = state.properties.find(p => p.id === propertyId);
  if (!property) return null;

  // Carica sistemi PayTourist per host pro/business (sempre, non solo se checkin abilitato)
  React.useEffect(() => {
    if (host?.plan === "pro" || host?.plan === "business") {
      setPtSystemId(property.paytourist_system_id || null);
      setPtStructureId(property.paytourist_structure_id || null);
      window.API.listPaytouristSystems().then(setPtSystems).catch(() => {});
    }
  }, [propertyId, host?.plan]);

  // Auto-detect sistema dal comune dell'indirizzo
  React.useEffect(() => {
    if (!ptSystems.length || !property?.address) return;
    const matched = _detectPtSystem(property.address, ptSystems);
    setPtMatchedSystem(matched || null);
    // Pre-seleziona il sistema rilevato solo se non già configurato
    if (matched && !property.paytourist_system_id) {
      setPtSystemId(matched.id);
    }
  }, [ptSystems, property?.address]);

  React.useEffect(() => {
    if (!ptSystemId || !property?.paytourist_token_configured) { setPtStructures([]); setPtError(null); return; }
    setPtLoadingStructures(true);
    setPtError(null);
    window.API.listPaytouristStructures(propertyId, ptSystemId)
      .then(structs => { setPtStructures(structs); setPtError(null); })
      .catch(err => { setPtStructures([]); setPtError(err.message || "Errore nel recupero strutture PayTourist"); })
      .finally(() => setPtLoadingStructures(false));
  }, [ptSystemId, property?.paytourist_token_configured]);

  const updateProperty = (updater) => {
    setState(s => ({
      ...s,
      properties: s.properties.map(p => p.id === propertyId ? updater(p) : p),
    }));
  };

  const infoFields = [
    { key: "descrizione", label: "Descrizione", placeholder: "Appartamento luminoso al secondo piano…" },
    { key: "checkin", label: "Istruzioni check-in", placeholder: "Check-in dalle 15:00. Le chiavi si trovano nella cassetta…" },
    { key: "checkout", label: "Istruzioni check-out", placeholder: "Check-out entro le 10:00. Riponi le chiavi…" },
    { key: "regole", label: "Regole della casa", placeholder: "Vietato fumare. No feste. Silenzio dopo le 22:00…" },
    { key: "wifi", label: "Informazioni Wi-Fi", placeholder: "Rete: CasaXYZ_Guest\nPassword: benvenuto2026" },
    { key: "servizi", label: "Servizi e dotazioni", placeholder: "Aria condizionata, lavatrice, asciugamani e lenzuola incluse…" },
    { key: "faq", label: "Domande frequenti (FAQ)", placeholder: "Q: C'è un parcheggio?\nA: Consigliamo il garage in Via …" },
    { key: "note", label: "Note aggiuntive", placeholder: "Consigli, suggerimenti locali, contatti per emergenze…" },
  ];

  const setInfoField = (key, val) => {
    updateProperty(p => ({ ...p, info: { ...p.info, [key]: val } }));
  };

  const customSections = property.customSections || [];

  const addCustomSection = () => {
    const label = newSectionLabel.trim();
    if (!label) return;
    const key = "custom_" + Date.now();
    updateProperty(p => ({
      ...p,
      customSections: [...(p.customSections || []), { key, label }],
      info: { ...p.info, [key]: "" },
    }));
    setNewSectionLabel("");
    setAddSectionOpen(false);
    showToast(`Sezione "${label}" aggiunta`);
  };

  const renameCustomSection = (key, newLabel) => {
    const label = newLabel.trim();
    if (!label) return;
    updateProperty(p => ({
      ...p,
      customSections: (p.customSections || []).map(s => s.key === key ? { ...s, label } : s),
    }));
    setRenamingKey(null);
  };

  const deleteCustomSection = (key) => {
    updateProperty(p => {
      const { [key]: _, ...restInfo } = p.info;
      return { ...p, customSections: (p.customSections || []).filter(s => s.key !== key), info: restInfo };
    });
    showToast("Sezione eliminata");
  };

  // --- Salva informazioni ---
  const saveInfo = async () => {
    setSaving(true);
    try {
      await window.API.updateProperty(propertyId, property.info, property.customSections);
      showToast("Informazioni salvate · chatbot aggiornato");
    } catch (err) {
      showToast(err.message || "Errore nel salvataggio", "error");
    } finally {
      setSaving(false);
    }
  };

  // --- Check-in digitale ---
  const toggleCheckin = async () => {
    if (toggleCheckinPending) return;
    setToggleCheckinPending(true);
    const newVal = !property.checkin_enabled;
    try {
      await window.API.patchProperty(propertyId, { checkin_enabled: newVal });
      updateProperty(p => ({ ...p, checkin_enabled: newVal }));
      showToast(newVal ? "Check-in digitale abilitato" : "Check-in digitale disabilitato");
    } catch (err) {
      showToast(err.message || "Errore", "error");
    } finally {
      setToggleCheckinPending(false);
    }
  };

  const downloadCheckinForm = async (sid, guestName) => {
    try {
      await window.API.downloadCheckinForm(propertyId, sid, guestName);
    } catch (err) {
      showToast(err.message || "Errore download form", "error");
    }
  };

  const openSchedina = async (sid) => {
    setOpeningSchedina(sid);
    try {
      const { url } = await window.API.getSchedinaLink(sid);
      window.open(url, "_blank");
    } catch (err) {
      showToast(err.message || "Schedina non disponibile", "error");
    } finally {
      setOpeningSchedina(null);
    }
  };

  const regenerateCheckinLink = async (sid) => {
    setRegeneratingCheckinLink(sid);
    try {
      const { url } = await window.API.regenerateCheckinLink(sid);
      await navigator.clipboard.writeText(url).catch(() => {});
      setGeneratedCheckinLinks(prev => ({ ...prev, [sid]: url }));
      showToast("Link check-in copiato negli appunti!");
    } catch (err) {
      showToast(err.message || "Errore generazione link", "error");
    } finally {
      setRegeneratingCheckinLink(null);
    }
  };

  // --- Sessioni ---
  // Wrapper inflight: la chiave è "verbo:sid" per non bloccare azioni diverse
  // sulla stessa sessione (improbabile, ma evita stallo). Garantisce idempotenza
  // lato UI quando l'host clicca due volte "Approva" prima del reload.
  const _runSessionAction = async (key, fn) => {
    if (sessionActionInflight.current.has(key)) return;
    sessionActionInflight.current.add(key);
    try { await fn(); }
    catch (err) { showToast(err.message || "Errore", "error"); }
    finally { sessionActionInflight.current.delete(key); }
  };

  const approveSession = (sid) => _runSessionAction(`approve:${sid}`, async () => {
    const session = property.sessions.find(s => s.id === sid);
    await window.API.approveSession(propertyId, sid, session?._checkoutIso);
    showToast("Accesso approvato · ospite notificato");
    await reloadData();
  });

  const rejectSession = (sid) => _runSessionAction(`reject:${sid}`, async () => {
    await window.API.rejectSession(propertyId, sid);
    showToast("Accesso rifiutato");
    await reloadData();
  });

  const revokeSession = (sid) => _runSessionAction(`revoke:${sid}`, async () => {
    await window.API.revokeSession(propertyId, sid);
    showToast("Accesso revocato");
    await reloadData();
  });

  // --- Documenti ---
  const handleFiles = async (files) => {
    const file = files[0];
    if (!file) return;
    try {
      const doc = await window.API.uploadDocument(propertyId, file);
      showToast(`"${file.name}" caricato · indicizzazione in corso`);
      updateProperty(p => ({ ...p, documents: [doc, ...p.documents] }));
    } catch (err) {
      showToast(err.message || "Errore upload", "error");
    }
  };

  const deleteDoc = async (docName) => {
    try {
      await window.API.deleteDocument(propertyId, docName);
      updateProperty(p => ({ ...p, documents: p.documents.filter(d => d.name !== docName) }));
      showToast("Documento eliminato");
    } catch (err) {
      showToast(err.message || "Errore", "error");
    }
  };

  // --- Chat test ---
  const sendTestMessage = async () => {
    const text = chatInput.trim();
    if (!text || chatLoading) return;
    setChatInput("");
    const userMsg = { role: "user", content: text };
    setChatMessages(prev => [...prev, userMsg]);
    setChatLoading(true);
    try {
      const history = chatMessages.map(m => ({
        role: m.role === "user" ? "user" : "model",
        parts: [m.content],
      }));
      const { reply } = await window.API.testChat(propertyId, text, history);
      setChatMessages(prev => [...prev, { role: "assistant", content: reply }]);
    } catch (err) {
      setChatMessages(prev => [...prev, { role: "assistant", content: `Errore: ${err.message}` }]);
    } finally {
      setChatLoading(false);
    }
  };

  // --- Elimina struttura ---
  const requestDelete = async () => {
    setDeleteLoading(true);
    try {
      await window.API.requestDeleteProperty(propertyId);
      setDeleteStep("code");
      setDeleteCode("");
    } catch (err) {
      showToast(err.message || "Errore nell'invio del codice", "error");
    } finally {
      setDeleteLoading(false);
    }
  };

  const confirmDelete = async () => {
    if (deleteCode.length !== 6) return;
    setDeleteLoading(true);
    try {
      await window.API.confirmDeleteProperty(propertyId, deleteCode);
      showToast("Struttura eliminata");
      onBack();
      await reloadData();
    } catch (err) {
      showToast(err.message || "Codice non valido", "error");
    } finally {
      setDeleteLoading(false);
    }
  };

  // --- QR Code ---
  const downloadQr = async () => {
    try {
      await window.API.downloadQr(propertyId, property.name);
      showToast("QR Code scaricato");
      setQrOpen(false);
    } catch (err) {
      showToast(err.message || "Errore download QR", "error");
    }
  };

  return (
    <div className="page stack-24">
      {/* Header */}
      <div>
        <button className="btn btn-ghost btn-sm" onClick={onBack} style={{ marginLeft: -8, marginBottom: 10 }}>
          <I.back style={{ width: 14, height: 14 }} />
          Torna alle strutture
        </button>
        <div className="between" style={{ alignItems: "flex-start", gap: 24 }}>
          <div style={{ display: "flex", alignItems: "center", gap: 16, flex: 1, minWidth: 0 }}>
            {property.photo_url && (
              <img src={property.photo_url} alt={property.name}
                style={{ width: 64, height: 64, objectFit: "cover", borderRadius: "var(--radius-sm)", flexShrink: 0, border: "1px solid var(--border-subtle)" }} />
            )}
            <div style={{ minWidth: 0 }}>
              <h1 className="h1">{property.name}</h1>
              <p className="muted" style={{ margin: "6px 0 0", display: "flex", alignItems: "center", gap: 6 }}>
                <I.pin style={{ width: 14, height: 14 }} /> {property.address || "Nessun indirizzo"}
                {property.comune && <span style={{ color: "var(--text-muted)" }}>· {property.comune}</span>}
              </p>
            </div>
          </div>
          <div style={{ display: "flex", gap: 8, flexShrink: 0 }}>
            <button className="btn btn-secondary" onClick={() => setQrOpen(true)}>
              <I.qr style={{ width: 16, height: 16 }} />
              Scarica QR Code
            </button>
            <button className="btn btn-secondary" onClick={openEdit}>
              <I.edit style={{ width: 16, height: 16 }} />
              Modifica struttura
            </button>
            <button className="btn btn-danger" onClick={() => setDeleteStep("confirm")}>
              <I.trash style={{ width: 16, height: 16 }} />
              Elimina
            </button>
          </div>
        </div>
      </div>

      {/* Tabs */}
      <div>
        <div className="tabs">
          <div className={`tab ${tab === "info" ? "active" : ""}`} onClick={() => setTab("info")}>
            Informazioni
          </div>
          <div className={`tab ${tab === "docs" ? "active" : ""}`} onClick={() => setTab("docs")}>
            Documenti{" "}
            <span className="badge badge-plain" style={{ marginLeft: 6, padding: "1px 8px", fontSize: 11 }}>
              {property.documents.length}
            </span>
          </div>
          <div className={`tab ${tab === "sessions" ? "active" : ""}`} onClick={() => setTab("sessions")}>
            Sessioni ospiti{" "}
            <span className="badge badge-plain" style={{ marginLeft: 6, padding: "1px 8px", fontSize: 11 }}>
              {property.sessions.length}
            </span>
          </div>
          <div className={`tab ${tab === "chat" ? "active" : ""}`} onClick={() => setTab("chat")}>
            Test chatbot
          </div>
        </div>

        {/* INFO TAB — 3 card siblings + card adempimenti + footer */}
        {tab === "info" && (
          <div className="card-stack">

            {/* Card 1: Identità & accoglienza */}
            <div className="card card-info">
              <div className="card-head">
                <h2>Identità & accoglienza</h2>
                <p className="card-sub">Come si presenta la casa e cosa l'ospite trova all'arrivo.</p>
              </div>
              <div className="field-grid-2">
                {/* Descrizione — intera riga */}
                <div className="full">
                  <label className="field-label">{infoFields.find(f => f.key === "descrizione").label}</label>
                  <textarea className="textarea" rows={4}
                    value={property.info["descrizione"] || ""}
                    onChange={e => setInfoField("descrizione", e.target.value)}
                    placeholder={infoFields.find(f => f.key === "descrizione").placeholder} />
                </div>
                {/* Check-in — mezza riga */}
                <div>
                  <label className="field-label">{infoFields.find(f => f.key === "checkin").label}</label>
                  <textarea className="textarea" rows={3}
                    value={property.info["checkin"] || ""}
                    onChange={e => setInfoField("checkin", e.target.value)}
                    placeholder={infoFields.find(f => f.key === "checkin").placeholder} />
                </div>
                {/* Check-out — mezza riga */}
                <div>
                  <label className="field-label">{infoFields.find(f => f.key === "checkout").label}</label>
                  <textarea className="textarea" rows={3}
                    value={property.info["checkout"] || ""}
                    onChange={e => setInfoField("checkout", e.target.value)}
                    placeholder={infoFields.find(f => f.key === "checkout").placeholder} />
                </div>
                {/* Regole — intera riga */}
                <div className="full">
                  <label className="field-label">{infoFields.find(f => f.key === "regole").label}</label>
                  <textarea className="textarea" rows={3}
                    value={property.info["regole"] || ""}
                    onChange={e => setInfoField("regole", e.target.value)}
                    placeholder={infoFields.find(f => f.key === "regole").placeholder} />
                </div>
              </div>
            </div>

            {/* Card 2: Servizi & info pratiche */}
            <div className="card card-info">
              <div className="card-head">
                <h2>Servizi & info pratiche</h2>
                <p className="card-sub">Ciò che la casa offre e che l'ospite chiede più spesso.</p>
              </div>
              <div className="field-grid-2">
                <div>
                  <label className="field-label">{infoFields.find(f => f.key === "wifi").label}</label>
                  <textarea className="textarea" rows={3}
                    value={property.info["wifi"] || ""}
                    onChange={e => setInfoField("wifi", e.target.value)}
                    placeholder={infoFields.find(f => f.key === "wifi").placeholder} />
                </div>
                <div>
                  <label className="field-label">{infoFields.find(f => f.key === "servizi").label}</label>
                  <textarea className="textarea" rows={3}
                    value={property.info["servizi"] || ""}
                    onChange={e => setInfoField("servizi", e.target.value)}
                    placeholder={infoFields.find(f => f.key === "servizi").placeholder} />
                </div>
              </div>
            </div>

            {/* Card 3: FAQ & note libere + sezioni personalizzate */}
            <div className="card card-info">
              <div className="card-head">
                <h2>FAQ & note libere</h2>
                <p className="card-sub">Risposte alle domande ricorrenti e sezioni a tema libero.</p>
              </div>
              <div className="field-grid-2">
                {/* FAQ — intera riga */}
                <div className="full">
                  <label className="field-label">{infoFields.find(f => f.key === "faq").label}</label>
                  <textarea className="textarea" rows={4}
                    value={property.info["faq"] || ""}
                    onChange={e => setInfoField("faq", e.target.value)}
                    placeholder={infoFields.find(f => f.key === "faq").placeholder} />
                </div>
                {/* Note — intera riga */}
                <div className="full">
                  <label className="field-label">{infoFields.find(f => f.key === "note").label}</label>
                  <textarea className="textarea" rows={3}
                    value={property.info["note"] || ""}
                    onChange={e => setInfoField("note", e.target.value)}
                    placeholder={infoFields.find(f => f.key === "note").placeholder} />
                </div>

                {/* Sezioni personalizzate esistenti */}
                {customSections.length > 0 && (
                  <div className="full" style={{ paddingTop: 12, borderTop: "1px dashed var(--border-subtle)" }}>
                    <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 16 }}>
                      <h3 className="h3" style={{ fontSize: 13, textTransform: "uppercase", letterSpacing: "0.04em", color: "var(--text-muted)", fontWeight: 500 }}>Sezioni personalizzate</h3>
                      <span className="badge badge-plain" style={{ fontSize: 11 }}>{customSections.length}</span>
                    </div>
                    <div className="field-grid-2">
                      {customSections.map(s => (
                        <div key={s.key} className="full">
                          <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 6, gap: 8 }}>
                            {renamingKey === s.key ? (
                              <div style={{ display: "flex", gap: 6, alignItems: "center", flex: 1 }}>
                                <input className="input" autoFocus value={renameValue} onChange={e => setRenameValue(e.target.value)}
                                  onKeyDown={e => { if (e.key === "Enter") renameCustomSection(s.key, renameValue); if (e.key === "Escape") setRenamingKey(null); }}
                                  style={{ padding: "6px 10px", fontSize: 13, maxWidth: 320 }} />
                                <button className="btn btn-primary btn-xs" onClick={() => renameCustomSection(s.key, renameValue)}>Salva</button>
                                <button className="btn btn-ghost btn-xs" onClick={() => setRenamingKey(null)}>Annulla</button>
                              </div>
                            ) : (
                              <label className="field-label" style={{ marginBottom: 0, display: "flex", alignItems: "center", gap: 8 }}>
                                {s.label}
                                <span className="badge badge-plain" style={{ fontSize: 10, padding: "1px 6px" }}>personalizzata</span>
                              </label>
                            )}
                            {renamingKey !== s.key && (
                              <div style={{ display: "flex", gap: 4 }}>
                                <button className="btn btn-ghost btn-xs" onClick={() => { setRenamingKey(s.key); setRenameValue(s.label); }}
                                  style={{ color: "var(--text-muted)" }}>
                                  <I.edit style={{ width: 12, height: 12 }} /> Rinomina
                                </button>
                                <button className="btn btn-ghost btn-xs" onClick={() => deleteCustomSection(s.key)}
                                  style={{ color: "var(--text-muted)" }}>
                                  <I.trash style={{ width: 12, height: 12 }} />
                                </button>
                              </div>
                            )}
                          </div>
                          <textarea className="textarea" value={property.info[s.key] || ""}
                            onChange={e => setInfoField(s.key, e.target.value)}
                            placeholder={`Scrivi qui le informazioni per "${s.label}"…`} rows={3} />
                        </div>
                      ))}
                    </div>
                  </div>
                )}

                {/* Aggiungi sezione personalizzata */}
                <div className="full" style={{ marginTop: customSections.length > 0 ? 8 : 0 }}>
                  {addSectionOpen ? (
                    <div style={{ padding: 16, background: "var(--color-avorio)", border: "1px solid var(--border-subtle)", borderRadius: "var(--radius-sm)", display: "flex", gap: 8, alignItems: "flex-end" }}>
                      <div style={{ flex: 1 }}>
                        <label className="field-label">Nome della nuova sezione</label>
                        <input className="input" autoFocus value={newSectionLabel} onChange={e => setNewSectionLabel(e.target.value)}
                          onKeyDown={e => { if (e.key === "Enter") addCustomSection(); if (e.key === "Escape") { setAddSectionOpen(false); setNewSectionLabel(""); } }}
                          placeholder="Es. Ristoranti consigliati, Come raggiungerci, Parcheggio…" />
                      </div>
                      <button className="btn btn-primary" onClick={addCustomSection} disabled={!newSectionLabel.trim()}>
                        <I.plus style={{ width: 14, height: 14 }} /> Aggiungi
                      </button>
                      <button className="btn btn-ghost" onClick={() => { setAddSectionOpen(false); setNewSectionLabel(""); }}>Annulla</button>
                    </div>
                  ) : (
                    <button className="btn btn-secondary" onClick={() => setAddSectionOpen(true)}
                      style={{ width: "100%", borderStyle: "dashed", padding: "14px", background: "var(--color-avorio)", color: "var(--color-egeo-muted)" }}>
                      <I.plus style={{ width: 16, height: 16 }} /> Aggiungi sezione personalizzata
                    </button>
                  )}
                </div>
              </div>
            </div>

            {/* Card 4: Adempimenti — visibile solo per pro/business */}
            {(host?.plan === "pro" || host?.plan === "business") && (
              <div className="card card-info">
                <div className="card-head">
                  <h2>Adempimenti</h2>
                  <p className="card-sub">Check-in digitale e invio automatico delle schedine al comune.</p>
                </div>

                {/* Toggle check-in digitale */}
                <div className="toggle-row">
                  <div className="label-block">
                    <p className="toggle-title">Check-in digitale</p>
                    <p className="toggle-sub">L'ospite riceve un link per compilare online il check-in di tutto il nucleo. Genera un form PDF scaricabile.</p>
                  </div>
                  <Toggle
                    checked={!!property.checkin_enabled}
                    onChange={toggleCheckin}
                    ariaLabelOn="Abilita check-in digitale"
                    ariaLabelOff="Disabilita check-in digitale"
                  />
                </div>

                {/* PayTourist — 3 stati */}
                {!ptMatchedSystem && property.checkin_enabled && (
                  <PtBanner state="uncovered" />
                )}
                {ptMatchedSystem && !property.checkin_enabled && (
                  <PtBanner state="matched-checkin-off" comune={ptMatchedSystem.comune} />
                )}
                {ptMatchedSystem && property.checkin_enabled && !property.paytourist_token_configured && (
                  <div className="stack-12" style={{ padding: "14px 16px", background: "var(--surface-info-soft)", border: "1px solid var(--border-subtle)", borderRadius: "var(--radius-md)" }}>
                    <div style={{ fontSize: 13, fontWeight: 600, color: "var(--color-egeo)" }}>
                      PayTourist — {ptMatchedSystem.comune}
                    </div>
                    <p className="muted" style={{ fontSize: 13, margin: 0 }}>
                      Inserisci il token PayTourist per questa struttura. Ottienilo dal pannello del tuo comune.
                    </p>
                    <div style={{ display: "flex", gap: 8, alignItems: "center", flexWrap: "wrap" }}>
                      <div style={{ position: "relative", flex: 1, minWidth: 200 }}>
                        <input
                          className="input"
                          type={ptShowToken ? "text" : "password"}
                          value={ptTokenInput}
                          onChange={e => setPtTokenInput(e.target.value)}
                          placeholder="Incolla qui il token PayTourist"
                          autoComplete="off"
                          style={{ paddingRight: 36, fontSize: 13 }}
                        />
                        <button type="button" onClick={() => setPtShowToken(v => !v)}
                          style={{ position: "absolute", top: "50%", right: 8, transform: "translateY(-50%)", background: "transparent", border: "none", padding: 2, cursor: "pointer", color: "var(--gray-500)" }}>
                          {ptShowToken ? "●" : "○"}
                        </button>
                      </div>
                      <button className="btn btn-primary btn-sm"
                        disabled={ptSavingToken || !ptTokenInput.trim()}
                        onClick={async () => {
                          setPtSavingToken(true);
                          try {
                            await window.API.updatePaytouristConfig(propertyId, { paytourist_token: ptTokenInput.trim(), paytourist_enabled: false });
                            updateProperty(p => ({ ...p, paytourist_token_configured: true }));
                            setPtTokenInput("");
                            showToast("Token PayTourist salvato");
                          } catch (err) {
                            showToast(err.message || "Errore", "error");
                          } finally {
                            setPtSavingToken(false);
                          }
                        }}>
                        {ptSavingToken ? "Salvataggio…" : "Salva token"}
                      </button>
                    </div>
                  </div>
                )}
                {ptMatchedSystem && property.checkin_enabled && property.paytourist_token_configured && (
                  <div className="stack-8">
                  <PtStructurePicker
                    comune={ptMatchedSystem.comune}
                    ptEnabled={!!property.paytourist_enabled}
                    structures={ptStructures}
                    loading={ptLoadingStructures}
                    error={ptError}
                    value={ptStructureId}
                    onChange={val => setPtStructureId(val)}
                    saving={ptSaving}
                    validating={ptValidating}
                    onSave={async () => {
                      setPtSaving(true);
                      try {
                        const sysId = ptMatchedSystem.id;
                        await window.API.updatePaytouristConfig(propertyId, {
                          paytourist_enabled: true,
                          paytourist_system_id: sysId,
                          paytourist_structure_id: ptStructureId,
                        });
                        updateProperty(p => ({ ...p, paytourist_enabled: true, paytourist_system_id: sysId, paytourist_structure_id: ptStructureId }));
                        showToast("Configurazione PayTourist salvata");
                      } catch (err) {
                        showToast(err.message || "Errore", "error");
                      } finally {
                        setPtSaving(false);
                      }
                    }}
                    onValidate={async () => {
                      setPtValidating(true);
                      try {
                        await window.API.validatePaytouristConnection(propertyId);
                        showToast("Connessione PayTourist valida");
                      } catch (err) {
                        showToast(err.message || "Token non valido", "error");
                      } finally {
                        setPtValidating(false);
                      }
                    }}
                    onDisable={async () => {
                      try {
                        await window.API.updatePaytouristConfig(propertyId, { paytourist_enabled: false, paytourist_system_id: null, paytourist_structure_id: null });
                        updateProperty(p => ({ ...p, paytourist_enabled: false }));
                        showToast("PayTourist disabilitato");
                      } catch (err) {
                        showToast(err.message || "Errore", "error");
                      }
                    }}
                  />
                  {ptReplaceMode ? (
                    <div className="stack-10" style={{ marginTop: 4 }}>
                      <div style={{ position: "relative", flex: 1 }}>
                        <input
                          className="input"
                          type={ptReplaceShow ? "text" : "password"}
                          value={ptReplaceInput}
                          onChange={e => setPtReplaceInput(e.target.value)}
                          placeholder="Nuovo token PayTourist"
                          autoComplete="off"
                          autoFocus
                          style={{ paddingRight: 36, fontSize: 13 }}
                        />
                        <button type="button" onClick={() => setPtReplaceShow(v => !v)}
                          style={{ position: "absolute", top: "50%", right: 8, transform: "translateY(-50%)", background: "transparent", border: "none", padding: 2, cursor: "pointer", color: "var(--gray-500)" }}>
                          {ptReplaceShow ? "●" : "○"}
                        </button>
                      </div>
                      <div style={{ display: "flex", gap: 8, justifyContent: "flex-end" }}>
                        <button className="btn btn-ghost btn-sm" type="button"
                          onClick={() => { setPtReplaceMode(false); setPtReplaceInput(""); setPtReplaceShow(false); }}>
                          Annulla
                        </button>
                        <button className="btn btn-primary btn-sm" type="button"
                          disabled={ptSavingToken || !ptReplaceInput.trim()}
                          onClick={async () => {
                            setPtSavingToken(true);
                            try {
                              await window.API.updatePaytouristConfig(propertyId, { paytourist_token: ptReplaceInput.trim() });
                              updateProperty(p => ({ ...p, paytourist_token_configured: true }));
                              showToast("Token PayTourist aggiornato");
                              setPtReplaceMode(false); setPtReplaceInput(""); setPtReplaceShow(false);
                            } catch (err) {
                              showToast(err.message || "Errore", "error");
                            } finally {
                              setPtSavingToken(false);
                            }
                          }}>
                          {ptSavingToken ? "Salvataggio…" : "Salva token"}
                        </button>
                      </div>
                    </div>
                  ) : (
                    <div style={{ display: "flex", justifyContent: "flex-end" }}>
                      <button className="btn btn-ghost btn-sm" type="button" style={{ color: "var(--text-muted)", fontSize: 12 }}
                        title="Sostituisci il token PayTourist di questa struttura"
                        onClick={() => { setPtReplaceMode(true); setPtReplaceInput(""); }}>
                        Sostituisci token
                      </button>
                    </div>
                  )}
                  </div>
                )}
              </div>
            )}

            {/* Footer azioni — fuori dalle card, allineato a destra */}
            <div className="info-tab-footer">
              <button className="btn btn-secondary" onClick={() => reloadData()}>Annulla</button>
              <button className="btn btn-primary" onClick={saveInfo} disabled={saving}>
                <I.sparkle style={{ width: 14, height: 14 }} />
                {saving ? "Salvataggio…" : "Salva e aggiorna chatbot"}
              </button>
            </div>

          </div>
        )}

        {/* DOCUMENTS TAB */}
        {tab === "docs" && (
          <div className="stack-16">
            {/* Input file nascosto */}
            <input ref={fileInputRef} type="file" accept=".pdf,.txt,application/pdf,text/plain"
              style={{ display: "none" }}
              onChange={e => { if (e.target.files.length) { handleFiles(e.target.files); e.target.value = ""; } }} />

            <div className={`dropzone ${dragOver ? "drag" : ""}`}
              onDragOver={e => { e.preventDefault(); setDragOver(true); }}
              onDragLeave={() => setDragOver(false)}
              onDrop={e => { e.preventDefault(); setDragOver(false); if (e.dataTransfer.files.length) handleFiles(e.dataTransfer.files); }}
              onClick={() => fileInputRef.current?.click()}>
              <I.upload style={{ width: 32, height: 32, color: "var(--text-muted)", margin: "0 auto 10px", display: "block" }} />
              <div style={{ fontSize: 15, fontWeight: 500, color: "var(--color-egeo)", marginBottom: 4 }}>
                Trascina qui i tuoi file
              </div>
              <div className="mini">
                PDF o TXT, fino a 10 MB · <span style={{ color: "var(--color-terracotta)", fontWeight: 500 }}>sfoglia dal computer</span>
              </div>
            </div>

            {property.documents.length > 0 ? (
              <div className="card" style={{ padding: 0, overflow: "hidden" }}>
                <div style={{ padding: "14px 20px", borderBottom: "1px solid var(--border-subtle)", fontSize: 13, fontWeight: 500, color: "var(--color-egeo-muted)" }}>
                  {property.documents.length} document{property.documents.length === 1 ? "o" : "i"} caricat{property.documents.length === 1 ? "o" : "i"}
                </div>
                {property.documents.map((d, i) => (
                  <div key={i} style={{ display: "flex", alignItems: "center", gap: 14, padding: "14px 20px", borderBottom: "1px solid var(--border-subtle)" }}>
                    <div style={{ width: 36, height: 36, borderRadius: 8, background: "var(--surface-danger-soft)", color: "var(--color-danger)", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}>
                      <I.file style={{ width: 18, height: 18 }} />
                    </div>
                    <div style={{ flex: 1, minWidth: 0 }}>
                      <div style={{ fontSize: 14, fontWeight: 500, color: "var(--color-egeo)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{d.name}</div>
                      <div className="mini">caricato il {d.date}</div>
                    </div>
                    {d.url && (
                      <a href={d.url} target="_blank" rel="noopener noreferrer" className="btn btn-ghost btn-sm" style={{ color: "var(--text-muted)", textDecoration: "none" }}>
                        Apri
                      </a>
                    )}
                    <button className="btn btn-ghost btn-sm" style={{ color: "var(--text-muted)" }}
                      onClick={() => deleteDoc(d.name)} title="Rimuovi">
                      <I.trash style={{ width: 16, height: 16 }} />
                    </button>
                  </div>
                ))}
              </div>
            ) : (
              <div className="card card-pad" style={{ textAlign: "center", color: "var(--text-muted)", padding: "40px 24px" }}>
                <I.file style={{ width: 28, height: 28, color: "var(--border-default)", margin: "0 auto 8px", display: "block" }} />
                <div style={{ fontSize: 14 }}>Nessun documento caricato</div>
              </div>
            )}
          </div>
        )}

        {/* SESSIONS TAB — SessionRow + SessionDrawer */}
        {tab === "sessions" && (() => {
          const all = property.sessions;
          const byTab = {
            all,
            active:  all.filter(s => s.status === "active"),
            pending: all.filter(s => s.status === "pending"),
            past:    all.filter(s => s.status === "rejected" || s.status === "expired"),
          };
          const SESSION_TABS = [
            { id: "all",     label: "Tutte" },
            { id: "active",  label: "Attive" },
            { id: "pending", label: "In attesa" },
            { id: "past",    label: "Passate" },
          ];
          const visible = byTab[sessionTab] || all;

          const drawerSession = all.find(s => s.id === drawerSessionId) || null;

          return (
            <div>
              {/* Card sessioni con toolbar pillole */}
              <div className="card sessions-card">
                <div className="sessions-toolbar">
                  {SESSION_TABS.map(t => {
                    const count = byTab[t.id].length;
                    const isActive = sessionTab === t.id;
                    return (
                      <button
                        key={t.id}
                        className={`session-tab${isActive ? " active" : ""}`}
                        onClick={() => setSessionTab(t.id)}
                      >
                        {t.label}
                        <span className="st-count">{count}</span>
                      </button>
                    );
                  })}
                </div>

                {visible.length > 0 ? (
                  visible.map(s => {
                    // Azione contestuale nella riga
                    const actionSlot = (() => {
                      if (s.status === "pending") {
                        return (
                          <div style={{ display: "flex", gap: 6 }}>
                            <button className="btn btn-primary btn-sm" onClick={() => approveSession(s.id)}>Approva</button>
                            <button className="btn btn-danger btn-sm" onClick={() => rejectSession(s.id)}>Rifiuta</button>
                          </div>
                        );
                      }
                      if (s.status === "active") {
                        return <button className="btn btn-secondary btn-sm" onClick={() => revokeSession(s.id)}>Revoca</button>;
                      }
                      return <span className="mini" style={{ color: "var(--text-muted)" }}>Chiusa</span>;
                    })();

                    return (
                      <SessionRow
                        key={s.id}
                        session={s}
                        selected={drawerSessionId === s.id}
                        onClick={sess => setDrawerSessionId(sess.id === drawerSessionId ? null : sess.id)}
                        actionSlot={actionSlot}
                      />
                    );
                  })
                ) : (
                  <div style={{ textAlign: "center", padding: "48px 24px", color: "var(--text-muted)" }}>
                    <I.users style={{ width: 28, height: 28, color: "var(--border-default)", margin: "0 auto 8px", display: "block" }} />
                    <div style={{ fontSize: 14 }}>Nessuna sessione in questa categoria.</div>
                    {sessionTab === "all" && (
                      <div className="mini" style={{ marginTop: 4 }}>Le richieste appariranno qui quando gli ospiti accederanno al bot.</div>
                    )}
                  </div>
                )}
              </div>

              {/* Drawer dettaglio sessione */}
              <SessionDrawer
                session={drawerSession}
                property={property}
                open={!!drawerSessionId}
                onClose={() => { setDrawerSessionId(null); setGeneratedCheckinLinks({}); }}
                onApprove={sid => { approveSession(sid); setDrawerSessionId(null); }}
                onReject={sid => { rejectSession(sid); setDrawerSessionId(null); }}
                onRevoke={sid => { revokeSession(sid); setDrawerSessionId(null); }}
                onDownloadForm={(sid, guestName) => downloadCheckinForm(sid, guestName)}
                onOpenSchedina={sid => openSchedina(sid)}
                onRegenerateLink={sid => regenerateCheckinLink(sid)}
                generatedCheckinLinks={generatedCheckinLinks}
              />
            </div>
          );
        })()}

        {/* CHAT TEST TAB */}
        {tab === "chat" && (
          <div className="stack-16">
            <div className="card card-pad" style={{ background: "var(--surface-info-soft)", borderColor: "var(--border-subtle)" }}>
              <div style={{ fontSize: 13, color: "var(--color-egeo)" }}>
                Simula una conversazione ospite usando RAG + Gemini. Le risposte si basano sulle informazioni e i documenti indicizzati per questa struttura.
              </div>
            </div>

            <div className="card" style={{ padding: 0, overflow: "hidden", display: "flex", flexDirection: "column", minHeight: 420 }}>
              <div style={{ flex: 1, overflowY: "auto", padding: "20px", display: "flex", flexDirection: "column", gap: 12 }}>
                {chatMessages.length === 0 && (
                  <div style={{ textAlign: "center", color: "var(--text-muted)", fontSize: 13, padding: "40px 0" }}>
                    Scrivi un messaggio per testare il chatbot
                  </div>
                )}
                {chatMessages.map((m, i) => (
                  <div key={i} style={{ display: "flex", justifyContent: m.role === "user" ? "flex-end" : "flex-start" }}>
                    <div style={{
                      maxWidth: "75%",
                      padding: "10px 14px",
                      borderRadius: m.role === "user" ? "16px 16px 4px 16px" : "16px 16px 16px 4px",
                      background: m.role === "user" ? "var(--color-terracotta)" : "var(--color-avorio-warm)",
                      color: m.role === "user" ? "var(--color-avorio)" : "var(--color-egeo)",
                      fontSize: 14,
                      lineHeight: 1.5,
                      whiteSpace: "pre-wrap",
                    }}>
                      {m.content}
                    </div>
                  </div>
                ))}
                {chatLoading && (
                  <div style={{ display: "flex", justifyContent: "flex-start" }}>
                    <div style={{ padding: "10px 14px", borderRadius: "16px 16px 16px 4px", background: "var(--color-avorio-warm)", fontSize: 13, color: "var(--text-muted)" }}>
                      …
                    </div>
                  </div>
                )}
              </div>

              <div style={{ borderTop: "1px solid var(--border-subtle)", padding: "14px 16px", display: "flex", gap: 10 }}>
                <input
                  className="input"
                  style={{ flex: 1 }}
                  placeholder="Scrivi un messaggio come ospite…"
                  value={chatInput}
                  onChange={e => setChatInput(e.target.value)}
                  onKeyDown={e => { if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); sendTestMessage(); } }}
                  disabled={chatLoading}
                />
                <button className="btn btn-primary" onClick={sendTestMessage} disabled={chatLoading || !chatInput.trim()}>
                  Invia
                </button>
                {chatMessages.length > 0 && (
                  <button className="btn btn-ghost btn-sm" style={{ color: "var(--text-muted)" }} onClick={() => setChatMessages([])}>
                    Reset
                  </button>
                )}
              </div>
            </div>
          </div>
        )}
      </div>

      {/* QR Modal */}
      {editOpen && (
        <div className="modal-overlay" onClick={() => setEditOpen(false)}>
          <div className="modal" style={{ maxWidth: 500, padding: 28 }} onClick={e => e.stopPropagation()}>
            <div className="between" style={{ marginBottom: 20 }}>
              <h2 className="h2">Modifica struttura</h2>
              <button className="btn btn-ghost" style={{ padding: 6 }} type="button" onClick={() => setEditOpen(false)}>
                <I.x style={{ width: 16, height: 16 }} />
              </button>
            </div>
            <div className="stack-16">
              <div>
                <label className="field-label">Nome <span style={{ color: "var(--color-danger)" }}>*</span></label>
                <input className="input" value={editName} onChange={e => setEditName(e.target.value)} />
              </div>
              <div>
                <label className="field-label">Indirizzo</label>
                <input className="input" value={editAddress} onChange={e => setEditAddress(e.target.value)} />
              </div>
              <div>
                <label className="field-label">Comune</label>
                <input className="input" value={editComune} onChange={e => setEditComune(e.target.value)}
                  placeholder="Es. Venezia" style={{ maxWidth: 280 }} />
              </div>
              <div>
                <label className="field-label">Numero di camere</label>
                <input className="input" type="number" min="1" max="99" value={editRooms}
                  onChange={e => setEditRooms(e.target.value)} style={{ maxWidth: 120 }} />
              </div>
              <div>
                <label className="field-label">Foto</label>
                <input ref={editPhotoRef} type="file" accept="image/jpeg,image/png,image/webp"
                  style={{ display: "none" }}
                  onChange={e => {
                    const f = e.target.files[0];
                    if (f) _setPhotoFromFile(f);
                    e.target.value = "";
                  }} />
                {editPhotoPreview ? (
                  <div style={{ position: "relative" }}>
                    <img src={editPhotoPreview} alt="preview"
                      style={{ width: "100%", height: 150, objectFit: "cover", borderRadius: "var(--radius-sm)", display: "block" }} />
                    <button type="button" className="btn btn-secondary btn-sm"
                      style={{ position: "absolute", top: 8, right: 8 }}
                      onClick={() => _setPhotoFromFile(null)}>
                      <I.x style={{ width: 12, height: 12 }} /> Rimuovi
                    </button>
                  </div>
                ) : (
                  <div onClick={() => editPhotoRef.current?.click()}
                    style={{ border: "2px dashed var(--border-subtle)", borderRadius: "var(--radius-sm)", padding: "20px", textAlign: "center", cursor: "pointer", background: "var(--color-avorio)" }}>
                    <I.upload style={{ width: 20, height: 20, color: "var(--text-muted)", margin: "0 auto 6px", display: "block" }} />
                    <div style={{ fontSize: 13, color: "var(--color-egeo-muted)" }}>Carica nuova foto</div>
                  </div>
                )}
              </div>
            </div>
            <div style={{ display: "flex", gap: 8, marginTop: 24, justifyContent: "flex-end" }}>
              <button className="btn btn-secondary" type="button" onClick={() => setEditOpen(false)}>Annulla</button>
              <button className="btn btn-primary" type="button" onClick={saveEdit}
                disabled={editSaving || !editName.trim()}>
                {editSaving ? "Salvataggio…" : "Salva modifiche"}
              </button>
            </div>
          </div>
        </div>
      )}

      {/* Modal eliminazione struttura */}
      <Modal open={deleteStep !== null} onClose={() => { setDeleteStep(null); setDeleteCode(""); }}>
        {deleteStep === "confirm" && (
          <div>
            <h2 className="h2" style={{ marginBottom: 8 }}>Elimina struttura</h2>
            <p className="muted" style={{ marginBottom: 20 }}>
              Stai per eliminare <strong>{property.name}</strong> e tutti i dati associati (sessioni, documenti, knowledge base).
              Riceverai un codice via email per confermare.
            </p>
            <div style={{ display: "flex", gap: 8, justifyContent: "flex-end" }}>
              <button className="btn btn-secondary" onClick={() => setDeleteStep(null)}>Annulla</button>
              <button className="btn btn-danger" onClick={requestDelete} disabled={deleteLoading}>
                {deleteLoading ? "Invio…" : "Invia codice di conferma"}
              </button>
            </div>
          </div>
        )}
        {deleteStep === "code" && (
          <div>
            <h2 className="h2" style={{ marginBottom: 8 }}>Inserisci il codice</h2>
            <p className="muted" style={{ marginBottom: 20 }}>
              Abbiamo inviato un codice a 6 cifre a <strong>{host?.email || "alla tua email"}</strong>. Inseriscilo qui per confermare l'eliminazione.
            </p>
            <input
              className="input"
              type="text"
              inputMode="numeric"
              maxLength={6}
              placeholder="000000"
              value={deleteCode}
              onChange={e => setDeleteCode(e.target.value.replace(/\D/g, "").slice(0, 6))}
              style={{ fontSize: 24, letterSpacing: 8, textAlign: "center", marginBottom: 20 }}
              autoFocus
            />
            <div style={{ display: "flex", gap: 8, justifyContent: "flex-end" }}>
              <button className="btn btn-secondary" onClick={() => { setDeleteStep(null); setDeleteCode(""); }}>Annulla</button>
              <button className="btn btn-danger" onClick={confirmDelete}
                disabled={deleteLoading || deleteCode.length !== 6}>
                {deleteLoading ? "Eliminazione…" : "Conferma eliminazione"}
              </button>
            </div>
          </div>
        )}
      </Modal>

      <Modal open={qrOpen} onClose={() => setQrOpen(false)}>
        <div style={{ textAlign: "center" }}>
          <div style={{ display: "inline-flex", alignItems: "center", gap: 6, padding: "4px 10px",
            background: "var(--surface-info-soft)", color: "var(--color-terracotta)", borderRadius: 999, fontSize: 12, fontWeight: 500, marginBottom: 16 }}>
            <I.whatsapp style={{ width: 13, height: 13 }} />
            Link WhatsApp
          </div>
          <h2 className="h2" style={{ marginBottom: 4 }}>QR Code · {property.name}</h2>
          <p className="muted" style={{ fontSize: 13, margin: "0 0 20px" }}>
            Stampa questo QR e mettilo in casa. Gli ospiti lo scansionano per parlare col chatbot.
          </p>
          <div style={{ display: "flex", justifyContent: "center", margin: "0 0 20px" }}>
            <div style={{ padding: 12, background: "white", border: "1px solid var(--border-subtle)", borderRadius: "var(--radius-md)" }}>
              <QRCode size={200} label={property.id} />
            </div>
          </div>
          <div style={{ display: "flex", gap: 8 }}>
            <button className="btn btn-secondary" style={{ flex: 1 }} onClick={() => setQrOpen(false)}>Chiudi</button>
            <button className="btn btn-primary" style={{ flex: 1 }} onClick={downloadQr}>
              <I.download style={{ width: 14, height: 14 }} />
              Scarica PNG
            </button>
          </div>
        </div>
      </Modal>
    </div>
  );
}

window.PropertyDetailPage = PropertyDetailPage;