// Componentes compartidos del dashboard de KPIs.
// Header, filtros, badges, KPI cards, secciones, etc.

const STAR_FILLED = (color = "var(--premium-gold)", s = 14) => (
  <svg width={s} height={s} viewBox="0 0 24 24" fill={color} aria-hidden="true">
    <path d="M12 17.3 6.2 20.9l1.5-6.6L2.5 9.8l6.8-.6L12 3l2.7 6.2 6.8.6-5.2 4.5 1.5 6.6z" />
  </svg>
);

const ICONS = {
  appstore: (
    <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
      <path d="M17.05 12.54c-.03-2.84 2.32-4.2 2.42-4.27-1.32-1.93-3.37-2.19-4.1-2.22-1.73-.18-3.39 1.03-4.27 1.03-.9 0-2.24-1.01-3.69-.98-1.89.03-3.65 1.1-4.62 2.79-1.98 3.43-.5 8.5 1.4 11.28.93 1.36 2.04 2.89 3.49 2.83 1.41-.06 1.94-.91 3.64-.91 1.69 0 2.17.91 3.66.88 1.51-.03 2.47-1.38 3.39-2.75 1.07-1.58 1.5-3.11 1.53-3.19-.03-.02-2.93-1.12-2.95-4.49zM14.43 4.42c.77-.95 1.3-2.25 1.15-3.55-1.11.05-2.47.75-3.27 1.68-.72.83-1.36 2.18-1.19 3.44 1.24.1 2.51-.63 3.31-1.57z"/>
    </svg>
  ),
  playstore: (
    <svg width="22" height="22" viewBox="0 0 24 24" aria-hidden="true">
      <path d="M3.6 2.3c-.3.2-.5.6-.5 1v17.4c0 .4.2.8.5 1l9.3-9.7L3.6 2.3z" fill="#34A853"/>
      <path d="M16.7 9.1 5.4 2.3l9.1 9.5 2.2-2.7z" fill="#FBBC04"/>
      <path d="M21.1 11.2 17.7 9.3l-2.4 2.7 2.4 2.7 3.4-1.9c.8-.5.8-1.6 0-2z" fill="#EA4335"/>
      <path d="M5.4 21.7l11.3-6.8-2.2-2.7-9.1 9.5z" fill="#4285F4"/>
    </svg>
  ),
  trustpilot: (
    <svg width="22" height="22" viewBox="0 0 24 24" aria-hidden="true">
      <path d="M12 1.5 14.94 9 23 9l-6.7 4.85L18.94 22 12 17.27 5.06 22l2.64-8.15L1 9l8.06 0L12 1.5z" fill="#00B67A"/>
    </svg>
  ),
  arrowUp: <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 4l8 8h-5v8h-6v-8H4z"/></svg>,
  arrowDown: <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 20l-8-8h5V4h6v8h5z"/></svg>,
  download: (
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3"/>
    </svg>
  ),
  filter: (
    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      <path d="M22 3H2l8 9.46V19l4 2v-8.54L22 3z"/>
    </svg>
  ),
  share: (
    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      <circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/>
      <path d="M8.59 13.51l6.83 3.98M15.41 6.51l-6.82 3.98"/>
    </svg>
  ),
  chevron: <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><path d="m6 9 6 6 6-6"/></svg>,
  bullet: <svg width="6" height="6" viewBox="0 0 6 6"><circle cx="3" cy="3" r="3" fill="currentColor"/></svg>,
  search: (
    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      <circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/>
    </svg>
  ),
};

// Render N stars (gold filled / grey outline) for review.
const Stars = ({ value, size = 12 }) => {
  return (
    <span style={{ display: "inline-flex", gap: 2 }}>
      {[1,2,3,4,5].map(i => (
        <svg key={i} width={size} height={size} viewBox="0 0 24 24" aria-hidden="true">
          <path d="M12 17.3 6.2 20.9l1.5-6.6L2.5 9.8l6.8-.6L12 3l2.7 6.2 6.8.6-5.2 4.5 1.5 6.6z"
                fill={i <= value ? "var(--premium-gold)" : "var(--grey-200)"} />
        </svg>
      ))}
    </span>
  );
};

