// Simple placeholder pages for Properties list, Subscription, Settings

function PropertyCard({ p, onOpenProperty }) {
  const activeCount = p.sessions.filter(s => s.status === "active").length;
  const pendingCount = p.sessions.filter(s => s.status === "pending").length;
  return (
    <div className="prop-card" onClick={() => onOpenProperty(p.id)}>
      <div className="prop-thumb">
        {p.photo_url
          ? <img src={p.photo_url} alt={p.name} style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
          : p.name}
      </div>
      <div style={{ padding: "16px 18px" }}>
        <div style={{ fontWeight: 600, color: "var(--gray-900)", fontSize: 15 }}>{p.name}</div>
        <div className="mini" style={{ marginTop: 5, display: "flex", alignItems: "center", gap: 4 }}>
          <I.pin style={{ width: 11, height: 11 }} />
          <span style={{ whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{p.address || p.city}</span>
        </div>
        <div className="mini" style={{ marginTop: 3, display: "flex", alignItems: "center", gap: 4, color: "var(--gray-500)" }}>
          <I.door style={{ width: 11, height: 11 }} />
          {p.rooms != null ? `${p.rooms} ${p.rooms === 1 ? "camera" : "camere"}` : ""}
        </div>
        <div style={{ display: "flex", gap: 6, marginTop: 12, flexWrap: "wrap" }}>
          {activeCount > 0 && (
            <span className="badge badge-active" style={{ fontSize: 11 }}>
              {activeCount} chat attiv{activeCount === 1 ? "a" : "e"}
            </span>
          )}
          {pendingCount > 0 && (
            <span className="badge badge-pending" style={{ fontSize: 11 }}>
              {pendingCount} in attesa
            </span>
          )}
          {activeCount === 0 && pendingCount === 0 && (
            <span className="badge badge-plain" style={{ fontSize: 11 }}>Nessuna sessione</span>
          )}
        </div>
      </div>
    </div>
  );
}

function PropertiesListPage({ state, onOpenProperty, onNewProperty }) {
  return (
    <div className="page stack-24">
      <div className="between">
        <div>
          <h1 className="h1">Le mie strutture</h1>
          <p className="muted" style={{ margin: "6px 0 0" }}>
            {state.properties.length} strutture · {state.properties.reduce((a, p) => a + p.sessions.length, 0)} sessioni totali
          </p>
        </div>
        <button className="btn btn-primary" onClick={onNewProperty}>
          <I.plus style={{ width: 16, height: 16 }} />
          Nuova struttura
        </button>
      </div>

      <div className="prop-grid">
        {state.properties.map(p => (
          <PropertyCard key={p.id} p={p} onOpenProperty={onOpenProperty} />
        ))}

        {/* Add new card */}
        <div
          className="prop-card"
          style={{ display: "flex", alignItems: "center", justifyContent: "center", minHeight: 240, borderStyle: "dashed", background: "var(--gray-25)", cursor: "pointer" }}
          onClick={onNewProperty}
        >
          <div style={{ textAlign: "center", color: "var(--gray-500)" }}>
            <I.plus style={{ width: 22, height: 22, margin: "0 auto 6px", display: "block" }} />
            <div style={{ fontSize: 14, fontWeight: 500 }}>Aggiungi struttura</div>
          </div>
        </div>
      </div>
    </div>
  );
}

window.PropertyCard = PropertyCard;

// Sconto annuale — deve corrispondere a ANNUAL_DISCOUNT in stripe_service.py
const SUB_ANNUAL_DISCOUNT = 0.90;
const SUB_PLANS_META = [
  { id: "starter",  name: "Starter",  monthlyPrice: 19, properties: "4 strutture",
    features: ["Chatbot WhatsApp/Telegram", "30 messaggi/giorno per camera", "Documenti PDF", "QR Code", "Supporto email"] },
  { id: "pro",      name: "Pro",      monthlyPrice: 39, properties: "fino a 10 strutture",
    features: ["Tutto di Starter", "100 messaggi/giorno per camera", "Check-in digitale OCR", "Supporto prioritario"] },
  { id: "business", name: "Business", monthlyPrice: 79, properties: "fino a 20 strutture",
    features: ["Tutto di Pro", "150 messaggi/giorno per camera", "API access", "Account manager dedicato"] },
];

function SubscriptionPage({ host, showToast }) {
  const [tab, setTab] = React.useState("plan");
  const [invoices, setInvoices] = React.useState([]);
  const [loadingInv, setLoadingInv] = React.useState(false);
  const [downloadingId, setDownloadingId] = React.useState(null);
  const [billingStatus, setBillingStatus] = React.useState(null);
  const [portalLoading, setPortalLoading] = React.useState(false);
  const [interval, setInterval] = React.useState("monthly");
  const [checkoutPlan, setCheckoutPlan] = React.useState(null);

  React.useEffect(() => {
    window.API.getBillingStatus().then(setBillingStatus).catch(() => {});
  }, []);

  const handlePortal = async () => {
    setPortalLoading(true);
    try {
      const { url } = await window.API.createPortal();
      window.location.href = url;
    } catch (err) {
      if (showToast) showToast(err.message || "Errore", "error");
      setPortalLoading(false);
    }
  };

  const isCustomPlan = billingStatus?.plan_type === "custom";
  const billingLoaded = billingStatus !== null;

  const currentPlan = (host?.plan || "starter").toLowerCase();
  const currentMeta = SUB_PLANS_META.find(p => p.id === currentPlan) || SUB_PLANS_META[0];

  const statusLabel = {
    active:     { text: "Attivo",                cls: "badge-green" },
    trialing:   { text: "Trial",                 cls: "badge-blue" },
    past_due:   { text: "Pagamento in sospeso",  cls: "badge-amber" },
    canceled:   { text: "Cancellato",            cls: "badge-red" },
    incomplete: { text: "Incompleto",            cls: "badge-gray" },
  };
  const subStatus = billingStatus?.subscription_status;
  const statusInfo = statusLabel[subStatus] || null;

  const loadInvoices = async () => {
    setLoadingInv(true);
    try {
      const data = await window.API.listInvoices();
      setInvoices(data);
    } catch (err) {
      if (showToast) showToast(err.message || "Errore caricamento fatture", "error");
    } finally {
      setLoadingInv(false);
    }
  };

  React.useEffect(() => {
    if (tab === "invoices" || isCustomPlan) loadInvoices();
  }, [tab, isCustomPlan]);

  const handleDownload = async (inv) => {
    setDownloadingId(inv.id);
    try {
      await window.API.downloadInvoice(inv.id, inv.filename);
    } catch (err) {
      if (showToast) showToast(err.message || "Errore download", "error");
    } finally {
      setDownloadingId(null);
    }
  };

  const fmtPeriod = (p) => {
    if (!p) return "n.d.";
    const [y, m] = p.split("-");
    const months = ["Gen","Feb","Mar","Apr","Mag","Giu","Lug","Ago","Set","Ott","Nov","Dic"];
    return `${months[parseInt(m, 10) - 1]} ${y}`;
  };

  const fmtAmount = (a) => a != null ? `€${parseFloat(a).toFixed(2).replace(".", ",")}` : "n.d.";

  const fmtMonthly = (mp) => interval === "monthly"
    ? `€${mp}`
    : `€${(mp * SUB_ANNUAL_DISCOUNT).toFixed(2).replace(".00", "")}`;

  const annualSaving = (mp) => Math.round(mp * 12 * (1 - SUB_ANNUAL_DISCOUNT));

  if (!billingLoaded) {
    return (
      <div className="page stack-24">
        <div>
          <h1 className="h1">Abbonamento</h1>
        </div>
        <div className="card card-pad" style={{ textAlign: "center", color: "var(--gray-400)", fontSize: 14 }}>
          Caricamento…
        </div>
      </div>
    );
  }

  if (isCustomPlan) {
    const priceMonthly = billingStatus?.price_monthly_eur;
    const priceYearly = billingStatus?.price_yearly_eur;
    const propertyLimit = billingStatus?.property_limit;
    const dailyMsgLimit = billingStatus?.daily_msg_limit;
    const subStatus = billingStatus?.subscription_status;
    const hasSubscription = billingStatus?.has_subscription;
    const customStatusLabel = {
      active:     { text: "Attivo",               cls: "badge-green" },
      trialing:   { text: "Trial",                cls: "badge-blue" },
      past_due:   { text: "Pagamento in sospeso", cls: "badge-amber" },
      canceled:   { text: "Cancellato",           cls: "badge-red" },
      incomplete: { text: "Incompleto",           cls: "badge-gray" },
    };
    const customStatusInfo = customStatusLabel[subStatus] || null;

    return (
      <div className="page stack-24">
        <div>
          <h1 className="h1">Abbonamento</h1>
          <p className="muted" style={{ margin: "6px 0 0" }}>Piano personalizzato gestito dall'assistenza.</p>
        </div>

        <div className="card card-pad stack-16">
          <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 4 }}>
            <span style={{ fontSize: 22, fontWeight: 600, letterSpacing: "-0.02em" }}>
              {billingStatus?.plan_display_name || "Piano custom"}
            </span>
            {customStatusInfo && hasSubscription && (
              <span className={`badge ${customStatusInfo.cls}`}>{customStatusInfo.text}</span>
            )}
          </div>
          <div className="muted" style={{ fontSize: 13 }}>
            {priceMonthly != null
              ? `€${priceMonthly.toFixed(2).replace(".00", "")}/mese`
              : "Fatturazione personalizzata"}
          </div>
          <ul style={{ listStyle: "none", padding: 0, margin: "8px 0 0", display: "flex", flexDirection: "column", gap: 6 }}>
            <li style={{ display: "flex", gap: 8, fontSize: 13, color: "var(--gray-700)" }}>
              <I.check style={{ width: 14, height: 14, color: "var(--green-600)", flexShrink: 0, marginTop: 2 }} />
              {propertyLimit != null ? `${propertyLimit} camere` : "Camere illimitate"}
            </li>
            {dailyMsgLimit != null && (
              <li style={{ display: "flex", gap: 8, fontSize: 13, color: "var(--gray-700)" }}>
                <I.check style={{ width: 14, height: 14, color: "var(--green-600)", flexShrink: 0, marginTop: 2 }} />
                {`${dailyMsgLimit} messaggi/giorno`}
              </li>
            )}
          </ul>
        </div>

        <div>
          <h2 className="h2" style={{ marginBottom: 12 }}>Fatture</h2>
          <div className="card" style={{ padding: 0, overflow: "hidden" }}>
            {loadingInv ? (
              <div style={{ padding: "32px 24px", textAlign: "center", color: "var(--gray-400)", fontSize: 14 }}>
                Caricamento fatture…
              </div>
            ) : invoices.length === 0 ? (
              <div style={{ padding: "40px 24px", textAlign: "center", color: "var(--gray-500)" }}>
                <div style={{ fontSize: 14 }}>Nessuna fattura disponibile</div>
                <div className="mini" style={{ marginTop: 4 }}>Le fatture appariranno qui non appena emesse</div>
              </div>
            ) : (
              <div className="table-wrap">
                <table className="table">
                  <thead>
                    <tr>
                      <th>Fattura</th>
                      <th>Periodo</th>
                      <th>Importo</th>
                      <th>Data emissione</th>
                      <th style={{ textAlign: "right" }}></th>
                    </tr>
                  </thead>
                  <tbody>
                    {invoices.map(inv => (
                      <tr key={inv.id}>
                        <td style={{ fontWeight: 500 }}>{inv.filename}</td>
                        <td>{fmtPeriod(inv.period)}</td>
                        <td style={{ fontFamily: "ui-monospace, monospace", fontSize: 13 }}>{fmtAmount(inv.amount)}</td>
                        <td className="mini" style={{ color: "var(--gray-500)" }}>
                          {inv.issued_at ? new Date(inv.issued_at).toLocaleDateString("it-IT", { day: "2-digit", month: "short", year: "numeric" }) : "n.d."}
                        </td>
                        <td style={{ textAlign: "right" }}>
                          <button
                            className="btn btn-secondary btn-sm"
                            onClick={() => handleDownload(inv)}
                            disabled={downloadingId === inv.id}
                          >
                            {downloadingId === inv.id ? "Scaricando…" : "Scarica PDF"}
                          </button>
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            )}
          </div>
        </div>

        <p className="muted" style={{ fontSize: 13 }}>
          Per modifiche al piano o al metodo di pagamento, contatta l'assistenza.
        </p>
      </div>
    );
  }

  return (
    <div className="page stack-24">
      <div>
        <h1 className="h1">Abbonamento</h1>
        <p className="muted" style={{ margin: "6px 0 0" }}>Gestisci il tuo piano e le fatture.</p>
      </div>

      {/* Banner pagamento in sospeso */}
      {subStatus === "past_due" && (
        <div style={{ background: "var(--amber-50)", border: "1px solid var(--amber-200)", borderRadius: 8, padding: "12px 16px", fontSize: 13, color: "var(--amber-700)" }}>
          ⚠️ Il pagamento dell'abbonamento non è andato a buon fine. Aggiorna il metodo di pagamento per evitare interruzioni.
        </div>
      )}

      {/* Card stato abbonamento */}
      <div className="card card-pad">
        <div className="between">
          <div>
            <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 4 }}>
              <span style={{ fontSize: 22, fontWeight: 600, letterSpacing: "-0.02em" }}>
                Piano {currentMeta.name}
              </span>
              {statusInfo
                ? <span className={`badge ${statusInfo.cls}`}>{statusInfo.text}</span>
                : billingStatus && !billingStatus.has_subscription
                  ? <span className="badge badge-gray">Nessun abbonamento</span>
                  : null}
            </div>
            <div className="muted" style={{ fontSize: 13 }}>€{currentMeta.monthlyPrice}/mese</div>
          </div>
          {billingStatus?.has_subscription && (
            <button className="btn btn-secondary btn-sm" onClick={handlePortal} disabled={portalLoading}>
              {portalLoading ? "Reindirizzamento…" : "Gestisci abbonamento"}
            </button>
          )}
        </div>
      </div>

      {/* Tab switcher */}
      <div style={{ display: "flex", gap: 4, borderBottom: "1px solid var(--gray-200)", paddingBottom: 0 }}>
        {[["plan", "Piano"], ["invoices", "Fatture"]].map(([id, label]) => (
          <button key={id} onClick={() => { setTab(id); setCheckoutPlan(null); }}
            style={{
              background: "none", border: "none", cursor: "pointer",
              padding: "8px 16px", fontSize: 14, fontWeight: tab === id ? 600 : 400,
              color: tab === id ? "var(--gray-900)" : "var(--gray-500)",
              borderBottom: tab === id ? "2px solid var(--green-600)" : "2px solid transparent",
              marginBottom: -1,
            }}>
            {label}
          </button>
        ))}
      </div>

      {tab === "plan" && (
        <div>
          <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 16 }}>
            <h2 className="h2" style={{ margin: 0 }}>Cambia piano</h2>
            {/* Toggle mensile / annuale */}
            <div style={{ display: "flex", alignItems: "center", gap: 8,
              background: "var(--gray-100)", borderRadius: 99, padding: "3px 4px" }}>
              {["monthly", "yearly"].map(iv => (
                <button key={iv} onClick={() => { setInterval(iv); setCheckoutPlan(null); }}
                  style={{
                    padding: "5px 14px", borderRadius: 99, border: "none", cursor: "pointer",
                    fontSize: 12, fontWeight: 500,
                    background: interval === iv ? "white" : "transparent",
                    color: interval === iv ? "var(--gray-900)" : "var(--gray-500)",
                    boxShadow: interval === iv ? "0 1px 4px rgba(0,0,0,.1)" : "none",
                    transition: "all .15s",
                  }}>
                  {iv === "monthly" ? "Mensile" : (
                    <span>Annuale <span style={{ color: "var(--green-700)", fontWeight: 600 }}>−10%</span></span>
                  )}
                </button>
              ))}
            </div>
          </div>

          {/* Layout: plan cards + checkout panel — responsive via classe CSS */}
          <div className="subscription-layout">
            <div className="plans-grid subscription-plans">
              {SUB_PLANS_META.map(p => {
                const isCurrent = p.id === currentPlan;
                const isSelected = checkoutPlan === p.id;
                return (
                  <div key={p.id} className="card card-pad" style={{
                    borderColor: isSelected ? "var(--green-500)" : isCurrent ? "var(--green-500)" : "var(--gray-200)",
                    boxShadow: isSelected || isCurrent ? "0 0 0 3px rgba(34,197,94,0.12)" : "var(--shadow-sm)",
                    position: "relative", cursor: isCurrent ? "default" : "pointer",
                  }} onClick={() => { if (!isCurrent) setCheckoutPlan(p.id); }}>
                    {isCurrent && (
                      <div style={{ position: "absolute", top: -10, left: 20, background: "var(--green-600)", color: "white", padding: "2px 10px", borderRadius: 999, fontSize: 11, fontWeight: 600 }}>
                        Attuale
                      </div>
                    )}
                    <div style={{ fontSize: 15, fontWeight: 600 }}>{p.name}</div>
                    <div style={{ margin: "10px 0 2px" }}>
                      <span style={{ fontSize: 28, fontWeight: 600, letterSpacing: "-0.02em" }}>{fmtMonthly(p.monthlyPrice)}</span>
                      <span className="muted" style={{ fontSize: 13 }}>/mese</span>
                    </div>
                    {interval === "yearly" && (
                      <div style={{ fontSize: 11, color: "var(--green-700)", fontWeight: 600, marginBottom: 4 }}>
                        Risparmi €{annualSaving(p.monthlyPrice)}/anno
                      </div>
                    )}
                    <div className="mini" style={{ marginBottom: 12 }}>{p.properties}</div>
                    <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 6 }}>
                      {p.features.map((f, i) => (
                        <li key={i} style={{ display: "flex", gap: 8, fontSize: 13, color: "var(--gray-700)" }}>
                          <I.check style={{ width: 14, height: 14, color: "var(--green-600)", flexShrink: 0, marginTop: 2 }} />
                          {f}
                        </li>
                      ))}
                    </ul>
                    {!isCurrent && (
                      <button
                        className={`btn ${isSelected ? "btn-secondary" : "btn-primary"}`}
                        style={{ width: "100%", marginTop: 16 }}
                        onClick={(e) => { e.stopPropagation(); setCheckoutPlan(p.id); }}
                      >
                        {isSelected ? "Selezionato ✓" : `Passa a ${p.name}`}
                      </button>
                    )}
                    {isCurrent && (
                      <button className="btn btn-secondary" style={{ width: "100%", marginTop: 16 }} disabled>
                        Piano attuale
                      </button>
                    )}
                  </div>
                );
              })}
            </div>

            {/* Pannello checkout embedded */}
            <div className="subscription-checkout" style={{
              background: "white", borderRadius: 12,
              boxShadow: "0 2px 12px rgba(0,0,0,.06)", overflow: "hidden",
              opacity: checkoutPlan ? 1 : 0,
              transform: checkoutPlan ? "translateX(0)" : "translateX(16px)",
              transition: "opacity .2s, transform .2s",
              pointerEvents: checkoutPlan ? "auto" : "none",
              minHeight: 300,
            }}>
              {checkoutPlan && (
                <>
                  <div style={{ padding: "14px 18px", borderBottom: "1px solid var(--gray-100)", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                    <div style={{ fontSize: 13, fontWeight: 600, color: "var(--gray-700)" }}>
                      Piano {SUB_PLANS_META.find(p => p.id === checkoutPlan)?.name} · {interval === "monthly" ? "mensile" : "annuale"}
                    </div>
                    <button onClick={() => setCheckoutPlan(null)} style={{ background: "none", border: "none", cursor: "pointer", color: "var(--gray-400)", fontSize: 18, lineHeight: 1 }}>×</button>
                  </div>
                  <div style={{ padding: 4 }}>
                    <EmbeddedCheckout planId={checkoutPlan} interval={interval} />
                  </div>
                </>
              )}
            </div>
          </div>
        </div>
      )}

      {tab === "invoices" && (
        <div>
          <div className="card" style={{ padding: 0, overflow: "hidden" }}>
            {loadingInv ? (
              <div style={{ padding: "32px 24px", textAlign: "center", color: "var(--gray-400)", fontSize: 14 }}>
                Caricamento fatture…
              </div>
            ) : invoices.length === 0 ? (
              <div style={{ padding: "40px 24px", textAlign: "center", color: "var(--gray-500)" }}>
                <div style={{ fontSize: 14 }}>Nessuna fattura disponibile</div>
                <div className="mini" style={{ marginTop: 4 }}>Le fatture appariranno qui non appena emesse</div>
              </div>
            ) : (
              <div className="table-wrap">
                <table className="table">
                  <thead>
                    <tr>
                      <th>Fattura</th>
                      <th>Periodo</th>
                      <th>Importo</th>
                      <th>Data emissione</th>
                      <th style={{ textAlign: "right" }}></th>
                    </tr>
                  </thead>
                  <tbody>
                    {invoices.map(inv => (
                      <tr key={inv.id}>
                        <td style={{ fontWeight: 500 }}>{inv.filename}</td>
                        <td>{fmtPeriod(inv.period)}</td>
                        <td style={{ fontFamily: "ui-monospace, monospace", fontSize: 13 }}>{fmtAmount(inv.amount)}</td>
                        <td className="mini" style={{ color: "var(--gray-500)" }}>
                          {inv.issued_at ? new Date(inv.issued_at).toLocaleDateString("it-IT", { day: "2-digit", month: "short", year: "numeric" }) : "n.d."}
                        </td>
                        <td style={{ textAlign: "right" }}>
                          <button
                            className="btn btn-secondary btn-sm"
                            onClick={() => handleDownload(inv)}
                            disabled={downloadingId === inv.id}
                          >
                            {downloadingId === inv.id ? "Scaricando…" : "Scarica PDF"}
                          </button>
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            )}
          </div>
        </div>
      )}
    </div>
  );
}

function SettingsPage({ host, showToast, onHostUpdated }) {
  const [fullName, setFullName] = React.useState(host?.full_name || "");
  const [phone, setPhone] = React.useState(host?.phone_number || "");
  const [saving, setSaving] = React.useState(false);

  // Impostazione invio automatico schedine PayTourist
  const [autoSubmit, setAutoSubmit] = React.useState(host?.paytourist_auto_submit ?? false);
  React.useEffect(() => {
    setAutoSubmit(host?.paytourist_auto_submit ?? false);
  }, [host?.paytourist_auto_submit]);

  // Approvazione automatica degli ospiti (piani chatbot)
  const [autoApprove, setAutoApprove] = React.useState(host?.auto_approve_sessions ?? false);
  React.useEffect(() => {
    setAutoApprove(host?.auto_approve_sessions ?? false);
  }, [host?.auto_approve_sessions]);

  React.useEffect(() => {
    setFullName(host?.full_name || "");
    setPhone(host?.phone_number || "");
  }, [host?.full_name, host?.phone_number]);

  const [currentPw, setCurrentPw] = React.useState("");
  const [newPw, setNewPw] = React.useState("");
  const [confirmPw, setConfirmPw] = React.useState("");
  const [pwError, setPwError] = React.useState("");
  const [savingPw, setSavingPw] = React.useState(false);

  const save = async () => {
    setSaving(true);
    try {
      const updated = await window.API.updateHost({ full_name: fullName.trim() || null, phone_number: phone.trim() || null });
      if (updated && onHostUpdated) onHostUpdated(updated);
      if (showToast) showToast("Profilo aggiornato");
    } catch (err) {
      if (showToast) showToast(err.message || "Errore", "error");
    } finally {
      setSaving(false);
    }
  };

  const changePassword = async () => {
    setPwError("");
    if (newPw !== confirmPw) { setPwError("Le password non coincidono."); return; }
    if (newPw.length < 8) { setPwError("La nuova password deve essere di almeno 8 caratteri."); return; }
    setSavingPw(true);
    try {
      await window.API.changePassword(currentPw, newPw);
      setCurrentPw(""); setNewPw(""); setConfirmPw("");
      if (showToast) showToast("Password aggiornata");
    } catch (err) {
      setPwError(err.message || "Errore");
    } finally {
      setSavingPw(false);
    }
  };

  const toggleAutoApprove = async () => {
    const newValue = !autoApprove;
    setAutoApprove(newValue); // ottimistico
    try {
      const updated = await window.API.updateHost({ auto_approve_sessions: newValue });
      if (updated && onHostUpdated) onHostUpdated(updated);
    } catch (err) {
      setAutoApprove(!newValue); // ripristina in caso di errore
      if (showToast) showToast(err.message || "Errore aggiornamento impostazione", "error");
    }
  };

  const toggleAutoSubmit = async () => {
    const newValue = !autoSubmit;
    setAutoSubmit(newValue); // ottimistico
    try {
      const updated = await window.API.updateHost({ paytourist_auto_submit: newValue });
      if (updated && onHostUpdated) onHostUpdated(updated);
    } catch (err) {
      setAutoSubmit(!newValue); // ripristina in caso di errore
      if (showToast) showToast(err.message || "Errore aggiornamento impostazione", "error");
    }
  };

  return (
    <div className="page stack-24">
      <div>
        <h1 className="h1">Impostazioni</h1>
        <p className="muted" style={{ margin: "6px 0 0" }}>Profilo, notifiche e preferenze.</p>
      </div>


      <div className="settings-cards-grid">
        <div className="card card-pad stack-16">
          <h2 className="h2">Profilo</h2>
          <div>
            <label className="field-label">Nome e cognome</label>
            <input className="input" value={fullName} onChange={e => setFullName(e.target.value)} />
          </div>
          <div>
            <label className="field-label">Email</label>
            <input className="input" value={host?.email || ""} readOnly
              style={{ background: "var(--gray-50)", color: "var(--gray-500)" }} />
          </div>
          <div>
            <label className="field-label">Numero di telefono (per notifiche WhatsApp)</label>
            <input className="input" value={phone} onChange={e => setPhone(e.target.value)}
              placeholder="+39 333 1234567" />
          </div>
          <div style={{ display: "flex", justifyContent: "flex-end", paddingTop: 8 }}>
            <button className="btn btn-primary" onClick={save} disabled={saving}>
              {saving ? "Salvataggio…" : "Salva modifiche"}
            </button>
          </div>
        </div>

        <div className="card card-pad stack-16">
          <h2 className="h2">Modifica password</h2>
          <div>
            <label className="field-label">Password attuale</label>
            <input className="input" type="password" value={currentPw} onChange={e => setCurrentPw(e.target.value)} autoComplete="current-password" />
          </div>
          <div>
            <label className="field-label">Nuova password</label>
            <input className="input" type="password" value={newPw} onChange={e => setNewPw(e.target.value)} autoComplete="new-password" />
          </div>
          <div>
            <label className="field-label">Conferma nuova password</label>
            <input className="input" type="password" value={confirmPw} onChange={e => setConfirmPw(e.target.value)} autoComplete="new-password" />
          </div>
          {pwError && <div style={{ fontSize: 13, color: "var(--red-600)" }}>{pwError}</div>}
          <div style={{ display: "flex", justifyContent: "flex-end", paddingTop: 8 }}>
            <button className="btn btn-primary" onClick={changePassword} disabled={savingPw || !currentPw || !newPw || !confirmPw}>
              {savingPw ? "Salvataggio…" : "Aggiorna password"}
            </button>
          </div>
        </div>

        <div className="card card-pad stack-16">
          <h2 className="h2">Notifiche</h2>
          {[
            { label: "Email per nuove richieste di accesso", on: true },
            { label: "Email per recensioni degli ospiti", on: true },
            { label: "Riepilogo settimanale", on: false },
          ].map((n, i) => (
            <div key={i} className="between" style={{ padding: "6px 0", borderBottom: i < 2 ? "1px solid var(--gray-100)" : "none" }}>
              <div style={{ fontSize: 14 }}>{n.label}</div>
              <div style={{ width: 36, height: 20, borderRadius: 999, background: n.on ? "var(--green-600)" : "var(--gray-300)", position: "relative", cursor: "pointer" }}>
                <div style={{ position: "absolute", top: 2, left: n.on ? 18 : 2, width: 16, height: 16, borderRadius: "50%", background: "white", transition: "left 0.2s" }} />
              </div>
            </div>
          ))}
        </div>

        {["starter", "pro", "business"].includes(host?.plan) && (
          <div className="card card-pad stack-16">
            <h2 className="h2">Approvazione ospiti</h2>
            <div className="between" style={{ padding: "6px 0" }}>
              <div>
                <div style={{ fontSize: 14, fontWeight: 500 }}>
                  Approvazione automatica degli ospiti
                </div>
                <div className="muted" style={{ fontSize: 13, marginTop: 4 }}>
                  {autoApprove
                    ? "Attiva — gli ospiti che scansionano il QR accedono subito al chatbot senza la tua approvazione e non ricevi l'email di richiesta accesso."
                    : "Disattivata — ogni ospite che scansiona il QR resta in attesa finché non approvi la richiesta dal link ricevuto via email."}
                </div>
              </div>
              <div
                role="switch"
                aria-checked={autoApprove}
                onClick={toggleAutoApprove}
                style={{
                  flexShrink: 0,
                  marginLeft: 16,
                  width: 36,
                  height: 20,
                  borderRadius: 999,
                  background: autoApprove ? "var(--green-600)" : "var(--gray-300)",
                  position: "relative",
                  cursor: "pointer",
                  transition: "background 0.2s",
                }}
              >
                <div style={{
                  position: "absolute",
                  top: 2,
                  left: autoApprove ? 18 : 2,
                  width: 16,
                  height: 16,
                  borderRadius: "50%",
                  background: "white",
                  transition: "left 0.2s",
                }} />
              </div>
            </div>
          </div>
        )}

        {["pro", "business"].includes(host?.plan) && (
          <div className="card card-pad stack-16">
            <h2 className="h2">Invio schedine PayTourist</h2>
            <div className="between" style={{ padding: "6px 0" }}>
              <div>
                <div style={{ fontSize: 14, fontWeight: 500 }}>
                  {autoSubmit ? "Invio automatico attivo" : "Revisione prima dell'invio"}
                </div>
                <div className="muted" style={{ fontSize: 13, marginTop: 4 }}>
                  {autoSubmit
                    ? "Invia automaticamente — le schedine vengono inviate a PayTourist appena l'ospite completa il check-in (se i dati sono completi, altrimenti ricevi comunque l'email di revisione)."
                    : "Rivedi prima di inviare — le schedine restano in bozza e ricevi un'email per controllarle e inviarle."}
                </div>
              </div>
              <div
                role="switch"
                aria-checked={autoSubmit}
                onClick={toggleAutoSubmit}
                style={{
                  flexShrink: 0,
                  marginLeft: 16,
                  width: 36,
                  height: 20,
                  borderRadius: 999,
                  background: autoSubmit ? "var(--green-600)" : "var(--gray-300)",
                  position: "relative",
                  cursor: "pointer",
                  transition: "background 0.2s",
                }}
              >
                <div style={{
                  position: "absolute",
                  top: 2,
                  left: autoSubmit ? 18 : 2,
                  width: 16,
                  height: 16,
                  borderRadius: "50%",
                  background: "white",
                  transition: "left 0.2s",
                }} />
              </div>
            </div>
          </div>
        )}
      </div>

    </div>
  );
}

window.PropertiesListPage = PropertiesListPage;
window.SubscriptionPage = SubscriptionPage;
window.SettingsPage = SettingsPage;