/* global React, Icon, Avatar, Tag, Stars, Button, expertById, CAT_COLORS */
const { useState: useCardState } = React;

/* Course thumbnail — on-brand gradient + category icon + optional badge */
function CourseThumb({ course, height = 170, big = false }) {
  const hue = CAT_COLORS[course.cat] ?? 200;
  return (
    <div style={{
      position: "relative", height, borderRadius: 18, overflow: "hidden",
      background: `linear-gradient(150deg, hsl(${hue} 38% 22%), var(--mp-ink) 78%)`,
      display: "flex", alignItems: "center", justifyContent: "center",
    }}>
      <div style={{
        position: "absolute", width: 240, height: 240, borderRadius: 999, top: -90, right: -70,
        background: `radial-gradient(circle, hsl(${hue} 70% 55% / 0.42), transparent 62%)`, filter: "blur(8px)",
      }} />
      <Icon name={course.icon} size={big ? 72 : 52} stroke={1.4}
        style={{ color: `hsl(${hue} 70% 78%)`, opacity: 0.92, position: "relative" }} />
      {course.badge && (
        <span style={{
          position: "absolute", top: 14, left: 14, fontSize: 10.5, fontWeight: 800, letterSpacing: "0.1em",
          textTransform: "uppercase", padding: "5px 11px", borderRadius: 999,
          background: course.badge === "NEW" ? "var(--mp-mint)" : "var(--mp-paper)",
          color: "var(--mp-ink)",
        }}>{course.badge}</span>
      )}
      <span style={{
        position: "absolute", bottom: 14, right: 14, fontSize: 11.5, fontWeight: 600,
        color: "rgba(255,255,255,0.82)", display: "inline-flex", alignItems: "center", gap: 6,
        background: "rgba(15,32,44,0.5)", backdropFilter: "blur(6px)", padding: "5px 11px", borderRadius: 999,
      }}>
        <Icon name="layers" size={13} /> {course.modules} módulos
      </span>
    </div>
  );
}

function CourseCard({ course, onOpen, width }) {
  const [hover, setHover] = useCardState(false);
  const hue = CAT_COLORS[course.cat] ?? 200;
  const instr = course.instructors.map(expertById);
  return (
    <article
      onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      onClick={() => onOpen && onOpen(course.id)}
      style={{
        width, flex: width ? "0 0 auto" : "1 1 auto", cursor: "pointer",
        background: "var(--mp-paper)", borderRadius: "var(--mp-radius-lg)", padding: 16,
        border: "1px solid var(--mp-border)",
        boxShadow: hover ? "var(--mp-shadow-md)" : "var(--mp-shadow-xs)",
        transform: hover ? "translateY(-4px)" : "none",
        transition: "transform 240ms var(--mp-ease), box-shadow 240ms var(--mp-ease)",
        display: "flex", flexDirection: "column",
      }}>
      <CourseThumb course={course} />
      <div style={{ padding: "16px 6px 6px", display: "flex", flexDirection: "column", flex: 1 }}>
        <div style={{ marginBottom: 11 }}><Tag hue={hue}>{course.cat}</Tag></div>
        <h3 style={{
          fontSize: 17.5, fontWeight: 700, lineHeight: 1.22, letterSpacing: "-0.015em",
          margin: "0 0 14px", color: "var(--mp-ink)", textWrap: "balance",
          display: "-webkit-box", WebkitLineClamp: 2, WebkitBoxOrient: "vertical", overflow: "hidden", minHeight: 47,
        }}>{course.title}</h3>
        <div style={{ display: "flex", alignItems: "center", gap: 9, marginBottom: 14 }}>
          <div style={{ display: "flex" }}>
            {instr.map((e, i) => (
              <div key={e.id} style={{ marginLeft: i ? -10 : 0, position: "relative", zIndex: instr.length - i }}>
                <Avatar initials={e.initials} hue={e.hue} size={26} fontScale={0.4} ring />
              </div>
            ))}
          </div>
          <span style={{ fontSize: 12.5, color: "var(--mp-fg-muted)", fontWeight: 500, lineHeight: 1.2 }}>
            {instr.map((e) => e.name.split(" ")[0]).join(" & ")}
          </span>
        </div>
        <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 16 }}>
          <Stars value={parseFloat(course.rating)} size={13} showNum={course.rating} muted />
          <span style={{ fontSize: 12, color: "var(--mp-fg-subtle)" }}>· {course.students} estudiantes</span>
        </div>
        <div style={{ fontSize: 11.5, color: "var(--mp-fg-subtle)", fontWeight: 600, letterSpacing: "0.03em", marginBottom: 16, display: "inline-flex", alignItems: "center", gap: 7 }}>
          <Icon name="clock" size={14} /> {course.modules} módulos · {course.hours} · Certificado
        </div>
        <div style={{ marginTop: "auto", display: "flex", alignItems: "center", justifyContent: "space-between", gap: 12 }}>
          <div style={{ fontSize: 26, fontWeight: 800, letterSpacing: "-0.02em", color: "var(--mp-mint-deep)" }}>
            ${course.price}
          </div>
          <Button variant="ink" size="sm" icon="arrowRight" onClick={(ev) => { ev.stopPropagation(); onOpen && onOpen(course.id); }}>Comprar</Button>
        </div>
      </div>
    </article>
  );
}

