/* global React */
function CaseHero({ data }) {
  const cover = (typeof caseAsset === "function") ? caseAsset(data.cover) : data.cover;
  const cat = data.cat || data.categoryDisplay;
  return (
    <section className="cs-hero">
      <div className="cs-hero-img" style={{backgroundImage: `url(${cover})`}}/>
      <div className="cs-hero-scrim"/>
      <div className="cs-hero-copy">
        <span className="caption" style={{color: "var(--accent)"}}>{cat} · {data.year}</span>
        <h1 className="cs-hero-title">{data.title}</h1>
        <p className="lead">{data.lede}</p>
      </div>
    </section>
  );
}

function CaseFacts({ data }) {
  return (
    <aside className="cs-facts">
      <div className="cs-fact"><dt>Client</dt><dd>{data.client}</dd></div>
      <div className="cs-fact"><dt>Lieu</dt><dd>{data.loc}</dd></div>
      <div className="cs-fact"><dt>Année</dt><dd>{data.year}</dd></div>
      <div className="cs-fact"><dt>Livrables</dt><dd>{data.deliverables}</dd></div>
      <div className="cs-fact"><dt>Équipe</dt><dd>{data.team}</dd></div>
    </aside>
  );
}

function isVideoSrc(src) {
  return /\.(mp4|mov|webm|m4v)(\?|$)/i.test(src || "");
}

function CaseGallery({ photos }) {
  const noContext = (e) => e.preventDefault();
  const photoItems = (photos || []).filter(p => !isVideoSrc(p.src));
  const videoItems = (photos || []).filter(p => isVideoSrc(p.src));

  return (
    <div onContextMenu={noContext}>
      {photoItems.length > 0 && (
        <section className="cs-gallery-section">
          {videoItems.length > 0 && <p className="cs-gallery-eyebrow">Photos · {photoItems.length}</p>}
          <div className="cs-photos">
            {photoItems.map((p, i) => (
              <div
                key={"p" + i}
                className="cs-photo"
                style={{ backgroundImage: `url(${p.src})` }}
                aria-hidden="true"
              />
            ))}
          </div>
        </section>
      )}

      {videoItems.length > 0 && (
        <section className="cs-gallery-section">
          {photoItems.length > 0 && <p className="cs-gallery-eyebrow">Vidéos · {videoItems.length}</p>}
          <div className="cs-videos">
            {videoItems.map((p, i) => (
              <div key={"v" + i} className="cs-video">
                <video
                  src={p.src}
                  autoPlay muted loop playsInline preload="metadata"
                  controlsList="nodownload noremoteplayback nofullscreen"
                  disablePictureInPicture
                />
              </div>
            ))}
          </div>
        </section>
      )}
    </div>
  );
}

function CaseQuote({ quote, author, role }) {
  return (
    <section className="cs-quote">
      <p className="cs-quote-text">« {quote} »</p>
      <p className="cs-quote-author"><span className="accent">— {author}</span><br/><span className="caption">{role}</span></p>
    </section>
  );
}

function CaseResults({ stats }) {
  return (
    <section className="cs-results">
      <span className="eyebrow">Résultats organiques</span>
      <div className="cs-results-grid">
        {stats.map((s, i) => (
          <div key={(s.label || "") + i} className="cs-stat">
            <div className="cs-stat-n">{s.n}</div>
            <div className="cs-stat-label">{s.label}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

// Path-resolver: in the case-study sub-folder, assets sit one level up.
// Lets editors store "assets/foo.jpg" everywhere and we just prepend "../" here.
function caseAsset(p) {
  if (!p) return p;
  if (/^(https?:|data:|\.\.|\/)/.test(p)) return p;
  return "../" + p;
}

// Generic block renderer for case studies. Supports: heading, subheading, text,
// image, gallery, results/numbers, quote, divider.
function CaseBlocks({ blocks }) {
  return (
    <div className="cs-prose">
      {blocks.map((b, i) => {
        switch (b.type) {
          case "heading":
            return <h2 key={i}>{b.text}</h2>;
          case "subheading":
            return <h3 key={i}>{b.text}</h3>;
          case "text":
            return <p key={i}>{b.text}</p>;
          case "divider":
            return <hr key={i} className="cs-divider"/>;
          case "image":
            return (
              <figure key={i} className="cs-block-image">
                <img src={caseAsset(b.src)} alt={b.cap || ""}/>
                {b.cap && <figcaption className="caption">{b.cap}</figcaption>}
              </figure>
            );
          case "gallery":
            return (
              <div key={i} className="cs-block-gallery">
                <CaseGallery photos={(b.photos || []).map((p) => ({ ...p, src: caseAsset(p.src) }))}/>
              </div>
            );
          case "results":
          case "numbers":
            return <CaseResults key={i} stats={b.stats || []}/>;
          case "quote":
            return <CaseQuote key={i} quote={b.quote} author={b.author} role={b.role}/>;
          default:
            return null;
        }
      })}
    </div>
  );
}

window.CaseHero = CaseHero;
window.CaseFacts = CaseFacts;
window.CaseGallery = CaseGallery;
window.CaseQuote = CaseQuote;
window.CaseResults = CaseResults;
window.CaseBlocks = CaseBlocks;
window.caseAsset = caseAsset;