// breakdowns.jsx — cost share + balance buckets

const CostShare = () => {
  const D = window.ROI_DATA.cost_share;
  const ref = React.useRef(null);
  const seen = useInView(ref, 0);
  const p = useProgress(700, seen);
  const [hover, setHover] = React.useState(null);

  const maxCol = Math.max(...D.map(d => d.collectable));

  return (
    <div ref={ref} style={{ border: "1px solid #000", background: "#fff" }}>
      <div style={{
        display: "grid", gridTemplateColumns: "180px 1fr 90px 110px 110px",
        padding: "10px 16px", borderBottom: "1px solid #000",
        background: "#000", color: "#fff",
      }}>
        <Mono color="#00A3FF" size={10}>COST TYPE</Mono>
        <Mono color="#00A3FF" size={10}>COLLECTABLE / COLLECTED</Mono>
        <Mono color="#00A3FF" size={10} style={{ textAlign: "right" }}>SHARE</Mono>
        <Mono color="#00A3FF" size={10} style={{ textAlign: "right" }}>RATE</Mono>
        <Mono color="#00A3FF" size={10} style={{ textAlign: "right" }}>UNCOLLECTED</Mono>
      </div>
      {D.map((row, i) => {
        const colW = (row.collectable / maxCol) * 100 * p;
        const fillW = (row.collected / row.collectable) * colW;
        const isHover = hover === i;
        const warn = row.rate_pct < 60;

        const annotation = row.type === "Patient Transfer"
          ? "These balances originate from primary insurer denials and non-covered service transfers — the payer pushed the balance to the patient after claim processing. Patients receiving a surprise post-denial bill have the lowest payment intent in the dataset: they believe insurance should have covered it, and most never pay."
          : row.type === "Self-pay"
          ? "Claims with no insurer on file at time of service. These patients agreed to their financial responsibility upfront, which is why this category collects over 3× better than patient transfer despite similar average balance size. The gap illustrates the direct value of price clarity at the point of care."
          : null;

        return (
          <React.Fragment key={row.type}>
            <div
               onMouseEnter={() => setHover(i)} onMouseLeave={() => setHover(null)}
               style={{
                 display: "grid", gridTemplateColumns: "180px 1fr 90px 110px 110px",
                 padding: "16px",
                 borderBottom: annotation ? "none" : (i < D.length - 1 ? "1px solid #E1E1E1" : "none"),
                 background: isHover ? "#F1F1F1" : "#fff",
                 alignItems: "center", transition: "background 120ms",
               }}>
              <div>
                <div style={{ fontSize: 17, fontWeight: 500, letterSpacing: "-0.01em" }}>{row.type}</div>
                <Mono size={10} color="#666" style={{ marginTop: 4 }}>{fmt.usdAbbr(row.collectable)} POOL</Mono>
              </div>
              <div style={{ position: "relative", height: 32 }}>
                <div style={{
                  position: "absolute", left: 0, top: 0, height: 32,
                  width: `${colW}%`, background: "#E1EFFE", border: "1px solid #00A3FF",
                  transition: "width 200ms linear",
                }} />
                <div style={{
                  position: "absolute", left: 0, top: 0, height: 32,
                  width: `${fillW}%`, background: warn ? "#FF8B4A" : "#00A3FF",
                  transition: "width 200ms linear",
                }} />
                <div style={{
                  position: "absolute", left: 8, top: "50%", transform: "translateY(-50%)",
                  color: "#000",
                  fontFamily: "Suisse Intl Mono, JetBrains Mono, monospace",
                  fontWeight: 700, fontSize: 11, letterSpacing: "-0.02em",
                }}>{fmt.usdAbbr(row.collected)} of {fmt.usdAbbr(row.collectable)}</div>
              </div>
              <Mono size={12} color="#000" style={{ textAlign: "right" }}>{row.share}%</Mono>
              <div style={{ textAlign: "right" }}>
                <span style={{
                  fontFamily: "Suisse Intl", fontWeight: 500, fontSize: 22, letterSpacing: "-0.02em",
                  color: warn ? "#FF426F" : "#000",
                }}>{row.rate_pct}%</span>
              </div>
              <Mono size={11} color={warn ? "#FF426F" : "#666"} style={{ textAlign: "right" }}>
                {fmt.usdAbbr(row.uncollected)}
              </Mono>
            </div>
            {annotation && (
              <div style={{
                gridColumn: "1 / -1",
                padding: "0 16px 14px",
                borderBottom: i < D.length - 1 ? "1px solid #E1E1E1" : "none",
                background: "#fff",
              }}>
                <div style={{
                  borderLeft: `3px solid ${row.type === "Patient Transfer" ? "#FF426F" : "#00A3FF"}`,
                  paddingLeft: 12,
                  fontSize: 13,
                  lineHeight: 1.55,
                  letterSpacing: "-0.005em",
                  color: "#444",
                  maxWidth: 760,
                }}>{annotation}</div>
              </div>
            )}
          </React.Fragment>
        );
      })}
    </div>
  );
};

const BalanceBuckets = () => {
  const D = window.ROI_DATA.balance_buckets;
  const ref = React.useRef(null);
  const seen = useInView(ref, 0);
  const p = useProgress(700, seen);

  return (
    <div ref={ref} style={{
      display: "grid", gridTemplateColumns: "repeat(6, 1fr)",
      border: "1px solid #000", background: "#fff",
    }}>
      {D.map((row, i) => {
        const fill = row.rate_pct * p;
        const warn = row.rate_pct < 50;
        return (
          <div key={row.bucket} style={{
            padding: "16px 14px 18px",
            borderRight: i < D.length - 1 ? "1px solid #000" : "none",
            display: "flex", flexDirection: "column", gap: 12,
            background: warn ? "#FFF6F0" : "#fff",
            minHeight: 240,
          }}>
            <div>
              <Mono color="#00A3FF" size={10}>BAND {String(i + 1).padStart(2, "0")}</Mono>
              <div style={{ fontSize: 18, fontWeight: 500, marginTop: 6, letterSpacing: "-0.01em" }}>{row.bucket}</div>
              <Mono size={10} color="#666" style={{ marginTop: 4 }}>{fmt.num(row.claims)} CLAIMS</Mono>
            </div>
            {/* vertical fill bar */}
            <div style={{
              flex: 1, position: "relative", border: "1px solid #000", background: "#F9F9F9",
              minHeight: 90,
            }}>
              <div style={{
                position: "absolute", left: 0, right: 0, bottom: 0,
                height: `${fill}%`,
                background: warn ? "#FF426F" : "#00A3FF",
                transition: "height 200ms linear",
              }} />
              <span style={{
                position: "absolute", top: 6, left: 6,
                fontFamily: "Suisse Intl", fontWeight: 500, fontSize: 22,
                letterSpacing: "-0.02em",
                color: warn ? "#FF426F" : "#000"
              }}>{row.rate_pct}%</span>
            </div>
            <div>
              <Mono size={10} color="#666">AVG · {row.avg_days}d</Mono>
            </div>
          </div>
        );
      })}
    </div>
  );
};

window.CostShare = CostShare;
window.BalanceBuckets = BalanceBuckets;