const NightScreen = ({ onClose }) => {
  const { snapshot } = useAinaApp();

  if (!snapshot?.nightly) {
    return <LoadingState title="Noche" body="Preparando resumen nocturno..." />;
  }

  const nightly = snapshot.nightly;

  return (
    <div
      style={{
        position: "absolute",
        inset: 0,
        zIndex: 60,
        background: "rgba(10, 6, 18, 0.7)",
        backdropFilter: "blur(28px)",
        WebkitBackdropFilter: "blur(28px)",
        padding: "54px 16px 34px",
        display: "flex",
        flexDirection: "column"
      }}
    >
      <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 18 }}>
        <button
          onClick={onClose}
          style={{
            width: 36,
            height: 36,
            borderRadius: 18,
            background: "rgba(255,255,255,0.08)",
            border: "0.5px solid rgba(255,255,255,0.14)",
            color: "#fff",
            cursor: "pointer",
            display: "flex",
            alignItems: "center",
            justifyContent: "center"
          }}
        >
          <I.Close size={16} />
        </button>
        <I.Moon size={22} color="rgba(255,255,255,0.7)" />
        <div style={{ width: 36 }} />
      </div>

      <div style={{ textAlign: "center", marginBottom: 24 }}>
        <div
          style={{
            fontSize: 11,
            letterSpacing: "0.2em",
            textTransform: "uppercase",
            color: "rgba(255,255,255,0.55)"
          }}
        >
          Resumen · {formatPreviewTime(snapshot.generatedAt)}
        </div>
        <div
          className="serif"
          style={{
            fontSize: 38,
            lineHeight: 1,
            marginTop: 8,
            letterSpacing: "-0.015em"
          }}
        >
          Como ha ido hoy
        </div>
      </div>

      <div
        className="noscroll"
        style={{
          flex: 1,
          overflowY: "auto",
          display: "flex",
          flexDirection: "column",
          gap: 10
        }}
      >
        {[nightly.me, nightly.partner].map((profile) => {
          const who = getWhoForName(profile.name);
          return (
            <Glass key={profile.id} padding={14} radius={20}>
              <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
                <Avatar who={who} size={42} />
                <div style={{ flex: 1 }}>
                  <div className="serif" style={{ fontSize: 22, lineHeight: 1 }}>
                    {profile.name}
                  </div>
                  <div style={{ fontSize: 12, color: "rgba(255,255,255,0.6)", marginTop: 4 }}>
                    {profile.completedTrackers}/{profile.totalTrackers} trackers · {profile.moodLabel}
                  </div>
                </div>
                <div style={{ textAlign: "right" }}>
                  <div style={{ display: "flex", alignItems: "baseline", gap: 4 }}>
                    <span className="serif" style={{ fontSize: 32, lineHeight: 1 }}>
                      {profile.score}
                    </span>
                    <span style={{ fontSize: 12, color: "rgba(255,255,255,0.5)" }}>%</span>
                  </div>
                  <div style={{ fontSize: 10, color: "rgba(255,255,255,0.5)", letterSpacing: "0.08em" }}>
                    🔥 {profile.streakDays} dias
                  </div>
                </div>
              </div>
              <div
                style={{
                  marginTop: 12,
                  padding: "10px 12px",
                  borderRadius: 12,
                  background: "rgba(0,0,0,0.22)",
                  fontSize: 13,
                  lineHeight: 1.45,
                  color: "rgba(255,255,255,0.85)",
                  fontStyle: "italic"
                }}
              >
                "{profile.focus || "Sin foco guardado hoy."}"
              </div>
            </Glass>
          );
        })}

        <Glass padding={14} soft>
          <SectionLabel icon={<I.Sun size={12} />}>Para mañana</SectionLabel>
          <div style={{ fontSize: 13, lineHeight: 1.7, color: "rgba(255,255,255,0.85)" }}>
            {nightly.me.pendingTasks.length ? (
              nightly.me.pendingTasks.map((task) => <div key={`me-${task}`}>○ {task}</div>)
            ) : null}
            {nightly.partner.pendingTasks.length ? (
              nightly.partner.pendingTasks.map((task) => (
                <div key={`partner-${task}`}>○ {task}</div>
              ))
            ) : null}
            {!nightly.me.pendingTasks.length && !nightly.partner.pendingTasks.length && (
              <div style={{ opacity: 0.55 }}>No quedan tareas abiertas para mañana.</div>
            )}
          </div>
        </Glass>

        <Glass
          padding={14}
          radius={20}
          style={{
            background:
              "linear-gradient(135deg, rgba(255,200,170,0.16), rgba(180,150,255,0.16))"
          }}
        >
          <div
            style={{
              fontSize: 11,
              letterSpacing: "0.14em",
              textTransform: "uppercase",
              color: "rgba(255,255,255,0.7)",
              marginBottom: 6
            }}
          >
            ✨ Proximo paso · cerrar dia
          </div>
          <div style={{ fontSize: 14, lineHeight: 1.45 }}>{nightly.nextStep}</div>
        </Glass>
      </div>

      <PillBtn primary size="lg" onClick={onClose} style={{ width: "100%", marginTop: 14 }}>
        Buenas noches 🌙
      </PillBtn>
    </div>
  );
};

window.NightScreen = NightScreen;