/* global React */
const { useState, useRef, useEffect } = React;

/* ── Placeholder a righe (usato quando un progetto non ha screenshot) ── */
function Placeholder({ label, n, total }) {
  return (
    <div className="ph">
      <div className="ph-stripes" aria-hidden="true"></div>
      <div className="ph-meta">
        <span className="ph-tag">screenshot</span>
        <span className="ph-name">{label}</span>
        <span className="ph-count">{n} / {total}</span>
      </div>
    </div>
  );
}

/* ── Carosello / galleria dentro la card ── */
function Carosello({ progetto, aspect }) {
  const slides =
    progetto.screenshots && progetto.screenshots.length
      ? progetto.screenshots.map((src, i) => ({ type: "img", src, i }))
      : [0, 1].map((i) => ({ type: "ph", i }));

  const [idx, setIdx] = useState(0);
  const total = slides.length;
  const touch = useRef(null);

  const go = (e, dir) => {
    e.preventDefault();
    e.stopPropagation();
    setIdx((p) => (p + dir + total) % total);
  };
  const set = (e, i) => {
    e.preventDefault();
    e.stopPropagation();
    setIdx(i);
  };

  const onTouchStart = (e) => (touch.current = e.touches[0].clientX);
  const onTouchEnd = (e) => {
    if (touch.current == null) return;
    const dx = e.changedTouches[0].clientX - touch.current;
    if (Math.abs(dx) > 40) setIdx((p) => (p + (dx < 0 ? 1 : -1) + total) % total);
    touch.current = null;
  };

  return (
    <div
      className="carosello"
      style={{ aspectRatio: aspect }}
      onTouchStart={onTouchStart}
      onTouchEnd={onTouchEnd}
    >
      <div className="carosello-track" style={{ transform: `translateX(-${idx * 100}%)` }}>
        {slides.map((s, i) =>
          s.type === "img" ? (
            <img key={i} className="carosello-slide" src={s.src} alt={`${progetto.titolo} — schermata ${i + 1}`} loading="lazy" />
          ) : (
            <div key={i} className="carosello-slide">
              <Placeholder label={progetto.titolo} n={i + 1} total={total} />
            </div>
          )
        )}
      </div>

      {total > 1 && (
        <React.Fragment>
          <button className="car-arrow car-prev" onClick={(e) => go(e, -1)} aria-label="Precedente">‹</button>
          <button className="car-arrow car-next" onClick={(e) => go(e, 1)} aria-label="Successivo">›</button>
          <div className="car-dots">
            {slides.map((_, i) => (
              <button
                key={i}
                className={"car-dot" + (i === idx ? " is-on" : "")}
                onClick={(e) => set(e, i)}
                aria-label={`Schermata ${i + 1}`}
              ></button>
            ))}
          </div>
        </React.Fragment>
      )}
    </div>
  );
}

/* ── Riga URL pulita (es. www.sito.it) ── */
function dominio(url) {
  try {
    return new URL(url).hostname.replace(/^www\./, "");
  } catch {
    return url;
  }
}

/* ── Intestazione ── */
function Header({ profilo, tema, onTema }) {
  return (
    <header className="head">
      <div className="head-id">
        <h1 className="head-nome">{profilo.nome}</h1>
        <p className="head-sub">{profilo.sottotitolo}</p>
      </div>

      <div className="head-right">
        {profilo.linkedin && (
          <a className="head-link" href={profilo.linkedin} target="_blank" rel="noopener noreferrer">
            LinkedIn ↗
          </a>
        )}
        {profilo.blog && (
          <a className="head-link" href={profilo.blog} target="_blank" rel="noopener noreferrer">
            Blog ↗
          </a>
        )}
        <button className="tema-btn" onClick={onTema} aria-label="Cambia tema">
          <span className="tema-dot" aria-hidden="true"></span>
          {tema === "dark" ? "Chiaro" : "Scuro"}
        </button>
      </div>

      {profilo.bio && <p className="head-bio">{profilo.bio}</p>}
    </header>
  );
}

Object.assign(window, { Placeholder, Carosello, Header, dominio });