// Dashboard home page
function DashboardPage({ host, billingStatus, onOpenProperty, state, setState, onNavigate, showToast, reloadData, onNewProperty }) {
  const _renewalDate = React.useMemo(() => {
    const iso = billingStatus?.current_period_end;
    if (!iso) return null;
    return new Date(iso).toLocaleDateString("it-IT", { day: "numeric", month: "long" });
  }, [billingStatus?.current_period_end]);

  const _planName = billingStatus?.plan_display_name
    || (host?.plan ? host.plan.charAt(0).toUpperCase() + host.plan.slice(1) : null);
  const _propLimit = billingStatus?.property_limit;
  const _propLimitLabel = _propLimit != null ? `fino a ${_propLimit} camere` : "camere illimitate";
  const _dailyMsgLimit = billingStatus?.daily_msg_limit;
  const requests = state.recentRequests;
  const pendingCount = requests.filter(r => r.status === "pending").length;

  const stats = {
    properties: state.properties.length,
    activeSessions: state.properties.reduce((a, p) => a + p.sessions.filter(s => s.status === "active").length, 0),
    monthlyMessages: state.monthlyMessages ?? 0,
  };

  const _greeting = () => {
    const h = new Date().getHours();
    if (h >= 5 && h < 12) return "Buongiorno";
    if (h >= 12 && h < 18) return "Buon pomeriggio";
    return "Buonasera";
  };

  const _greetingSubtitle = () => {
    if (pendingCount === 1) return "1 ospite aspetta la tua risposta";
    if (pendingCount > 1) return `${pendingCount} ospiti aspettano la tua risposta`;
    return "Tutto tranquillo, nessuna richiesta in sospeso";
  };

  const updateRequestStatus = async (session, newStatus) => {
    try {
      const propertyId = session._propertyId || session.propertyId;
      if (newStatus === "active") {
        await window.API.approveSession(propertyId, session.id);
        showToast("Accesso approvato · ospite notificato su WhatsApp");
      } else if (newStatus === "rejected") {
        await window.API.rejectSession(propertyId, session.id);
        showToast("Accesso rifiutato");
      } else if (newStatus === "expired") {
        await window.API.revokeSession(propertyId, session.id);
        showToast("Accesso revocato");
      }
      await reloadData();
    } catch (err) {
      showToast(err.message || "Errore", "error");
    }
  };

  const _subStatus = billingStatus?.subscription_status;
  const _showStatus = _subStatus && _subStatus !== "active";

  return (
    <div className="page stack-32 dashboard-animate">
      {/* Welcome header */}
      <div className="greeting-row">
        <div>
          <h1 className="h1">
            {_greeting()}, {host?.full_name?.split(" ")[0] || "Host"}{" "}
            <span className="wave-hand">👋</span>
          </h1>
          <p className="muted greeting-subtitle">
            {_greetingSubtitle()}
          </p>
        </div>
        <div>
          <button className="btn btn-primary" onClick={onNewProperty}>
            <I.plus style={{ width: 16, height: 16 }} />
            Nuova struttura
          </button>
        </div>
      </div>

      {/* Tre card: Piano · Strutture · Messaggi scambiati */}
      <div className="dashboard-cards">
        {/* Card piano */}
        <div className="card dashboard-card dashboard-card-plan">
          <div className="dashboard-card-label">
            <I.sparkle style={{ width: 14, height: 14, color: "var(--color-success)" }} />
            Il tuo abbonamento
          </div>
          <div className="dashboard-card-value">Piano {_planName || "—"}</div>
          <div className="dashboard-card-sub">
            {_renewalDate ? `Rinnovo il ${_renewalDate}` : _propLimitLabel}
            {_showStatus && (
              <span className="dashboard-meta-status" style={{ marginLeft: 8 }}>
                {_subStatus === "past_due" ? "In sospeso" : _subStatus}
              </span>
            )}
          </div>
          <button className="btn btn-secondary btn-sm dashboard-card-action" onClick={() => onNavigate("subscription")}>
            Gestisci piano
          </button>
        </div>

        {/* Card strutture */}
        <div className="card dashboard-card">
          <div className="dashboard-card-label">
            <I.building style={{ width: 13, height: 13 }} /> Strutture
          </div>
          <div className="dashboard-card-value">{stats.properties}</div>
          <div className="dashboard-card-sub">
            {stats.activeSessions === 0
              ? "Nessun ospite attivo"
              : `${stats.activeSessions} ${stats.activeSessions === 1 ? "ospite" : "ospiti"} in soggiorno`}
          </div>
        </div>

        {/* Card messaggi scambiati */}
        <div className="card dashboard-card">
          <div className="dashboard-card-label">
            <I.chat style={{ width: 13, height: 13 }} /> Messaggi scambiati
          </div>
          <div className="dashboard-card-value">{stats.monthlyMessages}</div>
          <div className="dashboard-card-sub">
            {_dailyMsgLimit != null
              ? `Limite ${_dailyMsgLimit}/giorno`
              : "Questo mese"}
          </div>
        </div>
      </div>

      {/* Recent requests */}
      <div>
        <div className="between" style={{ marginBottom: 14 }}>
          <div>
            <h2 className="h2">Richieste recenti degli ospiti</h2>
            <p className="muted" style={{ margin: "4px 0 0", fontSize: 13 }}>Ultimi 7 giorni</p>
          </div>
          <button className="btn btn-ghost btn-sm" onClick={() => onNavigate("requests")}>Vedi tutte</button>
        </div>

        <div className="card" style={{ padding: 0, overflow: "hidden" }}>
          {requests.length === 0 ? (
            <div style={{ textAlign: "center", padding: "40px 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 richiesta ancora</div>
            </div>
          ) : (
            <div className="table-wrap">
              <table className="table">
                <thead>
                  <tr>
                    <th>Ospite</th>
                    <th>Telefono</th>
                    <th>Struttura</th>
                    <th>Stato</th>
                    <th>Data</th>
                    <th style={{ textAlign: "right" }}>Azioni</th>
                  </tr>
                </thead>
                <tbody>
                  {requests.map(r => (
                    <tr key={r.id}>
                      <td>
                        <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
                          <div style={{ width: 30, height: 30, borderRadius: "50%", background: "var(--color-avorio-warm)", color: "var(--text-muted)", display: "flex", alignItems: "center", justifyContent: "center", fontSize: 11, fontWeight: 600 }}>
                            {r.guest.split(" ").map(p => p[0]).slice(0, 2).join("")}
                          </div>
                          <span style={{ color: "var(--color-egeo)", fontWeight: 500 }}>{r.guest}</span>
                        </div>
                      </td>
                      <td style={{ fontFamily: "ui-monospace, monospace", fontSize: 13, color: "var(--text-muted)" }}>{r.phone}</td>
                      <td>{r.property}</td>
                      <td><StatusBadge status={r.status} /></td>
                      <td className="mini" style={{ color: "var(--text-muted)" }}>{r.requested}</td>
                      <td style={{ textAlign: "right" }}>
                        {r.status === "pending" && (
                          <div style={{ display: "inline-flex", gap: 6 }}>
                            <button className="btn btn-primary btn-sm" onClick={() => updateRequestStatus(r, "active")}>Approva</button>
                            <button className="btn btn-danger btn-sm" onClick={() => updateRequestStatus(r, "rejected")}>Rifiuta</button>
                          </div>
                        )}
                        {r.status === "active" && (
                          <button className="btn btn-secondary btn-sm" onClick={() => updateRequestStatus(r, "expired")}>Revoca</button>
                        )}
                        {(r.status === "rejected" || r.status === "expired") && (
                          <span className="mini" style={{ color: "var(--text-muted)" }}>Chiusa</span>
                        )}
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          )}
        </div>
      </div>

      {/* Properties overview */}
      <div>
        <div className="between" style={{ marginBottom: 14 }}>
          <h2 className="h2">Le tue strutture</h2>
          <button className="btn btn-ghost btn-sm" onClick={() => onNavigate("properties")}>Vedi tutte</button>
        </div>
        <div className="prop-grid">
          {state.properties.map(p => (
            <div key={p.id} 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: "14px 16px" }}>
                <div style={{ fontWeight: 600, color: "var(--color-egeo)", fontSize: 15 }}>{p.name}</div>
                <div className="mini" style={{ marginTop: 4, display: "flex", alignItems: "center", gap: 4 }}>
                  <I.pin style={{ width: 12, height: 12 }} /> {p.city}
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

window.DashboardPage = DashboardPage;