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>
  );
};
