import React, { useState, useEffect } from 'react';
import ReactDOM from 'react-dom';

const MobileCreateChannelScreen = ({ onClose, onSubmit, categoryId }) => {
    const [visible, setVisible] = useState(false);
    const [channelName, setChannelName] = useState('');
    const [channelType, setChannelType] = useState('text');

    useEffect(() => {
        requestAnimationFrame(() => setVisible(true));
    }, []);

    const handleClose = () => {
        setVisible(false);
        setTimeout(onClose, 250);
    };

    const handleCreate = () => {
        if (!channelName.trim()) return;
        onSubmit(channelName.trim(), channelType, categoryId);
        handleClose();
    };

    const handleNameChange = (e) => {
        setChannelName(e.target.value.toLowerCase().replace(/\s+/g, '-'));
    };

    return ReactDOM.createPortal(
        <div className={`mobile-create-screen${visible ? ' visible' : ''}`}>
            {/* Header */}
            <div className="mobile-create-header">
                <button className="mobile-create-close-btn" onClick={handleClose}>
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
                        <path d="M18.4 4L12 10.4L5.6 4L4 5.6L10.4 12L4 18.4L5.6 20L12 13.6L18.4 20L20 18.4L13.6 12L20 5.6L18.4 4Z" />
                    </svg>
                </button>
                <span className="mobile-create-title">Create Channel</span>
                <button
                    className={`mobile-create-submit-btn${!channelName.trim() ? ' disabled' : ''}`}
                    onClick={handleCreate}
                    disabled={!channelName.trim()}
                >
                    Create
                </button>
            </div>

            {/* Body */}
            <div className="mobile-create-body">
                {/* Channel Name */}
                <div className="mobile-create-section">
                    <label className="mobile-create-section-label">Channel Name</label>
                    <div className="mobile-create-input-wrapper">
                        <span className="mobile-create-input-prefix">
                            {channelType === 'text' ? '#' : (
                                <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
                                    <path d="M12 3a1 1 0 0 0-1-1h-.06a1 1 0 0 0-.74.32L5.92 7H3a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h2.92l4.28 4.68a1 1 0 0 0 .74.32H11a1 1 0 0 0 1-1z" />
                                </svg>
                            )}
                        </span>
                        <input
                            className="mobile-create-input"
                            type="text"
                            placeholder="new-channel"
                            value={channelName}
                            onChange={handleNameChange}
                            autoFocus
                        />
                    </div>
                </div>

                {/* Channel Type */}
                <div className="mobile-create-section">
                    <label className="mobile-create-section-label">Channel Type</label>
                    <div className="mobile-create-type-list">
                        <div
                            className={`mobile-create-type-option${channelType === 'text' ? ' selected' : ''}`}
                            onClick={() => setChannelType('text')}
                        >
                            <span className="mobile-create-type-icon">#</span>
                            <div className="mobile-create-type-info">
                                <div className="mobile-create-type-name">Text</div>
                                <div className="mobile-create-type-desc">Send messages, images, GIFs, emoji, opinions, and puns</div>
                            </div>
                            <div className={`mobile-create-radio${channelType === 'text' ? ' selected' : ''}`}>
                                {channelType === 'text' && <div className="mobile-create-radio-dot" />}
                            </div>
                        </div>
                        <div
                            className={`mobile-create-type-option${channelType === 'voice' ? ' selected' : ''}`}
                            onClick={() => setChannelType('voice')}
                        >
                            <span className="mobile-create-type-icon">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
                                    <path d="M11.383 3.07904C11.009 2.92504 10.579 3.01004 10.293 3.29604L6.586 7.00304H3C2.45 7.00304 2 7.45304 2 8.00304V16.003C2 16.553 2.45 17.003 3 17.003H6.586L10.293 20.71C10.579 20.996 11.009 21.082 11.383 20.927C11.757 20.772 12 20.407 12 20.003V4.00304C12 3.59904 11.757 3.23404 11.383 3.07904ZM14 5.00304V7.00304C16.757 7.00304 19 9.24604 19 12.003C19 14.76 16.757 17.003 14 17.003V19.003C17.86 19.003 21 15.863 21 12.003C21 8.14304 17.86 5.00304 14 5.00304ZM14 9.00304V15.003C15.654 15.003 17 13.657 17 12.003C17 10.349 15.654 9.00304 14 9.00304Z" />
                                </svg>
                            </span>
                            <div className="mobile-create-type-info">
                                <div className="mobile-create-type-name">Voice</div>
                                <div className="mobile-create-type-desc">Hang out together with voice, video, and screen share</div>
                            </div>
                            <div className={`mobile-create-radio${channelType === 'voice' ? ' selected' : ''}`}>
                                {channelType === 'voice' && <div className="mobile-create-radio-dot" />}
                            </div>
                        </div>
                    </div>
                </div>

                {/* Private Channel Toggle */}
                <div className="mobile-create-section">
                    <div className="mobile-create-toggle-row">
                        <div className="mobile-create-toggle-left">
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style={{ color: 'var(--interactive-normal)' }}>
                                <path d="M17 11V7C17 4.243 14.757 2 12 2C9.243 2 7 4.243 7 7V11C5.897 11 5 11.896 5 13V20C5 21.103 5.897 22 7 22H17C18.103 22 19 21.103 19 20V13C19 11.896 18.103 11 17 11ZM12 18C11.172 18 10.5 17.328 10.5 16.5C10.5 15.672 11.172 15 12 15C12.828 15 13.5 15.672 13.5 16.5C13.5 17.328 12.828 18 12 18ZM15 11H9V7C9 5.346 10.346 4 12 4C13.654 4 15 5.346 15 7V11Z" />
                            </svg>
                            <span className="mobile-create-toggle-label">Private Channel</span>
                        </div>
                        <div className="category-toggle-switch">
                            <div className="category-toggle-knob" />
                        </div>
                    </div>
                </div>
            </div>
        </div>,
        document.body
    );
};

export default MobileCreateChannelScreen;
