import React, { useState } from 'react';

export default function UserSettingsModal({ onClose }) {
  const [activeTab, setActiveTab] = useState('my-account');

  const settingsSections = [
    {
      title: 'USER SETTINGS',
      items: [
        { id: 'my-account', label: 'My Account', icon: '👤' },
        { id: 'profiles', label: 'Profiles', icon: '🎨' },
        { id: 'privacy', label: 'Privacy & Safety', icon: '🔒' },
        { id: 'family', label: 'Family Center', icon: '👨‍👩‍👧' },
        { id: 'authorized-apps', label: 'Authorized Apps', icon: '🔌' },
        { id: 'devices', label: 'Devices', icon: '📱' },
        { id: 'connections', label: 'Connections', icon: '🔗' },
        { id: 'clips', label: 'Clips', icon: '🎬' },
        { id: 'friend-requests', label: 'Friend Requests', icon: '👋' },
      ],
    },
    {
      title: 'BILLING SETTINGS',
      items: [
        { id: 'nitro', label: 'Nitro', icon: '🚀' },
        { id: 'server-boost', label: 'Server Boost', icon: '💎' },
        { id: 'subscriptions', label: 'Subscriptions', icon: '📋' },
        { id: 'gift-inventory', label: 'Gift Inventory', icon: '🎁' },
        { id: 'billing', label: 'Billing', icon: '💳' },
      ],
    },
    {
      title: 'APP SETTINGS',
      items: [
        { id: 'appearance', label: 'Appearance', icon: '🎨' },
        { id: 'accessibility', label: 'Accessibility', icon: '♿' },
        { id: 'voice-video', label: 'Voice & Video', icon: '🎙️' },
        { id: 'text-images', label: 'Text & Images', icon: '📝' },
        { id: 'notifications', label: 'Notifications', icon: '🔔' },
        { id: 'keybinds', label: 'Keybinds', icon: '⌨️' },
        { id: 'language', label: 'Language', icon: '🌐' },
        { id: 'streamer-mode', label: 'Streamer Mode', icon: '📺' },
        { id: 'advanced', label: 'Advanced', icon: '⚙️' },
      ],
    },
    {
      title: 'ACTIVITY SETTINGS',
      items: [
        { id: 'activity-privacy', label: 'Activity Privacy', icon: '👁️' },
        { id: 'registered-games', label: 'Registered Games', icon: '🎮' },
      ],
    },
  ];

  const handleOverlayClick = (e) => {
    if (e.target === e.currentTarget) {
      onClose?.();
    }
  };

  return (
    <div className="modal-overlay" onClick={handleOverlayClick}>
      <div className="user-settings-modal">
        <div className="settings-sidebar">
          <div className="settings-nav">
            {settingsSections.map((section) => (
              <div key={section.title}>
                <div className="settings-section-title">{section.title}</div>
                {section.items.map((item) => (
                  <div
                    key={item.id}
                    className={`settings-nav-item ${activeTab === item.id ? 'active' : ''}`}
                    onClick={() => setActiveTab(item.id)}
                  >
                    <span className="nav-icon">{item.icon}</span>
                    <span>{item.label}</span>
                  </div>
                ))}
                <div className="settings-divider"></div>
              </div>
            ))}
            
            <div className="settings-nav-item danger">
              <span className="nav-icon">🚪</span>
              <span>Log Out</span>
            </div>
          </div>
        </div>

        <div className="settings-content">
          <div className="settings-header">
            <h2>{settingsSections.flatMap((s) => s.items).find((i) => i.id === activeTab)?.label}</h2>
            <button className="settings-close" onClick={onClose}>✕</button>
          </div>

          {activeTab === 'my-account' && (
            <div className="settings-overview">
              <div className="account-card">
                <div className="account-banner" style={{ background: 'linear-gradient(135deg, #ff0000, #0066ff)' }}></div>
                <div className="account-info">
                  <div className="account-avatar" style={{ background: 'linear-gradient(135deg, #ff0000, #0066ff, #ffa500)' }}>A</div>
                  <div className="account-details">
                    <h3>Anderson</h3>
                    <span className="account-tag">Anderson#0001</span>
                  </div>
                  <button className="edit-profile-btn">Edit User Profile</button>
                </div>
              </div>

              <div className="account-fields">
                <div className="account-field">
                  <label>DISPLAY NAME</label>
                  <div className="field-value">
                    <span>Anderson</span>
                    <button className="field-edit">Edit</button>
                  </div>
                </div>
                <div className="account-field">
                  <label>USERNAME</label>
                  <div className="field-value">
                    <span>anderson</span>
                    <button className="field-edit">Edit</button>
                  </div>
                </div>
                <div className="account-field">
                  <label>EMAIL</label>
                  <div className="field-value">
                    <span>a*****@aethex.dev</span>
                    <button className="field-edit">Edit</button>
                  </div>
                </div>
                <div className="account-field">
                  <label>PHONE NUMBER</label>
                  <div className="field-value">
                    <span>*******4567</span>
                    <button className="field-edit">Edit</button>
                  </div>
                </div>
              </div>

              <div className="settings-divider"></div>

              <div className="setting-group">
                <h4>Password and Authentication</h4>
                <button className="settings-btn">Change Password</button>
                <div className="two-factor">
                  <div className="two-factor-info">
                    <h5>Two-Factor Authentication</h5>
                    <p>Protect your AeThex account with an extra layer of security.</p>
                  </div>
                  <button className="settings-btn primary">Enable 2FA</button>
                </div>
              </div>

              <div className="settings-divider"></div>

              <div className="setting-group danger-zone">
                <h4>Account Removal</h4>
                <p>Disabling your account means you can recover it at any time after taking this action.</p>
                <div className="danger-buttons">
                  <button className="settings-btn danger-outline">Disable Account</button>
                  <button className="settings-btn danger">Delete Account</button>
                </div>
              </div>
            </div>
          )}

          {activeTab === 'appearance' && (
            <div className="settings-overview">
              <div className="setting-group">
                <h4>Theme</h4>
                <div className="theme-options">
                  <label className="theme-option">
                    <input type="radio" name="theme" defaultChecked />
                    <span className="theme-preview dark">Dark</span>
                  </label>
                  <label className="theme-option">
                    <input type="radio" name="theme" />
                    <span className="theme-preview light">Light</span>
                  </label>
                  <label className="theme-option">
                    <input type="radio" name="theme" />
                    <span className="theme-preview sync">Sync with computer</span>
                  </label>
                </div>
              </div>

              <div className="setting-group">
                <h4>Message Display</h4>
                <div className="display-options">
                  <label className="display-option">
                    <input type="radio" name="display" defaultChecked />
                    <div className="display-preview cozy">
                      <span>Cozy</span>
                      <p>Discord text as it was meant to be.</p>
                    </div>
                  </label>
                  <label className="display-option">
                    <input type="radio" name="display" />
                    <div className="display-preview compact">
                      <span>Compact</span>
                      <p>Fit more messages on screen at once.</p>
                    </div>
                  </label>
                </div>
              </div>

              <div className="setting-group">
                <label>Chat Font Scaling — 16px</label>
                <input type="range" min="12" max="24" defaultValue="16" className="font-slider" />
              </div>

              <div className="setting-group">
                <label>Space Between Message Groups — 16px</label>
                <input type="range" min="0" max="24" defaultValue="16" className="font-slider" />
              </div>

              <div className="setting-group">
                <label>Zoom Level — 100%</label>
                <input type="range" min="50" max="200" defaultValue="100" className="font-slider" />
              </div>
            </div>
          )}

          {activeTab === 'voice-video' && (
            <div className="settings-overview">
              <div className="setting-group">
                <h4>Voice Settings</h4>
                <label>INPUT DEVICE</label>
                <select className="setting-select">
                  <option>Default — Built-in Microphone</option>
                  <option>External Microphone</option>
                </select>

                <label>OUTPUT DEVICE</label>
                <select className="setting-select">
                  <option>Default — Built-in Speakers</option>
                  <option>External Speakers</option>
                  <option>Headphones</option>
                </select>
              </div>

              <div className="setting-group">
                <label>INPUT VOLUME</label>
                <input type="range" min="0" max="100" defaultValue="80" className="volume-slider" />
              </div>

              <div className="setting-group">
                <label>OUTPUT VOLUME</label>
                <input type="range" min="0" max="100" defaultValue="100" className="volume-slider" />
              </div>

              <div className="setting-group">
                <h4>Input Mode</h4>
                <div className="input-mode-options">
                  <label className="input-mode">
                    <input type="radio" name="inputMode" defaultChecked />
                    <span>Voice Activity</span>
                  </label>
                  <label className="input-mode">
                    <input type="radio" name="inputMode" />
                    <span>Push to Talk</span>
                  </label>
                </div>
              </div>

              <div className="setting-group">
                <label className="toggle-setting">
                  <span>Echo Cancellation</span>
                  <input type="checkbox" defaultChecked />
                </label>
                <label className="toggle-setting">
                  <span>Noise Suppression</span>
                  <input type="checkbox" defaultChecked />
                </label>
                <label className="toggle-setting">
                  <span>Automatic Gain Control</span>
                  <input type="checkbox" defaultChecked />
                </label>
              </div>

              <div className="setting-group">
                <h4>Video Settings</h4>
                <label>CAMERA</label>
                <select className="setting-select">
                  <option>FaceTime HD Camera</option>
                  <option>External Webcam</option>
                </select>
                <button className="settings-btn">Test Video</button>
              </div>
            </div>
          )}

          {activeTab === 'notifications' && (
            <div className="settings-overview">
              <div className="setting-group">
                <label className="toggle-setting">
                  <span>Enable Desktop Notifications</span>
                  <input type="checkbox" defaultChecked />
                </label>
                <label className="toggle-setting">
                  <span>Enable Unread Message Badge</span>
                  <input type="checkbox" defaultChecked />
                </label>
                <label className="toggle-setting">
                  <span>Enable Taskbar Flashing</span>
                  <input type="checkbox" defaultChecked />
                </label>
              </div>

              <div className="setting-group">
                <h4>Sounds</h4>
                <label className="toggle-setting">
                  <span>Message</span>
                  <input type="checkbox" defaultChecked />
                </label>
                <label className="toggle-setting">
                  <span>Deafen</span>
                  <input type="checkbox" defaultChecked />
                </label>
                <label className="toggle-setting">
                  <span>Mute</span>
                  <input type="checkbox" defaultChecked />
                </label>
                <label className="toggle-setting">
                  <span>User Join</span>
                  <input type="checkbox" defaultChecked />
                </label>
                <label className="toggle-setting">
                  <span>User Leave</span>
                  <input type="checkbox" defaultChecked />
                </label>
              </div>
            </div>
          )}

          {activeTab === 'keybinds' && (
            <div className="settings-overview">
              <div className="keybinds-header">
                <button className="settings-btn primary">Add a Keybind</button>
              </div>
              
              <div className="keybind-list">
                <div className="keybind-item">
                  <div className="keybind-action">Push to Talk</div>
                  <div className="keybind-key">` (backtick)</div>
                  <button className="keybind-edit">✏️</button>
                  <button className="keybind-delete">🗑️</button>
                </div>
                <div className="keybind-item">
                  <div className="keybind-action">Toggle Mute</div>
                  <div className="keybind-key">Ctrl + Shift + M</div>
                  <button className="keybind-edit">✏️</button>
                  <button className="keybind-delete">🗑️</button>
                </div>
                <div className="keybind-item">
                  <div className="keybind-action">Toggle Deafen</div>
                  <div className="keybind-key">Ctrl + Shift + D</div>
                  <button className="keybind-edit">✏️</button>
                  <button className="keybind-delete">🗑️</button>
                </div>
              </div>
            </div>
          )}

          {!['my-account', 'appearance', 'voice-video', 'notifications', 'keybinds'].includes(activeTab) && (
            <div className="settings-placeholder">
              <span className="placeholder-icon">🔧</span>
              <p>{settingsSections.flatMap((s) => s.items).find((i) => i.id === activeTab)?.label} settings coming soon</p>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}
