/* global React, PrimaryButton */
// Yomee — Profile-specific question screens.
// Driven by a static config of profile -> question list. Each call renders
// ONE question. The parent (router in App.jsx) advances stepIndex and
// re-mounts this screen for the next question, OR jumps straight to upload
// when skip is tapped or there are no more questions.
//
// Profile keys (optimizador, escalador) come from ProfileResultScreen's
// classifyProfile. User-visible names match the keys 1:1.

const { useMemo: useMemoQ } = React;

// Profile color tokens (must match ProfileResultScreen accent colors).
// References DS tokens via getComputedStyle is overkill here — we use the
// canonical token strings directly so the progress bar resolves them.
const PROFILE_COLOR = {
  totalero:    "var(--yo-mint-700)",
  optimizador: "var(--yo-orange-soft)",
  escalador:   "var(--yo-coral)",
  reiniciador: "var(--yo-lavender)",
};

// Total *steps* per profile (profile screen + N questions + upload).
// Used so the progress bar feels accurate across the whole post-result flow.
const PROFILE_TOTAL_STEPS = {
  totalero:    2, // profile + upload (no questions)
  optimizador: 4, // profile + 2 questions + upload
  escalador:   5, // profile + 3 questions + upload
  reiniciador: 5, // profile + 3 questions + upload
};

// Skip link copy per profile.
const SKIP_LABEL = {
  optimizador: "Saltar preguntas",
  escalador:   "Ir directo a mi radiografía",
  reiniciador: "Prefiero ir directo",
  totalero:    "", // no questions, no skip
};

