/* Reusable cards for The Handify: ArtistCard, WorkCard, NewsCard. */

function ArtistCard({ artist, navigate, dark, variant = "stack" }) {
  const go = () => navigate({ name: "profile", slug: artist.slug });
  if (variant === "row") {
    return (
      <button className="artist-row" onClick={go}>
        <div className="artist-row-portrait">
          <Portrait artist={artist} dark={dark} style={{ width: "100%", height: "100%" }} />
        </div>
        <div className="artist-row-main">
          <span className="ar-name">{artist.name}</span>
          <span className="ar-meta">
            {artist.field} · {artist.city}
          </span>
        </div>
        <span className="ar-flag">{artist.flag}</span>
        <span className="ar-arrow"><ArrowIcon /></span>
      </button>
    );
  }
  // stack (default) — portrait on top of a small work strip
  const lead = artist.works[0];
  return (
    <button className="artist-card" onClick={go}>
      <div className="artist-card-media">
        <Portrait artist={artist} dark={dark} style={{ position: "absolute", inset: 0 }} />
        <span className="ac-field">{artist.field}</span>
      </div>
      <div className="artist-card-body">
        <span className="ac-name">{artist.name}</span>
        <span className="ac-loc">
          {artist.flag} {artist.city}, {artist.country}
        </span>
        <span className="ac-tag">{artist.tagline}</span>
        <span className="ac-stat">
          {artist.works.length} works{artist.worksForSale ? ` · ${artist.worksForSale} for sale` : ""}
        </span>
      </div>
    </button>
  );
}

function WorkCard({ work, navigate, addToCart, dark, inCart, showArtist = true, compact = false }) {
  const openArtwork = () => navigate({ name: "artwork", id: work.id });
  return (
    <div className={"work-card" + (compact ? " compact" : "")}>
      <button className="work-media" onClick={openArtwork} aria-label={work.title}>
        <ArtImage work={work} dark={dark} captionVisible={!compact} />
        {work.forSale && <span className="work-price-tag">{fmt(work.price)}</span>}
        {!work.forSale && <span className="work-price-tag muted">Not for sale</span>}
      </button>
      <div className="work-info">
        <div className="work-info-text" onClick={openArtwork} role="button">
          {showArtist && <span className="wi-artist">{work.artist.name}</span>}
          <span className="wi-title">
            <em>{work.title}</em>, {work.year}
          </span>
          <span className="wi-medium">{work.medium}</span>
        </div>
        {work.forSale && addToCart && (
          <button
            className={"add-btn" + (inCart ? " in-cart" : "")}
            onClick={(e) => {
              e.stopPropagation();
              addToCart(work.id);
            }}
          >
            {inCart ? "In cart ✓" : "Add to cart"}
          </button>
        )}
      </div>
    </div>
  );
}

function NewsCard({ item, artist, navigate, dark, feature = false }) {
  const date = new Date(item.date + "T00:00:00").toLocaleDateString("en-US", {
    month: "short",
    day: "numeric",
  });
  const go = () => navigate({ name: "news", id: item.id });
  return (
    <button className={"news-card" + (feature ? " feature" : "")} onClick={go}>
      <div className="news-media">
        <ArtImage
          work={{ id: item.id, hue: item.hue, w: feature ? 16 : 4, h: feature ? 10 : 3 }}
          label={item.tag}
          dark={dark}
          captionVisible={false}
        />
        <span className="news-kind">{item.kind}</span>
      </div>
      <div className="news-body">
        <span className="news-meta">
          {date} · {item.tag}
        </span>
        <h3 className="news-title">{item.title}</h3>
        {feature && <p className="news-excerpt">{item.excerpt}</p>}
        {artist && <span className="news-byline">on {artist.name}</span>}
      </div>
    </button>
  );
}

Object.assign(window, { ArtistCard, WorkCard, NewsCard });