/* ====================================================================
   Appril · Diagnóstico — result.jsx
   Dashboard final por cards. Usa la respuesta del backend si existe.
   ==================================================================== */

const { useMemo: useMemoR } = React;

function ResultDashboard({ payload, backend, onClose }) {
  const contact = payload.contact || {};
  const answers = payload.raw_answers || {};
  const calc    = payload.frontend_calculations || {};

  // Datos finales: priorizar respuesta del backend, fallback al preview
  const final = {
    annual_lost_revenue: backend?.annual_lost_revenue ?? calc.annual_lost_revenue,
    annual_admin_hours:  backend?.annual_admin_hours  ?? calc.annual_admin_hours,
    admin_cost_annual:   backend?.admin_cost_annual   ?? calc.admin_cost_annual,
    hidden_cost_total:   backend?.hidden_cost_total   ?? calc.hidden_cost_total,
    lead_score:          backend?.lead_score          ?? calc.lead_score,
    lead_classification: backend?.lead_classification ?? calc.lead_classification,
    marketing_segment:   backend?.marketing_segment   ?? (calc.lead_classification === "sql_caliente" ? "SUPER_HOT" : calc.lead_classification === "mql" ? "HOT" : calc.lead_classification === "lead_tibio" ? "WARM" : "COLD"),
    agenda_maturity_level: backend?.agenda_maturity_level ?? calc.agenda_maturity_level,
    recommended_action:  backend?.recommended_action  ?? calc.recommended_action
  };

  const maturityLevel = AP.LEVELS.find((l) => l.key === final.agenda_maturity_level) || AP.LEVELS[1];
  const nextLevel = AP.LEVELS.find((l) => l.id === Math.min(5, maturityLevel.id + 1)) || AP.LEVELS[4];

  const ctx = Array.isArray(answers.agenda_mental_load_context)
    ? answers.agenda_mental_load_context[0]
    : answers.agenda_mental_load_context;
  const mlc = AP.MENTAL_LOAD_COPY[ctx] || AP.MENTAL_LOAD_COPY.no_siente;

  // CTAs según lead_classification
  const ctas = useCTAs(final, contact, payload);

  // WhatsApp share del diagnóstico
  const shareWA = () => {
    const text = AP.t("result.shareMsg");
    AP.trackDiscoveryEvent({
      event_name: "cta_clicked",
      discovery_lead_id: backend?.discovery_lead_id,
      lead_id: backend?.lead_id,
      cta_key: "compartir",
      cta_label: AP.t("result.share"),
      lead_score: backend?.lead_score,
      marketing_segment: backend?.marketing_segment,
      lead_classification: backend?.lead_classification,
      progress_percent: 100
    });
    window.open(AP.buildWhatsAppLink("", text), "_blank");
  };

  // Links para los CTA del bloque "Cómo te ayuda Appril"
  const howWaLink = AP.buildWhatsAppLink("", AP.t("result.waMessage"));

  return (
    <div className="result">
      <div className="result__inner">

        {/* Print-only Appril header */}
        <div className="pdf-print-header" aria-hidden="true">
          <span className="pdf-print-header__logo">Appril</span>
          <span className="pdf-print-header__sub">Diagnóstico de Agenda Blindada · discovery.appril.co</span>
        </div>

        {/* Header */}
        <div className="result__head">
          <span className="eyebrow green">{AP.t("result.headEyebrow")}</span>
          <h1>{AP.t("result.headH", { name: firstName(contact.name) })}</h1>
          <p className="result__sub">{AP.t("result.headSub")}</p>
        </div>

        {/* Card principal: nivel actual */}
        <div className="r-levelcard">
          <div className="r-levelcard__top">
            <span className="r-levelcard__eye">{AP.t("result.levelEye")}</span>
            <div className="r-levelcard__chip">
              {AP.t("result.levelChip")}
              <strong>{maturityLevel.name}</strong>
            </div>
            <h2>{AP.t("result.levelOf", { id: maturityLevel.id })}</h2>
            <p>{maturityLevel.fomo || AP.t("result.levelFomoFallback", { next: nextLevel.name })}</p>
          </div>
          <LevelBar currentId={maturityLevel.id} recommendedId={nextLevel.id} />
          <p className="r-levelcard__desc">{maturityLevel.desc}</p>
        </div>

        {/* Respuesta literal: lo que te cuesta gestionar la agenda */}
        {final.admin_cost_annual != null && (
          <div className="r-answer">
            <span className="r-answer__lab">{AP.t("result.answerLab")}</span>
            <div className="r-answer__val"><CountUp value={final.admin_cost_annual} formatter={AP.fmtUSD} /><small>{AP.t("result.perYear")}</small></div>
            <p className="r-answer__note">{AP.t("result.answerNote")}</p>
          </div>
        )}

        {/* Grid de números */}
        <div className="r-grid">
          <MetricCard
            label={AP.t("result.mLossLab")}
            rawValue={final.annual_lost_revenue}
            formatter={AP.fmtUSD}
            note={AP.t("result.mLossNote")}
            tone="coral"
          />
          <MetricCard
            label={AP.t("result.mTimeLab")}
            rawValue={final.annual_admin_hours}
            formatter={AP.fmtHours}
            note={AP.t("result.mTimeNote")}
          />
          {final.admin_cost_annual != null ? (
            <MetricCard
              label={AP.t("result.mCostLab")}
              rawValue={final.admin_cost_annual}
              formatter={AP.fmtUSD}
              note={AP.t("result.mCostNote")}
            />
          ) : (
            <MetricCard
              label={AP.t("result.mCostLabNo")}
              value={AP.t("result.mCostNoCalc")}
              note={AP.t("result.mCostNoNote")}
              muted
            />
          )}
          <MetricCard
            label={AP.t("result.mHiddenLab")}
            rawValue={final.hidden_cost_total}
            formatter={AP.fmtUSD}
            note={final.admin_cost_annual != null
              ? `${AP.fmtUSD(final.annual_lost_revenue)} + ${AP.fmtUSD(final.admin_cost_annual)} = ${AP.fmtUSD(final.hidden_cost_total)}`
              : AP.t("result.mHiddenNoteNo")}
            tone="ink"
          />
        </div>

        {/* Card emocional */}
        <div className="r-emocard">
          <span className="r-emocard__eye">{AP.t("result.emoEye")}</span>
          <h3>{mlc.title}</h3>
          <p>{mlc.body}</p>
        </div>

        {/* Cómo Appril te ayuda — sección prominente */}
        <div className="r-howcard">
          <span className="r-howcard__eye">{AP.t("result.howEye")}</span>
          <h3>{AP.t("result.howH", { name: maturityLevel.name })}</h3>
          <p className="r-howcard__sub">
            {AP.t("result.howSub")}
          </p>
          <p className="r-howcard__tagline">{AP.t("result.howTagline")}</p>

          <div className="r-howgrid">
            {AP.t("result.howGrid").map((c, i) => (
              <div key={i} className="r-how">
                <div className="r-how__top">
                  <span className="r-how__ico">{["🔗","💬","👩🏻‍🦰","✓","⚙","📊"][i]}</span>
                  <h4>{c.title}</h4>
                </div>
                <p className="r-how__desc">{c.desc}</p>
                <p className="r-how__pain">{c.pain}</p>
              </div>
            ))}
          </div>

          <div className="r-howcard__cta">
            <CTAButton
              tier="primary"
              cta={{ label: AP.t("result.howCtaLabel"), href: AP.CONFIG.signupUrl, event: "account_created_clicked", cta_key: "crear_cuenta", external: true }}
              backend={backend}
            />
            <div className="r-howcard__ctaRow">
              <CTAButton
                tier="secondary"
                cta={{ label: AP.t("result.ctaBtn.waMid"), href: howWaLink, event: "whatsapp_clicked", cta_key: "whatsapp", external: true, icon: <WAIcon size={18} /> }}
                backend={backend}
              />
              <CTAButton
                tier="tertiary"
                cta={{ label: AP.t("result.ctaBtn.demo15"), href: AP.CONFIG.demoUrl, event: "demo_clicked", cta_key: "demo", external: true }}
                backend={backend}
              />
            </div>
          </div>

          <p className="r-howcard__close">
            {AP.t("result.howClose")}
          </p>
        </div>

        {/* Cómo subir */}
        <div className="r-card">
          <span className="r-card__eye">{AP.t("result.upEye")}</span>
          <h3>{AP.t("result.upH", { name: maturityLevel.name })}</h3>
          <div className="r-bullets">
            {AP.t("result.upBullets").map((r, i) => (
              <div key={i} className="r-bullet">
                <span className="r-bullet__ico"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round"><polyline points="20 6 9 17 4 12"/></svg></span>
                <span>{r}</span>
              </div>
            ))}
          </div>
        </div>

        {/* Escenarios de mejora */}
        <div className="r-scen">
          <span className="r-scen__eye">{AP.t("result.scenEye")}</span>
          <h3>{AP.t("result.scenH")}</h3>
          <p className="r-scen__sub">{AP.t("result.scenSub")}</p>

          <div className="r-scen__group">
            <span className="r-scen__groupLab">{AP.t("result.scenMoneyLab")}</span>
            <div className="r-scen__grid">
              {[
                { tag: AP.t("result.scenTagConservador"), pct: 0.20, color: "muted" },
                { tag: AP.t("result.scenTagMedio"),       pct: 0.40, color: "ink" },
                { tag: AP.t("result.scenTagAlto"),        pct: 0.60, color: "coral" }
              ].map((s, i) => (
                <div key={i} className={"r-scen__card r-scen__card--" + s.color}>
                  <span className="r-scen__cardTag">{s.tag}</span>
                  <span className="r-scen__cardPct">{AP.t("result.scenRecuperas", { pct: Math.round(s.pct * 100) })}</span>
                  <span className="r-scen__cardVal"><CountUp value={(final.annual_lost_revenue || 0) * s.pct} formatter={AP.fmtUSD} /><small>{AP.t("result.perYear")}</small></span>
                </div>
              ))}
            </div>
          </div>

          <div className="r-scen__group">
            <span className="r-scen__groupLab">{AP.t("result.scenTimeLab")}</span>
            <div className="r-scen__grid">
              {[
                { tag: AP.t("result.scenTagConservador"), pct: 0.30, color: "muted" },
                { tag: AP.t("result.scenTagMedio"),       pct: 0.50, color: "ink" },
                { tag: AP.t("result.scenTagAlto"),        pct: 0.70, color: "coral" }
              ].map((s, i) => (
                <div key={i} className={"r-scen__card r-scen__card--" + s.color}>
                  <span className="r-scen__cardTag">{s.tag}</span>
                  <span className="r-scen__cardPct">{AP.t("result.scenAutomatizas", { pct: Math.round(s.pct * 100) })}</span>
                  <span className="r-scen__cardVal"><CountUp value={(final.annual_admin_hours || 0) * s.pct} formatter={AP.fmtHours} /><small>{AP.t("result.perYear")}</small></span>
                </div>
              ))}
            </div>
          </div>
        </div>

        {/* CTAs */}
        <div className="r-cta">
          <h3>{ctas.title}</h3>
          {ctas.text && <p className="r-cta__text">{ctas.text}</p>}
          {ctas.microcopy && (
            <p className="r-cta__fomo">{ctas.microcopy}</p>
          )}

          {/* Primario — dominante */}
          <CTAButton tier="primary" cta={ctas.primary} backend={backend} />

          {/* Secundario + Terciario */}
          <div className="r-cta__row">
            {ctas.secondary && <CTAButton tier="secondary" cta={ctas.secondary} backend={backend} />}
            {ctas.tertiary && <CTAButton tier="tertiary" cta={ctas.tertiary} backend={backend} />}
          </div>

          <div className="r-pdf">
            <button className="r-pdf__btn" onClick={() => window.print()}>
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round">
                <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
                <polyline points="7 10 12 15 17 10"/>
                <line x1="12" y1="15" x2="12" y2="3"/>
              </svg>
              Descargar diagnóstico (PDF)
            </button>
          </div>

          <div className="r-cta__share">
            <button onClick={shareWA}>
              <WAIcon size={14} />
              {AP.t("result.share")}
            </button>
          </div>
        </div>

        <div style={{ marginTop: 28, textAlign: "center" }}>
          <button className="wizard__back" onClick={onClose}>
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round"><path d="M19 12H5M11 6l-6 6 6 6"/></svg>
            {AP.t("result.backHome")}
          </button>
        </div>
      </div>
    </div>
  );
}

