// CoolingThermometer.jsx — animated fundraising thermometer with shimmer + count-up

function CoolingThermometer({ raised = 31400, goal = 50000, compact = false }) {
  const bp = useBreakpoint();
  const pct = Math.min(raised / goal, 1);
  const [animPct, setAnimPct] = React.useState(0);
  const [replayKey, setReplayKey] = React.useState(0);
  const [btnSpinning, setBtnSpinning] = React.useState(false);

  // Count-up: runs on mount and whenever replayKey increments
  const [displayRaised, setDisplayRaised] = React.useState(0);
  React.useEffect(() => {
    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) { setDisplayRaised(raised); return; }
    const dur = 1500;
    let start = null;
    let rafId;
    const raf = (ts) => {
      if (!start) start = ts;
      const p = Math.min((ts - start) / dur, 1);
      const e = 1 - Math.pow(1 - p, 3);
      setDisplayRaised(Math.floor(e * raised));
      if (p < 1) rafId = requestAnimationFrame(raf);
      else setDisplayRaised(raised);
    };
    rafId = requestAnimationFrame(raf);
    return () => cancelAnimationFrame(rafId);
  }, [raised, replayKey]);

  // Fill animation: reset to 0 then re-animate on replay
  React.useEffect(() => {
    setAnimPct(0);
    const t = setTimeout(() => setAnimPct(pct), 200);
    return () => clearTimeout(t);
  }, [pct, replayKey]);

  const handleReplay = () => {
    if (btnSpinning) return;
    setBtnSpinning(true);
    setTimeout(() => setBtnSpinning(false), 800);
    setReplayKey(k => k + 1);
  };

  const fmtDollars = n => "$" + Math.floor(n).toLocaleString("en-US");
  const pctDisplay = Math.round(pct * 100);

  if (compact) {
    return (
      <div style={thermo.compact}>
        <div style={thermo.compactBar}>
          <div style={{ ...thermo.compactFill, width: `${animPct * 100}%` }} />
        </div>
        <div style={thermo.compactLabel}>
          <span style={thermo.compactRaised}>{fmtDollars(displayRaised)}</span>
          <span style={thermo.compactOf}> of {fmtDollars(goal)}</span>
        </div>
      </div>
    );
  }

  const tubeH = bp.isMobile ? 200 : 300;

  return (
    <div style={{ ...thermo.wrap, flexDirection: bp.isMobile ? "column" : "row", alignItems: "center", gap: bp.isMobile ? "var(--lin_space-6)" : "var(--lin_space-10)" }}>
      {/* ── CSS thermometer drawing ── */}
      <div style={{ display: "flex", flexDirection: "column", alignItems: "center", flexShrink: 0 }}>
        {/* Tube */}
        <div style={{
          background: "var(--lin_blue-700)",
          borderRadius: "100px 100px 0 0",
          width: 30,
          height: tubeH,
          padding: 5,
          position: "relative",
          overflow: "hidden",
        }}>
          {/* Fill — grows from bottom */}
          <div style={{
            background: "linear-gradient(to top, #E8685A 0%, #F2C96A 50%, #6399AF 100%)",
            borderRadius: 100,
            position: "absolute",
            bottom: 5,
            left: 5,
            right: 5,
            height: `calc(${animPct * 100}% - 10px)`,
            transition: "height 1.2s cubic-bezier(0.4,0,0.2,1)",
          }} />
          {/* Current amount label */}
          <span style={{
            position: "absolute",
            right: 38,
            bottom: `calc(${animPct * 100}% - 4px)`,
            fontSize: 11,
            fontWeight: 700,
            color: "var(--lin_text-muted)",
            whiteSpace: "nowrap",
            fontFamily: "var(--lin_font-family)",
            transition: "bottom 1.2s cubic-bezier(0.4,0,0.2,1)",
          }}>{fmtDollars(displayRaised)}</span>
        </div>
        {/* Bulb */}
        <div style={{
          background: "var(--lin_blue-700)",
          borderRadius: "100%",
          width: 56,
          height: 56,
          padding: 5,
          position: "relative",
          marginTop: -14,
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
        }}>
          {/* Red circle */}
          <div style={{ background: "#E8685A", borderRadius: "100%", width: 46, height: 46 }} />
          {/* Filler connecting tube to bulb */}
          <div style={{
            background: "#E8685A",
            borderRadius: "100px 100px 0 0",
            width: 20,
            height: animPct > 0 ? 20 : 0,
            position: "absolute",
            top: -14,
            left: "50%",
            transform: "translateX(-50%)",
            transition: "height 1.2s cubic-bezier(0.4,0,0.2,1)",
            zIndex: 1,
          }} />
        </div>
      </div>

      <div style={{ ...thermo.info, alignItems: "center", textAlign: "center", position: "relative" }}>
        {/* <div style={thermo.overline}>Summer Heat Campaign | 2026</div> */}
        <div style={{ ...thermo.raisedAmt, fontSize: bp.isMobile ? "var(--lin_text-4xl)" : "var(--lin_text-6xl)" }}>{fmtDollars(displayRaised)}</div>
        <div style={thermo.ofGoal}>raised of <strong>{fmtDollars(goal)}</strong> goal</div>
        <div style={thermo.pctBadge}>{pctDisplay}% there</div>
        <div style={{ ...thermo.tagline, fontSize: bp.isMobile ? "var(--lin_text-base)" : "var(--lin_text-xl)" }}>
          The more you give, the cooler it gets.
        </div>
        <button onClick={() => openGivebutter()} style={thermo.btn}>Donate now</button>
        <style>{`
          @keyframes replayRotate { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }
          .lc-replay-btn:hover .lc-replay-icon, .lc-replay-btn.spinning .lc-replay-icon { animation: replayRotate 0.8s linear infinite; }
        `}</style>
        <button
          className={"lc-replay-btn" + (btnSpinning ? " spinning" : "")}
          onClick={handleReplay}
          aria-label="Replay animation"
          style={{ position: "absolute", bottom: 0, right: 0, background: "none", border: "none", padding: 0, cursor: "pointer", color: "var(--lin_blue-400)" }}
        >
          <svg className="lc-replay-icon" viewBox="0 0 24 24" width="20" height="20" fill="currentColor" style={{ transition: "transform 0.3s ease" }}>
            <path d="M12 4V1L8 5l4 4V6c3.31 0 6 2.69 6 6 0 3.31-2.69 6-6 6s-6-2.69-6-6H4c0 4.42 3.58 8 8 8s8-3.58 8-8-3.58-8-8-8z"/>
          </svg>
        </button>
      </div>
    </div>
  );
}