// Pill (uppercase, ds-mini) — neutral, info, warn, neg, pos
const Pill = ({ tone = "neutral", children, style = {} }) => {
  const tones = {
    neutral: { bg: "var(--grey-100)", fg: "var(--grey-800)" },
    info:    { bg: "var(--brand-blue-soft)", fg: "var(--brand-blue)" },
    warn:    { bg: "var(--warn-50)", fg: "#7a5e0d" },
    neg:     { bg: "var(--neg-50)", fg: "var(--neg-600)" },
    pos:     { bg: "var(--pos-50)", fg: "var(--pos-600)" },
    dark:    { bg: "var(--premium-bg)", fg: "var(--premium-gold)" },
  };
  const t = tones[tone] || tones.neutral;
  return (
    <span style={{
      display: "inline-flex", alignItems: "center", gap: 4,
      padding: "3px 8px", borderRadius: 999,
      background: t.bg, color: t.fg,
      fontSize: 10, fontWeight: 800, letterSpacing: ".08em", textTransform: "uppercase",
      whiteSpace: "nowrap",
      ...style,
    }}>
      {children}
    </span>
  );
};

// Delta arrow + value, wrapped in a soft pos/neg pill for legibility.
const Delta = ({ value, suffix = "", invert = false, light = false, size = 12, pill = true }) => {
  if (value == null) return null;
  const up = value > 0;
  const eq = value === 0;
  // "invert" para métricas donde subir es malo (ej: crashes, reseñas críticas).
  const good = invert ? !up : up;
  const fg = eq ? "var(--grey-700)" : good ? "var(--pos-600)" : "var(--neg-600)";
  const bg = eq ? "var(--grey-100)" : good ? "var(--pos-50)" : "var(--neg-50)";
  const num = typeof value === "number" ? value.toLocaleString("es-ES", { maximumFractionDigits: 2 }) : value;
  return (
    <span style={{
      display: "inline-flex", alignItems: "center", gap: 3,
      color: fg,
      background: pill ? bg : "transparent",
      padding: pill ? "2px 8px" : 0,
      borderRadius: pill ? 999 : 0,
      fontFamily: "var(--font-num)", fontWeight: 800, fontSize: size,
      fontVariantNumeric: "tabular-nums",
      whiteSpace: "nowrap",
    }}>
      {!eq && (up ? ICONS.arrowUp : ICONS.arrowDown)}
      {(up ? "+" : "") + num}{suffix}
    </span>
  );
};

// Card wrapper.
const Card = ({ children, dark = false, padded = true, style = {}, hairline = true }) => (
  <div style={{
    background: dark ? "var(--premium-bg)" : "var(--bg-base)",
    color: dark ? "#fff" : "#000",
    borderRadius: 20,
    padding: padded ? 24 : 0,
    border: hairline && !dark ? "1px solid var(--grey-100)" : "none",
    ...style,
  }}>
    {children}
  </div>
);

// Card section header (eyebrow + title + optional right action).
const CardHeader = ({ eyebrow, title, sub, right, dark = false }) => (
  <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", gap: 12, marginBottom: 16 }}>
    <div>
      {eyebrow && (
        <div style={{
          fontSize: 10, fontWeight: 700, letterSpacing: ".1em", textTransform: "uppercase",
          color: dark ? "rgba(255,255,255,.55)" : "var(--grey-700)", marginBottom: 8,
        }}>{eyebrow}</div>
      )}
      <div style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 18, letterSpacing: "-0.005em", color: dark ? "#fff" : "#000" }}>{title}</div>
      {sub && <div style={{ fontSize: 12, color: dark ? "rgba(255,255,255,.5)" : "var(--grey-700)", marginTop: 4, fontWeight: 500, lineHeight: 1.4 }}>{sub}</div>}
    </div>
    {right}
  </div>
);

