// ROI Calculator - missed-call revenue estimator
const { useState, useEffect, useRef, useCallback } = React;

const CONVERSION_RATE = 0.45;
const DAYS_PER_MONTH = 30;
const MISSED_DAY_MIN = 1;
const MISSED_DAY_MAX = 30;

const PLANS = [
  { id: "starter", name: "Starter", price: 249, min: 1, max: 100 },
  { id: "pro", name: "Pro", price: 449, min: 101, max: 250 },
  { id: "enterprise", name: "Enterprise", price: 799, min: 251, max: 500 },
];

function planForVolume(missedCalls) {
  if (missedCalls <= 100) return PLANS[0];
  if (missedCalls <= 250) return PLANS[1];
  return PLANS[2];
}

function formatAUD(value) {
  return Math.round(value).toLocaleString("en-AU", {
    style: "currency",
    currency: "AUD",
    maximumFractionDigits: 0,
  });
}

function useAnimatedNumber(target, duration = 380) {
  const [display, setDisplay] = useState(target);
  const displayRef = useRef(target);
  const rafRef = useRef(null);

  useEffect(() => {
    const from = displayRef.current;
    const start = performance.now();

    const tick = (now) => {
      const t = Math.min(1, (now - start) / duration);
      const eased = 1 - Math.pow(1 - t, 3);
      const next = from + (target - from) * eased;
      displayRef.current = next;
      setDisplay(next);
      if (t < 1) rafRef.current = requestAnimationFrame(tick);
    };

    rafRef.current = requestAnimationFrame(tick);
    return () => {
      if (rafRef.current) cancelAnimationFrame(rafRef.current);
    };
  }, [target, duration]);

  return display;
}

function ROISlider({ id, label, value, min, max, step, formatValue, onChange }) {
  const pct = max === min ? 0 : ((value - min) / (max - min)) * 100;
  const trackStyle = {
    background: `linear-gradient(to right, var(--color-primary) 0%, var(--color-primary) ${pct}%, var(--color-hairline) ${pct}%, var(--color-hairline) 100%)`,
  };

  return (
    <div className="roi-slider">
      <div className="roi-slider-head">
        <label htmlFor={id}>{label}</label>
        <span className="roi-slider-badge">{formatValue(value)}</span>
      </div>
      <input
        id={id}
        type="range"
        min={min}
        max={max}
        step={step}
        value={value}
        style={trackStyle}
        onChange={(e) => onChange(Number(e.target.value))}
        aria-valuemin={min}
        aria-valuemax={max}
        aria-valuenow={value}
      />
    </div>
  );
}

function ROICalculator({ defaultAvgValue = 150, avgValueLabel = "Average Booking Value" } = {}) {
  const [missedCallsPerDay, setMissedCallsPerDay] = useState(3);
  const [avgValue, setAvgValue] = useState(defaultAvgValue);
  const [bookingPct, setBookingPct] = useState(50);
  const [selectedPlanId, setSelectedPlanId] = useState("starter");
  const [planManual, setPlanManual] = useState(false);

  const missedCallsMonthly = missedCallsPerDay * DAYS_PER_MONTH;
  const recommended = planForVolume(missedCallsMonthly);

  useEffect(() => {
    if (!planManual) setSelectedPlanId(recommended.id);
  }, [missedCallsMonthly, recommended.id, planManual]);

  const selectedPlan = PLANS.find((p) => p.id === selectedPlanId) || recommended;

  const monthlyRevenue =
    missedCallsMonthly * (bookingPct / 100) * avgValue * CONVERSION_RATE;
  const roiRaw = selectedPlan.price > 0 ? monthlyRevenue / selectedPlan.price : 0;
  const roiDisplay = Math.min(99, Math.round(roiRaw));

  const animRevenue = useAnimatedNumber(monthlyRevenue);
  const animRoi = useAnimatedNumber(roiDisplay);

  const selectPlan = useCallback((planId) => {
    setSelectedPlanId(planId);
    setPlanManual(true);
  }, []);

  return (
    <section className="section roi-section" id="roi-calculator" aria-labelledby="roi-heading">
      <div className="container">
        <div className="section-head">
          <div className="eyebrow">ROI Calculator</div>
          <h2 id="roi-heading">See How Much You&apos;re Losing to Missed Calls</h2>
          <p className="sub">
            Most AINZ customers recover their investment within the first week
          </p>
        </div>

        <div className="roi-card">
          <div className="roi-inputs">
            <div className="roi-sliders">
              <ROISlider
                id="roi-missed-day"
                label="Missed Calls Per Day"
                value={missedCallsPerDay}
                min={MISSED_DAY_MIN}
                max={MISSED_DAY_MAX}
                step={1}
                formatValue={(v) => v.toLocaleString("en-AU")}
                onChange={setMissedCallsPerDay}
              />
              <ROISlider
                id="roi-avg-value"
                label={avgValueLabel}
                value={avgValue}
                min={50}
                max={800}
                step={5}
                formatValue={(v) => formatAUD(v)}
                onChange={setAvgValue}
              />
              <ROISlider
                id="roi-booking-pct"
                label="Calls Related to Bookings"
                value={bookingPct}
                min={10}
                max={100}
                step={1}
                formatValue={(v) => v + "%"}
                onChange={setBookingPct}
              />
            </div>

            <div className="roi-plans">
              <p className="roi-plans-label">Recommended Plan</p>
              <div className="roi-plan-pills" role="group" aria-label="Select plan">
                {PLANS.map((plan) => (
                  <button
                    key={plan.id}
                    type="button"
                    className={
                      "roi-plan-pill" +
                      (selectedPlanId === plan.id ? " is-active" : "")
                    }
                    onClick={() => selectPlan(plan.id)}
                    aria-pressed={selectedPlanId === plan.id}
                  >
                    <span className="roi-plan-name">{plan.name} · ${plan.price}/mo</span>
                  </button>
                ))}
              </div>
              <p className="roi-plans-hint">Auto-Selected Based on Your Call Volume</p>
            </div>
          </div>

          <div className="roi-results">
            <div className="roi-results-metrics">
              <div className="roi-result-block">
                <span className="roi-result-label">Earn Up To</span>
                <p className="roi-result-value">{formatAUD(animRevenue)}</p>
                <p className="roi-result-suffix">more per month</p>
              </div>
              <div className="roi-result-block roi-result-roi">
                <span className="roi-result-label">Return On Investment</span>
                <p className="roi-result-roi-value" aria-live="polite">
                  {Math.round(animRoi)}×
                </p>
              </div>
              <div className="roi-result-block roi-result-cost">
                <span className="roi-result-label">AINZ Cost</span>
                <p className="roi-result-cost-value">
                  {formatAUD(selectedPlan.price)}/mo{" "}
                  <span className="roi-result-gst">(ex. GST)</span>
                </p>
              </div>
            </div>

            <div className="roi-results-footer">
              <a
                href="https://cal.com/ainz-ai/ainz-discovery-call"
                target="_blank"
                rel="noopener noreferrer"
                className="btn roi-demo-btn"
              >
                <span>Book a Free Demo</span>
                <IconArrowRight size={16} aria-hidden="true" />
              </a>
              <p className="roi-disclaimer">
                Based on a 45% call-to-booking conversion rate. Estimates only.
              </p>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { ROICalculator });
if (typeof module !== "undefined" && module.exports) {
  module.exports = ROICalculator;
}