/* ---------- Metric card ---------- */
function MetricCard({ label, value, note, tone, muted, rawValue, formatter }) {
  return (
    <div className={"r-metric" + (tone ? " r-metric--" + tone : "") + (muted ? " is-muted" : "")}>
      <span className="r-metric__lab">{label}</span>
      <span className="r-metric__val">
        {rawValue != null && formatter
          ? <CountUp value={rawValue} formatter={formatter} />
          : value}
      </span>
      {note && <span className="r-metric__note">{note}</span>}
    </div>
  );
}

/* ---------- CTA Button con jerarquía (primary / secondary / tertiary) ---------- */
function CTAButton({ tier, cta, backend }) {
  if (!cta) return null;
  const cls = (tier === "primary"
    ? "btn btn--primary btn--lg btn--block r-cta__primary"
    : tier === "secondary"
      ? "btn btn--ghost r-cta__secondary"
      : "r-cta__tertiary") + (cta.cta_key === "whatsapp" ? " r-cta--wa" : "");
  // map de event interno -> cta_key del whitelist
  const CTA_KEY = {
    whatsapp_clicked: "whatsapp",
    demo_clicked: "demo",
    account_created_clicked: "crear_cuenta",
    guide_requested: "guia"
  };
  const onClick = () => {
    AP.trackDiscoveryEvent({
      event_name: "cta_clicked",
      discovery_lead_id: backend?.discovery_lead_id,
      lead_id: backend?.lead_id,
      cta_key: cta.cta_key || CTA_KEY[cta.event] || "otro",
      cta_label: cta.label,
      metadata: { destination: cta.href },
      lead_score: backend?.lead_score,
      marketing_segment: backend?.marketing_segment,
      lead_classification: backend?.lead_classification,
      progress_percent: 100
    });
  };
  return (
    <a className={cls} href={cta.href}
       target={cta.external ? "_blank" : "_self"} rel="noreferrer"
       onClick={onClick}>
      {cta.icon}
      <span>{cta.label}</span>
      {tier === "primary" && (
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
      )}
    </a>
  );
}

