// Yomee — Onboarding Welcome Screen
// Third onboarding step. Hedgehog mascot + "Perfecto, {name}." + Empezar.
// Uses OnboardingHeader from OnboardingShared.jsx; PrimaryButton from Shared.jsx
/* global React, OnboardingHeader, PrimaryButton */

// ── Confetti ───────────────────────────────────────────────────────
// Homologated with AnalyzingScreen's confetti: lightweight CSS-only burst.
// Generates ~36 colored chips that fall from the top with random
// horizontal drift, rotation and delay. Brand palette so it stays on-system.
const OW_CONFETTI_COLORS = [
  "var(--yo-mint-700)",
  "var(--yo-forest-500)",
  "var(--yo-orange-soft)",
  "var(--yo-coral)",
  "var(--yo-yellow)",
  "var(--yo-lavender)",
];

function ConfettiBurst({ count = 36 }) {
  const pieces = React.useMemo(() => {
    return Array.from({ length: count }, (_, i) => {
      const left = Math.random() * 100;
      const delay = Math.random() * 350;
      const duration = 1200 + Math.random() * 900;
      const drift = (Math.random() - 0.5) * 120;
      const rot = Math.random() * 720 - 360;
      const size = 6 + Math.random() * 6;
      const color =
        OW_CONFETTI_COLORS[Math.floor(Math.random() * OW_CONFETTI_COLORS.length)];
      const isCircle = Math.random() < 0.3;
      return { left, delay, duration, drift, rot, size, color, isCircle, i };
    });
  }, [count]);
  return (
    <div
      aria-hidden="true"
      style={{
        position: "absolute",
        inset: 0,
        pointerEvents: "none",
        overflow: "hidden",
        zIndex: 30,
      }}
    >
      {pieces.map((p) => (
        <span
          key={p.i}
          style={{
            position: "absolute",
            top: -16,
            left: `${p.left}%`,
            width: p.size,
            height: p.isCircle ? p.size : p.size * 1.6,
            background: p.color,
            borderRadius: p.isCircle ? "50%" : 2,
            opacity: 0,
            transform: `translate(0, 0) rotate(0deg)`,
            animation: `yo-confetti-fall ${p.duration}ms cubic-bezier(.2,.7,.3,1) ${p.delay}ms forwards`,
            ["--drift"]: `${p.drift}px`,
            ["--rot"]: `${p.rot}deg`,
          }}
        />
      ))}
      <style>{`
        @keyframes yo-confetti-fall {
          0%   { transform: translate(0, 0) rotate(0deg); opacity: 0; }
          10%  { opacity: 1; }
          100% {
            transform: translate(var(--drift), 110vh) rotate(var(--rot));
            opacity: 1;
          }
        }
      `}</style>
    </div>
  );
}

function OnboardingWelcomeScreen({ onContinue }) {
  // Greeting reads reactively from the active persona so a Demo-pill
  // switch updates the name + gender agreement instantly.
  const yomeeUser = (window.useYomeeUser && window.useYomeeUser()) || {};
  const name = yomeeUser.firstName || yomeeUser.name || "amigo";
  const greeting = yomeeUser.gender === "female" ? "Perfecta" : "Perfecto";
  return (
    <div
      style={{
        position: "relative",
        width: "100%",
        height: "100%",
        background: "var(--yo-bg)",
        display: "flex",
        flexDirection: "column",
      }}
    >
      <OnboardingHeader hideBack progress={0.5} noHelp />

      <ConfettiBurst />

      <div
        style={{
          flex: 1,
          padding: "120px 24px 28px",
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
          minHeight: 0,
        }}
      >
        <img
          src="assets/hedgehog-welcome.png"
          alt=""
          style={{
            width: 220,
            height: 220,
            objectFit: "contain",
            marginTop: 20,
          }}
        />

        <div
          style={{
            marginTop: 28,
            fontFamily: "var(--font-mono)",
            fontWeight: 500,
            fontSize: 26,
            lineHeight: "36px",
            letterSpacing: "0.005em",
            color: "var(--yo-ink)",
            textAlign: "center",
          }}
        >
          <div>
            {greeting},{" "}
            <span style={{ fontWeight: 700 }}>{name}</span>.
          </div>
          <div style={{ marginTop: 14 }}>
            Vamos a entender
            <br />
            mejor tu situación
            <br />
            financiera.
          </div>
        </div>

        <div style={{ flex: 1 }} />

        <p
          style={{
            margin: "0 0 18px",
            textAlign: "center",
            fontFamily: "var(--font-body)",
            fontSize: 13.5,
            lineHeight: "20px",
            color: "var(--yo-ink-700, rgba(20,32,28,0.72))",
            maxWidth: 320,
          }}
        >
          En unos minutos tendrás una primera
          <br />
          visión de cómo estás realmente.
        </p>

        <PrimaryButton onClick={onContinue}>Empezar</PrimaryButton>
      </div>
    </div>
  );
}

window.OnboardingWelcomeScreen = OnboardingWelcomeScreen;