// Base64 Codec — encode/decode text to/from Base64 with UTF-8 support.

window.TOOL_HANDLERS['base64-codec'] = function Base64CodecTool() {
  const [plain, setPlain] = React.useState('');
  const [b64, setB64] = React.useState('');
  const [error, setError] = React.useState('');
  const [copied, setCopied] = React.useState('');

  const encode = () => {
    setError('');
    try {
      const encoded = btoa(unescape(encodeURIComponent(plain)));
      setB64(encoded);
    } catch (e) {
      setError('Encoding failed: ' + e.message);
    }
  };

  const decode = () => {
    setError('');
    try {
      const decoded = decodeURIComponent(escape(atob(b64)));
      setPlain(decoded);
    } catch (e) {
      setError('Invalid Base64 string — check your input and try again.');
    }
  };

  const copy = (text, label) => {
    navigator.clipboard.writeText(text);
    setCopied(label);
    setTimeout(() => setCopied(''), 1500);
  };

  return (
    <div className="mini-tool">
      <div className="cmp-preview" style={{ gridTemplateColumns: '1fr 1fr', gap: 16 }}>
        <div className="cmp-side">
          <div className="mini-label">Plain Text</div>
          <textarea
            className="mini-input mini-textarea"
            style={{ minHeight: 180, fontFamily: 'monospace', fontSize: 13 }}
            placeholder="Type or paste plain text here…"
            value={plain}
            onChange={(e) => setPlain(e.target.value)}
          />
        </div>
        <div className="cmp-side">
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
            <div className="mini-label" style={{ margin: 0 }}>Base64</div>
            {b64 && (
              <button
                className="icon-btn"
                onClick={() => copy(b64, 'b64')}
                aria-label="Copy Base64"
                style={copied === 'b64' ? { color: 'var(--id-success)', borderColor: 'var(--id-success)' } : {}}
              >
                <window.Icon name={copied === 'b64' ? 'check' : 'doc'} size={14} />
              </button>
            )}
          </div>
          <textarea
            className="mini-input mini-textarea"
            style={{ minHeight: 180, fontFamily: 'monospace', fontSize: 13 }}
            placeholder="Base64 encoded output appears here…"
            value={b64}
            onChange={(e) => setB64(e.target.value)}
          />
        </div>
      </div>

      {error && (
        <div style={{
          marginTop: 10, padding: '8px 12px', borderRadius: 8,
          background: 'rgba(200,50,30,0.1)', color: '#c8321f',
          fontSize: 13, fontWeight: 500
        }}>
          <window.Icon name="x" size={14} /> {error}
        </div>
      )}

      <div className="cmp-actions" style={{ justifyContent: 'center' }}>
        <button className="btn btn-primary" onClick={encode}>
          Encode <span style={{ fontFamily: 'monospace' }}>&rarr;</span>
        </button>
        <button className="btn btn-secondary" onClick={decode}>
          <span style={{ fontFamily: 'monospace' }}>&larr;</span> Decode
        </button>
      </div>
    </div>
  );
};