// components/ish-card.jsx
// <IshCard>. Renders ish-feed card formats from the Fanish ish-card system.
//
// Formats supported (`format` prop):
//   - "paragraph"        legacy default — paragraph + tag pills (used by the hero card)
//   - "items"            legacy — numbered Smart Lines list (still used by the hero card)
//   - "image_header"     thumbnail-link with image on top + caption panel below
//   - "pull_quote"       eyebrow + recessed serif-italic quote + attribution + body
//   - "highlight_quote"  eyebrow + recessed serif-italic quote + body + More + footer
//
// The grid below the hero shows the four new formats in a 2x2 layout.
// Hero still passes `headline` + `items` so the old "items" mode keeps working.

function IshCardEyebrowIcon({ icon }) {
  if (icon === "chat") {
    return (
      <svg className="ish-card-eyebrow-icon" viewBox="0 0 16 16" width="14" height="14"
        fill="none" stroke="currentColor" strokeWidth="1.4"
        strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
        <path d="M2.5 4.25A1.75 1.75 0 0 1 4.25 2.5h7.5A1.75 1.75 0 0 1 13.5 4.25v4.5A1.75 1.75 0 0 1 11.75 10.5H6.5L3.75 12.75A.25.25 0 0 1 3.35 12.55L3.55 10.5H4.25A1.75 1.75 0 0 1 2.5 8.75v-4.5Z" />
      </svg>
    );
  }
  if (icon === "acorn") {
    return (
      <svg className="ish-card-eyebrow-icon" viewBox="0 0 16 16" width="14" height="14"
        fill="none" stroke="currentColor" strokeWidth="1.3"
        strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
        {/* cap */}
        <path d="M3.25 5.25h9.5a.5.5 0 0 0 .5-.5v-.25c0-1.1-2.45-2-5.25-2S2.75 3.4 2.75 4.5v.25a.5.5 0 0 0 .5.5Z" />
        {/* stem */}
        <path d="M8 2.5V1.5" />
        {/* body */}
        <path d="M3.6 5.25c-.1 1.7.5 4.05 1.65 5.55C6.25 12.05 7.1 12.75 8 12.75s1.75-.7 2.75-1.95C11.9 9.3 12.5 6.95 12.4 5.25" />
      </svg>
    );
  }
  return null;
}

// ── Image-header format ────────────────────────────────────────────────
// Top: image (or stylized placeholder when image === null).
// Bottom: caption panel with title, description, divider, source row.
// The peach/coral accent bar lives only on the caption panel's left edge,
// matching the app — it doesn't run across the image.
function IshCardImageHeader({
  image, imageSubject, category, pillColor = "peach", pillVariant = "outlined",
  title, description, source, readTime, readLink, size = "grid", onClick,
}) {
  return (
    <article
      className={"ish-card ish-card-" + size + " ish-card-fmt-image-header"}
      onClick={onClick}
      role={onClick ? "button" : undefined}
      tabIndex={onClick ? 0 : undefined}
    >
      <div className="ish-card-image-wrap">
        {image ? (
          <img src={image} alt={imageSubject || title || category}
               loading="lazy" decoding="async" />
        ) : (
          <div
            className="ish-card-image-placeholder"
            data-subject={imageSubject}
            aria-hidden="true"
          />
        )}
        <span
          className={
            "ish-card-pill ish-card-pill-" + pillColor +
            (pillVariant === "outlined" ? " ish-card-pill-outlined" : "")
          }
        >
          {category}
        </span>
      </div>
      <div className="ish-card-caption">
        <span
          className={"ish-card-bar ish-card-bar-" + pillColor}
          aria-hidden="true"
        />
        {title && <h3 className="ish-card-title">{title}</h3>}
        {description && <p className="ish-card-description">{description}</p>}
        {(source || readLink) && (
          <IshCardFooter
            source={source}
            readTime={readTime}
            readLink={readLink}
            pillColor={pillColor}
          />
        )}
      </div>
    </article>
  );
}

