// Review management — Google / Yelp / Facebook reviews in one place, with replies.

function Stars({ rating }) {
  return <span style={{ color: "var(--warn, #d8a13a)", letterSpacing: 1 }}>{"★".repeat(rating)}<span style={{ color: "var(--border-2)" }}>{"★".repeat(5 - rating)}</span></span>;
}

function ReviewRow({ review, onRespond }) {
  const [text, setText] = React.useState("");
  const [open, setOpen] = React.useState(false);
  const platformLabel = { google: "Google", yelp: "Yelp", facebook: "Facebook" }[review.platform] || review.platform;
  return (
    <div className="card" style={{ padding: 16 }}>
      <div style={{ display: "flex", alignItems: "center", gap: 10, flexWrap: "wrap" }}>
        <b style={{ fontSize: 13.5 }}>{review.author}</b>
        <Stars rating={review.rating} />
        <span className="pill" style={{ padding: "1px 7px", fontSize: 10 }}>{platformLabel}</span>
        <span className="faint" style={{ fontSize: 11 }}>{new Date(review.at).toLocaleDateString()}</span>
        <span className={`pill ${review.status === "responded" ? "ok" : "warn"}`} style={{ padding: "1px 7px", fontSize: 10, marginLeft: "auto", textTransform: "capitalize" }}>{review.status === "responded" ? "Responded" : "Needs reply"}</span>
      </div>
      <div style={{ fontSize: 13.5, marginTop: 8, lineHeight: 1.5 }}>{review.text}</div>
      {review.response && (
        <div style={{ marginTop: 10, padding: 10, borderRadius: 10, background: "var(--accent-softer)", border: "1px solid rgba(20,184,138,0.2)", fontSize: 12.5 }}>
          <b style={{ color: "var(--accent-2)" }}>Your reply:</b> {review.response}
        </div>
      )}
      {review.status !== "responded" && (
        open ? (
          <div style={{ marginTop: 10 }}>
            <textarea className="input" placeholder="Write a public response…" value={text} onChange={(e) => setText(e.target.value)} style={{ minHeight: 60, resize: "vertical" }} />
            <div style={{ display: "flex", gap: 8, justifyContent: "flex-end", marginTop: 8 }}>
              <button className="btn btn-sm" onClick={() => setOpen(false)}>Cancel</button>
              <button className="btn btn-sm btn-primary" disabled={!text.trim()} onClick={() => onRespond(review.id, text.trim())}>Post response</button>
            </div>
          </div>
        ) : (
          <button className="btn btn-sm" style={{ marginTop: 10 }} onClick={() => setOpen(true)}><Icon.Reply width="13" height="13" /> Respond</button>
        )
      )}
    </div>
  );
}

function ReviewsPage() {
  const hub = window.useClearCast();
  const data = hub.data || {};
  const reviews = data.reviews || [];
  const [platform, setPlatform] = React.useState("all");
  const filtered = platform === "all" ? reviews : reviews.filter((r) => r.platform === platform);
  const avg = reviews.length ? (reviews.reduce((s, r) => s + r.rating, 0) / reviews.length).toFixed(1) : "—";
  const needsReply = reviews.filter((r) => r.status !== "responded").length;

  return (
    <div className="page reviews-page">
      <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 12, marginBottom: 16 }}>
        {[["Average rating", `${avg} ★`], ["Total reviews", reviews.length], ["Needs reply", needsReply]].map(([label, value]) => (
          <div key={label} className="card" style={{ padding: 14 }}>
            <div className="muted" style={{ fontSize: 11.5 }}>{label}</div>
            <div style={{ fontSize: 22, fontWeight: 750, marginTop: 2 }}>{value}</div>
          </div>
        ))}
      </div>
      <div className="tabs" style={{ marginBottom: 14 }}>
        {[["all", "All"], ["google", "Google"], ["yelp", "Yelp"], ["facebook", "Facebook"]].map(([id, label]) => (
          <button key={id} className={`tab ${platform === id ? "active" : ""}`} onClick={() => setPlatform(id)}>{label}</button>
        ))}
      </div>
      <div style={{ display: "grid", gap: 10 }}>
        {filtered.map((r) => <ReviewRow key={r.id} review={r} onRespond={(id, text) => hub.actions.respondToReview(id, text)} />)}
        {!filtered.length && <div className="card" style={{ padding: 28, textAlign: "center" }}><div className="muted" style={{ fontSize: 13 }}>No reviews here yet. Connect Google Business / Yelp / Facebook to pull reviews automatically.</div></div>}
      </div>
      <div className="muted" style={{ fontSize: 11.5, marginTop: 14, textAlign: "center" }}>Reviews sync from Google/Yelp/Facebook once those accounts are connected via OAuth.</div>
    </div>
  );
}

window.ReviewsPage = ReviewsPage;