// Per-profile question list. Index is 0-based; we render index = stepIndex.
// Each entry: { question, options:[3], tip?, tips? }
//   tip   — single static tip shown for any selected option
//   tips  — object mapping option label -> per-option tip (overrides tip)
const QUESTIONS = {
  totalero: [],
  optimizador: [
    {
      question: "¿Cuántas tarjetas de crédito tienes activas?",
      options: ["1 tarjeta", "2 tarjetas", "3 o más"],
      tips: {
        "1 tarjeta":
          "Con una sola tarjeta es más fácil tener control. Lo importante es saber si está trabajando a tu favor o en tu contra.",
        "2 tarjetas":
          "Tener más de una tarjeta no es malo — el truco está en saber cuál te conviene más.",
        "3 o más":
          "Con varias tarjetas es fácil perder el rastro de cuál te cuesta más. Vamos a poner cada una en su lugar.",
      },
    },
    {
      question: "¿Qué te gustaría lograr con tu deuda?",
      options: [
        "Pagarla más rápido",
        "Pagar menos intereses",
        "Tenerla en una sola tarjeta",
      ],
      tips: {
        "Pagarla más rápido":
          "Salir de la deuda antes libera más que dinero — libera tu cabeza. Vamos a calcular tu camino más corto.",
        "Pagar menos intereses":
          "Cada peso menos en intereses es un peso más en tu bolsillo. Vamos a encontrar dónde están las fugas.",
        "Tenerla en una sola tarjeta":
          "Consolidar bien hecho puede ahorrarte miles. Vamos a ver si es tu mejor jugada.",
      },
    },
  ],
  escalador: [
    {
      question: "¿Cuántas tarjetas de crédito tienes activas?",
      options: ["1 tarjeta", "2 tarjetas", "3 o más"],
      tips: {
        "1 tarjeta":
          "Con una sola tarjeta el camino es más claro. Vamos a ver exactamente cuánto te está costando hoy.",
        "2 tarjetas":
          "Con dos tarjetas el truco está en saber cuál atacar primero. Esa decisión es la que más ahorra en intereses.",
        "3 o más":
          "Cuando hay varias tarjetas con saldo, atacarlas todas a la vez no funciona. Vamos a encontrar el orden correcto.",
      },
    },
    {
      question: "¿Sabes cuánto pagas aproximadamente en intereses al año?",
      options: ["Sí, lo sé", "Tengo una idea", "No lo sé"],
      tips: {
        "Sí, lo sé":
          "Saberlo ya te pone adelante de la mayoría. Ahora vamos a ver cómo bajarlo.",
        "Tengo una idea":
          "Casi siempre el número real es mayor al estimado. Vamos a verlo con precisión.",
        "No lo sé":
          "La mayoría no lo sabe — y los bancos no lo hacen fácil de ver. Por eso existe la radiografía.",
      },
    },
    {
      question: "¿Cuánto tiempo llevas pagando el mínimo?",
      options: ["Menos de 6 meses", "6 a 12 meses", "Más de un año"],
      tip:
        "Cada mes que pasa pagando el mínimo, el banco gana más que tú. Vamos a revertir eso.",
    },
  ],
  reiniciador: [
    {
      question: "¿Qué tan seguido piensas en tu deuda?",
      options: ["Todo el tiempo", "Seguido", "Trato de no pensar en ello"],
      tips: {
        "Todo el tiempo":
          "Esa carga es real y es agotadora. El primer alivio llega cuando tienes un plan claro frente a ti.",
        "Seguido":
          "Pensar en ella sin un plan agota. Con un plan, esa misma energía se convierte en acción.",
        "Trato de no pensar en ello":
          "No pensarla no la hace desaparecer — pero entenderla bien quita la mayor parte del miedo.",
      },
    },
    {
      question: "¿Has intentado antes organizarte para pagarla?",
      options: [
        "Sí, pero no funcionó",
        "Estoy empezando a intentarlo",
        "Todavía no",
      ],
      tips: {
        "Sí, pero no funcionó":
          "Que no haya funcionado antes no dice nada malo de ti — dice que necesitabas mejores herramientas.",
        "Estoy empezando a intentarlo":
          "Empezar es la parte más difícil, y ya la diste. Lo demás lo construimos contigo.",
        "Todavía no":
          "Está bien — hoy es el día. No vamos a apurar nada, vamos paso a paso.",
      },
    },
    {
      question: "¿Cuántas tarjetas tienes con pagos pendientes?",
      options: ["1 tarjeta", "2 tarjetas", "3 o más"],
      tips: {
        "1 tarjeta":
          "Una tarjeta es un punto de partida claro. Vamos a darte un primer paso concreto, sin abrumarte.",
        "2 tarjetas":
          "Con dos tarjetas vamos a definir cuál priorizar primero — paso a paso, sin presión.",
        "3 o más":
          "Respira. No vamos a atacarlas todas a la vez — empezamos por la que más te alivia.",
      },
    },
  ],
};

// ────────────────────────────────────────────────
// Top bar with progress fill, back arrow, and "Pregunta X de Y" label.
// Matches OnboardingHeader's layout but with a profile-colored fill.
// (Help "?" icon intentionally omitted on all profile question screens.)
// ────────────────────────────────────────────────
function ProfileTopBar({ accent, current, total, onBack }) {
  const pct = (current / total) * 100;
  return (
    <>
      {/* Track */}
      <div
        style={{
          position: "absolute",
          top: 0,
          left: 0,
          right: 0,
          height: 6,
          background: "rgba(26,26,26,0.12)",
          zIndex: 6,
          overflow: "hidden",
        }}
      >
        <div
          style={{
            height: "100%",
            width: `${pct}%`,
            background: accent,
            transition: "width 320ms cubic-bezier(0.2,0.8,0.2,1)",
          }}
        />
      </div>

      {/* Back + label + help */}
      <div
        style={{
          position: "absolute",
          top: 64,
          left: 0,
          right: 0,
          height: 38,
          zIndex: 5,
          display: "flex",
          alignItems: "center",
          padding: "0 16px",
        }}
      >
        <button
          onClick={onBack}
          aria-label="Atrás"
          style={{
            width: 32,
            height: 32,
            background: "transparent",
            border: "none",
            padding: 0,
            cursor: "pointer",
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
            flexShrink: 0,
          }}
        >
          <img
            src="assets/icon-arrow-left.svg"
            alt=""
            style={{ width: 22, height: 16 }}
          />
        </button>

        {/* "Pregunta X de Y" label */}
        <span
          style={{
            marginLeft: 8,
            fontFamily: '"Geist Mono", var(--font-mono)',
            fontWeight: 700,
            fontSize: 13,
            color: "#1a1a1a",
            letterSpacing: "0.01em",
          }}
        >
          Pregunta {current} de {total}
        </span>

      </div>
    </>
  );
}

