// URL Codec — encode/decode URL components with encodeURIComponent/decodeURIComponent.

window.TOOL_HANDLERS['url-codec'] = function UrlCodecTool() {
  const [decoded, setDecoded] = React.useState('');
  const [encoded, setEncoded] = React.useState('');
  const [error, setError] = React.useState('');
  const [copied, setCopied] = React.useState('');

  const encode = () => {
    setError('');
    try {
      setEncoded(encodeURIComponent(decoded));
    } catch (e) {
      setError('Encoding failed: ' + e.message);
    }
  };

  const decode = () => {
    setError('');
    try {
      setDecoded(decodeURIComponent(encoded));
    } catch (e) {
      setError('Malformed URI — the encoded string contains invalid percent-escape sequences.');
    }
  };

  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">Decoded URL</div>
          <textarea
            className="mini-input mini-textarea"
            style={{ minHeight: 180, fontFamily: 'monospace', fontSize: 13 }}
            placeholder="Type or paste a URL / text here…"
            value={decoded}
            onChange={(e) => setDecoded(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 URL</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="URL-encoded output appears here…"
            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>
  );
};