// Top bar: logo, breadcrumb, period selector, share/export.
const TopBar = ({ period, onPeriod, compareMode, onCompareMode }) => {
  const [open, setOpen] = React.useState(false);
  const ranges = ["Semana actual", "Mes en curso", "Trimestre", "Año móvil", "Rango personalizado"];
  return (
    <div style={{
      position: "sticky", top: 0, zIndex: 20,
      background: "rgba(255,255,255,.92)", backdropFilter: "blur(8px)",
      borderBottom: "1px solid var(--grey-100)",
      padding: "14px 40px",
      display: "flex", alignItems: "center", justifyContent: "space-between",
    }}>
      <div style={{ display: "flex", alignItems: "center", gap: 32 }}>
        <img src="ds/myinvestor-logo.png" alt="MyInvestor" style={{ height: 18 }} />
        <div style={{ display: "flex", alignItems: "center", gap: 8, fontSize: 12 }}>
          <span style={{ color: "var(--grey-700)", fontWeight: 700 }}>UX Insights</span>
          <span style={{ color: "var(--grey-400)" }}>/</span>
          <span style={{ color: "#000", fontWeight: 800 }}>KPIs de experiencia</span>
        </div>
      </div>
      <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
        {/* Period dropdown */}
        <div style={{ position: "relative" }}>
          <button onClick={() => setOpen(o => !o)} style={btn.ghost}>
            <span style={{ color: "var(--grey-700)" }}>Periodo:</span>
            <strong style={{ color: "#000" }}>{period}</strong>
            {ICONS.chevron}
          </button>
          {open && (
            <div style={{
              position: "absolute", top: "calc(100% + 4px)", right: 0,
              background: "#fff", border: "1px solid var(--grey-100)", borderRadius: 12,
              boxShadow: "var(--shadow-floating)", minWidth: 220, padding: 6, zIndex: 30,
            }}>
              {ranges.map(r => (
                <button key={r} onClick={() => { onPeriod(r); setOpen(false); }}
                        style={{
                          ...btn.ghost,
                          width: "100%", justifyContent: "space-between",
                          background: period === r ? "var(--brand-blue-soft)" : "transparent",
                          color: period === r ? "var(--brand-blue)" : "#000",
                          fontWeight: period === r ? 800 : 600,
                        }}>
                  {r}
                  {period === r && <span style={{ fontSize: 14 }}>✓</span>}
                </button>
              ))}
            </div>
          )}
        </div>
        <button style={btn.ghost}>{ICONS.filter} Filtros</button>
        <button style={btn.ghost}>{ICONS.share} Compartir</button>
        <button style={btn.primary}>{ICONS.download} Exportar PPT</button>
      </div>
    </div>
  );
};

const btn = {
  ghost: {
    height: 36, padding: "0 12px", borderRadius: 12,
    background: "transparent", border: "1px solid var(--grey-100)",
    display: "inline-flex", alignItems: "center", gap: 6,
    fontFamily: "var(--font-body)", fontSize: 12, fontWeight: 700, color: "#000",
    cursor: "pointer",
  },
  primary: {
    height: 36, padding: "0 14px", borderRadius: 12,
    background: "var(--brand-blue)", color: "#fff", border: 0,
    display: "inline-flex", alignItems: "center", gap: 6,
    fontFamily: "var(--font-body)", fontSize: 12, fontWeight: 800, cursor: "pointer",
  },
  chip: {
    height: 30, padding: "0 12px", borderRadius: 999,
    background: "var(--grey-100)", border: 0,
    display: "inline-flex", alignItems: "center", gap: 6,
    fontFamily: "var(--font-body)", fontSize: 11, fontWeight: 700, color: "#000",
    cursor: "pointer",
  },
  chipActive: {
    height: 30, padding: "0 12px", borderRadius: 999,
    background: "#000", border: 0, color: "#fff",
    display: "inline-flex", alignItems: "center", gap: 6,
    fontFamily: "var(--font-body)", fontSize: 11, fontWeight: 800, cursor: "pointer",
  },
};

// Section title (between cards).
const SectionTitle = ({ index, title, sub, right }) => (
  <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginBottom: 16 }}>
    <div style={{ display: "flex", alignItems: "baseline", gap: 14 }}>
      <span style={{
        fontFamily: "var(--font-num)", fontSize: 12, fontWeight: 700,
        color: "var(--grey-400)", letterSpacing: ".05em",
      }}>{String(index).padStart(2, "0")}</span>
      <h2 style={{
        fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 26,
        letterSpacing: "-0.01em", margin: 0,
      }}>{title}</h2>
      {sub && <span style={{ fontSize: 13, color: "var(--grey-700)", fontWeight: 500 }}>{sub}</span>}
    </div>
    {right}
  </div>
);

Object.assign(window, { ICONS, Stars, Pill, Delta, Card, CardHeader, TopBar, SectionTitle, btn, STAR_FILLED });