// ─────────────────────────────────────────────────────────
// ChefVerse · ModuleCard — V2
// Reuses the V1 .course-card markup/styles so module catalog
// looks identical in vocabulary to a course catalog.
// ─────────────────────────────────────────────────────────

// Per-module cover gradients (8 modules in fundamentals).
const MODULE_COVERS = [
  "linear-gradient(135deg,#ff8a3d 0%,#cc4400 100%)",
  "linear-gradient(135deg,#FFD16A 0%,#E68B2A 100%)",
  "linear-gradient(135deg,#4F8FFF 0%,#1E4FB6 100%)",
  "linear-gradient(135deg,#7C5DFA 0%,#3A2895 100%)",
  "linear-gradient(135deg,#FF6F61 0%,#A02B28 100%)",
  "linear-gradient(135deg,#1FB58A 0%,#0E5A45 100%)",
  "linear-gradient(135deg,#dc4d8b 0%,#5b3657 100%)",
  "linear-gradient(135deg,#27272A 0%,#52525B 100%)",
];

function ModuleCard({ module: m, idx, locale, status, pct, done, total, onClick }) {
  const isDone = status === "completed" || status === "done";
  const isLocked = status === "locked";
  const isCurrent = status === "current" || status === "in-progress";
  const isNext = status === "next";
  const cover = MODULE_COVERS[idx % MODULE_COVERS.length];
  const minutes = Math.floor((m.dur || 360) / 60);

  const tc = window.I18N[locale].course;
  const moduleLabel = locale === "de" ? "Modul" : locale === "id" ? "Modul" : "Module";
  const minutesLabel = locale === "de" ? "Min" : locale === "id" ? "menit" : "min";
  const chaptersLabel = locale === "de" ? "Kapitel" : locale === "id" ? "bab" : "chapters";

  // Mirror V1 course-card CTA copy: "Enroll" / "Enrolled"
  const cta = isDone
    ? (locale === "de" ? "Wiederholen" : locale === "id" ? "Tinjau ulang" : "Review")
    : isCurrent && pct === 0
      ? (locale === "de" ? "Starten" : locale === "id" ? "Mulai" : "Start")
      : isCurrent
        ? (locale === "de" ? "Fortsetzen" : locale === "id" ? "Lanjutkan" : "Resume")
        : isLocked
          ? (locale === "de" ? "Gesperrt" : locale === "id" ? "Terkunci" : "Locked")
          : (locale === "de" ? "Starten" : locale === "id" ? "Mulai" : "Start");

  return (
    <button
      className={"course-card mod-as-course" + (isLocked ? " is-locked" : "") + (isCurrent ? " is-current" : "")}
      onClick={() => onClick && onClick()}
    >
      <div className="course-cover" style={{ background: cover }}>
        {window.PHOTOS && window.PHOTOS.moduleCoverFor("fundamentals", idx) && (
          <img
            src={window.PHOTOS.moduleCoverFor("fundamentals", idx)}
            alt=""
            loading="lazy"
            style={{
              position: "absolute", inset: 0, width: "100%", height: "100%",
              objectFit: "cover", opacity: isLocked ? 0.7 : 1,
            }}
          />
        )}
        <div className="course-pillar-tag" style={{ background: "rgba(255,255,255,0.92)", color: "var(--squid-ink)", zIndex: 1 }}>
          {moduleLabel} {String(idx + 1).padStart(2, "0")}
        </div>
        {!isLocked && pct > 0 && pct < 1 && (
          <div className="course-cover-prog" style={{ zIndex: 1 }}>
            <div className="cp-bar light"><div style={{ width: `${pct * 100}%` }} /></div>
          </div>
        )}
        {isDone && (
          <div className="course-done" style={{ zIndex: 1 }}><Icon name="check" size={12} /> {locale === "de" ? "Fertig" : locale === "id" ? "Selesai" : "Complete"}</div>
        )}
        {isLocked && (
          <div className="course-done" style={{ background: "rgba(0,0,0,0.55)", zIndex: 1 }}>
            <Icon name="lock" size={12} /> {locale === "de" ? "Gesperrt" : locale === "id" ? "Terkunci" : "Locked"}
          </div>
        )}
      </div>
      <div className="course-body">
        <div className="course-title">{m.title[locale]}</div>
        <div className="subtle course-desc">
          {m.desc
            ? m.desc[locale]
            : (locale === "de"
                ? `${total} kurze Kapitel mit Praxis und einem Test am Ende.`
                : locale === "id"
                  ? `${total} bab pendek dengan praktik dan kuis di akhir.`
                  : `${total} short chapters with hands-on practice and a quick check at the end.`)}
        </div>
        <div className="course-meta">
          <span className="course-meta-item"><Icon name="list-video" size={12} /> {total} {chaptersLabel}</span>
          <span className="course-dot" />
          <span className="course-meta-item"><Icon name="clock" size={12} /> {minutes} {minutesLabel}</span>
          <span className="course-dot" />
          <span className="course-meta-item">{done} / {total}</span>
        </div>
        <div className="course-footer">
          <span className={"course-cta " + (isCurrent || isDone ? "on" : "")}>
            {cta} <Icon name={isLocked ? "lock" : "arrow-right"} size={12} />
          </span>
        </div>
      </div>
    </button>
  );
}

window.ModuleCard = ModuleCard;
window.MODULE_COVERS = MODULE_COVERS;