// HTML Codec — encode/decode HTML entities (& < > " ').

window.TOOL_HANDLERS['html-codec'] = function HtmlCodecTool() {
  const [html, setHtml] = React.useState('');
  const [encoded, setEncoded] = React.useState('');
  const [error, setError] = React.useState('');
  const [copied, setCopied] = React.useState('');

  const encode = () => {
    setError('');
    try {
      const result = html
        .replace(/&/g, '&')
        .replace(/</g, '&lt;')
        .replace(/>/g, '&gt;')
        .replace(/"/g, '&quot;')
        .replace(/'/g, '&#39;');
      setEncoded(result);
    } catch (e) {
      setError('Encoding failed: ' + e.message);
    }
  };

  const decode = () => {
    setError('');
    try {
      var ta = document.createElement('textarea');
      ta.innerHTML = encoded;
      setHtml(ta.value);
    } catch (e) {
      setError('Decoding failed: ' + e.message);
    }
  };

  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">HTML</div>
          <textarea
            className="mini-input mini-textarea"
            style={{ minHeight: 180, fontFamily: 'monospace', fontSize: 13 }}
            placeholder='<p class="hi">Hello &amp; world</p>'
            value={html}
            onChange={(e) => setHtml(e.target.value)}
          />
        </div>
        <div className="cmp-side">
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
            <div className="mini-label" style={{ margin: 0 }}>Encoded</div>
            {encoded && (
              <button
                className="icon-btn"
                onClick={() => copy(encoded, 'enc')}
                aria-label="Copy encoded"
                style={copied === 'enc' ? { color: 'var(--id-success)', borderColor: 'var(--id-success)' } : {}}
              >
                <window.Icon name={copied === 'enc' ? 'check' : 'doc'} size={14} />
              </button>
            )}
          </div>
          <textarea
            className="mini-input mini-textarea"
            style={{ minHeight: 180, fontFamily: 'monospace', fontSize: 13 }}
            placeholder="&amp;lt;p class=&amp;quot;hi&amp;quot;&amp;gt;Hello &amp;amp; world&amp;lt;/p&amp;gt;"
            value={encoded}
            onChange={(e) => setEncoded(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>
  );
};