// Compress File — gzip a single file via a worker (fflate).
// For multi-file archives use the Zip Files tool.

window.TOOL_HANDLERS['compress-file'] = function CompressFileTool() {
  const [file, setFile] = React.useState(null);
  const [level, setLevel] = React.useState(6);
  const [result, setResult] = React.useState(null);  // { size, blob }
  const [busy, setBusy] = React.useState(false);
  const [err, setErr] = React.useState('');

  const run = async (f, lvl) => {
    setBusy(true); setErr('');
    try {
      const blob = await window.workerGzip(f, { level: lvl });
      setResult({ size: blob.size, blob });
    } catch (e) { setErr(e.message); }
    finally { setBusy(false); }
  };

  const handleFile = (f) => { setFile(f); run(f, level); };

  const download = () => {
    if (!result) return;
    window.downloadBlob(result.blob, file.name + '.gz');
  };

  if (!file) return <window.Dropzone onFile={handleFile} title="Drop a file here" hint="output is .gz (gzip)" />;

  const ratio = result ? Math.round((1 - result.size / file.size) * 100) : 0;

  return (
    <div className="mini-tool">
      <div style={{ padding: 12, background: 'var(--id-surface-alt)', borderRadius: 10, marginBottom: 14 }}>
        <strong>{file.name}</strong>
        <div className="cmp-meta">{window.fmtBytes(file.size)}</div>
      </div>

      <div className="cmp-slider-row">
        <div className="cmp-label"><span>Compression level</span><span className="val">{level}</span></div>
        <input type="range" min="1" max="9" value={level}
               onChange={(e) => { setLevel(+e.target.value); run(file, +e.target.value); }}
               className="cmp-slider" disabled={busy} />
      </div>
      <div className="cmp-meta">1 = fastest, 9 = smallest</div>

      {result && (
        <div className="cmp-stats" style={{ marginTop: 14 }}>
          <div className={`cmp-stat ${ratio > 0 ? 'success' : ''}`}>
            <div className="sv">{ratio > 0 ? `−${ratio}%` : '0%'}</div>
            <div className="sl">Size reduction</div>
          </div>
          <div className="cmp-stat">
            <div className="sv">{window.fmtBytes(result.size)}</div>
            <div className="sl">Compressed</div>
          </div>
          <div className="cmp-stat">
            <div className="sv">{window.fmtBytes(Math.max(0, file.size - result.size))}</div>
            <div className="sl">Saved</div>
          </div>
        </div>
      )}

      {err && <div style={{ color: '#c8321f' }}>{err}</div>}
      <div className="cmp-actions">
        <button className="btn btn-secondary" onClick={() => { setFile(null); setResult(null); }}><window.Icon name="upload" size={16} /> Another</button>
        <button className="btn btn-primary" onClick={download} disabled={!result || busy}>
          <window.Icon name="download" size={16} /> Download .gz
        </button>
      </div>
    </div>
  );
};