import {
  addCollectionTag,
  handleCollectionTagKeyPress,
  removeCollectionTag,
} from '../lib/collection-tag-input.js';

export default function CollectionsEditModal({
  editingCollection,
  setEditingCollection,
  editTagInput,
  setEditTagInput,
  onClose,
  onUpdate,
}) {
  if (!editingCollection) {
    return null;
  }

  return (
    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
      <div className="card max-w-md w-full mx-4">
        <h2 className="text-2xl font-bold mb-4" style={{ color: 'var(--text-primary)' }}>
          Edit List
        </h2>
        <div className="space-y-4">
          <div>
            <label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
              List Name
            </label>
            <input
              type="text"
              className="input-field w-full"
              value={editingCollection.name}
              onChange={(e) => setEditingCollection({ ...editingCollection, name: e.target.value })}
            />
          </div>
          <div>
            <label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
              Description
            </label>
            <textarea
              className="input-field w-full"
              rows="3"
              value={editingCollection.description}
              onChange={(e) => setEditingCollection({ ...editingCollection, description: e.target.value })}
            />
          </div>
          <div>
            <label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
              Hero Image
            </label>
            <input
              type="url"
              className="input-field w-full"
              value={editingCollection.image || ''}
              onChange={(e) => setEditingCollection({ ...editingCollection, image: e.target.value })}
              placeholder="Enter image URL"
            />
          </div>

          <div>
            <label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
              Tags
            </label>
            <div className="space-y-2">
              <div className="flex gap-2">
                <input
                  type="text"
                  className="input-field flex-1"
                  value={editTagInput}
                  onChange={(e) => setEditTagInput(e.target.value)}
                  onKeyPress={(e) =>
                    handleCollectionTagKeyPress(
                      e,
                      editTagInput,
                      setEditTagInput,
                      editingCollection,
                      setEditingCollection
                    )
                  }
                  placeholder="Add tags (press Enter)"
                />
                <button
                  type="button"
                  onClick={() =>
                    addCollectionTag(editTagInput, setEditTagInput, editingCollection, setEditingCollection)
                  }
                  className="px-3 py-2 rounded-lg text-sm font-medium transition-colors"
                  style={{
                    backgroundColor: 'var(--accent-ember)',
                    color: 'white',
                  }}
                  disabled={!editTagInput.trim()}
                >
                  Add
                </button>
              </div>
              {editingCollection.tags && editingCollection.tags.length > 0 && (
                <div className="flex flex-wrap gap-2">
                  {editingCollection.tags.map((tag, index) => (
                    <span
                      key={index}
                      className="inline-flex items-center gap-1 px-2 py-1 rounded-md text-xs font-medium"
                      style={{
                        backgroundColor: 'var(--bg-tertiary)',
                        color: 'var(--text-primary)',
                        border: '1px solid var(--border)',
                      }}
                    >
                      {tag}
                      <button
                        type="button"
                        onClick={() => removeCollectionTag(tag, editingCollection, setEditingCollection)}
                        className="ml-1 hover:text-red-500 transition-colors"
                      >
                        ×
                      </button>
                    </span>
                  ))}
                </div>
              )}
            </div>
          </div>

          <div
            className="flex items-center justify-between p-4 rounded-lg border"
            style={{ borderColor: 'var(--border)' }}
          >
            <div>
              <label className="text-sm font-medium" style={{ color: 'var(--text-primary)' }}>
                Public List
              </label>
              <p className="text-xs mt-1" style={{ color: 'var(--text-secondary)' }}>
                Make this list discoverable by other users
              </p>
            </div>
            <button
              type="button"
              onClick={() =>
                setEditingCollection({ ...editingCollection, isPublic: !editingCollection.isPublic })
              }
              className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${
                editingCollection.isPublic ? 'bg-green-600' : 'bg-gray-300 dark:bg-gray-600'
              }`}
            >
              <span
                className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
                  editingCollection.isPublic ? 'translate-x-6' : 'translate-x-1'
                }`}
              />
            </button>
          </div>
        </div>
        <div className="flex space-x-3 mt-6">
          <button
            type="button"
            onClick={onClose}
            className="flex-1 py-2 px-4 rounded-xl border transition-colors"
            style={{
              borderColor: 'var(--border)',
              color: 'var(--text-secondary)',
            }}
          >
            Cancel
          </button>
          <button
            type="button"
            onClick={onUpdate}
            disabled={!editingCollection.name.trim()}
            className="flex-1 py-2 px-4 rounded-xl font-medium transition-all duration-200 hover:shadow-md disabled:opacity-50"
            style={{
              backgroundColor: 'var(--accent-ember)',
              color: 'white',
            }}
          >
            Update List
          </button>
        </div>
      </div>
    </div>
  );
}