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

function Withdrawal() {
  const [activeTab, setActiveTab] = useState('single'); // 'single' | 'batch'

  const handleSubmitSingle = (e) => {
    e.preventDefault();
    alert('Single withdrawal submitted (placeholder).');
  };

  const handleSubmitBatch = (e) => {
    e.preventDefault();
    alert('Batch withdrawal submitted (placeholder).');
  };

  return (
    <div className="registration-container">
      <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 className="registration-main">
        <div className="container">
          <div className="registration-card" style={{ padding: 0 }}>
            <div style={{ padding: '1rem 1.5rem', borderBottom: '1px solid #E2E8F0', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
              <h2 style={{ margin: 0 }}>Withdrawal</h2>
            </div>

            {/* Tab Bar */}
            <div style={{ padding: '0 1.5rem' }}>
              <div style={{ display: 'flex', gap: '0.5rem', borderBottom: '1px solid #E2E8F0' }}>
                <button
                  className={activeTab === 'single' ? 'btn-primary' : 'btn-outline'}
                  style={{ borderBottomLeftRadius: 0, borderBottomRightRadius: 0 }}
                  onClick={() => setActiveTab('single')}
                >
                  Single Withdrawal
                </button>
                <button
                  className={activeTab === 'batch' ? 'btn-primary' : 'btn-outline'}
                  style={{ borderBottomLeftRadius: 0, borderBottomRightRadius: 0 }}
                  onClick={() => setActiveTab('batch')}
                >
                  Batch Withdrawal
                </button>
              </div>
            </div>

            <div style={{ padding: '1.5rem' }}>
              {activeTab === 'single' ? (
                <form onSubmit={handleSubmitSingle} className="registration-form" style={{ padding: 0 }}>
                  <div className="form-row">
                    <div className="form-group">
                      <label htmlFor="single-coin">Coin</label>
                      <select id="single-coin" name="single-coin">
                        <option value="USDT">USDT</option>
                        <option value="USDC">USDC</option>
                      </select>
                    </div>
                    <div className="form-group">
                      <label htmlFor="single-wallet">Wallet Network</label>
                      <select id="single-wallet" name="single-wallet">
                        <option value="BNB">BNB</option>
                        <option value="ETH">ETH</option>
                        <option value="TRX">TRX</option>
                      </select>
                    </div>
                  </div>

                  <div className="form-row">
                    <div className="form-group">
                      <label htmlFor="single-address">Destination Address</label>
                      <input type="text" id="single-address" name="single-address" placeholder="Enter destination address" />
                    </div>
                    <div className="form-group">
                      <label htmlFor="single-amount">Amount</label>
                      <input type="number" step="0.00000001" id="single-amount" name="single-amount" placeholder="0.00" />
                    </div>
                  </div>

                  <div className="form-group">
                    <label htmlFor="single-memo">Memo / Note (optional)</label>
                    <input type="text" id="single-memo" name="single-memo" placeholder="Add a note (optional)" />
                  </div>

                  <div className="form-navigation">
                    <div className="nav-buttons">
                      <div className="nav-spacer"></div>
                      <button type="submit" className="btn-primary">Submit Withdrawal</button>
                    </div>
                  </div>
                </form>
              ) : (
                <form onSubmit={handleSubmitBatch} className="registration-form" style={{ padding: 0 }}>
                  <div className="form-group">
                    <label htmlFor="batch-upload">Upload CSV</label>
                    <input type="file" id="batch-upload" name="batch-upload" accept=".csv" />
                    <p style={{ color: '#718096', fontSize: '0.9rem', marginTop: '0.5rem' }}>CSV columns: address, amount, coin(USDT/USDC), wallet(BNB/ETH/TRX), memo(optional)</p>
                  </div>

                  <div className="form-navigation">
                    <div className="nav-buttons">
                      <div className="nav-spacer"></div>
                      <button type="submit" className="btn-primary">Submit Batch</button>
                    </div>
                  </div>
                </form>
              )}
            </div>
          </div>
        </div>
      </main>

      <SiteFooter />
    </div>
  );
}

export default Withdrawal;