import { useDispatch, useSelector } from "react-redux";
import { AppDispatch, RootState } from "../../app/store";
import { useCallback } from "react";
import { setShowCreateStoryModal } from "../../app/reducers/feed";

export default function CreateStoryModal(){
    const {  storyPosting, showCreateStoryModal } = useSelector((state: RootState) => state.feed);
    const dispatch = useDispatch<AppDispatch>();

     const closeCreateStoryModal = useCallback(() => {
        dispatch(setShowCreateStoryModal(false));
        setStoryType(null);
    }, []);
    return(
        <>
            {showCreateStoryModal && (
                <div className="fixed inset-0 z-50 bg-black bg-opacity-80 flex items-center justify-center p-4">
                    <div className="bg-white rounded-xl w-full max-w-md max-h-[500px] overflow-hidden">
                        {/* Header */}
                        <div className="border-b px-4 py-3 flex items-center justify-between">
                            <h3 className="font-semibold text-lg">Create Story</h3>
                            <button 
                                className="text-gray-500 hover:text-gray-700"
                                onClick={closeCreateStoryModal}
                            >
                                <X size={24} />
                            </button>
                        </div>
                        
                        {/* Content */}
                        <div className="p-4">
                            {!storyType ? (
                                // Story type selection
                                <div className="grid grid-cols-2 gap-4">
                                    <div 
                                        className="bg-gradient-to-b from-purple-500 via-pink-500 to-red-500 rounded-lg p-4 flex flex-col items-center justify-center h-56 cursor-pointer hover:opacity-90 transition-opacity"
                                        onClick={() => selectStoryType('text')}
                                    >
                                        <div className="bg-white rounded-full w-16 h-16 flex items-center justify-center mb-4">
                                            <span className="font-bold text-xl">ABC</span>
                                        </div>
                                        <p className="text-white font-medium">Text</p>
                                    </div>
                                    
                                    <div 
                                        className="bg-gradient-to-b from-teal-400 via-cyan-500 to-blue-500 rounded-lg p-4 flex flex-col items-center justify-center h-56 cursor-pointer hover:opacity-90 transition-opacity"
                                        onClick={() => selectStoryType('image')}
                                    >
                                        <div className="bg-white rounded-full w-16 h-16 flex items-center justify-center mb-4">
                                            <Image size={28} />
                                        </div>
                                        <p className="text-white font-medium">Image</p>
                                    </div>
                                </div>
                            ) : storyType === 'text' ? (
                                // Text story creation
                                <div className="space-y-4"> 
                                    <div className={`rounded-lg p-4 h-64 flex items-center justify-center`}>
                                        <textarea
                                            className="bg-transparent text-black text-left w-full h-full resize-none border-none focus:otline-none outline-none focus:border-none placeholder-black/70 text-xl font-medium"
                                            placeholder="Type your story..."
                                            value={storyText}
                                            onChange={(e) => setStoryText(e.target.value)}
                                        ></textarea>
                                    </div>
                                    
                                    <div className="flex justify-end space-x-3">
                                        <button 
                                            className="px-4 py-2 border rounded-lg hover:bg-gray-50"
                                            onClick={() => setStoryType(null)}
                                        >
                                            Back
                                        </button>
                                        <button 
                                            className="px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 disabled:opacity-50"
                                            disabled={!storyText.trim()}
                                            onClick={submitStory}
                                        >
                                            Share to Story
                                        </button>
                                    </div>
                                </div>
                            ) : (
                                // Image story creation
                                <div className="space-y-4">
                                    {storyImage ? (
                                        <div className="relative rounded-lg overflow-hidden h-[300px]">
                                            <img 
                                                src={URL.createObjectURL(storyImage)} 
                                                alt="Story preview" 
                                                className="w-full h-full object-cover"
                                            />
                                            <button 
                                                className="absolute top-2 right-2 bg-black/50 text-white p-1 rounded-full"
                                                onClick={() => setStoryImage(null)}
                                            >
                                                <X size={16} />
                                            </button>
                                        </div>
                                    ) : (
                                        <div className="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center h-[300px] flex flex-col items-center justify-center">
                                            <input
                                                type="file"
                                                id="story-image"
                                                className="hidden"
                                                accept="image/*"
                                                onChange={handleImageSelect}
                                            />
                                            <label 
                                                htmlFor="story-image"
                                                className="cursor-pointer flex flex-col items-center"
                                            >
                                                <div className="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mb-2">
                                                    <Image size={32} />
                                                </div>
                                                <p className="text-gray-500 mb-1">Click to upload an image</p>
                                                <p className="text-xs text-gray-400">JPG, PNG or GIF</p>
                                            </label>
                                        </div>
                                    )}
                                    
                                    <div className="flex justify-end space-x-3">
                                        <button 
                                            className="px-4 py-2 border rounded-lg hover:bg-gray-50"
                                            onClick={() => setStoryType(null)}
                                        >
                                            Back
                                        </button>
                                        <button 
                                            className="px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 disabled:opacity-50"
                                            disabled={!storyImage}
                                            onClick={submitStory}
                                        >
                                            {storyPosting ? (
                                                <div className="flex items-center justify-center">
                                                    <svg className="animate-spin -ml-1 mr-2 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                                                    <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
                                                    <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                                                    </svg>
                                                    Posting...
                                                </div>
                                                ) : 'Share your story'}
                                        </button>
                                    </div>
                                </div>
                            )}
                        </div>
                    </div>
                </div>
            )}
        </>
    )
}