// ────────────────────────────────────────────────
// Pill option button. Outlined by default; selected state = solid profile color.
// ────────────────────────────────────────────────
function OptionPill({ label, selected, accent, onClick }) {
  return (
    <button
      onClick={onClick}
      style={{
        width: "100%",
        height: 52,
        borderRadius: 999,
        border: selected
          ? `1.5px solid ${accent}`
          : "1.5px solid rgba(26,26,26,0.18)",
        background: selected ? accent : "transparent",
        color: selected ? "#fff" : "#1a1a1a",
        fontFamily: '"Geist Mono", var(--font-mono)',
        fontWeight: 700,
        fontSize: 15,
        letterSpacing: "0.005em",
        cursor: "pointer",
        padding: "0 18px",
        textAlign: "center",
        transition:
          "background 160ms ease, color 160ms ease, border-color 160ms ease",
      }}
    >
      {label}
    </button>
  );
}

// ────────────────────────────────────────────────
// Main screen
//   profile      — internal key (totalero | parcialero | minimero | reiniciador)
//   stepIndex    — 0-based question index
//   onAnswer     — (answer, stepIndex) => void  parent decides whether to
//                  advance to the next question or move to upload
//   onSkip       — () => void  jump to upload, bypassing remaining qs
//   onBack       — () => void  back to previous step (parent decides target)
// ────────────────────────────────────────────────
function ProfileQuestionScreen({
  profile = "optimizador",
  stepIndex = 0,
  onAnswer,
  onSkip,
  onBack,
}) {
  const accent = PROFILE_COLOR[profile] || PROFILE_COLOR.optimizador;
  const list = QUESTIONS[profile] || [];
  const q = list[stepIndex];

  // Progress: profile screen counts as step 1; this question is profile + idx + 1.
  const totalSteps = PROFILE_TOTAL_STEPS[profile] || 2;
  const currentStep = 1 /*profile*/ + (stepIndex + 1);

  // Selection state — fresh per question instance. Re-mounting this screen with
  // a new stepIndex resets state naturally.
  const [selected, setSelected] = React.useState(null);

  // Defensive: if profile has no questions or index out of range, render nothing.
  if (!q) return null;

  const submit = () => {
    if (selected == null) return;
    onAnswer && onAnswer(q.options[selected], stepIndex);
  };

  // Question count label (1 de 2, 2 de 3, etc.) for the bar above
  const questionsTotal = list.length;
  const questionNumber = stepIndex + 1;

  return (
    <div
      style={{
        position: "relative",
        width: "100%",
        height: "100%",
        background: "var(--yo-bg)",
        display: "flex",
        flexDirection: "column",
        overflow: "hidden",
      }}
    >
      <ProfileTopBar
        accent={accent}
        current={questionNumber}
        total={questionsTotal}
        onBack={onBack}
      />

      {/* Scrollable content */}
      <div
        style={{
          flex: 1,
          padding: "118px 24px 16px",
          display: "flex",
          flexDirection: "column",
          minHeight: 0,
          overflow: "auto",
        }}
      >
        {/* Mascot — right aligned, same size as profile screen (140px circle) */}
        <div
          style={{
            display: "flex",
            justifyContent: "flex-end",
            marginBottom: 14,
          }}
        >
          <div
            style={{
              width: 96,
              height: 96,
              borderRadius: "50%",
              background: "rgba(255,255,255,0.55)",
              display: "flex",
              alignItems: "center",
              justifyContent: "center",
              border: `2px solid ${accent}22`,
              flexShrink: 0,
            }}
          >
            <img
              src="assets/hedgehog-welcome.png"
              alt=""
              style={{ width: 86, height: 86, objectFit: "contain" }}
            />
          </div>
        </div>

        {/* Question */}
        <h1
          style={{
            margin: "0 0 22px",
            fontFamily: '"Geist Mono", var(--font-mono)',
            fontWeight: 900,
            fontSize: 18,
            lineHeight: "26px",
            color: "#1a1a1a",
            letterSpacing: "-0.005em",
          }}
        >
          {q.question}
        </h1>

        {/* Options */}
        <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
          {q.options.map((opt, i) => (
            <OptionPill
              key={i}
              label={opt}
              selected={selected === i}
              accent={accent}
              onClick={() => setSelected(i)}
            />
          ))}
        </div>

        {/* Tip box — only visible AFTER an answer is picked.
            We render unconditionally so the slide-in animation runs the first
            time `selected` becomes non-null. Subsequent option changes leave
            the tip mounted (no re-animation), per spec. */}
        <div
          aria-hidden={selected == null}
          style={{
            marginTop: 22,
            background: "#F5F5F5",
            borderRadius: 12,
            padding: "12px 14px",
            display: "flex",
            alignItems: "flex-start",
            gap: 10,
            opacity: selected == null ? 0 : 1,
            transform:
              selected == null ? "translateY(8px)" : "translateY(0)",
            transition:
              "opacity 200ms ease-out, transform 200ms ease-out",
            pointerEvents: selected == null ? "none" : "auto",
            visibility: selected == null ? "hidden" : "visible",
          }}
        >
          <div
            style={{
              width: 36,
              height: 36,
              borderRadius: "50%",
              background: "#fff",
              flexShrink: 0,
              display: "flex",
              alignItems: "center",
              justifyContent: "center",
            }}
          >
            <img
              src="assets/hedgehog-welcome.png"
              alt=""
              style={{ width: 32, height: 32, objectFit: "contain" }}
            />
          </div>
          <p
            style={{
              margin: 0,
              fontFamily: '"Geist Mono", var(--font-mono)',
              fontSize: 13,
              lineHeight: "19px",
              color: "#555",
              fontWeight: 500,
            }}
          >
            {selected != null && q.tips
              ? q.tips[q.options[selected]] || q.tip
              : q.tip}
          </p>
        </div>

        <div style={{ flex: 1, minHeight: 24 }} />
      </div>

      {/* Sticky CTA + skip */}
      <div
        style={{
          padding: "12px 24px 24px",
          background: "var(--yo-bg)",
          flexShrink: 0,
          display: "flex",
          flexDirection: "column",
          gap: 10,
        }}
      >
        <PrimaryButton onClick={submit} disabled={selected == null}>
          Continuar
        </PrimaryButton>
        <button
          onClick={onSkip}
          style={{
            background: "transparent",
            border: "none",
            padding: "6px 0",
            margin: 0,
            cursor: "pointer",
            fontFamily: "var(--font-body)",
            fontSize: 14,
            fontWeight: 700,
            color: "var(--yo-ink)",
            textDecoration: "underline",
            textUnderlineOffset: 3,
            textDecorationThickness: 1.5,
            letterSpacing: "0.01em",
            textAlign: "center",
            width: "100%",
          }}
        >
          {SKIP_LABEL[profile]}
        </button>
      </div>
    </div>
  );
}

Object.assign(window, {
  ProfileQuestionScreen,
  PROFILE_COLOR,
  PROFILE_TOTAL_STEPS,
  QUESTIONS_BY_PROFILE: QUESTIONS,
});
