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

const sectionBox = {
  marginTop: '12px',
  padding: '14px',
  background: 'var(--surface-2)',
  border: '1px solid var(--border)',
  borderRadius: '12px',
};

function JwtDecoderTool() {
  const [input, setInput] = useState('');
  const [decoded, setDecoded] = useState(null);
  const [error, setError] = useState('');

  const handleDecode = async () => {
    setError('');
    setDecoded(null);
    try {
      const res = await axios.post('/api/jwt/decode', { token: input });
      setDecoded(res.data);
    } catch (err) {
      setError(err.response?.data?.message || 'Ungültiger JWT');
    }
  };

  return (
    <div className="main-content">
      <h2>JWT Decoder</h2>
      <p style={{ color: 'var(--accent)', fontSize: '0.875rem', marginBottom: '0.75rem' }}>
        <strong>Hinweis:</strong> Dieser Decoder verifiziert keine Signatur – nur zur Analyse.
      </p>
      <textarea
        rows={3}
        value={input}
        onChange={(e) => { setInput(e.target.value); setDecoded(null); setError(''); }}
        placeholder="JWT Token einfügen"
        style={{ resize: 'vertical', fontFamily: 'monospace', fontSize: '0.85rem' }}
      />
      <button onClick={handleDecode}>Dekodieren</button>
      {error && <p className="error">{error}</p>}
      {decoded && (
        <>
          <div style={sectionBox}>
            <p className="eyebrow" style={{ marginBottom: '6px' }}>Header</p>
            <pre style={{ margin: 0, color: 'var(--text)', fontSize: '0.875rem', whiteSpace: 'pre-wrap', wordBreak: 'break-all' }}>
              {JSON.stringify(decoded.header, null, 2)}
            </pre>
          </div>
          <div style={sectionBox}>
            <p className="eyebrow" style={{ marginBottom: '6px' }}>Payload</p>
            <pre style={{ margin: 0, color: 'var(--text)', fontSize: '0.875rem', whiteSpace: 'pre-wrap', wordBreak: 'break-all' }}>
              {JSON.stringify(decoded.payload, null, 2)}
            </pre>
          </div>
          <div style={{ ...sectionBox, borderColor: decoded.expired ? '#ef4444' : '#22c55e' }}>
            <p className="eyebrow" style={{ marginBottom: '4px' }}>Status</p>
            <span style={{ fontWeight: 700, color: decoded.expired ? '#ef4444' : '#22c55e' }}>
              {decoded.expired ? 'Abgelaufen' : 'Gültig'}
            </span>
          </div>
        </>
      )}
    </div>
  );
}

export default JwtDecoderTool;