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

function HashVerifierTool() {
  const [text, setText] = useState('');
  const [hash, setHash] = useState('');
  const [algo, setAlgo] = useState('sha256');
  const [result, setResult] = useState(null);
  const [error, setError] = useState('');
  const [loading, setLoading] = useState(false);

  const verify = async () => {
    setError('');
    setResult(null);
    if (!text || !hash) {
      setError('Bitte Text und Hash eingeben.');
      return;
    }
    setLoading(true);
    try {
      const res = await axios.post('/api/hash/verify', { text, hash, algorithm: algo });
      setResult(res.data.match);
    } catch (err) {
      setError(err.response?.data?.message || 'Fehler bei der Verifikation');
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="main-content">
      <h2>Hash Verifier</h2>
      <p style={{ color: 'var(--muted)', marginBottom: '16px', fontSize: '0.95rem' }}>
        Prüft, ob ein Text mit einem gegebenen Hash übereinstimmt.
      </p>

      <input
        type="text"
        value={text}
        onChange={(e) => { setText(e.target.value); setResult(null); setError(''); }}
        placeholder="Originaltext"
      />

      <input
        type="text"
        value={hash}
        onChange={(e) => { setHash(e.target.value); setResult(null); setError(''); }}
        placeholder="Hash-Wert"
        style={{ marginTop: '8px', fontFamily: 'monospace' }}
      />

      <select
        value={algo}
        onChange={(e) => { setAlgo(e.target.value); setResult(null); }}
        style={{ marginTop: '8px' }}
      >
        <option value="md5">MD5</option>
        <option value="sha256">SHA256</option>
        <option value="bcrypt">bcrypt</option>
      </select>

      <button onClick={verify} disabled={loading} style={{ marginTop: '8px' }}>
        {loading ? 'Prüfen...' : 'Prüfen'}
      </button>

      {error && <p className="error" style={{ marginTop: '12px' }}>{error}</p>}

      {result !== null && (
        <div style={{
          marginTop: '24px',
          padding: '32px',
          background: 'var(--surface-2)',
          border: `2px solid ${result ? '#22c55e' : '#ef4444'}`,
          borderRadius: '16px',
          textAlign: 'center',
        }}>
          <div style={{ fontSize: '3rem', marginBottom: '8px' }}>
            {result ? '✓' : '✗'}
          </div>
          <div style={{
            fontSize: '1.4rem',
            fontWeight: 700,
            color: result ? '#22c55e' : '#ef4444',
          }}>
            {result ? 'Übereinstimmung' : 'Kein Match'}
          </div>
          <div style={{ color: 'var(--muted)', marginTop: '6px', fontSize: '0.9rem' }}>
            Algorithmus: {algo.toUpperCase()}
          </div>
        </div>
      )}
    </div>
  );
}

export default HashVerifierTool;