/* Project detail modal */

function useEscClose(onClose, open) {
  React.useEffect(() => {
    if (!open) return;
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    window.addEventListener('keydown', onKey);
    document.body.classList.add('modal-open');
    return () => {
      window.removeEventListener('keydown', onKey);
      document.body.classList.remove('modal-open');
    };
  }, [open, onClose]);
}

function ProjectModal({ project, onClose }) {
  const open = !!project;
  useEscClose(onClose, open);

  // Keep last project in memory so the close animation can play with content
  const [last, setLast] = React.useState(project);
  React.useEffect(() => { if (project) setLast(project); }, [project]);
  const p = project || last;

  if (!p) return null;

  const sizes = ['s-lg', 's-tall', 's-half', 's-half', 's-md', 's-md'];
  const images = p.images || [];

  return (
    <React.Fragment>
      <div className={`modal-backdrop ${open ? 'open' : ''}`} onClick={onClose}></div>
      <div className={`modal ${open ? 'open' : ''}`} style={{ '--m-grad': p.grad }}>
        <div className="modal-header">
          <div className="title-block">
            <div className="crumb">
              <span className="chip" style={{ '--chip-bg': 'rgba(0,0,0,0.05)' }}>{p.n} · {p.tag}</span>
              <span>{p.year}</span>
              {p.agency ? (
                p.agency.url ? (
                  <a
                    className="chip" href={p.agency.url} target="_blank" rel="noopener noreferrer"
                    style={{ '--chip-bg': 'rgba(0,0,0,0.85)', '--chip-c': '#fff' }}
                  >per {p.agency.name} ↗</a>
                ) : (
                  <span className="chip" style={{ '--chip-bg': 'rgba(0,0,0,0.85)', '--chip-c': '#fff' }}>
                    per {p.agency.name}
                  </span>
                )
              ) : null}
            </div>
            <h3>
              {p.name}<span className="accent">.</span>
            </h3>
          </div>
          <button className="modal-close" onClick={onClose} aria-label="Chiudi">✕</button>
        </div>

        <div className="modal-body">
          <div className="desc">
            <h4>Il progetto</h4>
            <p>{p.description}</p>
            {p.description2 ? <p>{p.description2}</p> : null}
          </div>

          {images.length > 0 ? (
            <div>
              <h4 style={{
                fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '.12em',
                textTransform: 'uppercase', color: 'var(--muted)',
                marginBottom: 14, fontWeight: 500,
              }}>Screen del progetto</h4>
              <div className="modal-screens">
                {images.map((img, i) => (
                  <div className={`slot-wrap ${sizes[i % sizes.length]}`} key={img.id}>
                    <img src={img.url} alt={img.label || p.name} loading="lazy" />
                  </div>
                ))}
              </div>
            </div>
          ) : null}
        </div>

        <div className="modal-footer">
          <div className="left">
            Vuoi un progetto simile? <a href="#contatti" onClick={() => { onClose(); setTimeout(() => { document.querySelector('#contatti')?.scrollIntoView({ behavior:'smooth' }); }, 350); }}>Scrivimi</a>
          </div>
          <div className="actions">
            <button className="btn-ghost" onClick={onClose}>Chiudi</button>
            <a className="btn-primary" href={p.url} target="_blank" rel="noopener noreferrer">
              Visita il sito <span className="arr">↗</span>
            </a>
          </div>
        </div>
      </div>
    </React.Fragment>
  );
}

Object.assign(window, { ProjectModal });