import React, { useState } from 'react';
import { Link } from 'react-router-dom';
import SiteFooter from './components/SiteFooter';

function Settings() {
  const [activeItem, setActiveItem] = useState('batch-withdrawal'); // batch-withdrawal | update-login | update-transaction | ssh-key
  const [batchRemainingDays, setBatchRemainingDays] = useState(14);
  const [isLoginCodeSent, setIsLoginCodeSent] = useState(false);
  const [isTxCodeSent, setIsTxCodeSent] = useState(false);

  const extendBatchFeature = (daysToAdd) => {
    setBatchRemainingDays((prev) => prev + daysToAdd);
  };

  const handleSendLoginCode = () => {
    setIsLoginCodeSent(true);
    alert('Login password verification code sent (placeholder).');
  };

  const handleSendTxCode = () => {
    setIsTxCodeSent(true);
    alert('Transaction password verification code sent (placeholder).');
  };

  const renderContent = () => {
    switch (activeItem) {
      case 'batch-withdrawal':
        return (
          <div>
            <h3>Batch Withdrawal</h3>
            <p>Manage your Batch Withdrawal feature: view remaining days and extend your usage period.</p>
            <div style={{ margin: '1rem 0', padding: '1rem', background: '#F7FAFC', border: '1px solid #E2E8F0', borderRadius: '8px' }}>
              <strong>Remaining Days:</strong> {batchRemainingDays} day{batchRemainingDays === 1 ? '' : 's'}
            </div>
            <div style={{ display: 'flex', gap: '0.5rem', marginBottom: '1rem' }}>
              <button className="btn-outline" onClick={() => extendBatchFeature(30)}>Extend 1 Month</button>
              <button className="btn-outline" onClick={() => extendBatchFeature(182)}>Extend 6 Months</button>
              <button className="btn-outline" onClick={() => extendBatchFeature(365)}>Extend 1 Year</button>
            </div>
          </div>
        );
      case 'update-login':
        return (
          <div>
            <h3>Update Login Password</h3>
            <form className="registration-form" style={{ padding: 0 }}>
              <div className="form-row">
                <div className="form-group">
                  <label htmlFor="new-login-pass" style={{ whiteSpace: 'nowrap' }}>New Password</label>
                  <input type="password" id="new-login-pass" name="new-login-pass" placeholder="New password" />
                </div>
                <div className="form-group">
                  <label htmlFor="confirm-login-pass" style={{ whiteSpace: 'nowrap' }}>Confirm New Password</label>
                  <input type="password" id="confirm-login-pass" name="confirm-login-pass" placeholder="Confirm new password" />
                </div>
              </div>
              <div className="form-group">
                <label htmlFor="login-verification-code">Verification Code *</label>
                <div style={{ display: 'flex', gap: '0.5rem' }}>
                  <input type="text" id="login-verification-code" name="login-verification-code" placeholder="Enter 6-digit code" maxLength={6} />
                  <button type="button" className="btn-outline" onClick={handleSendLoginCode}>Send Code</button>
                </div>
                {isLoginCodeSent && <span style={{ color: '#718096', fontSize: '0.85rem', display: 'block', marginTop: '0.25rem' }}>Code sent. Please check your email.</span>}
              </div>
              <div className="form-navigation">
                <div className="nav-buttons">
                  <div className="nav-spacer"></div>
                  <button type="button" className="btn-primary">Update</button>
                </div>
              </div>
            </form>
          </div>
        );
      case 'update-transaction':
        return (
          <div>
            <h3>Update Transaction Password</h3>
            <form className="registration-form" style={{ padding: 0 }}>
              <div className="form-row">
                <div className="form-group">
                  <label htmlFor="new-tx-pass" style={{ whiteSpace: 'nowrap' }}>New Transaction Password</label>
                  <input type="password" id="new-tx-pass" name="new-tx-pass" placeholder="New transaction password" style={{ height: '44px' }} />
                </div>
                <div className="form-group">
                  <label htmlFor="confirm-tx-pass" style={{ whiteSpace: 'nowrap' }}>Confirm New Transaction Password</label>
                  <input type="password" id="confirm-tx-pass" name="confirm-tx-pass" placeholder="Confirm new transaction password" style={{ height: '44px' }} />
                </div>
              </div>
              <div className="form-group">
                <label htmlFor="tx-verification-code">Verification Code *</label>
                <div style={{ display: 'flex', gap: '0.5rem' }}>
                  <input type="text" id="tx-verification-code" name="tx-verification-code" placeholder="Enter 6-digit code" maxLength={6} />
                  <button type="button" className="btn-outline" onClick={handleSendTxCode}>Send Code</button>
                </div>
                {isTxCodeSent && <span style={{ color: '#718096', fontSize: '0.85rem', display: 'block', marginTop: '0.25rem' }}>Code sent. Please check your email.</span>}
              </div>
              <div className="form-navigation">
                <div className="nav-buttons">
                  <div className="nav-spacer"></div>
                  <button type="button" className="btn-primary">Update</button>
                </div>
              </div>
            </form>
          </div>
        );
      case 'ssh-key':
        return (
          <div>
            <h3>SSH Key</h3>
            <p>Add or rotate your SSH public key.</p>
            <form className="registration-form" style={{ padding: 0 }}>
              <div className="form-group">
                <label htmlFor="ssh-key">Public Key</label>
                <textarea id="ssh-key" name="ssh-key" rows="6" placeholder="ssh-ed25519 AAAAC3NzaC1lZDI1NTE5AAAA..."></textarea>
              </div>
              <div className="form-navigation">
                <div className="nav-buttons">
                  <div className="nav-spacer"></div>
                  <button type="button" className="btn-primary">Save Key</button>
                </div>
              </div>
            </form>
          </div>
        );
      default:
        return null;
    }
  };

  return (
    <div className="registration-container">
      {/* Header */}
      <header className="registration-header">
        <div className="container">
          <div className="header-content">
            <Link to="/" className="logo"><h2>HicoinPay</h2></Link>
            <div className="header-actions">
              <Link to="/dashboard" className="btn-secondary">Back to Dashboard</Link>
            </div>
          </div>
        </div>
      </header>

      {/* Main */}
      <main className="registration-main">
        <div className="container">
          <div style={{ display: 'grid', gridTemplateColumns: '320px 1fr', gap: '2rem' }}>
            {/* Side Navigation Card */}
            <div className="registration-card" style={{ padding: '1.5rem', position: 'sticky', top: '90px', alignSelf: 'start', minWidth: '320px' }}>
              <nav style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>
                <button style={{ width: '100%', textAlign: 'left', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }} className={activeItem === 'batch-withdrawal' ? 'btn-primary' : 'btn-outline'} onClick={() => setActiveItem('batch-withdrawal')}>Batch Withdrawal</button>
                <button style={{ width: '100%', textAlign: 'left', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }} className={activeItem === 'update-login' ? 'btn-primary' : 'btn-outline'} onClick={() => setActiveItem('update-login')}>Update Login Password</button>
                <button style={{ width: '100%', textAlign: 'left', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }} className={activeItem === 'update-transaction' ? 'btn-primary' : 'btn-outline'} onClick={() => setActiveItem('update-transaction')}>Update Transaction Password</button>
                <button style={{ width: '100%', textAlign: 'left', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }} className={activeItem === 'ssh-key' ? 'btn-primary' : 'btn-outline'} onClick={() => setActiveItem('ssh-key')}>SSH Key</button>
              </nav>
            </div>

            {/* Content Area (no card) */}
            <section>
              {renderContent()}
            </section>
          </div>
        </div>
      </main>

      <SiteFooter />
    </div>
  );
}

export default Settings; 