import React, { useState } from 'react';

export default function CreateChannelModal({ category, onClose, onCreate }) {
  const [channelType, setChannelType] = useState('text');
  const [channelName, setChannelName] = useState('');
  const [isPrivate, setIsPrivate] = useState(false);

  const channelTypes = [
    { id: 'text', icon: '#', label: 'Text', description: 'Send messages, images, GIFs, emoji, opinions, and puns' },
    { id: 'voice', icon: '🔊', label: 'Voice', description: 'Hang out together with voice, video, and screen share' },
    { id: 'forum', icon: '💬', label: 'Forum', description: 'Create a space for organized discussions' },
    { id: 'announcement', icon: '📢', label: 'Announcement', description: 'Important updates followers can subscribe to' },
    { id: 'stage', icon: '🎭', label: 'Stage', description: 'Host events with moderated discussions' },
  ];

  const handleCreate = () => {
    if (!channelName.trim()) return;
    
    onCreate?.({
      type: channelType,
      name: channelName.toLowerCase().replace(/\s+/g, '-'),
      isPrivate,
      category,
    });
    onClose?.();
  };

  return (
    <div className="modal-overlay" onClick={onClose}>
      <div className="create-channel-modal" onClick={(e) => e.stopPropagation()}>
        <div className="modal-header">
          <h2>Create Channel</h2>
          {category && <span className="category-name">in {category}</span>}
          <button className="modal-close" onClick={onClose}>✕</button>
        </div>

        <div className="modal-content">
          <div className="channel-type-section">
            <label className="section-label">CHANNEL TYPE</label>
            <div className="channel-types">
              {channelTypes.map((type) => (
                <label 
                  key={type.id}
                  className={`channel-type-option ${channelType === type.id ? 'selected' : ''}`}
                >
                  <input
                    type="radio"
                    name="channelType"
                    value={type.id}
                    checked={channelType === type.id}
                    onChange={() => setChannelType(type.id)}
                  />
                  <span className="type-icon">{type.icon}</span>
                  <div className="type-info">
                    <span className="type-label">{type.label}</span>
                    <span className="type-description">{type.description}</span>
                  </div>
                </label>
              ))}
            </div>
          </div>

          <div className="channel-name-section">
            <label className="section-label">CHANNEL NAME</label>
            <div className="channel-name-input">
              <span className="channel-prefix">
                {channelType === 'text' ? '#' : 
                 channelType === 'voice' ? '🔊' : 
                 channelType === 'forum' ? '💬' :
                 channelType === 'announcement' ? '📢' : '🎭'}
              </span>
              <input
                type="text"
                placeholder="new-channel"
                value={channelName}
                onChange={(e) => setChannelName(e.target.value)}
                maxLength={100}
              />
            </div>
          </div>

          <div className="channel-privacy-section">
            <label className="privacy-toggle">
              <div className="privacy-info">
                <span className="privacy-icon">🔒</span>
                <div>
                  <span className="privacy-label">Private Channel</span>
                  <span className="privacy-description">
                    Only selected members and roles will be able to view this channel.
                  </span>
                </div>
              </div>
              <input
                type="checkbox"
                checked={isPrivate}
                onChange={(e) => setIsPrivate(e.target.checked)}
              />
            </label>
          </div>
        </div>

        <div className="modal-footer">
          <button className="modal-cancel" onClick={onClose}>Cancel</button>
          <button 
            className="modal-submit"
            onClick={handleCreate}
            disabled={!channelName.trim()}
          >
            Create Channel
          </button>
        </div>
      </div>
    </div>
  );
}
