/* global React */
const { useState: useStateProj } = React;

/** Single project case — image (or mini slideshow) + info column with name/type/desc/review */
function ProjectCard({ name, italic, type, body, badge, photos = [], photoBg = '#ffffff', photoFit = 'cover', photoPos = 'center', flip = false, hide = false, quote, quoteAvatar, quoteName, quoteRole, dataType, perView = 1 }) {
  const [page, setPage] = useStateProj(0);
  const pages = Math.max(1, Math.ceil(photos.length / perView));
  const hasSlider = pages > 1;
  const go = (n) => setPage(((n % pages) + pages) % pages);
  const visible = photos.slice(page * perView, page * perView + perView);
  // pad visible to perView so the grid stays balanced
  while (visible.length < perView && perView > 1) visible.push(null);

  return (
    <article className={`cs-proj-card${flip ? ' is-flip' : ''}${hide ? ' is-hidden' : ''}`} data-type={dataType}>
      <div className={`cs-proj-photo${perView > 1 ? ' is-grid' : ''}`} style={{ background: photoBg }} data-cols={perView > 1 ? Math.ceil(Math.sqrt(perView)) : 1}>
        {perView === 1 ? (
          photos.map((src, i) => (
            /\.(mp4|webm)$/i.test(src) ? (
              <video key={i}
                     src={src}
                     className={`cs-proj-img${i === page ? ' is-active' : ''}`}
                     style={{ objectFit: photoFit, objectPosition: photoPos }}
                     autoPlay muted loop playsInline/>
            ) : (
              <img key={i}
                   src={src}
                   alt={name}
                   className={`cs-proj-img${i === page ? ' is-active' : ''}`}
                   style={{ objectFit: photoFit, objectPosition: photoPos }}/>
            )
          ))
        ) : (
          <div className="cs-proj-grid">
            {visible.map((src, i) => (
              <div key={i} className="cs-proj-grid-cell">
                {src && <img src={src} alt={name} style={{ objectFit: photoFit, objectPosition: photoPos }}/>}
              </div>
            ))}
          </div>
        )}
        {hasSlider && (
          <>
            <button className="cs-proj-prev" onClick={() => go(page - 1)} aria-label="Vorige">←</button>
            <button className="cs-proj-next" onClick={() => go(page + 1)} aria-label="Volgende">→</button>
            <div className="cs-proj-dots">
              {Array.from({length: pages}).map((_, i) => (
                <span key={i} className={`cs-proj-dot${i === page ? ' is-active' : ''}`} onClick={() => go(i)}></span>
              ))}
            </div>
          </>
        )}
        {badge && <div className="cs-proj-badge">{badge}</div>}
      </div>
      <div className="cs-proj-info">
        <div>
          <h3 className="cs-proj-name">{name} {italic && <em>{italic}</em>}</h3>
          <div className="cs-proj-type">{type}</div>
          <p className="cs-proj-body">{body}</p>
        </div>
        {quote && (
          <div className="cs-proj-review">
            <div className="cs-proj-quote-mark">“</div>
            <p className="cs-proj-quote">{quote}</p>
            <div className="cs-proj-author">
              <div className="cs-proj-avatar">{quoteAvatar}</div>
              <div className="cs-proj-author-meta">
                <div className="n">{quoteName}</div>
                <div className="r">{quoteRole}</div>
              </div>
              <div className="cs-proj-stars">★★★★★</div>
            </div>
          </div>
        )}
      </div>
    </article>
  );
}

/** Werkgever card — different layout: text left + image right (or lijst right) */
function WerkgeverCard({ name, italic, label, body, list = [], note, quote, quoteAttr, image, hide }) {
  return (
    <article className={`cs-werk-card${hide ? ' is-hidden' : ''}`} data-type="dtpvormgeving">
      <div className="cs-werk-left">
        <div className="cs-werk-label">{label}</div>
        <h3>{name} {italic && <em>{italic}</em>}</h3>
        <p>{body}</p>
        {quote && (
          <div className="cs-werk-quote">
            <p>"{quote}"</p>
            {quoteAttr && <p className="attr">{quoteAttr}</p>}
          </div>
        )}
      </div>
      {image ? (
        <div className="cs-werk-image">
          <img src={image} alt={name}/>
        </div>
      ) : (
        <div className="cs-werk-right">
          <h4>Wat ik heb gedaan</h4>
          <ul>
            {list.map((it, i) => <li key={i}>{it}</li>)}
          </ul>
          {note && (
            <div className="cs-werk-note"><span className="dot"></span>{note}</div>
          )}
        </div>
      )}
    </article>
  );
}

/** Filter bar for projects */
function PortfolioFilter({ active, onChange, options }) {
  return (
    <div className="cs-proj-filter-bar">
      {options.map((opt) => (
        <button key={opt.value}
                className={`cs-proj-filter${active === opt.value ? ' is-active' : ''}`}
                onClick={() => onChange(opt.value)}>
          {opt.label}
        </button>
      ))}
    </div>
  );
}

/** Foto slideshow with horizontal carousel of slides */
function FotoSlideshow({ heading, italic, sub, slides = [] }) {
  const [idx, setIdx] = useStateProj(0);
  const perView = 3;
  const max = Math.max(0, slides.length - perView);
  const go = (n) => setIdx(Math.max(0, Math.min(max, n)));
  return (
    <section className="cs-foto-sectie">
      <div className="cs-foto-head">
        <h2>{heading} {italic && <em>{italic}</em>}</h2>
        {sub && <p>{sub}</p>}
      </div>
      <div className="cs-foto-wrap">
        <div className="cs-foto-track" style={{ transform: `translateX(-${idx * (100 / perView)}%)` }}>
          {slides.map((src, i) => (
            <div key={i} className="cs-foto-slide">
              <img src={src} alt=""/>
            </div>
          ))}
        </div>
      </div>
      <div className="cs-foto-controls">
        <button className="cs-foto-btn" onClick={() => go(idx - 1)} aria-label="Vorige">←</button>
        <button className="cs-foto-btn" onClick={() => go(idx + 1)} aria-label="Volgende">→</button>
        <div className="cs-foto-dots">
          {Array.from({length: max + 1}).map((_, i) => (
            <span key={i} className={`cs-foto-dot${i === idx ? ' is-active' : ''}`} onClick={() => go(i)}></span>
          ))}
        </div>
      </div>
    </section>
  );
}

window.ProjectCard = ProjectCard;
window.WerkgeverCard = WerkgeverCard;
window.PortfolioFilter = PortfolioFilter;
window.FotoSlideshow = FotoSlideshow;