// IncomeWidget.jsx — User earnings table widget

Object.assign(window, { IncomeWidget });

const INCOME_ROWS = [
  { name: "Natalia E.",  amount: "11 558 €", avatar: null },
  { name: "Sergio D.",   amount: "7 288 €",  avatar: "assets/images/avatars/man9.jpeg.png" },
  { name: "Sofía B.",    amount: "10 553 €", avatar: "assets/images/avatars/w3.jpg.png" },
  { name: "Andrés C.",   amount: "7 370 €",  avatar: "assets/images/avatars/mm1.jpeg.png" },
  { name: "Álvaro B.",   amount: "7 582 €",  avatar: "assets/images/avatars/mm2.jpg.png" },
  { name: "Gregorio T.", amount: "3 447 €",  avatar: "assets/images/avatars/man12.jpg.png" },
  { name: "Celia T.",    amount: "5 236 €",  avatar: "assets/images/avatars/ww1.avif.png" },
];

function IncomeAvatar({ src, name }) {
  const [err, setErr] = React.useState(false);
  if (!src || err) return <div style={{ width: 32, height: 32, borderRadius: "50%", background: "#e0e0e0", flexShrink: 0 }} />;
  return (
    <img src={src} alt={name} onError={() => setErr(true)}
      style={{ width: 32, height: 32, borderRadius: "50%", objectFit: "cover", flexShrink: 0 }} />
  );
}

function IncomeWidget() {
  return (
    <div style={{
      background: "#fff", borderRadius: 16,
      boxShadow: "0 4px 24px rgba(0,0,0,0.10)",
      border: "1px solid #ececec",
      padding: "28px 24px 24px",
      width: "100%",
    }}>
      <h3 style={{
        fontFamily: "'Times New Roman', serif", fontWeight: 700,
        fontSize: 26, color: "#111", lineHeight: 1.2, marginBottom: 20,
      }}>
        Ingresos de los usuarios de la plataforma en 30 días
      </h3>

      {/* Table header */}
      <div style={{
        display: "flex", alignItems: "center",
        borderBottom: "1px solid #e8e8e8", paddingBottom: 8, marginBottom: 4,
      }}>
        <span style={{ flex: 1, fontFamily: "Arial, sans-serif", fontSize: 12, color: "#999", textTransform: "uppercase", letterSpacing: 0.3 }}>Usuario</span>
        <span style={{ width: 100, fontFamily: "Arial, sans-serif", fontSize: 12, color: "#999", textTransform: "uppercase", letterSpacing: 0.3 }}>Ingresos</span>
        <span style={{ width: 60, fontFamily: "Arial, sans-serif", fontSize: 12, color: "#999", textTransform: "uppercase", letterSpacing: 0.3 }}>Resultado</span>
      </div>

      {/* Rows */}
      {INCOME_ROWS.map((row, i) => (
        <div key={i} style={{
          display: "flex", alignItems: "center", gap: 10,
          padding: "12px 0", borderBottom: i < INCOME_ROWS.length - 1 ? "1px solid #f0f0f0" : "none",
        }}>
          <IncomeAvatar src={row.avatar} name={row.name} />
          <span style={{ flex: 1, fontFamily: "'Times New Roman', serif", fontSize: 15, color: "#111" }}>{row.name}</span>
          <span style={{ width: 100, fontFamily: "'Times New Roman', serif", fontSize: 15, color: "#111", fontWeight: 700 }}>{row.amount}</span>
          <div style={{ width: 60, display: "flex", alignItems: "center" }}>
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
              <circle cx="12" cy="12" r="12" fill="#22c55e"/>
              <path d="M7 12l3.5 3.5L17 8" stroke="#fff" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
          </div>
        </div>
      ))}
    </div>
  );
}