import React, { useState } from 'react';

export default function ChannelSettings({ channel, onClose, onSave }) {
  const [activeTab, setActiveTab] = useState('overview');
  
  const channelData = channel || {
    id: 'general',
    name: 'general',
    type: 'text',
    topic: 'Welcome to the general chat!',
    slowMode: 0,
    nsfw: false,
    category: 'Development',
  };

  const [name, setName] = useState(channelData.name);
  const [topic, setTopic] = useState(channelData.topic);
  const [slowMode, setSlowMode] = useState(channelData.slowMode);
  const [nsfw, setNsfw] = useState(channelData.nsfw);

  const tabs = [
    { id: 'overview', label: 'Overview', icon: '📋' },
    { id: 'permissions', label: 'Permissions', icon: '🔒' },
    { id: 'invites', label: 'Invites', icon: '✉️' },
    { id: 'integrations', label: 'Integrations', icon: '🔗' },
  ];

  const slowModeOptions = [
    { value: 0, label: 'Off' },
    { value: 5, label: '5s' },
    { value: 10, label: '10s' },
    { value: 15, label: '15s' },
    { value: 30, label: '30s' },
    { value: 60, label: '1m' },
    { value: 300, label: '5m' },
    { value: 600, label: '10m' },
    { value: 900, label: '15m' },
    { value: 1800, label: '30m' },
    { value: 3600, label: '1h' },
    { value: 7200, label: '2h' },
    { value: 21600, label: '6h' },
  ];

  const permissionOverrides = [
    { id: 'founder', name: 'Founder', color: '#ff0000', type: 'role', allow: ['all'], deny: [] },
    { id: 'mod', name: 'Moderator', color: '#5865f2', type: 'role', allow: ['manage_messages'], deny: [] },
    { id: 'user123', name: 'SpecificUser', color: null, type: 'member', allow: [], deny: ['send_messages'] },
  ];

  const handleSave = () => {
    onSave?.({ name, topic, slowMode, nsfw });
    onClose?.();
  };

  return (
    <div className="modal-overlay" onClick={onClose}>
      <div className="channel-settings-modal" onClick={(e) => e.stopPropagation()}>
        <div className="settings-sidebar">
          <div className="settings-channel-info">
            <span className="channel-hash">#</span>
            <span className="settings-channel-name">{name}</span>
          </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 Channel</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="channel-overview">
              <div className="setting-group">
                <label>Channel Name</label>
                <div className="channel-name-input">
                  <span className="input-prefix">#</span>
                  <input
                    type="text"
                    value={name}
                    onChange={(e) => setName(e.target.value.toLowerCase().replace(/\s+/g, '-'))}
                  />
                </div>
              </div>

              <div className="setting-group">
                <label>Channel Topic</label>
                <textarea
                  className="setting-textarea"
                  value={topic}
                  onChange={(e) => setTopic(e.target.value)}
                  placeholder="Let everyone know what this channel is about"
                  maxLength={1024}
                />
                <span className="char-count">{topic.length}/1024</span>
              </div>

              <div className="setting-group">
                <label>Slowmode</label>
                <div className="slowmode-select">
                  <select value={slowMode} onChange={(e) => setSlowMode(parseInt(e.target.value))}>
                    {slowModeOptions.map(opt => (
                      <option key={opt.value} value={opt.value}>{opt.label}</option>
                    ))}
                  </select>
                </div>
                <p className="setting-hint">Members can only send one message per this interval</p>
              </div>

              <div className="setting-group toggle-group">
                <div className="toggle-info">
                  <label>NSFW Channel</label>
                  <p className="setting-hint">Users must verify their age to view content</p>
                </div>
                <label className="toggle-switch">
                  <input type="checkbox" checked={nsfw} onChange={(e) => setNsfw(e.target.checked)} />
                  <span className="toggle-slider"></span>
                </label>
              </div>

              <div className="setting-group">
                <label>Category</label>
                <select className="setting-select" defaultValue={channelData.category}>
                  <option>Announcements</option>
                  <option>Development</option>
                  <option>Support</option>
                  <option>Voice Channels</option>
                  <option>No Category</option>
                </select>
              </div>
            </div>
          )}

          {activeTab === 'permissions' && (
            <div className="channel-permissions">
              <div className="permissions-info">
                <p>Channel permissions override server-level permissions for specific roles or members.</p>
              </div>

              <div className="permissions-section">
                <div className="section-header">
                  <h3>Roles/Members</h3>
                  <button className="add-override-btn">+ Add Role or Member</button>
                </div>

                <div className="overrides-list">
                  {permissionOverrides.map(override => (
                    <div key={override.id} className="override-item">
                      <div className="override-info">
                        {override.type === 'role' ? (
                          <span className="role-indicator" style={{ background: override.color }}>@</span>
                        ) : (
                          <span className="member-indicator">👤</span>
                        )}
                        <span className="override-name" style={override.color ? { color: override.color } : {}}>
                          {override.name}
                        </span>
                        <span className="override-type">{override.type}</span>
                      </div>
                      <div className="override-actions">
                        <button className="edit-override">Edit</button>
                        <button className="remove-override">✕</button>
                      </div>
                    </div>
                  ))}
                </div>
              </div>

              <div className="permissions-section">
                <h3>Advanced Permissions</h3>
                <div className="advanced-perms-grid">
                  <div className="perm-category">
                    <h4>General Channel Permissions</h4>
                    <div className="perm-item">
                      <span>View Channel</span>
                      <div className="perm-toggles">
                        <button className="perm-btn allow">✓</button>
                        <button className="perm-btn neutral active">/</button>
                        <button className="perm-btn deny">✕</button>
                      </div>
                    </div>
                    <div className="perm-item">
                      <span>Manage Channel</span>
                      <div className="perm-toggles">
                        <button className="perm-btn allow">✓</button>
                        <button className="perm-btn neutral active">/</button>
                        <button className="perm-btn deny">✕</button>
                      </div>
                    </div>
                  </div>

                  <div className="perm-category">
                    <h4>Text Channel Permissions</h4>
                    <div className="perm-item">
                      <span>Send Messages</span>
                      <div className="perm-toggles">
                        <button className="perm-btn allow active">✓</button>
                        <button className="perm-btn neutral">/</button>
                        <button className="perm-btn deny">✕</button>
                      </div>
                    </div>
                    <div className="perm-item">
                      <span>Embed Links</span>
                      <div className="perm-toggles">
                        <button className="perm-btn allow active">✓</button>
                        <button className="perm-btn neutral">/</button>
                        <button className="perm-btn deny">✕</button>
                      </div>
                    </div>
                    <div className="perm-item">
                      <span>Attach Files</span>
                      <div className="perm-toggles">
                        <button className="perm-btn allow">✓</button>
                        <button className="perm-btn neutral active">/</button>
                        <button className="perm-btn deny">✕</button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          )}

          {activeTab === 'invites' && (
            <div className="channel-invites">
              <p className="no-invites">No invites have been created for this channel yet.</p>
              <button className="create-invite-btn">Create Invite</button>
            </div>
          )}

          {activeTab === 'integrations' && (
            <div className="channel-integrations">
              <div className="integration-section">
                <h3>Webhooks</h3>
                <p className="integration-desc">Webhooks allow external services to send messages to this channel.</p>
                <button className="create-webhook-btn">Create Webhook</button>
              </div>
            </div>
          )}

          <div className="settings-save-bar">
            <span>Careful — you have unsaved changes!</span>
            <div className="save-actions">
              <button className="reset-btn" onClick={onClose}>Reset</button>
              <button className="save-btn" onClick={handleSave}>Save Changes</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
