// Clean, document-style print layout for the shot-list PDF export.
// Always in the DOM but hidden on screen (.print-layout { display:none }); shown
// only inside @media print (print.css). Driven by the export-options config:
//   { cols, orientation, pageSize, mode:'crew'|'client', newPagePerScene, ar }
// Status/approval is intentionally never printed.
(function () {
  const AR_MAP = {
    '16-9': '16 / 9', '4-3': '4 / 3', '2-39-1': '2.39 / 1', '1-1': '1 / 1',
    '9-16': '9 / 16', '3-2': '3 / 2', '21-9': '21 / 9', '2-1': '2 / 1',
  };

  // Non-empty metadata for a shot, limited to the fields the user ticked in the
  // export options (fields = { fieldKey: true } map; built-ins + custom).
  function shotMeta(shot, dataConfig, fields) {
    const out = [];
    const sel = fields || {};
    (window.BUILTIN_FIELDS || []).forEach((f) => {
      if (sel[f.key] && shot[f.key]) out.push({ label: f.label, value: shot[f.key] });
    });
    ((dataConfig && dataConfig.custom) || []).forEach((cf) => {
      const v = shot.custom && shot.custom[cf.key];
      if (sel[cf.key] && v) out.push({ label: cf.label, value: v });
    });
    return out;
  }

  function PrintLayout({ scenes, project, dataConfig, config }) {
    const cfg = config || {};
    const proj = project || {};
    const c = proj.crew || {};
    const crewItems = [
      ['Director', c.director], ['DoP', c.dop],
      ['Production', c.production], ['Agency', c.agency],
    ].filter((x) => x[1]);
    const fmts = (proj.formats || []).filter(Boolean);

    return (
      <div className="print-layout" style={{ '--print-cols': cfg.cols || 2, '--print-ar': AR_MAP[cfg.ar] || '16 / 9' }}>
        <header className="print-head">
          <div>
            <div className="print-eyebrow">Shot List{proj.kind ? ' · ' + proj.kind : ''}</div>
            <h1 className="print-title">{proj.title || 'Untitled Shot List'}</h1>
          </div>
          <dl className="print-meta">
            {crewItems.map((x) => <div key={x[0]}><dt>{x[0]}</dt><dd>{x[1]}</dd></div>)}
            {proj.dates ? <div><dt>Shoot</dt><dd>{proj.dates}</dd></div> : null}
            {fmts.length ? <div><dt>Format</dt><dd>{fmts.join(' · ')}</dd></div> : null}
          </dl>
        </header>

        {(scenes || []).map((scene, si) => (
          <section className={'print-scene' + (cfg.newPagePerScene ? ' print-scene-break' : '')} key={scene.id || si}>
            <h2 className="print-scene-title">
              <span className="print-scene-num">SC {scene.number}</span> {scene.title}
            </h2>
            <div className="print-grid">
              {(scene.shots || []).map((shot, i) => {
                const meta = shotMeta(shot, dataConfig, cfg.fields);
                return (
                  <article className="print-panel" key={shot.id || i}>
                    <div className="print-panel-frame">
                      {shot.img ? <img src={shot.img} alt="" /> : <div className="print-panel-noimg">No frame</div>}
                      <span className="print-panel-num">{scene.number}.{i + 1}</span>
                    </div>
                    <div className="print-panel-body">
                      {shot.title ? <div className="print-panel-title">{shot.title}</div> : null}
                      {shot.desc ? <p className="print-panel-desc">{shot.desc}</p> : null}
                      {meta.length ? (
                        <ul className="print-panel-meta">
                          {meta.map((m, mi) => (
                            <li key={mi}><span className="pm-label">{m.label}</span> {m.value}</li>
                          ))}
                        </ul>
                      ) : null}
                    </div>
                  </article>
                );
              })}
            </div>
          </section>
        ))}

        <footer className="print-foot">{(proj.title || 'Shot List')} · Made with Jump Studio</footer>
      </div>
    );
  }

  window.PrintLayout = PrintLayout;
})();