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

const MobileCreateCategoryScreen = ({ onClose, onSubmit }) => {
    const [visible, setVisible] = useState(false);
    const [categoryName, setCategoryName] = useState('');

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

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

    const handleCreate = () => {
        if (!categoryName.trim()) return;
        onSubmit(categoryName.trim());
        handleClose();
    };

    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 Category</span>
                <button
                    className={`mobile-create-submit-btn${!categoryName.trim() ? ' disabled' : ''}`}
                    onClick={handleCreate}
                    disabled={!categoryName.trim()}
                >
                    Create
                </button>
            </div>

            {/* Body */}
            <div className="mobile-create-body">
                {/* Category Name */}
                <div className="mobile-create-section">
                    <label className="mobile-create-section-label">Category Name</label>
                    <div className="mobile-create-input-wrapper">
                        <input
                            className="mobile-create-input"
                            type="text"
                            placeholder="New Category"
                            value={categoryName}
                            onChange={(e) => setCategoryName(e.target.value)}
                            autoFocus
                        />
                    </div>
                </div>

                {/* Private Category Toggle */}
                <div className="mobile-create-section">
                    <p className="mobile-create-private-desc">
                        By making a category private, only selected members and roles will be able to view this category.
                    </p>
                    <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 Category</span>
                        </div>
                        <div className="category-toggle-switch">
                            <div className="category-toggle-knob" />
                        </div>
                    </div>
                </div>
            </div>
        </div>,
        document.body
    );
};

export default MobileCreateCategoryScreen;