// ── Pull-quote / highlight-quote formats ──────────────────────────────
// Eyebrow (icon + category in caps), recessed serif-italic quote block,
// optional attribution, body paragraph, optional "More" expand affordance,
// optional source + read-link footer.
function IshCardQuote({
  format, category, pillColor = "peach", pillIcon,
  quote, attribution, body, expandable,
  source, readTime, readLink,
  size = "grid", onClick,
}) {
  const isHighlight = format === "highlight_quote";
  return (
    <article
      className={
        "ish-card ish-card-" + size +
        " ish-card-fmt-quote" +
        (isHighlight ? " ish-card-fmt-highlight-quote" : " ish-card-fmt-pull-quote")
      }
      onClick={onClick}
      role={onClick ? "button" : undefined}
      tabIndex={onClick ? 0 : undefined}
    >
      <span
        className={"ish-card-bar ish-card-bar-" + pillColor + " ish-card-bar-full"}
        aria-hidden="true"
      />
      <div className={"ish-card-eyebrow ish-card-eyebrow-" + pillColor}>
        <IshCardEyebrowIcon icon={pillIcon} />
        <span>{category}</span>
      </div>
      <div className="ish-card-quote-box">
        <span className="ish-card-quote-glyph" aria-hidden="true">{'\u201C'}</span>
        <div className="ish-card-quote-body">
          {quote && <p className="ish-card-quote-text">{quote}</p>}
          {attribution && (
            <p className="ish-card-quote-attribution">{attribution}</p>
          )}
        </div>
      </div>
      {body && <p className="ish-card-body">{body}</p>}
      {expandable && (
        <button
          type="button"
          className={"ish-card-more ish-card-more-" + pillColor}
          aria-label="Expand article"
        >
          <span>More</span>
          <svg viewBox="0 0 14 8" width="13" height="8" aria-hidden="true">
            <path d="M1.5 1.5 L7 6.5 L12.5 1.5" stroke="currentColor"
              strokeWidth="1.7" fill="none"
              strokeLinecap="round" strokeLinejoin="round" />
          </svg>
        </button>
      )}
      {(source || readLink) && (
        <IshCardFooter
          source={source}
          readTime={readTime}
          readLink={readLink}
          pillColor={pillColor}
        />
      )}
    </article>
  );
}

// Shared bottom: hairline divider + source/read-time line + Read-full link.
function IshCardFooter({ source, readTime, readLink, pillColor = "peach" }) {
  const meta = [source, readTime].filter(Boolean).join(" \u00B7 ");
  return (
    <div className="ish-card-footer">
      <div className="ish-card-divider" aria-hidden="true" />
      {meta && <p className="ish-card-source">{meta}</p>}
      {readLink && (
        <a
          className={"ish-card-read-link ish-card-read-link-" + pillColor}
          href="#"
          onClick={(e) => e.preventDefault()}
        >
          <span>Read full article</span>
          <span aria-hidden="true" className="ish-card-read-link-arrow">{'\u2192'}</span>
        </a>
      )}
    </div>
  );
}

