// Image to Base64 — convert any image to a Base64 data URI or raw Base64 string.

window.TOOL_HANDLERS['image-to-base64'] = function ImageToBase64Tool() {
  const [file, setFile] = React.useState(null);
  const [preview, setPreview] = React.useState('');
  const [dataUri, setDataUri] = React.useState('');
  const [format, setFormat] = React.useState('datauri');
  const [copied, setCopied] = React.useState(false);

  const handleFile = (f) => {
    if (!f || !f.type.startsWith('image/')) return;
    setFile(f);
    setCopied(false);

    // Preview thumbnail
    const objUrl = URL.createObjectURL(f);
    setPreview(objUrl);

    // Read as data URI
    const reader = new FileReader();
    reader.onload = () => setDataUri(reader.result);
    reader.readAsDataURL(f);
  };

  const output = React.useMemo(() => {
    if (!dataUri) return '';
    if (format === 'datauri') return dataUri;
    // Strip the "data:...;base64," prefix
    var idx = dataUri.indexOf(',');
    return idx >= 0 ? dataUri.slice(idx + 1) : dataUri;
  }, [dataUri, format]);

  const copy = () => {
    navigator.clipboard.writeText(output);
    setCopied(true);
    setTimeout(() => setCopied(false), 1500);
  };

  const reset = () => {
    if (preview) URL.revokeObjectURL(preview);
    setFile(null);
    setPreview('');
    setDataUri('');
    setCopied(false);
  };

  if (!file) {
    return <window.Dropzone onFile={handleFile} title="Drop an image here" hint="PNG, JPG, SVG, WebP, GIF" accept="image/*" />;
  }

  return (
    <div className="mini-tool">
      {/* Preview + file info */}
      <div style={{
        display: 'flex', gap: 16, alignItems: 'center',
        padding: 12, background: 'var(--id-surface-alt)', borderRadius: 10, marginBottom: 16
      }}>
        <img
          src={preview}
          alt="Preview"
          style={{ width: 80, height: 80, objectFit: 'contain', borderRadius: 8, border: '1px solid var(--id-border)' }}
        />
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ fontWeight: 600, wordBreak: 'break-all' }}>{file.name}</div>
          <div className="cmp-meta">{window.fmtBytes(file.size)} &middot; {file.type || 'unknown'}</div>
        </div>
      </div>

      {/* Format selector */}
      <div style={{ display: 'flex', gap: 8, marginBottom: 12 }}>
        <button
          className={'filter-pill' + (format === 'datauri' ? ' active' : '')}
          onClick={() => setFormat('datauri')}
        >
          Data URI
        </button>
        <button
          className={'filter-pill' + (format === 'raw' ? ' active' : '')}
          onClick={() => setFormat('raw')}
        >
          Raw Base64
        </button>
      </div>

      {/* Output textarea */}
      <textarea
        className="mini-input mini-textarea"
        style={{ minHeight: 160, fontFamily: 'monospace', fontSize: 11, wordBreak: 'break-all' }}
        readOnly
        value={output}
      />

      {/* Stats */}
      <div className="cmp-meta" style={{ marginTop: 6 }}>
        {output.length.toLocaleString()} characters
      </div>

      {/* Actions */}
      <div className="cmp-actions">
        <button className="btn btn-secondary" onClick={reset}>
          <window.Icon name="upload" size={16} /> Upload another
        </button>
        <button
          className="btn btn-primary"
          onClick={copy}
          style={copied ? { background: 'var(--id-success)' } : {}}
        >
          <window.Icon name={copied ? 'check' : 'doc'} size={16} /> {copied ? 'Copied!' : 'Copy'}
        </button>
      </div>
    </div>
  );
};