// JPG to PDF — embed selected images (JPG/PNG) into a multi-page PDF via pdf-lib.

const PDFLIB_URL = 'https://cdn.jsdelivr.net/npm/pdf-lib@1.17.1/dist/pdf-lib.min.js';

window.TOOL_HANDLERS['jpg-to-pdf'] = function JpgToPdfTool() {
  const [files, setFiles] = React.useState([]);
  const [pageSize, setPageSize] = React.useState('fit');  // 'fit' (match image) | 'a4' | 'letter'
  const [busy, setBusy] = React.useState(false);
  const [err, setErr] = React.useState('');

  const addFiles = (picked) => {
    const list = Array.isArray(picked) ? picked : [picked];
    setFiles((prev) => [...prev, ...list.filter((f) => /^image\/(jpeg|jpg|png)$/i.test(f.type) || /\.(jpe?g|png)$/i.test(f.name))]);
  };
  const removeAt = (i) => setFiles((prev) => prev.filter((_, idx) => idx !== i));

  const run = async () => {
    setBusy(true); setErr('');
    try {
      await window.loadScript(PDFLIB_URL);
      const { PDFDocument } = window.PDFLib;
      const out = await PDFDocument.create();
      const sizes = { a4: [595.28, 841.89], letter: [612, 792] };

      for (const f of files) {
        const bytes = new Uint8Array(await f.arrayBuffer());
        const isPng = /png/i.test(f.type) || /\.png$/i.test(f.name);
        const img = await (isPng ? out.embedPng(bytes) : out.embedJpg(bytes));
        if (pageSize === 'fit') {
          const page = out.addPage([img.width, img.height]);
          page.drawImage(img, { x: 0, y: 0, width: img.width, height: img.height });
        } else {
          const [pw, ph] = sizes[pageSize];
          const page = out.addPage([pw, ph]);
          const scale = Math.min(pw / img.width, ph / img.height) * 0.95;
          const w = img.width * scale, h = img.height * scale;
          page.drawImage(img, { x: (pw - w) / 2, y: (ph - h) / 2, width: w, height: h });
        }
      }
      const saved = await out.save();
      window.downloadBlob(new Blob([saved], { type: 'application/pdf' }), 'images.pdf');
    } catch (e) { setErr(e.message); }
    finally { setBusy(false); }
  };

  if (files.length === 0) return <window.Dropzone onFile={addFiles} multiple title="Drop images here" hint="JPG or PNG — one per page" accept="image/jpeg,image/png" />;

  return (
    <div className="mini-tool">
      <div className="mini-label">{files.length} image{files.length === 1 ? '' : 's'}</div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(90px, 1fr))', gap: 8, marginTop: 10 }}>
        {files.map((f, i) => (
          <div key={i} style={{ position: 'relative' }}>
            <img src={URL.createObjectURL(f)} alt="" style={{ width: '100%', height: 90, objectFit: 'cover', borderRadius: 8 }} />
            <button className="mh-close" onClick={() => removeAt(i)} aria-label="Remove"
                    style={{ position: 'absolute', top: -6, right: -6, width: 22, height: 22, minWidth: 'auto' }}>
              <window.Icon name="x" size={12} />
            </button>
          </div>
        ))}
      </div>

      <div className="mini-label" style={{ marginTop: 14 }}>Page size</div>
      <div className="mini-row">
        {[['fit', 'Fit to image'], ['a4', 'A4'], ['letter', 'Letter']].map(([v, l]) => (
          <button key={v} className={`filter-pill ${pageSize === v ? 'active' : ''}`} onClick={() => setPageSize(v)}>{l}</button>
        ))}
      </div>

      {err && <div style={{ color: '#c8321f', marginTop: 10 }}>{err}</div>}
      <div className="cmp-actions">
        <label className="btn btn-secondary">
          <window.Icon name="upload" size={16} /> Add more
          <input type="file" accept="image/jpeg,image/png" multiple hidden onChange={(e) => addFiles(Array.from(e.target.files))} />
        </label>
        <button className="btn btn-primary" onClick={run} disabled={busy}>
          <window.Icon name="doc" size={16} /> {busy ? 'Building…' : 'Download PDF'}
        </button>
      </div>
    </div>
  );
};