import React, { useState } from 'react';
import { Button } from '../../ui/button';
import { Input } from '../../ui/input';
import { X, Users, Lock, Globe, Image as ImageIcon } from 'lucide-react';
import { useToast } from '../../../context/ToastContext';

interface CreateGroupModalProps {
  onClose: () => void;
  onCreate: (data: any) => void;
}

export const CreateGroupModal: React.FC<CreateGroupModalProps> = ({
  onClose,
  onCreate,
}) => {
  const { addToast } = useToast();
  const [name, setName] = useState('');
  const [description, setDescription] = useState('');
  const [isPrivate, setIsPrivate] = useState(false);
  const [coverImage, setCoverImage] = useState<string | null>(null);

  const handleSubmit = () => {
    if (!name) {
      addToast('Please enter a group name', 'error');
      return;
    }
    onCreate({
      name,
      description,
      isPrivate,
      coverUrl: coverImage || 'https://picsum.photos/id/10/800/400',
    });
    onClose();
  };

  const handleImageUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
    if (e.target.files && e.target.files[0]) {
      setCoverImage(URL.createObjectURL(e.target.files[0]));
    }
  };

  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">
        <div className="p-4 border-b border-kodo-steel bg-kodo-ink flex justify-between items-center">
          <h3 className="font-bold text-white flex items-center gap-2">
            <Users className="w-5 h-5 text-kodo-cyan" /> Create Community
          </h3>
          <button onClick={onClose}>
            <X className="w-5 h-5 text-gray-400 hover:text-white" />
          </button>
        </div>

        <div className="p-6 space-y-6">
          {/* Cover Upload */}
          <div className="relative w-full h-32 bg-kodo-ink border-2 border-dashed border-kodo-steel rounded-lg overflow-hidden flex flex-col items-center justify-center group cursor-pointer hover:border-kodo-cyan/50 transition-colors">
            {coverImage ? (
              <img src={coverImage} className="w-full h-full object-cover" />
            ) : (
              <div className="text-gray-500 flex flex-col items-center group-hover:text-kodo-cyan">
                <ImageIcon className="w-8 h-8 mb-2" />
                <span className="text-xs font-bold uppercase">
                  Upload Cover Image
                </span>
              </div>
            )}
            <input
              type="file"
              accept="image/*"
              className="absolute inset-0 opacity-0 cursor-pointer"
              onChange={handleImageUpload}
            />
          </div>

          <div className="space-y-4">
            <Input
              label="Group Name"
              placeholder="e.g. Ableton Live Producers"
              value={name}
              onChange={(e) => setName(e.target.value)}
              autoFocus
            />

            <div>
              <label className="block text-sm font-medium text-gray-400 mb-2">
                Description
              </label>
              <textarea
                className="w-full bg-kodo-void border border-kodo-steel rounded-lg p-3 text-white focus:border-kodo-cyan outline-none text-sm resize-none h-24"
                placeholder="What's this community about?"
                value={description}
                onChange={(e) => setDescription(e.target.value)}
              />
            </div>

            <div
              className="bg-kodo-ink p-3 rounded-lg border border-kodo-steel flex items-center justify-between cursor-pointer hover:border-gray-500"
              onClick={() => setIsPrivate(!isPrivate)}
            >
              <div className="flex items-center gap-3">
                {isPrivate ? (
                  <Lock className="w-5 h-5 text-kodo-gold" />
                ) : (
                  <Globe className="w-5 h-5 text-kodo-cyan" />
                )}
                <div>
                  <div className="text-sm font-bold text-white">
                    {isPrivate ? 'Private Group' : 'Public Group'}
                  </div>
                  <div className="text-xs text-gray-400">
                    {isPrivate ? 'Invite only' : 'Anyone can find and join'}
                  </div>
                </div>
              </div>
              <div
                className={`w-10 h-5 rounded-full relative transition-colors ${isPrivate ? 'bg-kodo-cyan' : 'bg-gray-600'}`}
              >
                <div
                  className={`absolute top-1 w-3 h-3 bg-white rounded-full transition-all ${isPrivate ? 'left-6' : 'left-1'}`}
                ></div>
              </div>
            </div>
          </div>
        </div>

        <div className="p-4 border-t border-kodo-steel bg-kodo-ink flex justify-end gap-3">
          <Button variant="ghost" onClick={onClose}>
            Cancel
          </Button>
          <Button variant="primary" onClick={handleSubmit}>
            Create Group
          </Button>
        </div>
      </div>
    </div>
  );
};
