// Animación del proceso: iPhone que cicla entre Create → Add → Share
// con elementos flotando alrededor

function ProcessAnimation({
  width = 320,
  steps,
  accent = "#FF4B5C",
  variant = "playful", // "playful" | "premium" | "product"
  autoplay = true,
  onStepChange,
}) {
  const [step, setStep] = React.useState(0);

  React.useEffect(() => {
    if (!autoplay) return;
    const id = setInterval(() => {
      setStep((s) => (s + 1) % steps.length);
    }, 3200);
    return () => clearInterval(id);
  }, [autoplay, steps.length]);

  React.useEffect(() => {
    if (onStepChange) onStepChange(step);
  }, [step, onStepChange]);

  const current = steps[step];

  return (
    <div
      style={{
        position: "relative",
        width: width + 200,
        height: width * (844 / 390) + 80,
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
      }}
    >
      {/* Floating decorative elements */}
      <FloatingDeco step={step} variant={variant} accent={accent} />

      {/* Phone with crossfading screens */}
      <div style={{ position: "relative", zIndex: 5 }}>
        <div
          style={{
            width,
            height: width * (844 / 390),
            borderRadius: width * 0.13,
            background: "#0a0a0a",
            padding: width * 0.025,
            boxShadow: "0 40px 80px -30px rgba(15,20,40,0.4), 0 15px 40px -15px rgba(15,20,40,0.25)",
            position: "relative",
          }}
        >
          <div
            style={{
              width: "100%",
              height: "100%",
              borderRadius: width * 0.105,
              overflow: "hidden",
              background: "#FFF7F0",
              position: "relative",
            }}
          >
            {steps.map((s, i) => (
              <img
                key={i}
                src={s.src}
                alt=""
                style={{
                  position: "absolute",
                  inset: 0,
                  width: "100%",
                  height: "100%",
                  objectFit: "cover",
                  objectPosition: "top",
                  opacity: i === step ? 1 : 0,
                  transform: i === step ? "scale(1)" : "scale(1.03)",
                  transition: "opacity 700ms ease, transform 1.6s ease",
                }}
              />
            ))}
          </div>
        </div>

        {/* Step badge under phone */}
        <div
          style={{
            position: "absolute",
            bottom: -56,
            left: "50%",
            transform: "translateX(-50%)",
            display: "flex",
            gap: 8,
            alignItems: "center",
          }}
        >
          {steps.map((_, i) => (
            <button
              key={i}
              onClick={() => setStep(i)}
              aria-label={`Step ${i + 1}`}
              style={{
                width: i === step ? 28 : 8,
                height: 8,
                borderRadius: 999,
                background: i === step ? accent : "var(--divider)",
                border: "none",
                padding: 0,
                cursor: "pointer",
                transition: "all 400ms ease",
              }}
            />
          ))}
        </div>
      </div>

      {/* Step caption */}
      <div
        style={{
          position: "absolute",
          top: 0,
          left: 0,
          right: 0,
          textAlign: "center",
          pointerEvents: "none",
        }}
      >
        <div
          key={step}
          style={{
            display: "inline-flex",
            alignItems: "center",
            gap: 8,
            padding: "8px 16px",
            borderRadius: 999,
            background: "var(--surface-1)",
            border: "1px solid var(--divider)",
            fontSize: 13,
            fontWeight: 600,
            color: "var(--text-1)",
            animation: "wisht-fade-in 500ms ease",
          }}
        >
          <span
            style={{
              width: 22,
              height: 22,
              borderRadius: 999,
              background: accent,
              color: "#fff",
              display: "inline-flex",
              alignItems: "center",
              justifyContent: "center",
              fontSize: 11,
              fontWeight: 700,
            }}
          >
            {step + 1}
          </span>
          {current.label}
        </div>
      </div>
    </div>
  );
}

