// Bloques extra (sugerencias adicionales).
// - Resumen ejecutivo (cabecera con KPIs grandes)
// - Heatmap de categorías
// - Distribución de estrellas por store
// - Atención al cliente (response rate / time)
// - Impacto por versión

const HeroSummary = ({ data, dark = false }) => {
  const text = dark ? "#fff" : "#000";
  const muted = dark ? "rgba(255,255,255,.6)" : "var(--grey-700)";

  return (
    <section data-screen-label="00 Cabecera"
      style={{
        background: dark ? "var(--premium-bg)" : "transparent",
        color: text,
        borderRadius: dark ? 24 : 0,
        padding: dark ? "36px 40px" : "8px 0 0",
        border: "none",
        position: "relative", overflow: "hidden",
      }}>
      {dark && (
        <div style={{
          position: "absolute", inset: 0, pointerEvents: "none",
          background: "radial-gradient(60% 60% at 0% 0%, rgba(0,70,222,.18) 0%, rgba(0,0,0,0) 60%), radial-gradient(50% 70% at 100% 100%, rgba(244,192,57,.08) 0%, rgba(0,0,0,0) 60%)",
        }} />
      )}
      <div style={{ position: "relative", display: "flex", justifyContent: "space-between", alignItems: "flex-end", gap: 24 }}>
        <div>
          <Pill tone={dark ? "dark" : "info"} style={dark ? { background: "rgba(255,255,255,.08)", color: "rgba(255,255,255,.8)" } : {}}>
            UX · General Review · Semanal
          </Pill>
          <h1 style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 32, letterSpacing: "-0.015em", lineHeight: 1.1, margin: "14px 0 8px", color: text, maxWidth: 760 }}>
            KPIs de experiencia · {data.period.range}
          </h1>
          <p style={{ fontSize: 14, color: muted, margin: 0 }}>
            Comparado con {data.period.prevLabel.toLowerCase()} ({data.period.prevRange}). Actualizado el {data.generatedAt}.
          </p>
        </div>
      </div>
    </section>
  );
};

const HeroKpi = ({ label, value, suffix, sub, delta, suffixDelta, invert, dark, divider, last }) => {
  const text = dark ? "#fff" : "#000";
  const muted = dark ? "rgba(255,255,255,.6)" : "var(--grey-700)";
  return (
    <div style={{ paddingRight: 24, paddingLeft: 24, borderRight: last ? "none" : `1px solid ${divider}`, ...(last ? { paddingRight: 0 } : {}) }}>
      <div style={{ fontSize: 11, fontWeight: 800, color: muted, textTransform: "uppercase", letterSpacing: ".08em" }}>{label}</div>
      <div style={{ display: "flex", alignItems: "baseline", gap: 4, marginTop: 10 }}>
        <span style={{ fontFamily: "var(--font-num)", fontSize: 44, fontWeight: 900, letterSpacing: "-0.02em", lineHeight: 1, color: text }}>
          {value}
        </span>
        {suffix && <span style={{ fontFamily: "var(--font-num)", fontSize: 18, color: muted, fontWeight: 700 }}>{suffix}</span>}
      </div>
      <div style={{ marginTop: 8, display: "flex", alignItems: "center", gap: 8 }}>
        {delta != null && <Delta value={delta} suffix={suffixDelta || ""} invert={invert} />}
        {sub && <span style={{ fontSize: 11, color: muted }}>{sub}</span>}
      </div>
    </div>
  );
};

const SourceChip = ({ id, dark }) => {
  const labels = { appstore: "App Store", playstore: "Google Play", trustpilot: "Trustpilot" };
  return (
    <span style={{
      display: "inline-flex", alignItems: "center", gap: 6, padding: "4px 8px 4px 6px",
      borderRadius: 999, background: dark ? "rgba(255,255,255,.06)" : "var(--grey-50)",
      border: dark ? "1px solid rgba(255,255,255,.08)" : "1px solid var(--grey-100)",
      fontSize: 11, fontWeight: 700, color: dark ? "#fff" : "#000",
    }}>
      <span style={{ display: "grid", placeItems: "center", width: 16, height: 16 }}>{ICONS[id]}</span>
      {labels[id]}
    </span>
  );
};

