/* Interactive product demos for the Solution section (telehealth deployment).
   Eligibility  — real-time eligibility → benefits → price sequence, then a cost-share card.
   TextToPay    — patient phone receiving a pay-ahead link with a full cost-share breakdown.
   NoTouch      — the automated, zero-admin collection flow from price to reconciliation. */

/* ---------- REAL-TIME COST TRANSPARENCY ----------
   Plays the eligibility → benefits → pricing sequence, then resolves into a
   Skylight-style priced card with a charge button. Holds on the resolved state. */
const ELIG_STEPS = ["Checking eligibility", "Determining benefits", "Generating prices"];

function EligibilityDemo() {
  const [ref, inView] = useInView();
  const [phase, setPhase] = useState(0); // 0..2 loading steps, 3 = resolved
  useEffect(() => {
    if (!inView) return;
    let timer, cancelled = false;
    const run = (i) => {
      if (cancelled) return;
      setPhase(i);
      // each loading step holds ~1s; the resolved price pauses ~3.2s, then loops
      timer = setTimeout(() => run(i >= 3 ? 0 : i + 1), i >= 3 ? 3200 : 1000);
    };
    run(0);
    return () => { cancelled = true; clearTimeout(timer); };
  }, [inView]);

  const resolved = phase >= 3;

  return (
    <div ref={ref} className="sky" style={{ maxWidth: 440 }}>
      <div className="sky__head">
        <span className="sky__chip">Maria · virtual visit</span>
        <span className="sky__chip sky__chip--ghost">✕</span>
      </div>

      <div className="sky__card">
        {!resolved ? (
          <div className="elig__steps">
            {ELIG_STEPS.map((s, i) => {
              const state = phase > i ? "done" : phase === i ? "active" : "wait";
              return (
                <div key={i} className={"elig__step is-" + state}>
                  <span className="elig__dot" />
                  <span className="elig__label">{s}{state === "active" ? "…" : ""}</span>
                  {state === "done" && <span className="elig__check">✓</span>}
                </div>
              );
            })}
          </div>
        ) : (
          <>
            <div className="sky__card-head">Guaranteed before the visit</div>
            <div className="sky__row is-in elig-resolve">
              <div className="sky__row-top">
                <div className="sky__row-name">
                  <span className="elig__ok">✓</span> Virtual visit
                </div>
                <div className="sky__row-price">$43.80</div>
              </div>
              <div className="sky__row-explain">
                Priced using <span className="sky__tag">20% coinsurance</span> of a <span className="sky__tag">$219 in-network rate</span>
              </div>
            </div>
          </>
        )}
      </div>

      <div className={"sky__total elig-resolve " + (resolved ? "is-on" : "is-off")}>
        <span className="sky__total-label">Total cost:</span>
        <span className="sky__total-val">{resolved ? "$43.80" : "—"}</span>
      </div>

      <div className="sky__pay">
        <span className="sky__pay-method">Payment method: <strong>Visa ••• 5687</strong></span>
        <button className="elig__charge" disabled={!resolved}>Charge card</button>
      </div>
    </div>
  );
}

/* ---------- AUTOMATED TEXT-TO-PAY ---------- */
function TextToPayDemo() {
  const [ref, inView] = useInView();
  const [open, setOpen] = useState(false);
  useEffect(() => {
    if (!inView) return;
    const t = setTimeout(() => setOpen(true), 600);
    return () => clearTimeout(t);
  }, [inView]);

  return (
    <div ref={ref} className="phone">
      <div className="phone__notch" />
      <div className="phone__screen">
        <div className="phone__close">✕</div>
        <div className="phone__status">
          <span className="phone__status-dot" /> Payment due before your visit
        </div>
        <div className="phone__date">Upcoming · virtual visit</div>
        <div className="phone__title">Metabolic<br/>Consultation</div>
        <div className="phone__for">for Maria</div>

        <div className="phone__card">
          <span className="phone__tag">Text-to-Pay</span>
          <div className="phone__bal-label">Estimated balance <span className="phone__i">ⓘ</span></div>
          <div className="phone__bal">$48.00</div>

          <div className={"phone__summary " + (open ? "is-open" : "")}>
            <div className="phone__line">
              <span>Metabolic consult</span><span>$28.00</span>
            </div>
            <div className="phone__line-explain">
              Calculated using your <span className="phone__hl">20% coinsurance</span> and applied <span className="phone__hl">deductible</span>
            </div>
            <div className="phone__line">
              <span>Office visit</span><span>$20.00</span>
            </div>
            <div className="phone__line-explain">
              Calculated using your <span className="phone__hl">$20 specialist copay</span>
            </div>
          </div>
        </div>

        <button className="phone__pay">Pay balance</button>
      </div>
    </div>
  );
}

/* ---------- NO-TOUCH PATIENT COLLECTION FLOW ---------- */
const FLOW_STEPS = [
  { t: "Price generated before the visit", s: "Eligibility + cost-share, automatically" },
  { t: "Pay link texted to the patient", s: "Full cost-share breakdown attached" },
  { t: "Patient pays in advance", s: "Card captured, balance cleared pre-visit" },
  { t: "Reconciled on the 835", s: "Guaranteed price held — no chasing" },
];

function NoTouchDemo() {
  const [ref, inView] = useInView();
  const [n, setN] = useState(0);
  useEffect(() => {
    if (!inView) return;
    setN(0);
    let i = 0;
    const t = setInterval(() => {
      i++;
      setN(i);
      if (i >= FLOW_STEPS.length) clearInterval(t);
    }, 700);
    return () => clearInterval(t);
  }, [inView]);

  return (
    <div ref={ref} className="flow">
      {FLOW_STEPS.map((f, i) => (
        <div key={i} className={"flow__step " + (i < n ? "is-on" : "")}>
          <div className="flow__rail">
            <span className="flow__node">{i < n ? "✓" : i + 1}</span>
            {i < FLOW_STEPS.length - 1 && <span className="flow__line" />}
          </div>
          <div className="flow__body">
            <div className="flow__title">{f.t}</div>
            <div className="flow__sub">{f.s}</div>
          </div>
        </div>
      ))}
      <div className={"flow__foot " + (n >= FLOW_STEPS.length ? "is-on" : "")}>
        <span className="flow__foot-big">0</span>
        <span className="flow__foot-label">admin touches<br/>collected automatically</span>
      </div>
    </div>
  );
}

window.EligibilityDemo = EligibilityDemo;
window.TextToPayDemo = TextToPayDemo;
window.NoTouchDemo = NoTouchDemo;