import React, { useState } from 'react';

const Settings = () => {
  const [spamCheckEnabled, setSpamCheckEnabled] = useState(false);
  const [sequentialPhoneEnabled, setSequentialPhoneEnabled] = useState(false);
  const [rateLimit, setRateLimit] = useState('');

  return (
    <div className='container' style={{ marginTop: '3%' }}>
      <div style={{
        padding: '20px',
        border: '0.1px solid rgba(0, 0, 0, 0.2)',
        borderLeft: '4px solid #0542cc',
        borderRadius: '10px',
        width: '100%',
      }}>
        {/* Application ID, OTP Length, Expiry Time, and Message Info */}
        <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '20px' }}>
          <div style={{ flex: '1', marginRight: '10px' }}>
            <label>Application ID</label>
            <input type="text" style={inputStyle} placeholder="Application ID" />
          </div>
          <div style={{ flex: '1', marginLeft: '10px' }}>
            <label>OTP Length</label>
            <input type="text" style={inputStyle} placeholder="OTP Length" />
          </div>
        </div>

        <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '20px' }}>
          <div style={{ flex: '1', marginRight: '10px' }}>
            <label>Expiry Time</label>
            <input type="text" style={inputStyle} placeholder="Expiry Time" />
          </div>
          <div style={{ flex: '1', marginLeft: '10px' }}>
            <label>Message Info</label>
            <textarea
              style={{ ...inputStyle, height: '80px', resize: 'none' }} // Add height and prevent resizing if desired
              placeholder="Message Info"
            />
          </div>
        </div>

        <div className='column'>    
        {/* Spam Check & Rate Limit Section */} 
          <h3>Spam Check</h3>
          <p>
            When this feature is enabled, any requests that exceed the limit within the specified time period will return error code 429 and a status of 6 (Rejected). These requests will not incur any charges.  
          </p>
          {/* Spam Check Section */}
          <div className="col-md-6" style={{ justifyContent: 'flex-start', padding: '20px', marginBottom: '20px', marginLeft: '-1.2rem' }}>
            <div className="input-group align-items-center">
              <span className="input-group-prepend">
                <span className="input-group-text">Enable</span>
              </span>
              {/* Tampilkan Rate Limit jika spamCheckEnabled adalah true */}
              {spamCheckEnabled && (
                <input
                  type="number"
                  value={rateLimit}
                  onChange={(e) => setRateLimit(e.target.value)}
                  className="form-control text-center"
                  placeholder="Rate Limit"
                  style={{ marginRight: '10px' }}
                />
              )}
              {/* Enable Switch */}
              <div className="form-check form-switch" style={{ display: 'flex', alignItems: 'center', marginLeft: '1rem' }}>
                <input
                  type="checkbox"
                  className="form-check-input"
                  checked={spamCheckEnabled}
                  onChange={() => {
                    setSpamCheckEnabled(!spamCheckEnabled);
                    console.log(`Spam Check is now ${!spamCheckEnabled ? 'Enabled' : 'Disabled'}`);
                  }}
                  id="spamCheck"
                />
                <label className="form-check-label" htmlFor="spamCheck" style={{ marginLeft: '5px' }}>
                  Enable Spam Check
                </label>
              </div>
            </div>
          </div>
        </div>

        {/* Sequential Phone Number Section */}
        <h3>Sequential Phone Number</h3>
        <p>
          When activated, all incoming request logs will be analyzed using the Verihubs algorithm. If any anomalies are detected, the
          request will be rejected and will not be forwarded to the operator. The rejected request will receive a status of 6 (Rejected).
        </p>
        {/* Spam Check Section */}
        <div className="col-md-6" style={{ justifyContent: 'flex-start', padding: '20px', marginBottom: '20px', marginLeft: '-1.2rem' }}>
          <div className="input-group align-items-center">
            <span className="input-group-prepend">
              <span className="input-group-text">Enable</span>
            </span>
            {/* Enable Switch */}
            <div className="form-check form-switch" style={{ display: 'flex', alignItems: 'center', marginLeft: '1rem' }}>
              <input
                type="checkbox"
                className="form-check-input"
                checked={sequentialPhoneEnabled}
                onChange={() => {
                  setSequentialPhoneEnabled(!sequentialPhoneEnabled);
                  console.log(`Phone Number is now ${!sequentialPhoneEnabled ? 'Enabled' : 'Disabled'}`);
                }}
                id="spamCheck"
              />
              <label className="form-check-label" htmlFor="spamCheck" style={{ marginLeft: '5px' }}>
                Enable Spam Check
              </label>
            </div>
          </div>
        </div>

        {/* Save Button */}
        <div>
          <button style={buttonStyle}>Save Settings</button>
        </div>
      </div>
    </div>
  );
};

// Styles
const inputStyle = {
  width: '100%',
  padding: '8px',
  marginBottom: '10px',
  borderRadius: '4px',
  border: '1px solid #ccc',
  fontSize: '16px',
};

const buttonStyle = {
  backgroundColor: '#007BFF',
  color: '#fff',
  padding: '10px 20px',
  fontSize: '16px',
  border: 'none',
  borderRadius: '4px',
  cursor: 'pointer',
};

export default Settings;
