import React, { useState } from 'react';
import { Button } from '../../ui/button';
import { X, Hash, Plus } from 'lucide-react';

interface TagSuggestionsModalProps {
  onClose: () => void;
  selectedTags: string[];
  onUpdateTags: (tags: string[]) => void;
}

const SUGGESTIONS = [
  'Cyberpunk',
  'Synthwave',
  'Techno',
  'House',
  'Lo-Fi',
  'Cinematic',
  'Ambient',
  'Bass',
  'Trap',
  'Dubstep',
  'Future Bass',
  'Industrial',
  'Glitch',
  'Experimental',
  'Pop',
];

export const TagSuggestionsModal: React.FC<TagSuggestionsModalProps> = ({
  onClose,
  selectedTags,
  onUpdateTags,
}) => {
  const [input, setInput] = useState('');
  const [localTags, setLocalTags] = useState<string[]>(selectedTags);

  const addTag = (tag: string) => {
    if (tag && !localTags.includes(tag) && localTags.length < 10) {
      setLocalTags([...localTags, tag]);
    }
    setInput('');
  };

  const removeTag = (tag: string) => {
    setLocalTags(localTags.filter((t) => t !== tag));
  };

  const handleKeyDown = (e: React.KeyboardEvent) => {
    if (e.key === 'Enter') {
      e.preventDefault();
      addTag(input.trim());
    }
  };

  return (
    <div className="fixed inset-0 z-50 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">
            <Hash className="w-4 h-4 text-kodo-magenta" /> Manage Tags
          </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">
          <div>
            <div className="flex gap-2 mb-3">
              <input
                className="flex-1 bg-kodo-void border border-kodo-steel rounded-lg px-4 py-2 text-white focus:border-kodo-magenta outline-none"
                placeholder="Add a tag..."
                value={input}
                onChange={(e) => setInput(e.target.value)}
                onKeyDown={handleKeyDown}
              />
              <Button
                variant="secondary"
                onClick={() => addTag(input.trim())}
                disabled={!input}
              >
                Add
              </Button>
            </div>

            <div className="flex flex-wrap gap-2 min-h-[40px]">
              {localTags.map((tag) => (
                <span
                  key={tag}
                  className="px-3 py-1 bg-kodo-magenta/20 text-kodo-magenta border border-kodo-magenta/50 rounded-full text-sm font-bold flex items-center gap-2"
                >
                  #{tag}
                  <X
                    className="w-3 h-3 cursor-pointer hover:text-white"
                    onClick={() => removeTag(tag)}
                  />
                </span>
              ))}
              {localTags.length === 0 && (
                <span className="text-gray-500 text-sm italic">
                  No tags selected
                </span>
              )}
            </div>
            <p className="text-right text-xs text-gray-500 mt-1">
              {localTags.length}/10 tags
            </p>
          </div>

          <div>
            <h4 className="text-xs font-bold text-gray-400 uppercase tracking-widest mb-3">
              Popular Suggestions
            </h4>
            <div className="flex flex-wrap gap-2">
              {SUGGESTIONS.filter((s) => !localTags.includes(s)).map((tag) => (
                <button
                  key={tag}
                  onClick={() => addTag(tag)}
                  className="px-3 py-1 bg-kodo-slate border border-kodo-steel rounded-full text-sm text-gray-300 hover:text-white hover:border-white transition-colors flex items-center gap-1"
                >
                  <Plus className="w-3 h-3" /> {tag}
                </button>
              ))}
            </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={() => {
              onUpdateTags(localTags);
              onClose();
            }}
          >
            Save Tags
          </Button>
        </div>
      </div>
    </div>
  );
};