const thermo = {
  wrap: { display: "flex", alignItems: "center", gap: "var(--lin_space-10)" },
  visual: { flexShrink: 0 },
  info: { display: "flex", flexDirection: "column", gap: "var(--lin_space-3)" },
  overline: { fontSize: "var(--lin_text-xs)", fontWeight: "var(--lin_weight-semibold)", letterSpacing: "var(--lin_tracking-widest)", textTransform: "uppercase", color: "var(--lin_blue-500)" },
  raisedAmt: { fontWeight: "var(--lin_weight-bold)", letterSpacing: "var(--lin_tracking-tight)", lineHeight: 1, color: "var(--lin_text-primary)" },
  ofGoal: { fontSize: "var(--lin_text-lg)", color: "var(--lin_text-muted)" },
  pctBadge: { display: "inline-block", background: "var(--lin_blue-100)", color: "var(--lin_blue-600)", padding: "var(--lin_space-2) var(--lin_space-4)", borderRadius: "var(--lin_radius-full)", fontSize: "var(--lin_text-sm)", fontWeight: "var(--lin_weight-semibold)", alignSelf: "center" },
  tagline: { color: "var(--lin_text-body)", lineHeight: "var(--lin_leading-snug)", marginTop: "var(--lin_space-2)" },
  btn: { display: "inline-block", marginTop: "var(--lin_space-2)", background: "var(--lin_blue-500)", color: "#fff", padding: "var(--lin_space-4) var(--lin_space-8)", borderRadius: "var(--lin_radius-md)", textDecoration: "none", fontSize: "var(--lin_text-base)", fontWeight: "var(--lin_weight-semibold)", letterSpacing: "var(--lin_tracking-wide)", alignSelf: "center" },
  compact: { display: "flex", flexDirection: "column", gap: "var(--lin_space-2)", width: "100%" },
  compactBar: { height: 8, background: "rgba(255,255,255,0.2)", borderRadius: "var(--lin_radius-full)", overflow: "hidden" },
  compactFill: { height: "100%", background: "#fff", borderRadius: "var(--lin_radius-full)", transition: "width 1.2s ease" },
  compactLabel: { display: "flex", alignItems: "baseline", gap: 4 },
  compactRaised: { fontSize: "var(--lin_text-sm)", fontWeight: "var(--lin_weight-bold)", color: "#fff" },
  compactOf: { fontSize: "var(--lin_text-xs)", color: "rgba(255,255,255,0.7)" },
};

Object.assign(window, { CoolingThermometer });