/* global React */

function getFitnessLaneFromSlug(slug) {
  const parts = String(slug || "").split("/").filter(Boolean);
  return parts[2] || "fitness";
}

function FitnessArticleCard({
  article,
  rank,
  tag,
  time,
  variant = "library",
  lead = false,
  featured = false,
}) {
  const isPublished = article && article.status === "published";
  const href = article?.slug || "#";
  const title = article?.title || article?.meta_title || null;
  const description = article?.meta_description || "";
  const hasEditorialFallback = Boolean(title);
  const lane = getFitnessLaneFromSlug(href);
  const label = tag || lane;
  const readTime = time || "Guide";

  if (variant === "top") {
    return (
      <a className={`wtop-card hub-no-media ${lead ? "lead" : ""} ${isPublished ? "" : "hub-card-stub"}`} href={isPublished ? href : href} aria-disabled={!isPublished}>
        <div className="lead-body">
          <div className="top-rank">
            <span className="big">{rank}</span>
            <span className="meta">{label}<br />{isPublished ? lane : "Guide"}</span>
          </div>
          {isPublished || hasEditorialFallback ? (
            <React.Fragment>
              <h3>{title || "How-to guide"}</h3>
              <p>{description}</p>
            </React.Fragment>
          ) : (
            <React.Fragment>
              <div className="hub-skel-line title" />
              <div className="hub-stub-label">Guide</div>
              <div className="hub-skel-line" />
              <div className="hub-skel-line short" />
            </React.Fragment>
          )}
          <div className="top-foot">
            <span className="by">{isPublished ? lane : label}</span>
            <span>{readTime}</span>
            <span className="arr">{isPublished ? "Read" : ""}</span>
          </div>
        </div>
      </a>
    );
  }

  if (variant === "train") {
    return (
      <a className={`tl3-card ${lead ? "lead" : ""} ${isPublished ? "" : "hub-card-stub"}`} href={isPublished ? href : href} aria-disabled={!isPublished}>
        <div className="rank">{rank}</div>
        <div className="tag">{label}</div>
        {isPublished || hasEditorialFallback ? (
            <React.Fragment>
              <h3>{title || "How-to guide"}</h3>
              <p>{description}</p>
            <div className="status">{isPublished ? "Read guide" : "Guide"}</div>
          </React.Fragment>
        ) : (
          <React.Fragment>
            <div className="hub-skel-line title" />
            <div className="hub-stub-label">Guide</div>
            <div className="hub-skel-line" />
            <div className="hub-skel-line short" />
            <div className="status">Guide</div>
          </React.Fragment>
        )}
      </a>
    );
  }

  return (
    <a className={`wlib-row ${isPublished ? "" : "hub-card-stub"}`} href={isPublished ? href : href} aria-disabled={!isPublished}>
      <div className="num">{rank}</div>
      <div className="ttl">
        {isPublished || hasEditorialFallback ? (
          <React.Fragment>
            {title || "How-to guide"}
            <span className="dek">{description}</span>
          </React.Fragment>
        ) : (
          <React.Fragment>
            <span className="hub-skel-line title" />
            <span className="hub-stub-label">Guide</span>
            <span className="dek"><span className="hub-skel-line short" /></span>
          </React.Fragment>
        )}
      </div>
      <div className="by">{isPublished ? lane : "Guide"}{featured && isPublished ? <span style={{ color: "var(--accent)" }}> - Featured</span> : ""}</div>
      <div className="tag">{label}</div>
      <div className="tm">{readTime}</div>
      <div className="arr">{isPublished ? "Read" : ""}</div>
    </a>
  );
}

window.FitnessArticleCard = FitnessArticleCard;