// ============================================================
// ROI Calculator — full-featured interactive widget
// Realistic, transparent formula with industry-adjusted factors,
// payback period, shareable URL state, and CTA pre-fill into contact form.
// ============================================================

const { useState: useStateR, useEffect: useEffectR, useMemo: useMemoR, useRef: useRefR } = React;

// === Formula (single source of truth) ===
// gross_routine_hours_per_year = admins × hours_per_week × 50_weeks
// automatable_hours = gross_routine_hours_per_year × industry_factor
// gross_savings = automatable_hours × hourly_rate
// fte_freed = automatable_hours / 1800  (effective FTE working hours/year, post-meetings/PTO)
// payback_months = 12 × midpoint_investment / gross_savings
// We expose 3 ranges: conservative (×0.7), base (×1.0), optimistic (×1.25)
function computeROI({ admins, hours, rate, industryFactor, currency = "CZK" }) {
  const grossHours = admins * hours * 50;
  const automatable = grossHours * industryFactor;
  const baseSavings = automatable * rate;

  // Investment midpoints
  // CZK: audit ~400k + build mid 1.8M = ~2.2M (~$95K)
  // EUR: audit ~16k + build mid 75k = ~91k EUR
  const midInvestment = currency === "CZK" ? 2_200_000 : 91_000;

  const fteFreed = automatable / 1800;

  return {
    grossHours,
    automatable,
    fteFreed,
    weeksReclaimed: automatable / (admins * 40), // weeks of one person's year
    routinePct: industryFactor * 100,
    savings: {
      low: baseSavings * 0.7,
      base: baseSavings,
      high: baseSavings * 1.25,
    },
    payback: {
      low: midInvestment / (baseSavings * 0.7) * 12,    // pessimistic = longer
      base: midInvestment / baseSavings * 12,
      high: midInvestment / (baseSavings * 1.25) * 12,  // optimistic = shorter
    },
  };
}

