import { useState } from 'react';
import axios from '../services/api';

const resultBox = {
  marginTop: '12px',
  padding: '12px 14px',
  background: 'var(--surface-2)',
  border: '1px solid var(--border)',
  borderRadius: '12px',
  display: 'flex',
  alignItems: 'center',
  gap: '10px',
  justifyContent: 'space-between',
};

function Base64Tool() {
  const [input, setInput] = useState('');
  const [result, setResult] = useState('');
  const [error, setError] = useState('');
  const [copied, setCopied] = useState(false);

  const request = async (endpoint) => {
    setError('');
    setResult('');
    try {
      const res = await axios.post(endpoint, { text: input });
      setResult(res.data.result);
    } catch (err) {
      setError(err.response?.data?.message || 'Fehler');
    }
  };

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

  return (
    <div className="main-content">
      <h2>Base64 Encoder / Decoder</h2>
      <input
        type="text"
        value={input}
        onChange={(e) => { setInput(e.target.value); setResult(''); setError(''); }}
        placeholder="Text eingeben"
      />
      <button onClick={() => request('/api/base64/encode')}>Encode</button>
      <button onClick={() => request('/api/base64/decode')}>Decode</button>
      {error && <p className="error">{error}</p>}
      {result && (
        <div style={resultBox}>
          <span style={{ wordBreak: 'break-all', color: 'var(--text)', fontFamily: 'monospace', fontSize: '0.9rem' }}>
            {result}
          </span>
          <button className="ghost" onClick={copy} style={{ flexShrink: 0, margin: 0 }}>
            {copied ? 'Kopiert!' : 'Kopieren'}
          </button>
        </div>
      )}
    </div>
  );
}

export default Base64Tool;