/* Expert teaser card with hover-reveal CTA (Home + others) */
function ExpertTeaserCard({ expert, onBook }) {
  const [hover, setHover] = useCardState(false);
  const e = expert;
  return (
    <article
      onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      onClick={() => onBook && onBook(e.id)}
      style={{
        cursor: "pointer", background: "var(--mp-paper)", borderRadius: "var(--mp-radius-lg)",
        padding: "30px 22px 22px", border: "1px solid var(--mp-border)", textAlign: "center",
        boxShadow: hover ? "var(--mp-shadow-md)" : "var(--mp-shadow-xs)",
        transform: hover ? "translateY(-4px)" : "none",
        transition: "transform 240ms var(--mp-ease), box-shadow 240ms var(--mp-ease)",
        display: "flex", flexDirection: "column", alignItems: "center", gap: 4, position: "relative", overflow: "hidden",
      }}>
      <Avatar initials={e.initials} hue={e.hue} size={72} ring />
      <div style={{ fontWeight: 700, fontSize: 16.5, letterSpacing: "-0.01em", color: "var(--mp-ink)", marginTop: 14 }}>{e.name}</div>
      <div style={{ fontSize: 13, color: "var(--mp-mint-deep)", fontWeight: 600 }}>{e.role}</div>
      <div style={{ display: "flex", flexWrap: "wrap", gap: 6, justifyContent: "center", marginTop: 12 }}>
        {e.tags.slice(0, 2).map((t) => (
          <span key={t} style={{ fontSize: 10.5, fontWeight: 600, color: "var(--mp-fg-subtle)", background: "var(--mp-cloud)", padding: "4px 10px", borderRadius: 999 }}>{t}</span>
        ))}
      </div>
      <div style={{
        marginTop: 16, width: "100%",
        maxHeight: hover ? 50 : 0, opacity: hover ? 1 : 0, overflow: "hidden",
        transition: "max-height 280ms var(--mp-ease), opacity 220ms var(--mp-ease)",
      }}>
        <div style={{ display: "inline-flex", alignItems: "center", gap: 7, color: "var(--mp-ink)", fontWeight: 700, fontSize: 13.5 }}>
          Agendar con {e.name.split(" ")[0]} <Icon name="arrowRight" size={16} />
        </div>
      </div>
    </article>
  );
}

window.CourseThumb = CourseThumb;
window.CourseCard = CourseCard;
window.ExpertTeaserCard = ExpertTeaserCard;