// Floating elements that change per step
function FloatingDeco({ step, variant, accent }) {
  // Per-step set of decorative elements positioned around the phone.
  const setsByStep = [
    // Step 0: Create
    [
      { kind: "card", x: -90, y: 80, rot: -8, content: "🎂 Birthday", color: "#FFE5DE" },
      { kind: "card", x: 240, y: 130, rot: 6, content: "🎁 Gift list", color: "#FFF1C7" },
      { kind: "dot", x: -40, y: 30, size: 14, color: "#51E3C2" },
      { kind: "dot", x: 280, y: 60, size: 10, color: "#FFC857" },
      { kind: "sparkle", x: -60, y: 380, color: accent },
    ],
    // Step 1: Add
    [
      { kind: "wish", x: -110, y: 120, rot: -5, content: "Black T-shirt", price: "$29" },
      { kind: "wish", x: 220, y: 200, rot: 4, content: "Razor", price: "$12" },
      { kind: "link", x: 250, y: 80, rot: 8 },
      { kind: "dot", x: -50, y: 360, size: 12, color: "#FF4B5C" },
      { kind: "sparkle", x: 290, y: 380, color: "#51E3C2" },
    ],
    // Step 2: Share
    [
      { kind: "avatar", x: -90, y: 80, name: "M", color: "#FFC857" },
      { kind: "avatar", x: -110, y: 180, name: "J", color: "#51E3C2" },
      { kind: "avatar", x: 250, y: 100, name: "K", color: "#FF4B5C" },
      { kind: "avatar", x: 270, y: 220, name: "S", color: "#1B2141" },
      { kind: "heart", x: -60, y: 320, color: accent },
      { kind: "sparkle", x: 290, y: 380, color: "#FFC857" },
    ],
  ];

  const items = setsByStep[step] || [];

  return (
    <>
      {items.map((it, i) => (
        <FloatingItem key={`${step}-${i}`} item={it} index={i} />
      ))}
    </>
  );
}

function FloatingItem({ item, index }) {
  const baseStyle = {
    position: "absolute",
    left: `calc(50% + ${item.x}px)`,
    top: item.y,
    transform: `rotate(${item.rot || 0}deg)`,
    animation: `wisht-float-in 600ms ${index * 80}ms backwards ease-out, wisht-bob ${4 + index * 0.3}s ease-in-out ${index * 0.2}s infinite`,
    zIndex: 2,
  };

  if (item.kind === "card") {
    return (
      <div
        style={{
          ...baseStyle,
          background: item.color,
          padding: "10px 14px",
          borderRadius: 12,
          fontSize: 13,
          fontWeight: 600,
          color: "#1B2141",
          boxShadow: "0 12px 24px -10px rgba(15,20,40,0.2)",
          whiteSpace: "nowrap",
        }}
      >
        {item.content}
      </div>
    );
  }
  if (item.kind === "wish") {
    return (
      <div
        style={{
          ...baseStyle,
          background: "#fff",
          padding: "10px 14px",
          borderRadius: 12,
          fontSize: 13,
          fontWeight: 600,
          color: "#1B2141",
          boxShadow: "0 12px 24px -10px rgba(15,20,40,0.18)",
          display: "flex",
          alignItems: "center",
          gap: 10,
          whiteSpace: "nowrap",
        }}
      >
        <span style={{ width: 6, height: 6, borderRadius: 999, background: "#FF4B5C" }} />
        {item.content}
        <span style={{ color: "#6B7280", fontWeight: 500, fontSize: 12 }}>{item.price}</span>
      </div>
    );
  }
  if (item.kind === "link") {
    return (
      <div
        style={{
          ...baseStyle,
          background: "#fff",
          padding: 8,
          borderRadius: 10,
          boxShadow: "0 8px 18px -8px rgba(15,20,40,0.18)",
        }}
      >
        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#FF4B5C" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
          <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/>
          <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/>
        </svg>
      </div>
    );
  }
  if (item.kind === "avatar") {
    return (
      <div
        style={{
          ...baseStyle,
          width: 44,
          height: 44,
          borderRadius: 999,
          background: item.color,
          color: "#fff",
          display: "inline-flex",
          alignItems: "center",
          justifyContent: "center",
          fontWeight: 700,
          fontSize: 16,
          boxShadow: "0 8px 18px -6px rgba(15,20,40,0.25)",
          border: "3px solid var(--surface-1)",
        }}
      >
        {item.name}
      </div>
    );
  }
  if (item.kind === "dot") {
    return (
      <div
        style={{
          ...baseStyle,
          width: item.size,
          height: item.size,
          borderRadius: 999,
          background: item.color,
        }}
      />
    );
  }
  if (item.kind === "sparkle") {
    return (
      <svg
        style={{ ...baseStyle, width: 28, height: 28 }}
        viewBox="0 0 24 24"
        fill={item.color}
      >
        <path d="M12 2l1.5 6.5L20 10l-6.5 1.5L12 18l-1.5-6.5L4 10l6.5-1.5L12 2z" />
      </svg>
    );
  }
  if (item.kind === "heart") {
    return (
      <svg
        style={{ ...baseStyle, width: 26, height: 26 }}
        viewBox="0 0 24 24"
        fill={item.color}
      >
        <path d="M12 21s-7-4.5-9.5-9C1 9.5 2 6 5 5c2-.5 3.5.5 4.5 2 1-.5 2-2 4.5-2 3 1 4 4.5 2.5 7-2.5 4.5-9.5 9-9.5 9z" />
      </svg>
    );
  }
  return null;
}

window.ProcessAnimation = ProcessAnimation;