import React, { useState } from 'react';

const Manage = () => {
  const [token] = useState('Basic dGVzdGluaXZ2cmV...');
  const [copied, setCopied] = useState(false);

  const applicationIds = [
    { id: 'app1', name: 'Application One' },
    { id: 'app2', name: 'Application Two' },
    { id: 'app3', name: 'Application Three' },
    { id: 'app4', name: 'Application Four' },
  ];

  const handleCopy = () => {
    navigator.clipboard.writeText(token);
    setCopied(true);
    setTimeout(() => {
      setCopied(false);
    }, 2000);
  };

  return (
    <div className='container' style={{ marginTop: '3%' }}>
      {/* Section */}
      <div style={{
          padding: '20px',
          border: '0.1px solid rgba(0, 0, 0, 0.2)',
          borderLeft: '4px solid #0542cc',
          borderRadius: '10px',
          width: '100%',
          marginBottom: '3vh'
        }}
      >
        {/* Token Display Section */}
        <h2>Your Basic Auth Bearer Token</h2>
        <p>Here is your Basic Auth Bearer Token. Please ensure to copy it now, as it will only be displayed once.</p>
        <div style={{ position: 'relative', display: 'flex', alignItems: 'center', marginBottom: '20px' }}>
          <input 
            type="text" 
            value={token} 
            readOnly 
            style={{ flex: '1', padding: '10px', border: '1px solid rgba(0, 0, 0, 0.2)', borderRadius: '5px', marginRight: '10px' }} 
          />
          <button 
            onClick={handleCopy} 
            style={buttonStyle}
          >
            Copy
          </button>

          {/* Tooltip */}
          <div style={{ ...tooltipStyle, opacity: copied ? 1 : 0, transform: copied ? 'translateY(0)' : 'translateY(-10px)' }}>
            Copied!
          </div>
        </div>
      </div>

      <div style={{
          padding: '20px',
          border: '0.1px solid rgba(0, 0, 0, 0.2)',
          borderLeft: '4px solid #0542cc',
          borderRadius: '10px',
          width: '100%',
        }}>
        {/* Form Section */}
        <form>
          <div style={{ marginBottom: '20px' }}>
            <label htmlFor="applicationId">Application ID</label>
            <select id="applicationId" style={inputStyle}>
              <option value="">Select Application ID</option>
              {applicationIds.map(app => (
                <option key={app.id} value={app.id}>{app.name}</option>
              ))}
            </select>
          </div>
          <div style={{ marginBottom: '20px' }}>
            <label htmlFor="username">Username</label>
            <input 
              type="text" 
              id="username"
              placeholder='Username' 
              style={inputStyle}
            />
          </div>
          <div style={{ marginBottom: '20px' }}>
            <label htmlFor="password">Password</label>
            <input 
              type="password" 
              id="password" 
              placeholder='Password'
              style={inputStyle}
            />
          </div>
          <button 
            type="submit" 
            style={buttonStyle}
          >
            Create Manage Basic Auth
          </button>
        </form>
      </div>
    </div>
  );
}

// Styles
const buttonStyle = {
  padding: '10px 20px',
  backgroundColor: '#0542cc',
  color: '#fff',
  border: 'none',
  borderRadius: '5px',
  cursor: 'pointer',
  transition: 'background-color 0.3s ease, transform 0.2s ease',
  position: 'relative',
};

const inputStyle = {
  width: '100%',
  padding: '10px',
  border: '1px solid rgba(0, 0, 0, 0.2)',
  borderRadius: '5px'
};

// Tooltip Styles with smooth transition
const tooltipStyle = {
  position: 'absolute',
  top: '-25px',
  right: '0',
  backgroundColor: '#333',
  color: '#fff',
  padding: '5px 10px',
  borderRadius: '5px',
  fontSize: '12px',
  whiteSpace: 'nowrap',
  transition: 'opacity 0.3s ease, transform 0.3s ease',
  opacity: 0,
  transform: 'translateY(-10px)',
};

export default Manage;