// Heatmap card
const TopicHeatmapCard = ({ data }) => {
  const weeks = ["S14", "S15", "S16", "S17", "S18", "S19", "S20", "S21"];
  return (
    <Card>
      <CardHeader
        eyebrow="EMERGENCIA DE TEMAS"
        title="Heatmap de menciones críticas · 8 semanas"
        sub="Cuántas reseñas críticas mencionan cada categoría, semana a semana."
      />
      <Heatmap rows={data.extras.topicHeat} weekLabels={weeks} />
      <div style={{ marginTop: 16, display: "flex", alignItems: "center", gap: 12, fontSize: 11, color: "var(--grey-700)" }}>
        <span>Menor</span>
        <div style={{ display: "flex", height: 8, width: 200, borderRadius: 4, overflow: "hidden" }}>
          {[96, 84, 72, 60, 48, 36].map(l => <div key={l} style={{ flex: 1, background: `hsl(220 100% ${l}%)` }} />)}
        </div>
        <span>Mayor</span>
        <span style={{ marginLeft: "auto", fontWeight: 500, fontSize: 11, color: "var(--grey-700)" }}>
          <strong style={{ color: "#000", fontWeight: 700 }}>Login y acceso</strong> es la categoría que más ha emergido (+126 % en 4 semanas)
        </span>
      </div>
    </Card>
  );
};

// Distribución de estrellas por store
const StarsDistributionCard = ({ data }) => (
  <Card>
    <CardHeader eyebrow="DISTRIBUCIÓN DE ESTRELLAS" title="¿Cómo se reparten las valoraciones?"
      sub="Porcentaje de reseñas por número de estrellas, en cada store." />
    <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24 }}>
      {data.stores.map(s => (
        <div key={s.id}>
          <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 12 }}>
            <StoreLogo id={s.id} />
            <div>
              <div style={{ fontWeight: 700, fontSize: 13 }}>{s.name}</div>
              <div style={{ fontSize: 11, color: "var(--grey-700)", fontWeight: 500 }}>
                <span style={{ fontFamily: "var(--font-num)", fontWeight: 800, color: "#000" }}>{s.rating.toFixed(1).replace(".", ",")}</span> · {fmt(s.reviews)} valoraciones
              </div>
            </div>
          </div>
          <RatingBars stars={s.stars} />
        </div>
      ))}
    </div>
  </Card>
);

// Atención al cliente (response rate + time)
const ResponseStatsCard = ({ data }) => (
  <Card>
    <CardHeader eyebrow="ATENCIÓN A RESEÑAS" title="Respuesta del equipo"
      sub="Porcentaje de reseñas con respuesta y tiempo medio de primera respuesta." />
    <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 16 }}>
      <BigStat label="Tasa de respuesta" value={`${data.extras.responseRate.now} %`}
        delta={data.extras.responseRate.now - data.extras.responseRate.prev} suffix=" pts" />
      <BigStat label="Tiempo medio respuesta" value={`${data.extras.responseTimeH.now.toString().replace(".", ",")} h`}
        delta={+(data.extras.responseTimeH.now - data.extras.responseTimeH.prev).toFixed(1)} suffix=" h" invert />
      <BigStat label="NPS estimado" value={data.extras.nps.now}
        delta={data.extras.nps.now - data.extras.nps.prev} sub="Proxy basado en distribución 5★/1★" />
    </div>
  </Card>
);

const BigStat = ({ label, value, delta, suffix, invert, sub }) => (
  <div style={{ padding: "16px 20px", background: "var(--grey-50)", borderRadius: 16 }}>
    <div style={{ fontSize: 10, fontWeight: 700, color: "var(--grey-700)", textTransform: "uppercase", letterSpacing: ".08em" }}>{label}</div>
    <div style={{ fontFamily: "var(--font-num)", fontSize: 30, fontWeight: 800, color: "#000", marginTop: 10, letterSpacing: "-0.01em" }}>{value}</div>
    <div style={{ marginTop: 8, display: "flex", alignItems: "center", gap: 8 }}>
      {delta != null && <Delta value={delta} suffix={suffix || ""} invert={invert} />}
      {sub && <span style={{ fontSize: 10, color: "var(--grey-700)", fontWeight: 500 }}>{sub}</span>}
    </div>
  </div>
);

