// Yomee — Push Notifications Screen
// Fourth onboarding step. Value-prop screen with 3 feature cards + native dialog.
// Uses OnboardingHeader from OnboardingShared.jsx; PrimaryButton from Shared.jsx
/* global React, OnboardingHeader, PrimaryButton */

function PushNotificationsScreen({ onActivate, onSkip, dimmed }) {
  return (
    <div
      style={{
        position: "relative",
        width: "100%",
        height: "100%",
        background: "var(--yo-bg)",
        display: "flex",
        flexDirection: "column",
      }}
    >
      <OnboardingHeader hideBack progress={0.66} noHelp />

      <div
        style={{
          flex: 1,
          padding: "120px 24px 28px",
          display: "flex",
          flexDirection: "column",
          minHeight: 0,
          filter: dimmed ? "brightness(0.85)" : "none",
          transition: "filter 200ms ease",
        }}
      >
        <h1
          style={{
            margin: "0 0 12px",
            textAlign: "center",
            fontFamily: "var(--font-mono)",
            fontWeight: 700,
            fontSize: 28,
            lineHeight: "36px",
            letterSpacing: "0.005em",
            color: "var(--yo-ink)",
          }}
        >
          No pierdas ni un<br />peso más
        </h1>
        <p
          style={{
            margin: "0 auto 24px",
            maxWidth: 320,
            textAlign: "center",
            fontFamily: "var(--font-body)",
            fontSize: 15,
            lineHeight: "22px",
            color: "var(--yo-ink-700, rgba(20,32,28,0.72))",
          }}
        >
          Activa las notificaciones y deja que Yomee te avise antes de que los
          intereses te cobren.
        </p>

        <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
          <FeatureCard
            icon={<CheckIcon />}
            title="Fechas de pago a tiempo"
            body="Te avisamos antes del corte para que nunca pagues de más."
          />
          <FeatureCard
            icon={<ClockIcon />}
            title="Alertas de intereses y cargos"
            body="Conoce exactamente cuánto te cuesta esperar un día más."
          />
          <FeatureCard
            icon={<DiamondIcon />}
            title="Insights personalizados"
            body="Recomendaciones basadas en tu perfil financiero real."
          />
        </div>

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

        <PrimaryButton onClick={onActivate}>
          Activar notificaciones
        </PrimaryButton>
        <button
          type="button"
          onClick={onSkip}
          style={{
            marginTop: 14,
            background: "transparent",
            border: "none",
            padding: "8px 0",
            cursor: "pointer",
            fontFamily: "var(--font-body)",
            fontSize: 14,
            fontWeight: 700,
            color: "var(--yo-ink)",
            textDecoration: "underline",
            textUnderlineOffset: 4,
          }}
        >
          Ahora no
        </button>
      </div>
    </div>
  );
}

function FeatureCard({ icon, title, body }) {
  return (
    <div
      style={{
        display: "flex",
        gap: 14,
        alignItems: "flex-start",
        padding: "14px 16px",
        background: "var(--yo-bg-alt, rgba(241,232,222,0.85))",
        borderRadius: 16,
      }}
    >
      <div
        style={{
          flex: "0 0 36px",
          width: 36,
          height: 36,
          marginTop: 2,
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
        }}
      >
        {icon}
      </div>
      <div style={{ flex: 1 }}>
        <div
          style={{
            fontFamily: "var(--font-body)",
            fontSize: 14.5,
            fontWeight: 700,
            color: "var(--yo-ink)",
            marginBottom: 2,
          }}
        >
          {title}
        </div>
        <div
          style={{
            fontFamily: "var(--font-body)",
            fontSize: 13,
            lineHeight: "18px",
            color: "var(--yo-ink-700, rgba(20,32,28,0.72))",
          }}
        >
          {body}
        </div>
      </div>
    </div>
  );
}

function CheckIcon() {
  return (
    <svg width="36" height="36" viewBox="0 0 36 36" fill="none">
      <circle cx="18" cy="18" r="18" fill="#2EA56A" />
      <path
        d="M11 18.5l4.5 4.5L25 13.5"
        stroke="#fff"
        strokeWidth="2.6"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </svg>
  );
}