// ── Top-level dispatcher. Preserves the legacy paragraph/items API used
//    by the hero card and the in-grid image fallback. New formats live
//    in their dedicated subcomponents above. ────────────────────────────
function IshCard({
  format = "paragraph",
  // image_header
  image, imageSubject, title, description, source, readTime, readLink,
  // quote formats
  quote, attribution, body, expandable, pillIcon,
  // screenshot
  alt,
  // legacy
  category, pillColor = "peach", paragraph, headline, items,
  tags = [], primaryTag,
  pillVariant,
  // layout
  size = "grid",
  onClick,
}) {
  // Screenshot mode — render the full screenshot image as the card, at a
  // uniform aspect-ratio so all four cards line up in the 2x2 grid.
  // No surrounding chrome; the screenshot itself carries the card chrome.
  if (format === "screenshot") {
    return (
      <div
        className={"ish-card-screenshot ish-card-" + size + "-screenshot"}
        onClick={onClick}
        role={onClick ? "button" : undefined}
        tabIndex={onClick ? 0 : undefined}
      >
        <img
          src={image}
          alt={alt || "Ish card example"}
          loading="lazy"
          decoding="async"
        />
      </div>
    );
  }

  if (format === "image_header") {
    return (
      <IshCardImageHeader
        image={image}
        imageSubject={imageSubject}
        category={category}
        pillColor={pillColor}
        pillVariant={pillVariant}
        title={title}
        description={description}
        source={source}
        readTime={readTime}
        readLink={readLink}
        size={size}
        onClick={onClick}
      />
    );
  }
  if (format === "pull_quote" || format === "highlight_quote") {
    return (
      <IshCardQuote
        format={format}
        category={category}
        pillColor={pillColor}
        pillIcon={pillIcon}
        quote={quote}
        attribution={attribution}
        body={body}
        expandable={expandable}
        source={source}
        readTime={readTime}
        readLink={readLink}
        size={size}
        onClick={onClick}
      />
    );
  }

  // ── Legacy paragraph / items mode (hero card still uses items). ──
  if (image) {
    return (
      <div className={"ish-card ish-card-" + size + " ish-card-image"} onClick={onClick}>
        <img src={image} alt={category || "Card"} loading="lazy" decoding="async" />
      </div>
    );
  }

  const pillClass = "ish-card-pill ish-card-pill-" + pillColor;
  const barClass = "ish-card-bar ish-card-bar-" + pillColor;

  return (
    <article
      className={"ish-card ish-card-" + size}
      onClick={onClick}
      role={onClick ? "button" : undefined}
      tabIndex={onClick ? 0 : undefined}
    >
      <span className={barClass} aria-hidden="true" />
      <span className={pillClass}>{category}</span>
      {headline && <h3 className="ish-card-headline">{headline}</h3>}
      {items && items.length > 0 ? (
        <ol className="ish-card-items">
          {items.map((item, i) => (
            <li key={i} className="ish-card-item">
              <span className="ish-card-item-num" aria-hidden="true">{i + 1}</span>
              <p className="ish-card-item-body">{item}</p>
            </li>
          ))}
        </ol>
      ) : (
        paragraph && <p className="ish-card-paragraph">{paragraph}</p>
      )}
      {tags && tags.length > 0 && (
        <div className="ish-card-tags">
          {tags.map((t, i) => (
            <span
              key={i}
              className={
                "ish-card-tag" + (t === primaryTag ? " ish-card-tag-primary" : "")
              }
            >
              {t}
            </span>
          ))}
        </div>
      )}
    </article>
  );
}

// <IshCardsGrid>. 2x2 desktop, 1x4 mobile. Static, no carousel.
function IshCardsGrid({ cards }) {
  const handleCardClick = (card, index) => {
    window.trackEvent("ish_card_click", {
      source: "cards_grid",
      card_index: index,
      category: card.category,
      format: card.format,
    });
  };

  return (
    <section
      id="ish-cards"
      aria-labelledby="ish-cards-heading"
      className="section-cream cards-section"
    >
      <div className="container">
        <div className="cards-grid">
          {cards.map((card, i) => (
            <IshCard
              key={i}
              format={card.format}
              image={card.image}
              imageSubject={card.imageSubject}
              category={card.category}
              pillColor={card.pillColor}
              pillVariant={card.pillVariant}
              pillIcon={card.pillIcon}
              title={card.title}
              description={card.description}
              quote={card.quote}
              attribution={card.attribution}
              body={card.body}
              expandable={card.expandable}
              source={card.source}
              readTime={card.readTime}
              readLink={card.readLink}
              alt={card.alt}
              paragraph={card.paragraph}
              headline={card.headline}
              items={card.items}
              tags={card.tags}
              primaryTag={card.primaryTag}
              size="grid"
              onClick={() => handleCardClick(card, i)}
            />
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { IshCard, IshCardsGrid });