function formatMoney(n, currency) {
  if (!isFinite(n) || n <= 0) return "—";
  if (currency === "EUR") {
    if (n >= 1_000_000) return `€ ${(n / 1_000_000).toFixed(1)}M`;
    if (n >= 1_000) return `€ ${Math.round(n / 1_000)}K`;
    return `€ ${Math.round(n)}`;
  }
  // CZK
  if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1).replace(".", ",")} mil. Kč`;
  if (n >= 1_000) return `${Math.round(n / 1_000)} tis. Kč`;
  return `${Math.round(n)} Kč`;
}

function formatMonths(m) {
  if (!isFinite(m) || m <= 0) return "—";
  if (m < 1) return "< 1 měs.";
  if (m >= 36) return `${Math.round(m / 12 * 10) / 10} let`;
  return `${Math.round(m * 10) / 10}`;
}

// === Custom slider — instant feedback, accessible, mobile-friendly ===
function RoiSlider({ label, value, min, max, step, onChange, suffix, hint }) {
  const trackRef = useRefR(null);
  const pct = ((value - min) / (max - min)) * 100;

  const onTrackInteract = (e) => {
    const t = trackRef.current;
    if (!t) return;
    const r = t.getBoundingClientRect();
    const clientX = e.touches ? e.touches[0].clientX : e.clientX;
    const rawPct = Math.max(0, Math.min(1, (clientX - r.left) / r.width));
    const raw = min + rawPct * (max - min);
    const stepped = Math.round(raw / step) * step;
    onChange(Math.max(min, Math.min(max, stepped)));
  };

  return (
    <div className="roi-slider-row">
      <div className="roi-slider-head">
        <span className="roi-slider-label">{label}</span>
        <span className="roi-slider-value">
          {value}
          {suffix && <span className="roi-slider-suffix">{suffix}</span>}
        </span>
      </div>
      <div
        ref={trackRef}
        className="roi-slider-track"
        onMouseDown={(e) => {
          onTrackInteract(e);
          const move = (ev) => onTrackInteract(ev);
          const up = () => { window.removeEventListener("mousemove", move); window.removeEventListener("mouseup", up); };
          window.addEventListener("mousemove", move);
          window.addEventListener("mouseup", up);
        }}
        onTouchStart={(e) => {
          onTrackInteract(e);
          const move = (ev) => { ev.preventDefault(); onTrackInteract(ev); };
          const up = () => { window.removeEventListener("touchmove", move); window.removeEventListener("touchend", up); };
          window.addEventListener("touchmove", move, { passive: false });
          window.addEventListener("touchend", up);
        }}
      >
        <div className="roi-slider-fill" style={{ width: `${pct}%` }} />
        <div
          className="roi-slider-knob"
          style={{ left: `${pct}%` }}
          role="slider"
          tabIndex={0}
          aria-valuemin={min}
          aria-valuemax={max}
          aria-valuenow={value}
          aria-label={label}
          onKeyDown={(e) => {
            if (e.key === "ArrowLeft" || e.key === "ArrowDown") onChange(Math.max(min, value - step));
            if (e.key === "ArrowRight" || e.key === "ArrowUp") onChange(Math.min(max, value + step));
          }}
        />
      </div>
      {hint && <div className="roi-slider-hint">{hint}</div>}
    </div>
  );
}

function ROICalculator({ lang, setRoute }) {
  const t = (p) => window.t(lang, p);

  // Currency follows language
  const currency = lang === "cs" ? "CZK" : "EUR";

  // === Sensible defaults per currency ===
  const rateDefault = currency === "CZK" ? 1200 : 50;
  const rateMin = currency === "CZK" ? 400 : 18;
  const rateMax = currency === "CZK" ? 3500 : 140;
  const rateStep = currency === "CZK" ? 50 : 2;

  // Read from URL hash if present, else defaults
  const initial = useMemoR(() => {
    try {
      const params = new URLSearchParams(window.location.hash.split("?")[1] || "");
      return {
        admins: parseInt(params.get("a")) || 12,
        hours: parseInt(params.get("h")) || 14,
        rate: parseInt(params.get("r")) || rateDefault,
        industry: params.get("i") || "banking",
      };
    } catch (e) {
      return { admins: 12, hours: 14, rate: rateDefault, industry: "banking" };
    }
  }, []);

  const [admins, setAdmins] = useStateR(initial.admins);
  const [hours, setHours] = useStateR(initial.hours);
  const [rate, setRate] = useStateR(initial.rate);
  const [industry, setIndustry] = useStateR(initial.industry);
  const [copied, setCopied] = useStateR(false);

  const industries = t("roi.industries");
  const selectedIndustry = industries.find((i) => i.id === industry) || industries[0];

  const result = useMemoR(
    () => computeROI({
      admins,
      hours,
      rate,
      industryFactor: selectedIndustry.factor,
      currency,
    }),
    [admins, hours, rate, selectedIndustry.factor, currency]
  );

  // Sync URL hash so the configuration is shareable
  useEffectR(() => {
    try {
      const params = new URLSearchParams({
        a: admins, h: hours, r: rate, i: industry,
      });
      const hash = window.location.hash.split("?")[0];
      // Replace, don't push, to avoid history pollution
      history.replaceState(null, "", `${hash}?${params.toString()}`);
    } catch (e) {}
  }, [admins, hours, rate, industry]);

  // Send to contact form with pre-fill
  const submitToContact = () => {
    try {
      const prefill = {
        topic: lang === "cs" ? "Automation Audit"
              : lang === "de" ? "Automation Audit"
              : "Automation Audit",
        message:
          lang === "cs"
            ? `Hledáme úsporu cca ${formatMoney(result.savings.base, currency)} ročně v odvětví ${selectedIndustry.label}.\n\nAktuální stav: ${admins} adminů, ${hours} h rutiny/týden/člověka při sazbě ${rate} ${currency === "CZK" ? "Kč" : "EUR"}/h.\nUvolnit by se mohlo ${result.fteFreed.toFixed(1)} FTE.\n\nRádi bychom to ověřili na našem prostředí.`
            : lang === "de"
              ? `Wir suchen Einsparungen von etwa ${formatMoney(result.savings.base, currency)} pro Jahr in der Branche ${selectedIndustry.label}.\n\nAktuell: ${admins} Admins, ${hours} Std Routine/Woche/Person bei ${rate} EUR/h.\nFreigesetzt: ${result.fteFreed.toFixed(1)} FTE.\n\nWir möchten dies auf unserer Umgebung prüfen.`
              : `We're looking at ~${formatMoney(result.savings.base, currency)} annual savings in the ${selectedIndustry.label} sector.\n\nCurrent: ${admins} admins, ${hours} h routine/week/person at ${rate} EUR/h.\nFTE freed: ${result.fteFreed.toFixed(1)}.\n\nWe'd like to validate this on our estate.`,
      };
      sessionStorage.setItem("wa.contact.prefill", JSON.stringify(prefill));
    } catch (e) {}
    setRoute({ name: "contact" });
  };

  const copyLink = () => {
    try {
      navigator.clipboard.writeText(window.location.href);
      setCopied(true);
      setTimeout(() => setCopied(false), 2000);
    } catch (e) {}
  };

  const downloadPdf = () => {
    // Build a minimal printable HTML and trigger print
    const w = window.open("", "_blank", "width=800,height=900");
    if (!w) return;
    const html = `<!DOCTYPE html><html lang="${lang}"><head><meta charset="utf-8"><title>WeAutomate ROI · ${selectedIndustry.label}</title>
      <style>
        @page { size: A4; margin: 18mm; }
        body { font: 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #031713; max-width: 700px; margin: 0 auto; }
        h1 { font-size: 28px; letter-spacing: -0.02em; margin: 0 0 6px; color: #031713; }
        h2 { font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase; color: #318A56; margin-top: 28px; border-bottom: 1px solid #E7F2E5; padding-bottom: 6px; }
        .meta { color: #4f5c54; font-size: 12px; margin-bottom: 28px; }
        .big { font-size: 42px; font-weight: 700; letter-spacing: -0.03em; color: #318A56; margin: 0; }
        .grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 24px; margin-top: 16px; }
        .row { padding: 8px 0; border-bottom: 1px dashed #ddd; display: flex; justify-content: space-between; }
        .small { font-size: 12px; color: #4f5c54; }
        .stamp { margin-top: 40px; padding: 16px; background: #E7F2E5; border-radius: 8px; font-size: 13px; }
      </style></head><body>
      <h1>WeAutomate · ROI calculation</h1>
      <div class="meta">${new Date().toLocaleDateString(lang === "cs" ? "cs-CZ" : lang === "de" ? "de-DE" : "en-US")} · ${selectedIndustry.label} · ${lang.toUpperCase()}</div>

      <h2>${t("roi.fields.industry")}</h2>
      <div class="row"><span>${selectedIndustry.label}</span><span class="small">${(selectedIndustry.factor*100).toFixed(0)}% routine automatable</span></div>

      <h2>Input</h2>
      <div class="row"><span>${t("roi.fields.admins")}</span><strong>${admins}</strong></div>
      <div class="row"><span>${t("roi.fields.hours")}</span><strong>${hours} h</strong></div>
      <div class="row"><span>${t("roi.fields.rate")}</span><strong>${rate} ${currency}</strong></div>

      <h2>${t("roi.out.savings")}</h2>
      <p class="big">${formatMoney(result.savings.base, currency)}</p>
      <div class="grid">
        <div><strong>${formatMoney(result.savings.low, currency)}</strong><div class="small">${t("roi.legend.rangeLow")}</div></div>
        <div><strong>${formatMoney(result.savings.base, currency)}</strong><div class="small">${t("roi.legend.rangeBase")}</div></div>
        <div><strong>${formatMoney(result.savings.high, currency)}</strong><div class="small">${t("roi.legend.rangeHigh")}</div></div>
      </div>

      <h2>${t("roi.out.payback")}</h2>
      <div class="row"><span>${t("roi.legend.rangeBase")}</span><strong>${formatMonths(result.payback.base)} ${t("roi.out.months")}</strong></div>

      <h2>${t("roi.out.fte")}</h2>
      <div class="row"><span>FTE</span><strong>${result.fteFreed.toFixed(1)} ${t("roi.out.fteUnit")}</strong></div>

      <div class="stamp">
        WeAutomate s.r.o. · hello@weautomate.cz · www.weautomate.cz<br>
        ${t("roi.cta.contactSub")}
      </div>
    </body></html>`;
    w.document.write(html);
    w.document.close();
    setTimeout(() => w.print(), 400);
  };

  return (
    <section className="section roi-section" id="roi-calculator">
      <div className="container-wide">
        <div className="section-head">
          <div className="sticky-eyebrow">
            <span className="eyebrow">{t("roi.eyebrow")}</span>
          </div>
          <div className="right">
            <Reveal as="h2" className="h2">{t("roi.title")}</Reveal>
            <Reveal as="p" className="lede" delay={1}>{t("roi.sub")}</Reveal>
          </div>
        </div>

        <Reveal className="roi-widget">
          {/* Inputs */}
          <div className="roi-inputs">
            <div className="roi-card">
              <span className="tag"><span className="dot" />{t("roi.eyebrow")} · 60 s</span>

              <RoiSlider
                label={t("roi.fields.admins")}
                value={admins}
                min={1}
                max={200}
                step={1}
                onChange={setAdmins}
              />
              <RoiSlider
                label={t("roi.fields.hours")}
                value={hours}
                min={1}
                max={40}
                step={1}
                onChange={setHours}
                suffix=" h"
              />
              <RoiSlider
                label={t("roi.fields.rate")}
                value={rate}
                min={rateMin}
                max={rateMax}
                step={rateStep}
                onChange={setRate}
                suffix={` ${currency === "CZK" ? "Kč" : "€"}`}
              />

              <div className="roi-industry-block">
                <div className="roi-slider-label" style={{ marginBottom: 10 }}>{t("roi.fields.industry")}</div>
                <div className="roi-industries">
                  {industries.map((it) => (
                    <button
                      key={it.id}
                      type="button"
                      className={`roi-industry ${industry === it.id ? "on" : ""}`}
                      onClick={() => setIndustry(it.id)}
                      aria-pressed={industry === it.id}
                    >
                      {it.label}
                    </button>
                  ))}
                </div>
                <div className="roi-industry-note">{selectedIndustry.note}</div>
              </div>
            </div>
          </div>

          {/* Output */}
          <div className="roi-output">
            <div className="roi-card roi-output-card">
              <span className="roi-out-eyebrow">→ {t("roi.out.savings")}</span>

              <div className="roi-out-headline">
                <div className="roi-out-big">{formatMoney(result.savings.base, currency)}</div>
                <div className="roi-out-context">
                  {Math.round(result.routinePct)} {t("roi.out.ofRoutine")} · {result.fteFreed.toFixed(1)} {t("roi.out.fteUnit")} {t("roi.out.forStrategic")}
                </div>
              </div>

              {/* Range bar */}
              <div className="roi-range">
                <div className="roi-range-track">
                  <div className="roi-range-base" />
                </div>
                <div className="roi-range-labels">
                  <span>
                    <span className="roi-range-tick" />
                    <strong>{formatMoney(result.savings.low, currency)}</strong>
                    <em>{t("roi.legend.rangeLow")}</em>
                  </span>
                  <span className="roi-range-mid">
                    <span className="roi-range-tick brand" />
                    <strong>{formatMoney(result.savings.base, currency)}</strong>
                    <em>{t("roi.legend.rangeBase")}</em>
                  </span>
                  <span>
                    <span className="roi-range-tick" />
                    <strong>{formatMoney(result.savings.high, currency)}</strong>
                    <em>{t("roi.legend.rangeHigh")}</em>
                  </span>
                </div>
              </div>

              <div className="roi-stats">
                <div>
                  <div className="roi-stat-label">{t("roi.out.payback")}</div>
                  <div className="roi-stat-value">{formatMonths(result.payback.base)} <span>{t("roi.out.months")}</span></div>
                </div>
                <div>
                  <div className="roi-stat-label">{t("roi.out.fte")}</div>
                  <div className="roi-stat-value">{result.fteFreed.toFixed(1)} <span>{t("roi.out.fteUnit")}</span></div>
                </div>
                <div>
                  <div className="roi-stat-label">{t("roi.out.weeksWork")}</div>
                  <div className="roi-stat-value">{Math.round(result.weeksReclaimed)} <span></span></div>
                </div>
              </div>

              <div className="roi-actions">
                <button className="btn btn-brand" onClick={submitToContact}>
                  {t("roi.cta.contact")} <span className="arrow">→</span>
                </button>
                <button className="btn btn-ghost btn-sm" onClick={downloadPdf}>
                  {t("roi.cta.download")}
                </button>
                <button className="btn btn-ghost btn-sm" onClick={copyLink}>
                  {copied ? t("roi.share.copied") : t("roi.share.copyLink")}
                </button>
              </div>
              <div className="roi-cta-note">{t("roi.cta.contactSub")}</div>
            </div>
          </div>
        </Reveal>

        {/* Assumptions — transparency */}
        <Reveal className="roi-assumptions">
          <div className="roi-assumptions-head">
            <span className="eyebrow">{t("roi.assumptions.title")}</span>
          </div>
          <div className="roi-assumptions-grid">
            {t("roi.assumptions.items").map((a, i) => (
              <div key={i}>
                <div className="num" style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--ink-4)" }}>A.0{i+1}</div>
                <h4 className="h4" style={{ marginTop: 8 }}>{a.h}</h4>
                <p className="body" style={{ fontSize: 14, marginTop: 8 }}>{a.p}</p>
              </div>
            ))}
          </div>
        </Reveal>
      </div>
    </section>
  );
}

window.ROICalculator = ROICalculator;
window.computeROI = computeROI; // exposed for tests