import React, { useState } from 'react';

export default function ServerSettingsModal({ server, onClose }) {
  const [activeTab, setActiveTab] = useState('overview');
  
  const serverData = server || {
    name: 'AeThex Foundation',
    icon: 'F',
    gradient: 'linear-gradient(135deg, #ff0000, #990000)',
    description: 'Official AeThex Foundation server. Security, authentication, and core infrastructure discussions.',
    region: 'US East',
    memberCount: 128,
    boostLevel: 3,
    boostCount: 14,
  };

  const tabs = [
    { id: 'overview', label: 'Overview', icon: '📋' },
    { id: 'roles', label: 'Roles', icon: '🎭' },
    { id: 'emoji', label: 'Emoji', icon: '😀' },
    { id: 'stickers', label: 'Stickers', icon: '🎨' },
    { id: 'moderation', label: 'Moderation', icon: '🛡️' },
    { id: 'audit-log', label: 'Audit Log', icon: '📜' },
    { id: 'integrations', label: 'Integrations', icon: '🔗' },
    { id: 'members', label: 'Members', icon: '👥' },
    { id: 'invites', label: 'Invites', icon: '✉️' },
    { id: 'bans', label: 'Bans', icon: '🚫' },
  ];

  return (
    <div className="modal-overlay" onClick={onClose}>
      <div className="server-settings-modal" onClick={(e) => e.stopPropagation()}>
        <div className="settings-sidebar">
          <div className="settings-server-info">
            <div className="settings-server-icon" style={{ background: serverData.gradient }}>
              {serverData.icon}
            </div>
            <div className="settings-server-name">{serverData.name}</div>
          </div>
          
          <div className="settings-nav">
            {tabs.map(tab => (
              <div
                key={tab.id}
                className={`settings-nav-item ${activeTab === tab.id ? 'active' : ''}`}
                onClick={() => setActiveTab(tab.id)}
              >
                <span className="nav-icon">{tab.icon}</span>
                <span>{tab.label}</span>
              </div>
            ))}
            
            <div className="settings-divider"></div>
            
            <div className="settings-nav-item danger">
              <span className="nav-icon">🗑️</span>
              <span>Delete Server</span>
            </div>
          </div>
        </div>
        
        <div className="settings-content">
          <div className="settings-header">
            <h2>{tabs.find(t => t.id === activeTab)?.label}</h2>
            <button className="settings-close" onClick={onClose}>✕</button>
          </div>
          
          {activeTab === 'overview' && (
            <div className="settings-overview">
              <div className="setting-group">
                <label>Server Name</label>
                <input type="text" className="setting-input" defaultValue={serverData.name} />
              </div>
              
              <div className="setting-group">
                <label>Server Icon</label>
                <div className="icon-upload">
                  <div className="current-icon" style={{ background: serverData.gradient }}>
                    {serverData.icon}
                  </div>
                  <button className="upload-btn">Upload Image</button>
                </div>
              </div>
              
              <div className="setting-group">
                <label>Description</label>
                <textarea 
                  className="setting-textarea" 
                  defaultValue={serverData.description}
                  rows={3}
                />
              </div>
              
              <div className="setting-group">
                <label>Server Region</label>
                <select className="setting-select" defaultValue={serverData.region}>
                  <option>US East</option>
                  <option>US West</option>
                  <option>Europe</option>
                  <option>Asia</option>
                </select>
              </div>
              
              <div className="boost-info">
                <div className="boost-level">
                  <span className="boost-icon">🚀</span>
                  <span>Level {serverData.boostLevel}</span>
                </div>
                <div className="boost-count">{serverData.boostCount} Boosts</div>
              </div>
            </div>
          )}
          
          {activeTab === 'roles' && (
            <div className="settings-roles">
              <div className="roles-header">
                <button className="create-role-btn">+ Create Role</button>
              </div>
              <div className="roles-list">
                <div className="role-item">
                  <span className="role-color" style={{ background: '#ff0000' }}></span>
                  <span className="role-name">Founder</span>
                  <span className="role-members">1 member</span>
                </div>
                <div className="role-item">
                  <span className="role-color" style={{ background: '#ff0000' }}></span>
                  <span className="role-name">Foundation</span>
                  <span className="role-members">8 members</span>
                </div>
                <div className="role-item">
                  <span className="role-color" style={{ background: '#0066ff' }}></span>
                  <span className="role-name">Corporation</span>
                  <span className="role-members">24 members</span>
                </div>
                <div className="role-item">
                  <span className="role-color" style={{ background: '#ffa500' }}></span>
                  <span className="role-name">Labs</span>
                  <span className="role-members">12 members</span>
                </div>
                <div className="role-item">
                  <span className="role-color" style={{ background: '#99aab5' }}></span>
                  <span className="role-name">@everyone</span>
                  <span className="role-members">128 members</span>
                </div>
              </div>
            </div>
          )}
          
          {activeTab !== 'overview' && activeTab !== 'roles' && (
            <div className="settings-placeholder">
              <span className="placeholder-icon">🔧</span>
              <p>Settings for {tabs.find(t => t.id === activeTab)?.label} coming soon</p>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}