/* ---------- Build CTAs per classification (jerarquía clara) ---------- */
function useCTAs(final, contact, payload) {
  const klass = final.lead_classification;
  const seg = final.marketing_segment;
  const isHot = klass === "sql_caliente" || seg === "SUPER_HOT";
  const isMQL = klass === "mql" || seg === "HOT";
  const isWarm = klass === "lead_tibio" || seg === "WARM";

  const waMessage = AP.t("result.waMessage");
  const waLink = AP.buildWhatsAppLink("", waMessage);

  const make = (label, href, event, opts = {}) => ({
    label, href, event,
    cta_key: opts.cta_key || null,
    external: opts.external !== false,
    icon: opts.icon || null
  });

  const waHot   = make(AP.t("result.ctaBtn.waHot"), waLink, "whatsapp_clicked", { cta_key: "whatsapp", icon: <WAIcon size={18} /> });
  const waMid   = make(AP.t("result.ctaBtn.waMid"), waLink, "whatsapp_clicked", { cta_key: "whatsapp", icon: <WAIcon size={18} /> });
  const waSoft  = make(AP.t("result.ctaBtn.waSoft"), waLink, "whatsapp_clicked", { cta_key: "whatsapp", icon: <WAIcon size={16} /> });
  const guide   = make(AP.t("result.ctaBtn.guide"), waLink, "guide_requested", { cta_key: "guia", icon: <WAIcon size={16} /> });
  const demo15  = make(AP.t("result.ctaBtn.demo15"), AP.CONFIG.demoUrl, "demo_clicked", { cta_key: "demo" });
  const demoHot = make(AP.t("result.ctaBtn.demoHot"), AP.CONFIG.demoUrl, "demo_clicked", { cta_key: "demo" });
  const signup  = make(AP.t("result.ctaBtn.signup"), AP.CONFIG.signupUrl, "account_created_clicked", { cta_key: "crear_cuenta" });
  const signupSoft = make(AP.t("result.ctaBtn.signupSoft"), AP.CONFIG.signupUrl, "account_created_clicked", { cta_key: "crear_cuenta" });

  if (isHot) {
    return {
      title: AP.t("result.cta.hot.title"),
      text:  AP.t("result.cta.hot.text"),
      microcopy: AP.t("result.cta.hot.microcopy"),
      primary: waHot,
      secondary: demoHot,
      tertiary: signup
    };
  }
  if (isMQL) {
    return {
      title: AP.t("result.cta.mql.title"),
      text:  AP.t("result.cta.mql.text"),
      microcopy: AP.t("result.cta.mql.microcopy"),
      primary: signup,
      secondary: waMid,
      tertiary: demo15
    };
  }
  if (isWarm) {
    return {
      title: AP.t("result.cta.warm.title"),
      text:  AP.t("result.cta.warm.text"),
      primary: signupSoft,
      secondary: waSoft,
      tertiary: demo15
    };
  }
  return {
    title: AP.t("result.cta.cold.title"),
    text:  AP.t("result.cta.cold.text"),
    primary: signupSoft,
    secondary: guide
  };
}

