import React, { useState } from 'react';
import { Button } from '../ui/button';
import { X, Image as ImageIcon, Video, Mic2, BarChart, Hash } from 'lucide-react';
import { useToast } from '../../context/ToastContext';

interface CreatePostModalProps {
  onClose: () => void;
  onCreate: (postData: { content: string; visibility: string; type: string }) => void;
}

export const CreatePostModal: React.FC<CreatePostModalProps> = ({ onClose, onCreate }) => {
  const { addToast } = useToast();
  const [content, setContent] = useState('');
  const [visibility, setVisibility] = useState('public');
  const [postType, setPostType] = useState('text'); // text, image, audio, etc.

  const handleSubmit = () => {
      if (!content) return;
      onCreate({ content, visibility, type: postType });
      onClose();
  };

  const insertHashtag = (tag: string) => {
      setContent(prev => `${prev  } #${tag} `);
  };

  return (
    <div className="fixed inset-0 z-[100] flex items-center justify-center p-4">
      <div className="absolute inset-0 bg-kodo-void/90 backdrop-blur-sm" onClick={onClose}></div>
      <div className="relative w-full max-w-lg bg-kodo-graphite border border-kodo-steel rounded-xl shadow-2xl animate-scaleIn overflow-hidden flex flex-col">
        
        <div className="p-4 border-b border-kodo-steel bg-kodo-ink flex justify-between items-center">
          <h3 className="font-bold text-white">Create Post</h3>
          <button onClick={onClose}><X className="w-5 h-5 text-gray-400 hover:text-white" /></button>
        </div>

        <div className="p-4 flex-1">
            <div className="flex gap-3">
                <div className="w-10 h-10 rounded-full bg-gray-700 overflow-hidden flex-shrink-0">
                    <img src="https://picsum.photos/id/237/100/100" className="w-full h-full object-cover" />
                </div>
                <div className="flex-1">
                    <div className="mb-2">
                        <select 
                            className="bg-kodo-ink border border-kodo-steel rounded px-2 py-1 text-xs text-kodo-cyan focus:outline-none cursor-pointer"
                            value={visibility}
                            onChange={(e) => setVisibility(e.target.value)}
                        >
                            <option value="public">Public</option>
                            <option value="followers">Followers Only</option>
                            <option value="private">Private Draft</option>
                        </select>
                    </div>
                    <textarea 
                        className="w-full bg-transparent border-none text-white placeholder-gray-500 focus:ring-0 resize-none h-32 text-base"
                        placeholder="What's happening in your studio?"
                        value={content}
                        onChange={(e) => setContent(e.target.value)}
                        autoFocus
                    />
                </div>
            </div>

            {/* Suggestions */}
            <div className="mt-4 flex flex-wrap gap-2 text-xs">
                <span className="text-gray-500 flex items-center gap-1"><Hash className="w-3 h-3" /> Trending:</span>
                {['Synthwave', 'NewGear', 'StudioLife', 'WIP'].map(tag => (
                    <button 
                        key={tag} 
                        onClick={() => insertHashtag(tag)}
                        className="text-kodo-cyan hover:underline"
                    >
                        #{tag}
                    </button>
                ))}
            </div>
        </div>

        <div className="p-4 border-t border-kodo-steel bg-kodo-ink flex justify-between items-center">
            <div className="flex gap-2">
                <button 
                    className={`p-2 rounded hover:bg-white/10 text-gray-400 hover:text-kodo-cyan ${postType === 'image' ? 'text-kodo-cyan' : ''}`}
                    onClick={() => { setPostType('image'); addToast("Image upload simulated"); }}
                    title="Photo"
                >
                    <ImageIcon className="w-5 h-5" />
                </button>
                <button 
                    className="p-2 rounded hover:bg-white/10 text-gray-400 hover:text-kodo-magenta"
                    onClick={() => { setPostType('video'); addToast("Video upload simulated"); }}
                    title="Video"
                >
                    <Video className="w-5 h-5" />
                </button>
                <button 
                    className="p-2 rounded hover:bg-white/10 text-gray-400 hover:text-kodo-lime"
                    onClick={() => { setPostType('audio'); addToast("Audio upload simulated"); }}
                    title="Audio"
                >
                    <Mic2 className="w-5 h-5" />
                </button>
                <button 
                    className="p-2 rounded hover:bg-white/10 text-gray-400 hover:text-kodo-gold"
                    onClick={() => { setPostType('poll'); addToast("Poll creator simulated"); }}
                    title="Poll"
                >
                    <BarChart className="w-5 h-5" />
                </button>
            </div>
            <Button variant="primary" onClick={handleSubmit} disabled={!content}>
                Post
            </Button>
        </div>
      </div>
    </div>
  );
};