// Impacto por versión
const VersionImpactCard = ({ data }) => (
  <Card>
    <CardHeader eyebrow="IMPACTO POR VERSIÓN"
      title="Nota y crashes por release"
      sub="Cómo se ha movido la valoración media tras cada release de la app." />
    <table style={{ width: "100%", borderCollapse: "collapse" }}>
      <thead>
        <tr style={{ borderBottom: "1px solid var(--grey-100)" }}>
          {["Versión", "Fecha", "Nota media", "Crash-free %", "Tendencia"].map(h => (
            <th key={h} style={{ textAlign: "left", padding: "10px 0", fontSize: 10, fontWeight: 700, color: "var(--grey-700)", textTransform: "uppercase", letterSpacing: ".08em" }}>{h}</th>
          ))}
        </tr>
      </thead>
      <tbody>
        {data.extras.versionImpact.map((v, i) => {
          const prev = data.extras.versionImpact[i + 1];
          const dr = prev ? +(v.rating - prev.rating).toFixed(1) : 0;
          return (
            <tr key={v.v} style={{ borderBottom: "1px solid var(--grey-100)" }}>
              <td style={{ padding: "14px 0", fontFamily: "var(--font-num)", fontWeight: 700 }}>{v.v}</td>
              <td style={{ padding: "14px 0", fontSize: 12, color: "var(--grey-700)", fontWeight: 500 }}>{v.date}</td>
              <td style={{ padding: "14px 0", fontFamily: "var(--font-num)", fontWeight: 800, fontSize: 16 }}>{v.rating.toFixed(1).replace(".", ",")}</td>
              <td style={{ padding: "14px 0", fontFamily: "var(--font-num)", fontWeight: 600 }}>{(100 - v.crashes).toFixed(1).replace(".", ",")} %</td>
              <td style={{ padding: "14px 0" }}>{prev ? <Delta value={dr} /> : <span style={{ fontSize: 11, color: "var(--grey-400)" }}>—</span>}</td>
            </tr>
          );
        })}
      </tbody>
    </table>
  </Card>
);

// Sentiment trend
const SentimentTrendCard = ({ data }) => (
  <Card>
    <CardHeader eyebrow="SENTIMIENTO GLOBAL"
      title="Tendencia de sentimiento · 12 semanas"
      sub="Análisis automático del texto de las reseñas (−1 muy negativo, +1 muy positivo)." />
    <LineChart
      height={180}
      yDomain={[-0.2, 0.6]}
      yTicks={4}
      yFormat={(v) => (v > 0 ? "+" : "") + v.toFixed(1).replace(".", ",")}
      xLabel={(d) => d.x}
      series={[
        { name: "Sentimiento medio", color: "var(--brand-blue)",
          data: data.extras.sentimentWeekly.map((y, i) => ({ x: `S${i + 10}`, y })) },
      ]}
    />
  </Card>
);

// Footer note (CNMV / compliance reminder)
const FooterNote = () => (
  <div style={{ marginTop: 64, paddingTop: 24, paddingBottom: 32, borderTop: "1px solid var(--grey-100)", display: "flex", justifyContent: "space-between", alignItems: "center", fontSize: 11, color: "var(--grey-700)" }}>
    <span>
      Fuentes: App Store Connect · Google Play Console · Trustpilot Business · scraping interno. Datos ficticios — esquema visual sin datos reales.
    </span>
    <span style={{ display: "flex", alignItems: "center", gap: 16 }}>
      <span>Equipo Diseño · UX MyInvestor</span>
      <span>·</span>
      <span>v0.1 · esquema</span>
    </span>
  </div>
);

Object.assign(window, { HeroSummary, TopicHeatmapCard, StarsDistributionCard, ResponseStatsCard, VersionImpactCard, SentimentTrendCard, FooterNote });