/* ---------- helpers ---------- */
function firstName(s) {
  if (!s) return "Doctor/a";
  const t = s.trim().split(/\s+/)[0];
  return t.charAt(0).toUpperCase() + t.slice(1).toLowerCase();
}

/* CountUp: anima desde 0 hasta el valor objetivo (600-900ms).
   `formatter` se usa para mostrar el número (AP.fmtUSD, AP.fmtHours, etc.) */
function CountUp({ value, formatter, duration = 800 }) {
  const target = Number(value) || 0;
  const [n, setN] = React.useState(0);
  React.useEffect(() => {
    const prefersReduced = window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    if (prefersReduced || target === 0) { setN(target); return; }
    let raf = 0;
    const start = performance.now();
    const tick = (t) => {
      const elapsed = t - start;
      const p = Math.min(1, elapsed / duration);
      // easeOutCubic
      const eased = 1 - Math.pow(1 - p, 3);
      setN(target * eased);
      if (p < 1) raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, [target, duration]);
  return <span className="countup">{formatter ? formatter(n) : Math.round(n)}</span>;
}
function WAIcon({ size = 16 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor">
      <path d="M.057 24l1.687-6.163a11.867 11.867 0 0 1-1.587-5.946C.16 5.335 5.495 0 12.05 0a11.817 11.817 0 0 1 8.413 3.488 11.817 11.817 0 0 1 3.48 8.414c-.003 6.557-5.338 11.892-11.893 11.892a11.9 11.9 0 0 1-5.688-1.448L.057 24zm6.597-3.807c1.676.995 3.276 1.591 5.392 1.592 5.448 0 9.886-4.434 9.889-9.885.002-5.462-4.415-9.89-9.881-9.892-5.452 0-9.887 4.434-9.889 9.884-.001 2.225.651 3.891 1.746 5.634l-.999 3.648 3.742-.981z"/>
    </svg>
  );
}

window.ResultDashboard = ResultDashboard;