function ClockIcon() {
  return (
    <svg width="36" height="36" viewBox="0 0 36 36" fill="none">
      <circle cx="18" cy="18" r="16" stroke="#E26A8B" strokeWidth="2.4" fill="#fff" />
      <path
        d="M18 10v8.4l5 3"
        stroke="#1A2520"
        strokeWidth="2"
        strokeLinecap="round"
        strokeLinejoin="round"
        fill="none"
      />
    </svg>
  );
}

function DiamondIcon() {
  return (
    <svg width="36" height="36" viewBox="0 0 36 36" fill="none">
      <circle cx="18" cy="18" r="18" fill="#2F7FE0" />
      <path
        d="M18 8l5 10-5 10-5-10z"
        fill="#fff"
      />
      <path d="M13 18h10" stroke="#2F7FE0" strokeWidth="1.4" />
    </svg>
  );
}

function NativePushDialog({ onAllow, onDeny }) {
  return (
    <div
      style={{
        position: "absolute",
        inset: 0,
        background: "rgba(110,110,110,0.45)",
        zIndex: 30,
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        padding: "0 36px",
        animation: "yomeeDialogScrim 160ms ease-out both",
      }}
    >
      <div
        role="alertdialog"
        aria-label="Activar notificaciones"
        style={{
          width: "100%",
          maxWidth: 270,
          background: "rgba(245,245,245,0.96)",
          backdropFilter: "blur(20px)",
          WebkitBackdropFilter: "blur(20px)",
          borderRadius: 14,
          overflow: "hidden",
          boxShadow: "0 18px 60px -8px rgba(0,0,0,0.35)",
          fontFamily:
            '-apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif',
          animation: "yomeeDialogPop 220ms cubic-bezier(0.2,0.8,0.2,1) both",
        }}
      >
        <div style={{ padding: "18px 16px 14px", textAlign: "center" }}>
          <div
            style={{
              fontSize: 17,
              fontWeight: 600,
              color: "#000",
              marginBottom: 6,
            }}
          >
            “Yomee” quiere enviarte notificaciones
          </div>
          <div
            style={{
              fontSize: 13,
              lineHeight: "17px",
              color: "rgba(0,0,0,0.85)",
            }}
          >
            Las notificaciones pueden incluir alertas, sonidos e iconos. Puedes
            configurarlas en Ajustes.
          </div>
        </div>
        <div
          style={{
            display: "flex",
            borderTop: "0.5px solid rgba(0,0,0,0.18)",
          }}
        >
          <button
            onClick={onDeny}
            style={{
              flex: 1,
              height: 44,
              border: "none",
              background: "transparent",
              fontSize: 17,
              color: "#0a84ff",
              cursor: "pointer",
              fontFamily: "inherit",
            }}
          >
            Omitir
          </button>
          <div
            style={{
              width: "0.5px",
              background: "rgba(0,0,0,0.18)",
            }}
          />
          <button
            onClick={onAllow}
            style={{
              flex: 1,
              height: 44,
              border: "none",
              background: "transparent",
              fontSize: 17,
              fontWeight: 600,
              color: "#0a84ff",
              cursor: "pointer",
              fontFamily: "inherit",
            }}
          >
            Permitir
          </button>
        </div>
      </div>
      <style>{`
        @keyframes yomeeDialogScrim {
          from { background: rgba(110,110,110,0); }
          to   { background: rgba(110,110,110,0.45); }
        }
        @keyframes yomeeDialogPop {
          from { opacity: 0; transform: scale(0.92); }
          to   { opacity: 1; transform: scale(1); }
        }
      `}</style>
    </div>
  );
}

window.PushNotificationsScreen = PushNotificationsScreen;
window.NativePushDialog = NativePushDialog;
window.FeatureCard = FeatureCard;
window.CheckIcon = CheckIcon;
window.ClockIcon = ClockIcon;
window.DiamondIcon = DiamondIcon;
